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

Question

我有用户的Angular5应用程序。我使用延迟加载，以便用户页面的网址类似于http://example.com/user/:name。但我想将网址更改为http://example.com/:name。是否有任何解决方案来实现它保持延迟加载？

Answer 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的路由器链路之间进行distingush，因此无法实现。

Answer 2

您可以尝试一种解决方法，一个包装模块，然后懒洋洋地加载您的路线。像这样的东西：

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

Answer 3

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

我所做的是确保我在顶部包含硬路径的模块，并将catch-all路径模块放在最底层。这样，找到的那些将被加载，其他一切将加载catch-all路由。

例如，这是我的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是最后列出的，因为它是具有全能路线的那个。

我想你可以采用与延迟加载相同的方法。试一试。