Ответ 1
Кто-нибудь знает, как загрузить модули вручную, без использования Route.loadChildren?
Вы можете использовать SystemJsNgModuleLoader для получения фабрики модулей:
this.loader.load('./src/lazy.module#TestModule').then((factory: NgModuleFactory<any>) => {
console.log(factory);
});
Для угловых 8 см. Ленивый модуль нагрузки в угловых 8
Вот как это может выглядеть:
lazy.module.ts
@Component({
selector: 'test',
template: 'I'm lazy module',
})
export class Test {}
@NgModule({
imports: [CommonModule],
declarations: [Test],
entryComponents: [Test]
})
export class LazyModule {
static entry = Test;
}
app.ts
import {
Component, NgModule, ViewContainerRef,
SystemJsNgModuleLoader, NgModuleFactory,
Injector} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'my-app',
template: '<h2>Test lazy loading module</h2>',
})
export class AppComponent {
constructor(
private loader: SystemJsNgModuleLoader,
private inj: Injector,
private vcRef: ViewContainerRef) {}
ngOnInit() {
this.loader.load('./src/lazy.module#LazyModule')
.then((moduleFactory: NgModuleFactory<any>) => {
const moduleRef = moduleFactory.create(this.inj);
const entryComponent = (<any>moduleFactory.moduleType).entry;
const compFactory =
moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
this.vcRef.createComponent(compFactory);
});
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
providers: [SystemJsNgModuleLoader],
bootstrap: [ AppComponent ]
})
export class AppModule {}
this.loader.load('./src/test.module#TestModule').then((factory: NgModuleFactory<any>) => {
console.log(factory);
});
Есть два варианта прекомпиляции модуля для AOT:
1) Варианты угловых CLI lazyModules (начиная с Angular 6)
Используйте встроенную функцию angular/cli:
{
"projects": {
"app": {
"architect": {
"build": {
"options": {
"lazyModules": [ <====== add here all your lazy modules
"src/path-to.module"
]
}
}
}
}
}
}
Увидеть
- @RomainLT answer
- Необходимость в скорости: не маршрутизируемые модули с ленивой загрузкой в статье Angular для более подробной информации
2) Использование provideRoutes из RouterModule
app.module.ts
providers: [
SystemJsNgModuleLoader,
provideRoutes([
{ loadChildren: 'app/lazy/lazy.module#LazyModule' }
])
],
app.component.ts
export class AppComponent implements OnInit {
title = 'Angular cli Example SystemJsNgModuleLoader.load';
@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
constructor(private loader: SystemJsNgModuleLoader, private inj: Injector) {}
ngOnInit() {
this.loader.load('app/lazy/lazy.module#LazyModule').then((moduleFactory: NgModuleFactory<any>) => {
const entryComponent = (<any>moduleFactory.moduleType).entry;
const moduleRef = moduleFactory.create(this.inj);
const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
this.container.createComponent(compFactory);
});
}
}
Ленивая загрузка с Webpack и AOT
Компиляция с использованием ngc
Инициализация компилятора с использованием следующей фабрики
export function createJitCompiler () {
return new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler();
}