Question

我正试图让我的Angular路线变得懒惰。我在另一个应用程序中有一个工作版本，据我所知，它以相同的方式实现它 - 但它根本不起作用。没有错误，只有空<router-outlet>。

这是我的app.module.ts。 SharedModule和EntityViewsModule包含共享组件：

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    SharedModule,
    EntityViewsModule,
    FormsModule,
    HttpModule,
    routing,
    ...rxjs stuff...
  ],
  providers: [
    ...bunch of services...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

routing已定义：

import { RouterModule, Route } from '@angular/router';
import { ModuleWithProviders, Component } from '@angular/core';

const routes: Route[] = [
  { path: '', pathMatch: 'full', redirectTo: 'home'},
  { loadChildren: 'app/frontScreen/frontScreen.module#FrontScreenModule', path: 'home' },
];

export const routing: ModuleWithProviders = RouterModule.forRoot(
  routes,
  {
    useHash: true
  }
);

和我正在尝试加载的模块：

@NgModule({
  imports: [
    CommonModule,
    EntityViewsModule,
    SharedModule
  ],
  declarations: [
    FrontScreenComponent
  ],
  bootstrap: [
    FrontScreenComponent
  ]
})
export class FrontScreenModule { }

在我定义component: FrontScreenComponent并手动导入FrontScreenModule的情况下，它可以正常加载。但是使用上述配置无声地失败。

一条线索可能是重定向甚至无法正常工作。在地址栏中输入“http://localhost:4200/#/”不会像我期望的那样重定向到“http://localhost:4200/#/home”。

Answer 1

Babar Bilal是完全正确的，我必须要有孩子＆＃39; （好吧，不是真正的Angular child routes as defined in the docs），但是懒惰加载的模块确实需要定义它自己的路径，所以：

@NgModule({
  imports: [
    CommonModule,
    EntityViewsModule,
    SharedModule
  ],
  declarations: [
    FrontScreenComponent
  ]
})
export class FrontScreenModule { }

有一种愚蠢的路线（注意，注意儿童路线的定义）：

const routes: Routes = [
  { path: '', component: FrontScreenComponent},
];

export const FrontScreenRoutes = RouterModule.forChild(routes);

但是该路由被导入作为到主模块的子路由。

Angular 2+，延迟加载路由失败（无错误）

1 个答案: