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-基于延迟加载Angular 5错误：$$ _ lazy_route_resource延迟递归）

问题是只有我的部分路线（而非全部）实际产生“模板”结果。我已经向构造函数添加了console.log，并且与未显示的模板和未记录的控制台有100％的相关性。

我从公共文件夹中的一堆组件开始，然后是一个“ public.module”。但是将所有路由都放在一个public.module中并没有给我我想要的延迟加载。因此，我将每个组件都移到了自己的目录中，该目录具有处理其子路由的模块。

这就是这种行为开始的时间-随机“不渲染”。

在我拥有的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>

组件/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 { }

组件/公共/家庭/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() { }

}

组件/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 { }

组件/公共/关于/关于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

您的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 }
];