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-基于Lazy load Angular 5 error: $$_lazy_route_resource lazy recursive）

问题在于，只有部分（而非全部）路线实际产生“模板”结果。我已经向构造函数添加了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>

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

您的关于组件的信息不会被加载，因为它的路径未被点击。在您的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 }
];

Answer 2

DEMO

app-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 3

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

我已在 Stackblitz

上创建了一个演示

添加about.component.ts

{ path: '', component: AboutComponent }

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

3 个答案: