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

Executing a function simultaneously in two separate tabs using Angular

Angular is throwing an error stating that the type '{ }[]' cannot be assigned to the type '[{ }]'

What methods are available to enhance the appearance of a string with TypeScript Angular in Python?

Unable to find the required dependency: peer tslint@ "^5.0.0 || ^6.0.0" in [email protected] node_modules/codelyzer development codelyzer@ "^5.1.2" from the main project directory

Incorporate an HTML span element with an onclick function bound in Angular framework

Having trouble retrieving data from a JSON file within an Angular application when utilizing Angular services

Can you explain the purpose and functionality of the following code in Typescript: `export type Replace<T, R> = Omit<T, keyof R> & R;`

Problems encountered while building TypeScript on Azure's Hosted Agent

Error: Unable to access the 'DASH' property as it is undefined

Angular 2's Implementation of Hierarchical Dependency Injection

Struggling to locate the module in React Native with TypeScript configuration

Navigating Angular: Strategies for Managing Nested FormGroups in the HTML Template

How to vertically align Material UI ListItemSecondaryAction in a ListItem

The variables declared within the Promise constructor are being identified as undefined by Typescript

The model fails to update when a blur event occurs

Angular8 Chart.js customizes the Y axis tick labels

When utilizing useRef and useCallback in React, the output is visible in the console log but does not appear on the page

Replacing text with new content when text is stored in a separate file

React Typescript - Unexpected character ',' encountered at line 1005

Learn how to effortlessly move a file into a drag-and-drop area on a web page with Playwright