首页 文章

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

提问于
浏览 次
1

我试图让延迟加载工作在我的角度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添加到构造函数中，并且与未显示的模板和控制台NOT日志记录存在100％的相关性 .

我从一个公共文件夹中的一堆组件和一个“public.module”开始;但是在一个public.module中拥有所有路由并没有给我我想要的延迟加载 . 所以我将每个组件移动到它自己的目录中，并使用自己的模块处理其子路由 .

这就是这种行为开始时 - 随机“无渲染” .

在我拥有的12个组件中 - 2个将模板渲染到屏幕上，其余组件没有 . 我已经将代码减少到两个模块 - 其余的都是相同的，我试图让它在我加载任何特定于模块之前工作 .

任何帮助是极大的赞赏 .

APP结构：

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>

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

}

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

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

}
angular routing lazy-loading

3 回答

  • 4

    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 { }
    回复于
  • 0

    你的关于组件没有被击中 . 在你的 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 }
];
    回复于
  • 0

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

    我在 Stackblitz 上创建了一个演示

    添加about.component.ts

    { path: '', component: AboutComponent }
    回复于

相关问题