After implementing the code in app.component.html in Angular 7 like this:
<div id="wrapper">
<header id="header-container" class="fullwidth">
<div id="header">
<div class="container">
<div class="left-side">
<div id="logo">
<a href="index.html"><img src="images/logo.png" alt=""></a>
</div>
<nav id="navigation">
<ul id="responsive">
<li><a [routerLink]="/Home" class="current">Home</a></li>
<li><a [routerLink]="/Projects">Projects</a>
<ul class="dropdown-nav">
<li><a href="#">Post Project</a></li>
</ul>
</nav>
</div>
<div class="right-side">
<div class="header-widget hide-on-mobile">
<div class="header-notifications">
<div class="header-notifications-trigger">
<a href="#"><i class="icon-feather-bell"></i><span>4</span></a>
</div>
<div class="header-notifications-dropdown">
<div class="header-notifications-headline">
<h4>Notifications</h4>
<button class="mark-as-read ripple-effect-dark" title="Mark all as read" data-tippy-placement="left">
<i class="icon-feather-check-square"></i>
</button>
</div>
<div class="header-notifications-content">
<div class="header-notifications-scroll" data-simplebar>
<ul>
<li class="notifications-not-read">
<a href="dashboard-manage-candidates.html">
<span class="notification-icon"><i class="icon-material-outline-group"></i></span>
<span class="notification-text">
<strong>Michael Shannah</strong> applied for a job <span class="color">Full Stack Software Engineer</span>
</span>
</a>
</li>
<li>
<a href="dashboard-manage-bidders.html">
<span class="notification-icon"><i class=" icon-material-outline-gavel"></i></span>
<span class="notification-text">
<strong>Gilbert Allanis</strong> placed a bid on your <span class="color">iOS App Development</span> project
</span>
</a>
</li>
<li>
<a href="dashboard-manage-jobs.html">
<span class="notification-icon"><i class="icon-material-outline-autorenew"></i></span>
<span class="notification-text">
Your job listing <span class="color">Full Stack PHP Developer</span> is expiring.
</span>
</a>
</li>
<li>
<a href="dashboard-manage-candidates.html">
<span class="notification-icon"><i class="icon-material-outline-group"></i></span>
<span class="notification-text">
<strong>Sindy Forrest</strong> applied for a job <span class="color">Full Stack Software Engineer</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="header-notifications">
<div class="header-notifications-trigger">
<a href="#"><i class="icon-feather-mail"></i><span>3</span></a>
</div>
<div class="header-notifications-dropdown">
<div class="header-notifications-headline">
<h4>Messages</h4>
<button class="mark-as-read ripple-effect-dark" title="Mark all as read" data-tippy-placement="left">
<i class="icon-feather-check-square"></i>
</button>
</div>
<div class="header-notifications-content">
<div class="header-notifications-scroll" data-simplebar>
<ul>
<li class="notifications-not-read">
<a href="dashboard-messages.html">
<span class="notification-avatar status-online"><img src="assets/images/user-avatar-small-03.jpg" alt=""></span>
<div class="notification-text">
<strong>David Peterson</strong>
<p class="notification-msg-text">Thanks for reaching out. I'm quite busy right now on many...</p>
<span class="color">4 hours ago</span>
</div>
</a>
</li>
<li class="notifications-not-read">
<a href="dashboard-messages.html">
<span class="notification-avatar status-offline"><img src="assets/images/user-avatar-small-02.jpg" alt=""></span>
<div class="notification-text">
<strong>Sindy Forest</strong>
<p class="notification-msg-text">Hi Tom! Hate to break it to you, but I'm actually on vacation until...</p>
<span class="color">Yesterday</span>
</div>
</a>
</li>
<li class="notifications-not-read">
<a href="dashboard-messages.html">
<span class="notification-avatar status-online"><img src="assets/images/user-avatar-placeholder.png" alt=""></span>
<div class="notification-text">
<strong>Marcin Kowalski</strong>
<p class="notification-msg-text">I received payment. Thanks for cooperation!</p>
<span class="color">Yesterday</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<a href="dashboard-messages.html" class="header-notifications-button ripple-effect button-sliding-icon">View All Messages<i class="icon-material-outline-arrow-right-alt"></i></a>
</div>
</div>
</div>
<div class="header-widget">
<div class="header-notifications user-menu">
<div class="header-notifications-trigger">
<a href="#"><div class="user-avatar status-online"><img src="assets/images/user-avatar-small-01.jpg" alt=""></div></a>
</div>
<div class="header-notifications-dropdown">
<div class="user-status">
<div class="user-details">
<div class="user-avatar status-online"><img src="assets/images/user-avatar-small-01.jpg" alt=""></div>
<div class="user-name">
Tom Smith <span>Freelancer</span>
</div>
</div>
<div class="status-switch" id="snackbar-user-status">
<label class="user-online current-status">Online</label>
<label class="user-invisible">Invisible</label>
<span class="status-indicator" aria-hidden="true"></span>
</div>
</div>
<ul class="user-menu-small-nav">
<li><a href="dashboard.html"><i class="icon-material-outline-dashboard"></i> Dashboard</a></li>
<li><a href="dashboard-settings.html"><i class="icon-material-outline-settings"></i> Settings</a></li>
<li><a href="index-logged-out.html"><i class="icon-material-outline-power-settings-new"></i> Logout</a></li>
</ul>
</div>
</div>
</div>
<span class="mmenu-trigger">
<button class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</span>
</div>
</div>
</div>
</header>
<!-- Header Container / End -->
<router-outlet>
</router-outlet>
<app-messages></app-messages>
In the app.module.ts, we declare:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { ProjectsComponent } from './submenu/projects.component';
import { FreelancerComponent } from './submenu/freelancer.component';
import { LoginComponent } from './user/signin/login.component';
import { LogoutComponent } from './user/signout/logout.component';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{ path: 'projects', component: ProjectsComponent },
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
@NgModule({
declarations: [
AppComponent,
LoginComponent,
LogoutComponent,
HomeComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
exports: [ RouterModule ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
And in the app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProjectsComponent } from './submenu/Projects.component';
import { HomeComponent } from './home/Home.component';
const routes: Routes = [
{ path: '', redirectTo:'/home', pathMatch: 'full'},
{ path: 'home', component: HomeComponent },
{ path: 'projects', component: ProjectsComponent }
];
export const RoutesProvider = RouterModule.forRoot(routes);
export class AppRoutingModule { }
Despite following these steps outlined above, a blank screen appears instead of the Navigation menus.
To illustrate the issue further, here is an image showing the blank screen:
Snapshot demonstrating the empty space where navigation menus should be displayed
This question arises after examining a similar query on Stack Overflow titled "Why my file app.component.html is not working?"
You are dealing with a critical problem in Angular 7 as an Angular Developer, seeking assistance with resolving it.