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的路由時才會加載它。

希望對您有所幫助，如果有問題，請回復。