Angular 惰性加载（loadChild）返回一个空白页

我正在使用Angular 5，我想实现延迟加载，但它返回一个空白页面，没有任何错误

应用程序路由模块.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './views/content/login/login.component';
import { ErrorComponent } from './views/content/error/error.component';

const routes: Routes = [{
  path: '',
  component: LoginComponent
},
{
  path: 'operations',
  loadChildren: './views/operations/operations.module#OperationsModule'
},
{
  path: '404',
  component: ErrorComponent
},
{
  path: '**',
  redirectTo: '/404'
}];

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

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OperationsComponent} from './operations.component';

const routes: Routes = [
  {
    path: '',
    component: OperationsComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class OperationsRoutingModule {
  constructor() {
    console.log('hola mundo');
  }
}

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

import { OperationsRoutingModule } from './operations-routing';
import { OperationsComponent} from './operations.component';

@NgModule({
  imports: [CommonModule, OperationsRoutingModule],
  declarations: [OperationsComponent]
})
export class OperationsModule {}

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavModule } from './views/nav/nav.module';
import { ContentModule } from './views/content/content.module';
import { FooterModule } from './views/footer/footer.module';
import { OperationsModule } from './views/operations/operations.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NavModule,
    ContentModule,
    FooterModule,
    OperationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

操作路由模块.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './views/content/login/login.component';
import { ErrorComponent } from './views/content/error/error.component';

const routes: Routes = [{
  path: '',
  component: LoginComponent
},
{
  path: 'operations',
  loadChildren: './views/operations/operations.module#OperationsModule'
},
{
  path: '404',
  component: ErrorComponent
},
{
  path: '**',
  redirectTo: '/404'
}];

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

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OperationsComponent} from './operations.component';

const routes: Routes = [
  {
    path: '',
    component: OperationsComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class OperationsRoutingModule {
  constructor() {
    console.log('hola mundo');
  }
}

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

import { OperationsRoutingModule } from './operations-routing';
import { OperationsComponent} from './operations.component';

@NgModule({
  imports: [CommonModule, OperationsRoutingModule],
  declarations: [OperationsComponent]
})
export class OperationsModule {}

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavModule } from './views/nav/nav.module';
import { ContentModule } from './views/content/content.module';
import { FooterModule } from './views/footer/footer.module';
import { OperationsModule } from './views/operations/operations.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NavModule,
    ContentModule,
    FooterModule,
    OperationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

操作模块.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './views/content/login/login.component';
import { ErrorComponent } from './views/content/error/error.component';

const routes: Routes = [{
  path: '',
  component: LoginComponent
},
{
  path: 'operations',
  loadChildren: './views/operations/operations.module#OperationsModule'
},
{
  path: '404',
  component: ErrorComponent
},
{
  path: '**',
  redirectTo: '/404'
}];

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

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OperationsComponent} from './operations.component';

const routes: Routes = [
  {
    path: '',
    component: OperationsComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class OperationsRoutingModule {
  constructor() {
    console.log('hola mundo');
  }
}

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

import { OperationsRoutingModule } from './operations-routing';
import { OperationsComponent} from './operations.component';

@NgModule({
  imports: [CommonModule, OperationsRoutingModule],
  declarations: [OperationsComponent]
})
export class OperationsModule {}

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavModule } from './views/nav/nav.module';
import { ContentModule } from './views/content/content.module';
import { FooterModule } from './views/footer/footer.module';
import { OperationsModule } from './views/operations/operations.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NavModule,
    ContentModule,
    FooterModule,
    OperationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果我使用component而不是loadChildren，则会显示页面

更新

应用程序模块.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './views/content/login/login.component';
import { ErrorComponent } from './views/content/error/error.component';

const routes: Routes = [{
  path: '',
  component: LoginComponent
},
{
  path: 'operations',
  loadChildren: './views/operations/operations.module#OperationsModule'
},
{
  path: '404',
  component: ErrorComponent
},
{
  path: '**',
  redirectTo: '/404'
}];

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

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OperationsComponent} from './operations.component';

const routes: Routes = [
  {
    path: '',
    component: OperationsComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class OperationsRoutingModule {
  constructor() {
    console.log('hola mundo');
  }
}

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

import { OperationsRoutingModule } from './operations-routing';
import { OperationsComponent} from './operations.component';

@NgModule({
  imports: [CommonModule, OperationsRoutingModule],
  declarations: [OperationsComponent]
})
export class OperationsModule {}

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavModule } from './views/nav/nav.module';
import { ContentModule } from './views/content/content.module';
import { FooterModule } from './views/footer/footer.module';
import { OperationsModule } from './views/operations/operations.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NavModule,
    ContentModule,
    FooterModule,
    OperationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

其余的路由（LoginComponent和ErrorComponent）工作正常，问题是由延迟加载造成的。LoginComponent不是空的，只是指向该组件的链接是空的，它就像应用程序的主页一样工作。

您的

操作路由模块中的操作路由在哪里？@penleychan I更新了操作代码-routing-module.ts。这就是路由。我看没问题，你用的是angular cli？当您创建操作模块时，您重新启动了dev服务器？您的login.component是否为空？您不应该从AppModule导入操作模块：这会破坏延迟加载的整个要点。