Encountering an issue in Angular 4 AOT Compilation when trying to load a Dynamic Component: Error message states that the

Question

Encountering an issue in Angular 4 AOT Compilation when trying to load a Dynamic Component: Error message states that the

My Angular application is facing challenges when loading dynamic components. Everything works smoothly with the JIT ng serve or ng build compilation. Even with AOT

ng serve --prod or ng build --prod

, I can still successfully build the application. Lazy loading modules are also functioning as expected. However, when an event is triggered to load a dynamic component from the landing page, I encounter the following error:

vendor.fbd3ddffb0a9e35bbf55.bundle.js:1 ERROR Error: Uncaught (in promise): 
Error: Runtime compiler is not loaded
Error: Runtime compiler is not loaded
at Z (vendor.fbd3ddffb0a9e35bbf55.bundle.js:1)
...

<p>To resolve the above error, I applied an injector in the dynamic component like this:</p>

<pre><code>export class DynamicComponent {
private injector: Injector;
private compiler: Compiler;
constructor(injector: Injector) {
    this.injector = ReflectiveInjector.resolveAndCreate(COMPILER_PROVIDERS,
        injector);
    this.compiler = this.injector.get(Compiler);
}
}

After fixing the previous error, I encountered the following issue:

vendor.fbd3ddffb0a9e35bbf55.bundle.js:1 ERROR Error: Uncaught (in promise): 
Error: No NgModule metadata found for 'l'
Error: No NgModule metadata found for 'l'
at t.FDXN.t.resolve (dynamic.module.c493eec4648091b2c9b3.chunk.js:1)
...

<p>Despite extensive research on the internet and platforms like Stack Overflow, I have been unable to find a solution that works for me.</p>

<p>The structure of my dynamic component is as follows:</p>

<pre><code>import { Component, Input, Output, ViewContainerRef, Compiler, ..., }
...
@Component({
selector: 'app-dynamic-viewer',
...
})

<p>Application environment:</p>

<pre><code>@angular/cli: 1.3.0-beta.1
node: 6.9.4
os: win32 x64
@angular version: 4.3.6

If you have any workaround solutions or insights, please feel free to share. Any input would be greatly appreciated.

angular typescript compiler-errors angular-cli aot

Answer 1

Answer №1

I encountered a similar issue before, and here is how I resolved it. Let's assume that you need to dynamically load the UserComponent with AOT compilation from your landing page.

User Module Configuration

@NgModule({
  ...
  entryComponents: [UserComponent]
})
export class UserModule {
  static entry = UserComponent
}

An example of your basic landing page:

Dynamic Component Template

<div>
    <ng-template #pageContainer></ng-template>
</div>    
<div *ngFor="let page of pageData">
    <div (click)="selectPage(page)">
        <div>{{page.title}}</div>
    </div>
</div>

When selecting a page on your landing page to load the component dynamically, provide the absolute path of the respective module. For the user page, the value of currentPage.modulePath could be something like

app/modules/pages/user/user.module#UserModule

. Finally, you can load your entry component as follows:

openWebApp(path: string) {
        this.systemJsNgModuleLoader.load(path)
            .then((moduleFactory: NgModuleFactory<any>) => {
                const entryComponent = (<any>moduleFactory.moduleType).entry;
                const moduleRef = moduleFactory.create(this.injector);    
                const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
                this.componentRef = this.pageHost.createComponent(compFactory);
            });
    }

The dynamic component implementation:

Dynamic Component Typescript

import { Component, Input, Output,   NgModuleFactory, ViewContainerRef, Compiler, ComponentFactory, ComponentFactoryResolver, ModuleWithComponentFactories, ComponentRef, ReflectiveInjector, SystemJsNgModuleLoader, OnInit, OnDestroy, ViewChild, Injector } from '@angular/core';
import { Http } from '@angular/http';
import { Observable, Subscription } from 'rxjs/Rx';    
import { COMPILER_PROVIDERS } from '@angular/compiler';
import * as _ from 'lodash';    
import { Page } from './interfaces/page';
import { PageService } from './services/page.service';
import { ActivePageService } from './services/active-page.service';

