En angular5, trato de tener en el mismo proyecto la compilación AOT para la mayoría de mi módulo / componente ... pero tengo una parte que necesita ser compilada JIT.

Para esta segunda parte, el HTML proviene de la solicitud de Ajax y contiene una etiqueta de componente que debe ser compilada por angular. Para administrar esta parte, uso la directiva que se parece a:

export class ArticleLiveDirective implements OnInit, OnChanges, OnDestroy {

    // [...]    

    constructor(
        private container: ViewContainerRef,
        private compiler: Compiler
    ) { }

    // [...]

    private addHtmlComponent(template: string, properties: any = {}) {
        this.container.clear();
        //Force always rootDomElement.
        const divTag = document.createElement('div');
        divTag.setAttribute('id',this.currentId);
        divTag.innerHTML = template;
        template = divTag.outerHTML;

        // We create dynamic component with injected template
        @Component({ template })
        class ArticleLIveComponent implements OnInit, OnChanges, OnDestroy {
            constructor(
                private articleService: ArticleService
            ) {}
            ngOnInit() {}
            ngOnChanges(changes: SimpleChanges) {}
            ngOnDestroy() {}
            goToPage($event: Event, pagination: string) {
                this.articleService.askToChangeArticle(pagination);
                //Stop propagation
                $event.stopPropagation();
                return false;
            }

        }

        // we declare module with all dependencies
        @NgModule({
            declarations: [
                ArticleLIveComponent
            ],
            imports: [
                BrowserModule,
                MatTabsModule
            ],
            providers: []
        })
        class ArticleLiveModule {}

        // we compile it
        const mod = this.compiler.compileModuleAndAllComponentsSync(ArticleLiveModule);
        const factory = mod.componentFactories.find((comp) =>
            comp.componentType === ArticleLIveComponent
        );
        // fetch instance of fresh crafted component
        const component = this.container.createComponent(factory);
        // we inject parameter.
        Object.assign(component.instance, properties);
    }
}

Como puedes ver puedo llamaraddHtmlComponent Método para compilar un nuevo componente en tiempo de ejecución con HTML personalizado como plantilla.

Mi plantilla se ve así:

<div>
<h2>Foo bar</h2>
<mat-tab-group>
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>
<p>Other content</p>

todo funciona perfectamente hasta que cambie a la compilación AOT (para su uso:https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack)

Razón posible : La razón principal, supongo, es porque la compilación AOT elimina parte del "compilador" de Angular del paquete compilado de salida.Lo que he probado - Intenté solicitarlo directamente en mi código pero aún no está presente. - Intenté comprobar cómo maneja el sitio web como angular (o material angular). Pero no encaja con mi caso. De hecho, ambos ya tienen una versión compilada de todos los ejemplos en la versión AOT. La parte dinámica es contenido "justo" alrededor de la muestra.

Si desea comprobar cómo lo hace el material angular: Todos los ejemplos del sitio web para cada componente:https://github.com/angular/material2/tree/master/src/material-examples

Luego tienen cargador:https://github.com/angular/material.angular.io/blob/master/src/app/shared/doc-viewer/doc-viewer.ts#L85

Puede ser la forma correcta de hacerlo, pero no sé cómo adaptarlo para administrar el contenido dinámico de la pestaña.

EDITAR : tengo agregar muestra aquí:https://github.com/yanis-git/aot-jit-angular (maestro de rama)

Como verá, la compilación AOT elimina el compilador de pared del paquete, este resultado:

Module not found: Error: Can't resolve '@angular/compiler/src/config'

Intenté forzar el compilador Factory en AppModule, pero aún no obtuve ningún resultado.

Tengo otra muestra en el mismo repositorio, pero en la rama "lazy-jit", ahora tengo el Compilador incrustado en el paquete outputed, pero me llegó un nuevo error:

ERROR Error: No NgModule metadata found for 'ArticleLiveModule'.

Quién parece ser exactamente igual a este problema:https://github.com/angular/angular/issues/16033