Angular5保持延迟加载但不在url中添加中间级别答案

【问题标题】：Angular5 keep lazy-loading but not add intermediate level in urlAngular5保持延迟加载但不在url中添加中间级别
【发布时间】：2018-02-19 13:20:11
【问题描述】：

我有用户的 Angular5 应用程序。我使用延迟加载，以便用户页面的 url 类似于http://example.com/user/:name。但我想将网址更改为http://example.com/:name。有没有办法通过保持延迟加载来实现它？

【问题讨论】：

标签： angular routing lazy-loading

【解决方案1】：

遗憾的是这是不可能的。

想象以下场景。您为 app.module 定义路由，如下所示：

const routes: Routes[] = [{
      path: '',
      component: HomeComponent
   }, {
      path: ':someIdentifier1',
      loadChildren: 'app/somesubpath1/somemodule1#SomeModule1
   }, {
      path: ':someIdentifier2',
      loadChildren: 'app/somesubpath2/somemodule2#SomeModule2'
   }
]

路由器无法区分指向 /somesubpath1/abcd 的路由器链接和指向 /somesubpath2/abcd 的路由器链接，因此这是不可能的。

【讨论】：

【解决方案2】：

您可以尝试一种解决方法，一个包装器模块，然后延迟加载您的路线。像这样的：

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: '**',
        component: WrapperComponent,
        children: [{
            path: ':user',
            loadChildren: 'user-module#UserModule',
        }]
      },
    ])
  ],
  exports: [RouterModule]
})
export class WrapperRoutingModule { }

【讨论】：

【解决方案3】：

在我的应用程序中，我完全按照您的要求进行操作，但是我没有使用延迟加载。它对我来说似乎工作得很好，我不明白为什么延迟加载会有所作为，因为路由器路径匹配应该是相同的。如果我错了，请随时纠正我！

我要做的是确保在顶部包含带有硬路径的模块，并将包罗万象的路由模块放在最底部。这样，找到的那些将被加载，而其他一切都将加载包罗万象的路线。

例如，这是我的AppModule：

@NgModule({
    imports: [
        // ...

        HomeModule,
        // other page modules here...

        // UserModule should always go last since it has a catchall URL path in its routes
        // to find user by username, for example /@Lansana.
        UserModule
    ],
    providers: [...],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

如您所见，UserModule 列在最后，因为它是包罗万象的路线。

我想您可以对延迟加载采取相同的方法。试一试。

【讨论】：