Children routing not working and application redirects to the 404 page

Question

I have created an angular application version 7 and project structure is like this. app module have app-routing.module.ts and dashboard module have dashboard-routing module.ts. In dashboard module, the layout component route has child components namely home and admin.

Here is my code:

AppModule

import { AppRoutingModule } from './app-routing.module';
import { DashboardModule } from './dashboard/dashboard.module';

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


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DashboardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

App-routing module:

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

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

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

dashboard module file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LayoutComponent } from './layout/layout.component';
import { HomeComponent } from './home/home.component';
import { AdminComponent } from './admin/admin.component';
import { DashboardRoutingModule } from './dashboard-routing.module';

@NgModule({
  declarations: [LayoutComponent, HomeComponent, AdminComponent],
  imports: [
    CommonModule,
    DashboardRoutingModule
  ]
})
export class DashboardModule { }

dashboard-routing module.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { LayoutComponent } from './layout/layout.component';
import { HomeComponent } from './home/home.component';
import { AdminComponent } from './admin/admin.component';


const dashboardRoutes: Routes = [
  {
    path: 'dashboard',
    component: LayoutComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: HomeComponent },
      { path: 'admin', component: AdminComponent}
    ]
  }
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild(dashboardRoutes)
  ],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

Problem is I want to route to dashboard layout on localhost:4200 but it is always going to pageNotFound component route on every route. Can anyone point out what is the issue.

Code on StackBlitz:

https://stackblitz.com/github/Ahsan9981/authGuardApp

Desired output

You are adding approuting before the dashboard module, so the 404 route will hit first, and therefore navigate til not found page. You need to change your import sequence.. it matters what order you import in. — ChrisEenberg, Dec 10 '18 at 09:39
@ChrisEenberg , It worked. Can you explain it more so that I can understand it fully ? — Muhammad Ahsan, Dec 10 '18 at 09:42
@ChrisEenberg can you please add it as an answer to this question? — Muhammad Ahsan, Dec 10 '18 at 09:46

score 7 · Accepted Answer · answered Dec 10 '18 at 10:16

The router will match your routes in the sequence you import them, therefore, if you add a wildcard /** to match all routes in the beginning of your appModule, it will match to this route before checking if any of your other routes match it.

To expand on the example - The router will run through all defined routes until it finds a match, if you begin with a catch all, it will stop there and go no further. Therefore it will be a problem to define a catch all in the beginning of your module (the appRoutes).

Your dashboard module imports your dashboard routes, therefore importing dashboard module in app module will determin when your dashboard routes are imported.

You need to import your routes in the sequence you think it will match, and leave the wildcards to be added lastly. This should always be a fallback with wildcards.

There is an excillent section on this in the documentation for routing.

If there is still something unclear, feel free to comment and i will update my answer accordingly.

Kind regards Chris

Children routing not working and application redirects to the 404 page

1 Answers1

Linked