时间戳

首页 > 解决方案 > 角 loadChildren 没有做任何事情

angular - 角 loadChildren 没有做任何事情

问题描述

我正在学习 PluralSight 上的Angular Fundamentals课程，创建一个包含用户模块和事件模块的事件管理站点。（本课程没有将事件管理放入功能模块中，但我自己做了。）我按照说明让每个模块处理自己的路由，在顶级路由中使用loadChildren ：

应用程序.routes.ts

import { Routes } from '@angular/router';
import { NotFoundComponent } from './utility/not-found.component';

export const appRoutes: Routes = [
  { 
      path: 'events', 
      loadChildren: './events/events.module#EventsModule'
  },
  { path: 'user', loadChildren: './user/user.module#UserModule'},
  { path: 'NotFound', component: NotFoundComponent },
  { path: '', redirectTo: '/events', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }
];

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { appRoutes } from './app.routes';

import { AppComponent } from './app.component';
import { SharedModule } from './common/shared.module';
import { NavBarComponent } from './nav/navbar.component';
import { EventService } from './events/event.service';
import { ToastrService } from './common/toastr.service';
import { NotFoundComponent } from './utility/not-found.component';
import { UserModule } from './user/user.module';
import { EventsModule } from './events/events.module';


@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent,
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    SharedModule,
    EventsModule,
    UserModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    EventService,
    ToastrService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后，假设我希望/events显示事件列表，/events/create显示用于输入新事件的页面，以及/events/3显示 id = 3 的事件的详细信息，我应该有以下。根据课程，由Angular 自己对主题的阐述所证实，我应该只指定子路径，省略应该已经由应用程序级路由考虑的“事件”部分。

来自event.routes.ts

export const eventRoutes: Routes = [
    { path: 'create', component: CreateEventComponent, canDeactivate: [UnsavedNewEventGuard] },
    { path: ':id', component: EventDetailsComponent, canActivate: [ValidEventGuard] },
    { path: '', component: EventsListComponent }
];

events.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { eventRoutes } from './event.routes';
import { EventsListComponent } from './event-list/events-list.component';
import { CreateEventComponent } from './create-event/create-event.component';
import { EventThumbnailComponent } from './event-list/event-thumbnail.component';
import { EventDetailsComponent } from './event-details/event-details.component';

@NgModule({
  declarations: [
    EventsListComponent,
    CreateEventComponent,
    EventThumbnailComponent,
    EventDetailsComponent,
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(eventRoutes)
  ]
})
export class EventsModule { }

这行不通。相反，它直接显示路径 / 的事件列表（即https://localhost:4200/，它不会重定向）。它不会路由到 /events、/events/create 或 /events/3。

当我提供完整路径时，包括我认为我不应该需要的“事件”部分，那么应用程序就可以工作了：

event.routes.ts（版本 2）

export const eventRoutes: Routes = [
    { path: 'events/create', component: CreateEventComponent, canDeactivate: [UnsavedNewEventGuard] },
    { path: 'events/:id', component: EventDetailsComponent, canActivate: [ValidEventGuard] },
    { path: 'events', component: EventsListComponent }
];

或者，将子路径嵌套到“事件”的父路径下的子属性中也可以：

event.routes.ts（版本 3）

export const eventRoutes: Routes = [{
  path: 'events', children: [
    { path: 'create', component: CreateEventComponent, canDeactivate: [UnsavedNewEventGuard] },
    { path: ':id', component: EventDetailsComponent, canActivate: [ValidEventGuard] },
    { path: '', component: EventsListComponent }
  ]
}];

但是无论我的应用程序级路由文件中是否有带有loadChildren属性的路由，版本 2 和 3 都可以工作。该应用程序对此非常满意：

app.routes.ts（版本 2）

import { Routes } from '@angular/router';
import { NotFoundComponent } from './utility/not-found.component';

export const appRoutes: Routes = [
  { path: 'NotFound', component: NotFoundComponent },
  { path: '', redirectTo: '/events', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }
];

基本上，loadChildren路线被忽略了。（同样适用于用户模块。）我不知道为什么。

标签： angularangular-router

解决方案

您正在 app.module.ts 上导入模块。您的“版本 2 和 3”之所以有效，是因为模块是在您的AppModule. EventsModule要使延迟加载正常工作，您需要UserModule从您的AppModule:

@NgModule({
  declarations: [...],
  imports: [
    BrowserModule,
    SharedModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule { }

ng serve此外，您可能需要在添加新模块以进行延迟加载后重新运行。

推荐阅读