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

Question

我有以下文件：

• app.module.ts
• APP-routing.module.ts
• projects.module.ts
• 项目-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 {}

APP-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时，才在初始页面加载时不加载该模块）。

在您的情况下：app-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的路由时才会加载它。

希望对您有所帮助，如果有问题，请回复。