Angular 6 routing redirect not redirecting properly

Question

When I go to localhost:4200, I'm expecting to be directed to AboutComponent (on the /home path), and am also expecting /home to be appended to the URL, but instead I'm getting redirected to the PageNotFoundComponent , and /home is not being appended to the URL. Any ideas what I'm doing wrong? Thank you!

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { SignupComponent } from '../signup/signup.component';

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

];

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { AdminModule } from './admin/admin.module';
import { AppRoutingModule } from './app-routing.module';
import { AboutModule } from './about/about.module';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AboutModule,
    AppRoutingModule
  ],
    declarations: [
    AppComponent,
    PageNotFoundComponent
  ],

  providers: [CookieService],
  bootstrap: [AppComponent]
})
export class AppModule { 
  constructor(router: Router) {

  }
}

about-routing.module.ts

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

const aboutRoutes: Routes = [
  {path: 'home', component: AboutComponent}
  {path: '**', component: PageNotFoundComponent}
];

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

about.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AboutRoutingModule } from './about-routing.module';
import { AboutComponent } from './about.component';

@NgModule({
  declarations: [AboutComponent],
  imports: [
    CommonModule,
    AboutRoutingModule
  ]
})
export class AboutModule { }

Answer 1

App-routing module is the parent whereas about-routing module is child, So when you will get triggered with '/home' you need to tell the parent to load the child routes that will be done like

const routes: Routes = [
 {path: 'signup', component: SignupComponent },
 {path: '' , redirectTo: '/home', pathMatch: 'full'},
 {
  path: 'home',
  loadChildren: './About/about.module.ts#AboutModule'
 },
 {path: '**', component: PageNotFoundComponent}

];

when we will provide 'loadChildren' in routes, then the parent will load the child module(About module), and routes forchild is called, then will work.

why it is failing because there no route is mentioned for '/home' in parent so it choose the

{path: '**', component: PageNotFoundComponent}

so pageNotFoundComponent is loaded

Answer 2

the problme is the

order

of your routing defintion array .. try this:

const routes: Routes = [
 {path: '' , redirectTo: '/home', pathMatch: 'full'}, // as first
 {path: 'signup', component: SignupComponent },
 {path: '**', component: PageNotFoundComponent} // always as last

];