Question

我正在开发一个实现了延迟加载的Angular应用程序。我试着尝试延迟加载，但我决定不想在我的应用程序中实现它。这是我的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恢复正常加载？我期望以下内容可行：

  { path: 'hq', redirectTo: HqModule }

然而，这会返回我的模块是错误的参数类型。这在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]
})

Answer 1

箭头功能

我喜欢通过将字符串更改为箭头函数来实现它，如下所示：

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


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

aot angular 4 and less ：

export function loadHqModuleFn() {
  return HqModule;
}

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

注意： 从版本5开始，编译器会在发出.js文件时自动执行此重写。感谢“降低表达力”

<强> Plunker Example

角路由器装载机？SYNC = TRUE

如果你使用angular-router-loader，那么你应该知道这个加载了to load module synchronously的特殊语法。只需将sync=true作为查询字符串值添加到loadChildren string：

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

进口

当然你可以将模块添加到imports数组，但在这种情况下你必须更改该模块的路由器配置路径：

<强> 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: [
            ...
          ]
        },
    ]),
  ],
  ...
})

值得一提的是，角度路由器配置对订单是严格的。根据{{3}}：

路由器在匹配路由时使用第一匹配胜利策略，所以更具体的路线应放在不太具体的路线上

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

Answer 2

将HqModule添加到AppModule的导入阵列，并从AppModule路由定义中删除HqModule条目。像这样：

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

从lazyLoading角度切换到“正常”加载

2 个答案:

箭头功能

角路由器装载机？SYNC = TRUE

进口