Angular7:延迟加载未创建块

时间:2019-04-30 05:50:21

标签: javascript angular lazy-loading angular7 angular-load-children

我正在使用Angular7,并且正在使用新语法,即用于懒惰加载模块的loadChildren。 但是,当我投放我的应用程序并在浏览器中签入时,我发现它不会创建任何块。

enter image description here

下面是我的应用路由

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

const routes: Routes = [
  { path: '', loadChildren: './layout/layout.module#LayoutModule' },
  { path: 'auth', loadChildren: './auth/auth.module#AuthModule' },
  { path: 'not-found', loadChildren: './not-found/not-found.module#NotFoundModule' },
  { path: '**', redirectTo: 'not-found' }
];

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

下面是我的App模块 我

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// imports for internationalization i18n
import { HttpClientModule } from '@angular/common/http';
import { LanguageTranslationModule } from './language-translation/language-translation.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    LanguageTranslationModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

2 个答案:

答案 0 :(得分:0)

chunks created via lazy

如图所示,确实创建了块。

没有找到未找到的模块,这是正常的。

答案 1 :(得分:0)

为什么要创建延迟加载的布局模块?延迟加载功能模块的整个想法不是在后台或在要求时预加载或加载其他功能模块时向用户快速显示首页吗?

如果您有布局模块,从一开始就至少一次有3个请求:1个针对您的应用程序,1个针对布局,最有可能的一个针对要在布局内部呈现的页面。

您可能会提高性能,以构建在AppModule中添加的渴望加载的模块布局,然后使用延迟加载功能模块在布局内部路由组件。另外,应将主页包含在AppModule中以实现快速呈现,而不要等待浏览器下载延迟加载模块来呈现。

顺便说一句:我已经看到,如果我使用的是AppModule内的功能模块或AppModule包含的组件中导出的组件,则该功能模块将没有自己的块文件。每个延迟加载功能模块都应该是自包含的,不应将组件导出到其他模块。如果这样做,则可能需要更多地破坏模块,以便能够在模块之间共享某些组件/提供程序。

此外,请小心在功能模块之间共享提供程序,因为您有子注入器,最终会遇到多个单例实例,每个功能模块一个。要共享提供程序,您应该在共享模块中实现.forRoot和.forChild。