angular - 无法获得使用 2 级延迟加载模块(嵌套)的路由

Question

我一直在尝试创建一个基于示例 cli 的 angular4 应用程序，其中包含一个主模块和 3 个产品模块(产品本身是一个延迟加载每个产品屏幕的路由参数)。

这是我的样本 - https://github.com/shankarvn/angular4lazyloading

重现步骤

• git 克隆 https://github.com/shankarvn/angular4lazyloading.git

• CD应用

• npm 安装

• ng serve -p 4003

在浏览器中 localhost:4003 => 应该加载 3 张显示 product1、product2 和 product3 的卡片。此时，点击product1，你会看到route的变化和product1加载的ui。现在单击 Dashboard，您将在控制台中看到一个错误

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]

不确定我做错了什么 - 当 product1 模块延迟加载时，只是加载了仪表板路由。加载 product1 模块时，不应注册路由。感谢您的帮助。

谢谢。

Answer 1

你不应该使用 pathMatch: 'full'

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

我还稍微更改了 loadChildren 路径。 (添加了 app/product1)

为什么要为每个延迟加载的模块导入 HttpModule？

这在惰性加载模块中也是多余的

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

P.S. 我会创建 Routing modules对于每个模块

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

等等