Angular 4. 带子模块的路由

Question

我有以下文件：

app.module.ts
应用-routing.module.ts
projects.module.ts
项目-routing.module.ts

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

无法从“...app-routing.module.ts”解析 "projects" 中的错误。

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 {}

应用-routing.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 {}

项目-routing.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 时加载）。

你的情况：应用-routing.module.ts

来自

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

到

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

项目-routing.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 中删除其他 Project 组件的导入，这样它只会在访问 ProjectsModule 的路由时加载。

希望对你有所帮助，如有不妥请回复

Angular 4. 带子模块的路由

Angular 4. Routing with child modules

angular

angular-router