Angular 4. 使用子模块进行路由

Question

我有以下文件:

• app.module.ts
• app-routing.module.ts
• projects.module.ts
• projects-routing.module.ts

项目模块是应用程序模块的子模块。我将项目模块的路由包含在应用程序模块中，并在构建过程中收到以下错误:

错误无法解析“...app-routing.module.ts”中的“项目”。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BreadcrumbModule } from 'angular-crumbs';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { ProjectsModule } from './projects/projects.module';
import { ProjectModule } from './project/project.module';

import { AppRoutingModule } from './app-routing.module';

import { ResizeDirective } from './resize.directive';

@NgModule({
  imports: [
    BrowserModule,
    BreadcrumbModule,
    NgbModule.forRoot(),
    HttpModule,
    ProjectsModule,
    ProjectModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    HeaderComponent,
    MainComponent,
    PageNotFoundComponent,
    ResizeDirective,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { ProjectsComponent } from './projects/projects.component';
import { ProjectComponent } from './project/project.component';

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
  {
    path: 'projects',
    component: ProjectsComponent,
    loadChildren: 'projects#ProjectsModule'
  },
  {
    path: 'project',
    component: ProjectComponent,
    loadChildren: 'project#ProjectModule'
  },
  {
    path: '',
    redirectTo: '/projects/overview',
    pathMatch: 'full'
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

projects.module.ts

import { NgModule } from '@angular/core';

import { projectsRoutingModule } from './projects-routing.module';

import { OverviewComponent } from './overview/overview.component';
import { BusinessProfilesComponent } from './business-profiles/business-profiles.component';
import { PayoutsComponent } from './payouts/payouts.component';
import { ReportsComponent } from './reports/reports.component';
import { AsideComponent } from './aside/aside.component';

@NgModule({
  imports: [
    projectsRoutingModule
  ],
  declarations: [
    OverviewComponent,
    BusinessProfilesComponent,
    PayoutsComponent,
    ReportsComponent,
    AsideComponent
  ]
})
export class ProjectsModule {}

项目路由.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { OverviewComponent } from './overview/overview.component';
import { BusinessProfilesComponent } from './business-profiles/business-profiles.component';
import { PayoutsComponent } from './payouts/payouts.component';
import { ReportsComponent } from './reports/reports.component';

const projectsRoutes: Routes = [
  {
    path: 'overview',
    component: OverviewComponent,
    data: {
      breadcrumb: 'Projects Overview'
    }
  },
  {
    path: 'business-profiles',
    component: BusinessProfilesComponent,
    data: {
      breadcrumb: 'Business Profiles'
    }
  },
  {
    path: 'reports',
    component: ReportsComponent,
    data: {
      breadcrumb: 'Reports'
    }
  },
  {
    path: 'payouts',
    component: PayoutsComponent,
    data: {
      breadcrumb: 'Payouts'
    }
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(projectsRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class projectsRoutingModule {}

Answer 1

在loadChildren中，您必须指定文件(没有文件扩展名)和模块，以#分隔。 另外，使用 loadChildren 时不需要该组件，因此模块将被延迟加载(在初始页面加载时不会加载，仅在访问所选路由或使用 PreloadAllModules 时加载)。

就你的情况而言: 应用程序路由.module.ts

来自

...
{
    path: 'projects',
    component: ProjectsComponent,
    loadChildren: 'projects#ProjectsModule'
},
...

至

...
{
    path: 'projects',
    loadChildren: './projects.module#ProjectsModule' // relative to app-routing.module.ts
},
...

项目路由.module.ts

来自

...
const projectsRoutes: Routes = [
  {
    path: 'overview',
    component: OverviewComponent,
    data: {
      breadcrumb: 'Projects Overview'
    }
  },
...

至

...
const projectsRoutes: Routes = [
  {
    path: '',
    component: ProjectsComponent
  },
  {
    path: 'overview',
    component: OverviewComponent,
    data: {
      breadcrumb: 'Projects Overview'
    }
  },
...

您可以从 AppModule 中删除其他项目组件的导入，这样只有在访问 ProjectsModule 的路由时才会加载它。

希望对大家有帮助，如有问题请回复。