Come caricare manualmente un modulo?

Ho provato a caricare moduli senza router usando SystemJsNgModuleLoader , ma non riuscivo a farlo funzionare:

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

Sto ottenendo Cannot find module xxx per qualsiasi stringa che uso per URL (URL / percorsi relativi / abili … provato molte opzioni). Ho controllato il codice sorgente del router e non ho trovato altro che questo SystemJsNgModuleLoader . Non sono nemmeno sicuro che dovrei usare questo …


Questa domanda è stata fatta proprio ieri alla conferenza ng-europe 2016 – Miško e Matias hanno risposto:

Miško Hevery: Basta prendere il modulo , da lì puoi ottenere la tenuta della component factory e puoi caricare dynamicmente la component factory ovunque tu voglia nell’applicazione. Questo è esattamente ciò che fa il router internamente. Quindi è abbastanza difficile per te fare altrettanto.

Matias Niemelä L’unica cosa speciale da notare è che sul modulo [Ng] c’è qualcosa chiamato entryComponents e che identifica i componenti che potrebbero essere pigri caricati – questa è la voce in quel set di componenti. Quindi, quando hai dei moduli che sono pigri, ti preghiamo di metterli in entryComponents .

… ma non è quello stretto in avanti senza esempi e documenti poveri sull’argomento (;

Qualcuno sa come caricare i moduli manualmente, senza utilizzare Route.loadChildren ? Come ottenere il modulo e quali sono esattamente le cose che dovrebbero andare in entryComponents (ho letto le FAQ , ma non posso provare senza effettivamente caricare il modulo)?

Qualcuno sa come caricare i moduli manualmente, senza utilizzare Route.loadChildren?

Potrebbe assomigliare a questo:

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

TestModule si trova nel file ./src/test.module.ts (percorso assoluto)

Esempio di Plunker

Ecco anche un esempio più avanzato:

Se non si carica il componente in modo dichiarativo come:

  

all’interno del modello quindi se si desidera utilizzare questo componente per il caricamento dinamico, è necessario includere questo componente in entryComponent con uno dei seguenti metodi:

Il compilatore crea fabbriche come questa:

per ogni entryComponent – host.factory.js

per ogni componente component.ngfactory.js

Guarda anche

  • Esempio di tabs di caricamento pigro

Esempio per 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); }); } } 

Funzionerà anche con AOT

Githug repo angular-cli-pigro

Caricamento lento con webpack e AOT

Compilazione usando ngc

Compilatore di inizializzazione utilizzando il seguente factory

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

Github repo