@Component({
    selector: 'app-dynamic-viewer',
    host: { 'class': 'template-wrapper dynamicviewer' },
    templateUrl: './dynamic.component.html',
    styleUrls: ['./dynamic.component.less'],
    providers: [PageService, ActivePageService]
})
export class DynamicComponent implements OnInit, OnDestroy {
    // Class properties and methods omitted for brevity
}

Answer 2

I encountered a similar issue before, and here is how I resolved it. Let's assume that you need to dynamically load the UserComponent with AOT compilation from your landing page.

User Module Configuration

@NgModule({
  ...
  entryComponents: [UserComponent]
})
export class UserModule {
  static entry = UserComponent
}

An example of your basic landing page:

Dynamic Component Template

<div>
    <ng-template #pageContainer></ng-template>
</div>    
<div *ngFor="let page of pageData">
    <div (click)="selectPage(page)">
        <div>{{page.title}}</div>
    </div>
</div>

When selecting a page on your landing page to load the component dynamically, provide the absolute path of the respective module. For the user page, the value of currentPage.modulePath could be something like

app/modules/pages/user/user.module#UserModule

. Finally, you can load your entry component as follows:

openWebApp(path: string) {
        this.systemJsNgModuleLoader.load(path)
            .then((moduleFactory: NgModuleFactory<any>) => {
                const entryComponent = (<any>moduleFactory.moduleType).entry;
                const moduleRef = moduleFactory.create(this.injector);    
                const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
                this.componentRef = this.pageHost.createComponent(compFactory);
            });
    }

The dynamic component implementation:

Dynamic Component Typescript

import { Component, Input, Output,   NgModuleFactory, ViewContainerRef, Compiler, ComponentFactory, ComponentFactoryResolver, ModuleWithComponentFactories, ComponentRef, ReflectiveInjector, SystemJsNgModuleLoader, OnInit, OnDestroy, ViewChild, Injector } from '@angular/core';
import { Http } from '@angular/http';
import { Observable, Subscription } from 'rxjs/Rx';    
import { COMPILER_PROVIDERS } from '@angular/compiler';
import * as _ from 'lodash';    
import { Page } from './interfaces/page';
import { PageService } from './services/page.service';
import { ActivePageService } from './services/active-page.service';

@Component({
    selector: 'app-dynamic-viewer',
    host: { 'class': 'template-wrapper dynamicviewer' },
    templateUrl: './dynamic.component.html',
    styleUrls: ['./dynamic.component.less'],
    providers: [PageService, ActivePageService]
})
export class DynamicComponent implements OnInit, OnDestroy {
    // Class properties and methods omitted for brevity
}

Encountering an issue in Angular 4 AOT Compilation when trying to load a Dynamic Component: Error message states that the

Answer №1

User Module Configuration

Dynamic Component Template

Dynamic Component Typescript

Similar questions

What is the best way to pause function execution until a user action is completed within a separate Modal?

Content that is displayed by default for ng-content when utilizing ngIf

How can I implement email authentication in Angular using Firebase?

Obtain the input value from a modal and receive an empty string if no value

How can I retrieve routing parameters in a Vue.js/Nuxt/TypeScript app?

Issue with the proper functionality of the this.formGroup.updateValueAndValidity() method in Angular 6

Why does Angular2 Router3 not call the Parent Route's Guard every time I navigate between its child routes?

What is the best way to create a TypeScript function similar to a 'map' in React?

Exploring the process of linking a C# REST API to an Ionic 2 mobile application

PageObjectModel Playwright, execute the locator().all() function - 'The execution context has been terminated, possibly due to navigating to another...'

DOCKER: Encounter with MongooseError [MongooseServerSelectionError] - Unable to resolve address for mongo

Angular4: Automatically disable button after it is clicked within ngFor loop

What is the reason that Gatsby's arrow function is unable to access a value from props that is calculated from a promise?

Validation Form Controls

Navigating product search in your Ionic Ecommerce App

Problems with installing ambient typings

What is preventing me from adjusting the padding of the mat-button?

Modify animation trigger when mouse hovers over

Leveraging Javascript Modules within a Typescript Vue Application

Associate text with a color from a predetermined list (JavaScript)