Set banner and featured view on home page

Edit the file src/app/app.component.ts

import Router and inject router in constructor as public like this constructor(public router: Router) {}

Like below:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  constructor(public router:Router){}
}
                                    

Edit the file src/app/app.component.html

Like below:

<app-header></app-header>
<app-banner *ngIf="router.url == '/'"></app-banner>
<app-course-featured *ngIf="router.url == '/'"></app-course-featured>
<router-outlet></router-outlet>
<app-footer></app-footer>
                                    

Edit the file src/app/app-routing.module.ts

route for the home page {path: '', redirectTo: '', pathMatch: 'full'}

Import component PageNotFoundComponent for set route of 404 error page (page not found), if page url not match.

route for 404 error page {path: '**', component: PageNotFoundComponent}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {PageNotFoundComponent} from './page-not-found/page-not-found.component';

const routes: Routes = [
{path:'',redirectTo:'',pathMatch:'full'},
{path:'**',component:PageNotFoundComponent}

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
}
                                    

Edit the file src/app/courses/courses-routing.module.ts

Import component CourseListComponent and CourseDetailComponent and set route for course listing and course detail page.

set id as parameter for getting single record.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {CourseListComponent} from './course-list/course-list.component';
import {CourseDetailComponent} from './course-detail/course-detail.component';


const routes: Routes = [
{path:'course',component:CourseListComponent},
{path:'course/:id',component:CourseDetailComponent}
  
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CoursesRoutingModule { }
                                    

Edit the file src/app/staticpages/ststicpages-routing.module.ts

Import component PageComponent and ContactUsComponent and set route for contact us page and other static pages Like : about us , service etc.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {PageComponent} from './page/page.component';
import {ContactUsComponent} from './contact-us/contact-us.component';

const routes: Routes = [
  {path:'page/:slug', component:PageComponent},
  {path:'contact',component:ContactUsComponent}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class StaticpagesRoutingModule { }

                                    

All modules ,which are used in project, should be imported in app.module.ts file. like : CoursesModule,StaticpagesModule

.....                                 
import{CoursesModule} from './courses/courses.module';
import{StaticpagesModule} from './staticpages/staticpages.module';
.....
                                    

All modules should be placed in imports array before AppRoutingModule

.....                                 
 imports: [
    BrowserModule,
    CoursesModule,
    StaticpagesModule,
    AdminModule,
    AuthModule,
    AppRoutingModule
  ],
.....
                                    

set the routerLink and routerLinkActive in header component in meniu link

src/app/header/header.component.html

 
<nav class="navbar navbar-expand-md navbar-dark bg-blue">
  <div class="container">
    <a class="navbar-brand" href="index.html">
      <img src="assets/images/logo.png" alt="Angular Project" />
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a routerLink="/" routerLinkActive="active" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a routerLink="/course" routerLinkActive="active" class="nav-link">Courses</a>
        </li>
        <li class="nav-item">
          <a routerLink="/page/About" routerLinkActive="active" class="nav-link">About Us</a>
        </li>
        <li class="nav-item">
          <a routerLink="/contact" routerLinkActive="active" class="nav-link">Contact Us</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li>
    </ul>

    </div>
  </div>
</nav>