Unable to get route working with 2 levels of lazy loaded modules (nested)

Question

I have been trying to create a sample cli based angular4 application with a main module and 3 product modules (product itself being a route param that loads each of the product screen's lazily).

Here is my sample - https://github.com/shankarvn/angular4lazyloading

Steps to reproduce

• git clone https://github.com/shankarvn/angular4lazyloading.git

• cd application

• npm install

• ng serve -p 4003

In the browser localhost:4003 => Should load 3 cards showing product1, product2 and product3. At this point, click on product1 and you will see the route change and the ui for product1 loads. Now click on Dashboard and you will see an error in the console

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'product1/dashboard'
Error: Cannot match any routes. URL Segment: 'product1/dashboard'
    at ApplyRedirects.noMatchError (router.es5.js:1404) [angular]
    at CatchSubscriber.selector (router.es5.js:1379) [angular]
    at CatchSubscriber.error (catch.js:104) [angular]

Unsure what I am doing wrong - Just that dashboard routes are loaded when the product1 module is lazily loaded. Shouldn't the routes get registered when the product1 module is loaded. Any help is appreciated.

Thanks.

Answer 1

Youd shouldn't use pathMatch: 'full'

export const Product1Routes: Routes = [
  {
    path: '',
    component: Product1Component,
    children:[
      {
        path: 'dashboard',
        loadChildren: 'app/product1/dashboard/dashboard.module#DashboardModule'
        // or './dashboard/...
      },
      {
        path: '',
        component: Product1ViewComponent
      }
    ]
  }
];

I also changed loadChildren path a bit. (added app/product1)

Why are you importing HttpModule for each of lazy loaded modules?

This is also redundant in lazy loaded modules

providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],

P.S. I would create Routing modules for each of modules

app-routing.module.ts
product1-routing.module.ts
dashboard-routing.module.ts

and so on

Answer 2

here is an working example of lazy loading with nested routes

https://github.com/PrashantMaheshwari-SoftwareEngineer/nested-route-lazy-loading

export const mainRoute: Route[] = [
  { path: "login", component: LoginComponent },
  { path: "home", loadChildren: "./layout/layout.module#LayoutModule" },
  { path: "", redirectTo: "/login", pathMatch: "full" }
];

export const layoutRoute: Route[] = [
  {
    path: "",
    component: LayoutComponent,
    children: [
      {
        path: "dashboard",
        component: DashboardComponent
      },
      {
        path: "employee",
        component: EmployeeComponent
      },
      {
        path: "customer",
        component: CustomerComponent
      },
      {
        path: "",
        redirectTo: "dashboard",
        pathMatch: "full"
      }
    ]
  }
];