Como manualmente preguiçoso carregar um módulo?

Eu tentei carregar módulos sem roteador usando SystemJsNgModuleLoader , mas não consegui fazê-lo funcionar:

 this.loader.load(url).then(console.info); 

Estou recebendo Cannot find module xxx para qualquer string que eu uso para URL (aboslute / relative urls / paths … tentei muitas opções). Eu olhei pelo código-fonte do Roteador e não consegui encontrar nada além do SystemJsNgModuleLoader . Eu nem tenho certeza se devo usar isso …


Esta pergunta foi feita ontem mesmo na conferência ng-europe 2016 – Miško & Matias respondeu:

Miško Hevery: É preciso apenas segurar o módulo , a partir daí você pode se apossar da fábrica de componentes e carregar dinamicamente a fábrica de componentes onde quiser no aplicativo. Isso é exatamente o que o roteador faz internamente. Então, é um passo à frente para você fazer isso também.

Matias Niemelä A única coisa especial a se notar é que no módulo [Ng] existe algo chamado entryComponents e que identifica componentes que podem ser carregados com preguiça – essa é a input nesse conjunto de componentes. Então, quando você tem módulos que são carregados com preguiça, por favor, coloque o material em entryComponents .

… mas não é esse estreito para a frente sem exemplos e docs pobres sobre o assunto (;

Alguém sabe como carregar módulos manualmente, sem usar o Route.loadChildren ? Como se apossar do módulo e o que exatamente é o material que deve entrar em entryComponents (eu li FAQ , mas não posso tentar sem carregar o módulo)?

Alguém sabe como carregar módulos manualmente, sem usar o Route.loadChildren?

Pode parecer assim:

 this.loader.load('./src/test.module#TestModule').then((factory: NgModuleFactory) => { console.log(factory); }); 

TestModule está localizado no arquivo ./src/test.module.ts (caminho absoluto)

Exemplo de Plunker

Aqui está também um exemplo mais avançado:

Se você não carregar o componente declarativamente como:

  

dentro do seu modelo, então se você quiser usar este componente para carregar dinamicamente, então você deve include este componente em entryComponent por um dos seguintes methods:

Compilador cria fábricas como esta:

para cada entryComponent – host.factory.js

para cada componente component.ngfactory.js

Veja também

  • Exemplo de guias de carregamento preguiçoso

Exemplo para Angular-cli

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) => { const entryComponent = (moduleFactory.moduleType).entry; const moduleRef = moduleFactory.create(this.inj); const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent); this.container.createComponent(compFactory); }); } } 

Ele também funcionará com o AOT

Repo Githug angular-cli-preguiçoso

Carregamento lento com webpack e AOT

Compilação usando ngc

Compilador de Inicialização usando a seguinte fábrica

 export function createJitCompiler () { return new JitCompilerFactory([{useDebug: false, useJit: true}]).createCompiler(); } 

Repo Github