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

发布时间：2020-12-17 07:12:34 所属栏目：安全来源：网络整理

导读：我一直在尝试使用主模块和3个产品模块创建一个基于cli的示例angular4应用程序(产品本身是一个路径参数,可以懒洋洋地加载每个产品屏幕). 这是我的样本 – https://github.com/shankarvn/angular4lazyloading 重现步骤 git clone https://github.com/shankarvn

我一直在尝试使用主模块和3个产品模块创建一个基于cli的示例angular4应用程序(产品本身是一个路径参数,可以懒洋洋地加载每个产品屏幕).

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

重现步骤

> git clone https://github.com/shankarvn/angular4lazyloading.git
> cd应用程序
> npm安装
> ng serve -p 4003

在浏览器中localhost：4003 =>应该加载3张显示product1,product2和product3的卡片.此时,单击product1,您将看到路径更改和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模块时,不应该注册路由.任何帮助表示赞赏.

谢谢.

解决方法

你不应该使用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)

enter image description here

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

这在延迟加载的模块中也是多余的

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

附：我会为每个模块创建Routing modules

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

等等

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!