modulos - que es un modulo angular 6

¿Cómo cargar manualmente un módulo?

Question

Intenté cargar módulos sin enrutador usando SystemJsNgModuleLoader , pero no pude hacerlo funcionar:

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

Obtengo Cannot find module xxx para la cadena que uso para URL (aboslute / urls / paths relativos ... intenté muchas opciones). Miré a través del código fuente del enrutador y no pude encontrar nada más que este SystemJsNgModuleLoader . Ni siquiera estoy seguro de que debería estar usando esto ...

Esta pregunta se hizo ayer en la conferencia ng-europe 2016 - Miško & Matias respondió:

Miško Hevery: Uno solo tiene que hacerse con el módulo , desde allí puede obtener la fábrica de componentes y puede cargar dinámicamente la fábrica de componentes donde quiera en la aplicación. Esto es exactamente lo que el enrutador hace internamente. Por lo tanto, es bastante fácil para usted hacer eso también.

Matias Niemelä Lo único especial a tener en cuenta es que en el Módulo [Ng] hay algo llamado entryComponents y que identifica componentes que podrían cargarse de forma perezosa: esa es la entrada en ese conjunto de componentes. Entonces, cuando tienes módulos que están cargados de forma entryComponents , por favor coloca los elementos en entryComponents .

... pero no es tan fácil avanzar sin ejemplos y documentos pobres sobre el tema (;

¿Alguien sabe cómo cargar módulos manualmente, sin usar Route.loadChildren ? ¿Cómo obtener el módulo y qué es exactamente lo que debe entrar en entryComponents (leo las FAQ , pero no puedo probar sin cargar realmente el módulo)?

Answer 1

¿Alguien sabe cómo cargar módulos manualmente, sin usar Route.loadChildren?

Puede verse así:

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

TestModule se encuentra en el archivo ./src/test.module.ts (ruta absoluta)

Ejemplo de Plunker

Aquí también hay un ejemplo más avanzado:

• https://github.com/angular/angular/issues/11738

Si no carga el componente declarativamente, como:

<my-comp></my-comp>

dentro de su plantilla, entonces si desea usar este componente para cargar dinámicamente, entonces debe incudir este componente en entryComponent mediante uno de los siguientes métodos:

• array entryComponents dentro de su @NgModule

• entryComponents array dentro de tu @Component

• ANALYZE_FOR_ENTRY_COMPONENTS (el enrutador angular utiliza este método https://github.com/angular/angular/blob/2.1.2/modules/%40angular/router/src/router_module.ts#L198 )

El compilador crea fábricas como esta:

para cada entryComponent - host.factory.js

para cada componente component.ngfactory.js

Ver también

• Ejemplo de pestañas de carga lenta

Ejemplo 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<any>) => {
            const entryComponent = (<any>moduleFactory.moduleType).entry;
            const moduleRef = moduleFactory.create(this.inj);

            const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
            this.container.createComponent(compFactory);
        });
    }
}

También funcionará con AOT

Githug repo angular-cli-perezoso

Carga lenta con webpack y AOT

Compilación usando ngc

Compilador de inicialización utilizando la siguiente fábrica

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

Repo de Github