Angular 5 延迟加载不显示某些模块

Question

我正在尝试让延迟加载在我的 angular 5 应用程序上工作，但是我的简单测试似乎不起作用。

"devDependencies": {
    "@angular/cli": "^1.7.4", 
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",

（使用 cli 1.7.4 - 基于）

问题是我的路线中只有部分（但不是全部）实际产生 "template" 结果。我在构造函数中添加了一个 console.log，与模板未显示和控制台未记录有 100% 的相关性。

我从 public 文件夹中的一堆组件开始，然后是一个 'public.module'；但是将所有路由集中在一个 public.module 中并没有给我想要的延迟加载。所以我将每个组件移动到它自己的目录中，用它自己的模块处理它的子路由。

这就是这种行为开始的时间 - 随机 "no render"。

在我拥有的 12 个组件中 - 2 个将其模板呈现到屏幕上，其余的则不。我已将代码减少到两个模块 - 其余模块相同，我试图在加载任何特定模块之前让它正常工作。

非常感谢任何帮助。

应用程序结构：

app
|- components
|---|- public
|---|---|- home
|---|---|---|- home.component.ts (this displays "home works", and console.logs)
|---|---|---|- home.module.ts
|---|---|- about
|---|---|---|- about.component.ts (this DOES NOT work, and displays nothing)
|---|---|---|- about.module.ts
|- app.module.ts
|- app.component.ts
|- app.routing.module.ts
|- app.component.html

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing.module';

@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule,
        RouterModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
    ],
    bootstrap: [
        AppComponent
    ]
})

export class AppModule { }

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent {}

app.routing.module.ts

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

const appRoutes: Routes = [
    { path: '', loadChildren: './components/public/home/home.module#HomeModule' },
    { path: 'about', loadChildren: './components/public/about/about.module#AboutModule' }
];

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

export class AppRoutingModule {}

app.component.html

<button routerLink="/">home</button><br>
<button routerLink="/about">about</button><br>
<router-outlet></router-outlet>

components/public/home/home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

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

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(routes)
    ],
    declarations: [
        HomeComponent
    ]
})

export class HomeModule { }

components/public/home/home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-home',
    template: `<h1>Home Works</h1>`
})

export class HomeComponent implements OnInit {

    constructor() { console.log('Home Works'); }

    ngOnInit() { }

}

components/public/about/about.module.ts

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

import { AboutComponent } from './about.component';

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

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(routes)
    ],
    declarations: [
        AboutComponent
    ]
})

export class AboutModule { }

components/public/about/about.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-about',
    template: `<h1>About Works</h1>`
})

export class AboutComponent implements OnInit {

    constructor() { console.log('About Works'); }

    ngOnInit() { }

}

Answer 1

DEMO

应用-routing.module.ts:

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

import { AboutModule } from './about/about.module'
import { HomeModule } from './home/home.module'

const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => HomeModule, },
  { path: 'about', loadChildren: () => AboutModule },
];

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

export class AppRoutingModule { }

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module'

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports: [BrowserModule, FormsModule, AppRoutingModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

home.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

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

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    HomeComponent
  ]
})

export class HomeModule { }

about.module.ts:

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

import { AboutComponent } from './about/about.component';

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

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    AboutComponent
  ]
})

export class AboutModule { }

Answer 2

您可以尝试使用此解决方案。

我已经在 Stackblitz

上创建了一个演示

加入about.component.ts

{ path: '', component: AboutComponent }

Answer 3

你的 about 组件没有加载，因为它的路由没有被命中。在您的 about.module 中，您有：

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

这是以下的子路由：

const appRoutes: Routes = [
    { path: '', loadChildren: './components/public/home/home.module#HomeModule' },
    { path: 'about', loadChildren: './components/public/about/about.module#AboutModule' }
];

这意味着，要加载您的 AboutComponent，您必须前往路线 /about/about。

修复：

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

Angular 5 延迟加载不显示某些模块

Angular 5 lazy-loading not displaying some modules

routing

lazy-loading

angular