从延迟加载到“正常"加载的角度切换 [英] Angular switch from lazyLoading to 'normal' loading

问题描述

我正在开发实现了延迟加载的Angular应用程序.我尝试进行延迟加载实验，但决定不希望在我的应用程序中实现它.这是我的app.module.ts:

I am working on an Angular application that has lazy loading implemented. I tried experimenting with lazy loading but decided that I do not yet want to implement it in my application. This is my app.module.ts:

app.module.ts :

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', redirectTo: 'store', pathMatch: 'full'},
      { path: 'hq', loadChildren: 'app/hq/hq.module#HqModule' },
      { path: 'store', loadChildren: 'app/store/store.module#StoreModule', pathMatch: 'prefix'},
    ]),
  ],
  bootstrap: [AppComponent],
  exports: [RouterModule],
})
export class AppModule { }

如何将我的路线(例如，hq)切换回正常加载状态?我希望可以进行以下操作:

How can I switch my route to for example hq back to normal loading? I expected that something as follows would work:

  { path: 'hq', redirectTo: HqModule }

但是这返回我的模块是错误的参数类型.在Angular中甚至有可能吗?

That however returns that my module is a wrong type of argument. Is this even possible in Angular?

hq.module.ts

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
        { path: '',
          component: HqTemplateComponent,
          canActivate: [AuthGuard],
          children: [
            { path: '', pathMatch: 'full', redirectTo: 'overview' },
            { path: 'overview', component: OverviewComponent, canActivate: [AuthGuard] },
          ]
        },
    ]),
  ],
  declarations: [HqTemplateComponent, OverviewComponent]
})

推荐答案

箭头功能

我喜欢通过将字符串更改为箭头函数来完成此操作，例如:

Arrow function

I like doing it by changing string to arrow function looking something like:

import { HqModule } from './hq/hq.module';


{ path: 'hq', loadChildren: () => HqModule },

对于 aot角度4及以下:

export function loadHqModuleFn() {
  return HqModule;
}

{ path: 'hq', loadChildren: loadHqModuleFn },

注意: 从版本5开始，编译器在发出.js文件时自动执行此重写.多亏了降低表情"

柱塞示例

Plunker Example

如果您使用 angular-router-loader ，那么您应该知道已加载对于同步加载模块具有特殊的语法.只需将sync=true作为查询字符串值添加到loadChildren string:

If you use angular-router-loader then you should be aware that this loaded has special syntax for to load module synchronously. Just add the sync=true as a query string value to your loadChildren string:

{ path: 'hq', loadChildren: 'app/hq/hq.module#HqModule?sync=true' },

进口

当然，您可以只将模块添加到imports阵列中，但是在这种情况下，您必须更改此模块的路由器配置路径:

imports

Of course you can just add module to imports array but in this case you have to change router config path for this module:

app.module.ts

@NgModule({
  imports: [
    ...,       
    HqModule,
    BrowserModule,
    RouterModule.forRoot([
      { path: '', redirectTo: 'store', pathMatch: 'full'},
      { path: 'store', loadChildren: 'app/store/store.module#StoreModule', pathMatch: 'prefix'},
    ])
  ]
  ...
})
export class AppModule {}

hq.module.ts

@NgModule({
  imports: [
    ...
    RouterModule.forChild([
        { path: 'hq', <========================== changed '' to `hq`
          component: HqTemplateComponent,
          canActivate: [AuthGuard],
          children: [
            ...
          ]
        },
    ]),
  ],
  ...
})

值得一提的是，角度路由器配置对顺序非常严格.根据文档:

It's also worth mentioning that angular router config is strict about order. According to the docs:

路由器在匹配路由时使用先赢"策略，因此 应该将更具体的路线放置在不太具体的路线上方

The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes

因此，将具有路由定义的模块添加到imports数组中，顺序与在RouterModule.forRoot中执行的顺序相同.

So add modules with routes definition to imports array in the same order as if you would do it in RouterModule.forRoot.

这篇关于从延迟加载到“正常"加载的角度切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！