No angular5, tento ter no mesmo projeto a compilação AOT para a maior parte do meu módulo / componente ... mas tenho uma parte que precisa ser compilada pelo JIT.

Para esta segunda parte, o HTML vem da solicitação do Ajax e contém algumas tags de componentes que devem ser compiladas por angular. Para gerenciar esta parte, uso uma diretiva que se parece com:

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 você pode ver, eu posso ligaraddHtmlComponent método para compilar novo componente em tempo de execução com HTML personalizado como modelo.

Meu modelo se parece com:

<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>

tudo funciona perfeitamente até que eu mude para a compilação AOT (fyi eu uso:https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack)

Razao possivel : Principal razão, eu acho, é porque a compilação AOT exclui parte do "compilador" do Angular do pacote compilado de saída.O que eu tenho que tentar - Tentei solicitá-lo diretamente no meu código, mas ainda não está presente. - Tentei verificar como um site como o angular (ou material angular) lida com ele. Mas não está de acordo com o meu caso. De fato, ambos já compilaram a versão de todos os exemplos na versão AOT. Parte dinâmica é "apenas" conteúdo em torno da amostra.

Se você deseja verificar como o material é angular: Todos os exemplos de sites para cada componente:https://github.com/angular/material2/tree/master/src/material-examples

Então eles têm carregador:https://github.com/angular/material.angular.io/blob/master/src/app/shared/doc-viewer/doc-viewer.ts#L85

Pode ser a maneira certa de fazê-lo, mas não sei como adaptá-lo para gerenciar o conteúdo dinâmico da guia.

EDITAR : eu adicionei amostra aqui:https://github.com/yanis-git/aot-jit-angular (filial Master)

Como você verá, a compilação AOT remove o compilador de parede do pacote, este resultado:

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

Eu tentei forçar o compilador Factory no AppModule, mas ainda não obtive resultado.

Eu tenho outro exemplo no mesmo repositório, mas no ramo "lazy-jit", agora tenho o Compiler incorporado no pacote de saída, mas um novo erro ocorre:

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

Quem parece ser exatamente igual a este problema:https://github.com/angular/angular/issues/16033