6

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

这是我的示例 - https://github.com/shankarvn/angular4lazyloading

重现步骤

在浏览器中 localhost:4003 => 应该加载 3 张卡片，显示 product1、product2 和 product3。此时，单击product1，您将看到路线更改和product1 的ui 加载。现在单击仪表板，您将在控制台中看到一个错误

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 模块时不应该注册路由。任何帮助表示赞赏。

谢谢。

4

3 回答 3

12

你不应该使用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 }],

PS我会为每个模块创建路由模块

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

等等

于 2017-03-31T06:44:02.270 回答
1

这是一个使用嵌套路由进行延迟加载的工作示例

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"
      }
    ]
  }
];
于 2019-01-30T01:44:47.457 回答
0

可能与这个问题有关（固定在 Angular 5.2.1 上）：Angular router '**' wildcard as a catch-all with child routes？使用最新的 2.4.0 和路由器 3.4.1

这是路由器的一个错误。

于 2018-01-19T19:34:11.457 回答