Unable to get route working with 2 levels of lazy

2019-04-08 07:52发布

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

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.

3条回答
趁早两清
2楼-- · 2019-04-08 08:26

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"
      }
    ]
  }
];

查看更多
老娘就宠你
3楼-- · 2019-04-08 08:30

Probably related to this question (Fixed on Angular 5.2.1): Angular router '**' wildcard as a catch-all with child routes? Using latest 2.4.0 and Router 3.4.1

It was a bug with the router.

查看更多
相关推荐>>
4楼-- · 2019-04-08 08:33

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)

enter image description here

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

查看更多
登录 后发表回答