Error: Runtime compiler is not loaded in angular6 --prod mode

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

I was dynamically creatingn a component in angular5 .After migrating my app to angular6 it doesnt work.

export class HtmlOutletDirective implements OnChanges {
  @Input() html: string;
  constructor(private vcRef: ViewContainerRef, private compiler: Compiler, private translate: TranslateService) {
  }

  ngOnChanges() {
    const html = this.html;
    if (!html) { return; }

    @Component({
      selector: 'ccw-dynamic-component',
      template: `
        <div [innerHtml]="innerHtmlTemplate">
        </div>
        `
    })

    class DynamicHtmlComponent {
      private innerHtmlTemplate: any = '';
      constructor(private httpClient: HttpClient, private sanitizer: DomSanitizer) {
        this.httpClient.get(html, { responseType: 'text' }).subscribe((htmlContent) => {
          this.innerHtmlTemplate = sanitizer.bypassSecurityTrustHtml(htmlContent.toString());
        });
      }
    }

    @NgModule({
      imports: [CommonModule],
      declarations: [DynamicHtmlComponent]
    })

    class DynamicHtmlModule { }

    this.compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule)
      .then(factory => {
        const compFactory = factory.componentFactories.find(x => x.componentType === DynamicHtmlComponent);
        const compRef = this.vcRef.createComponent(compFactory, 0);
      });


  }

This used to generate a component for me based on path specified.It used to work perfectly in dev/prod both.However after updating the app to angular6. It is not working in production.
It gives me the below error:
Generic error: Runtime compiler is not loaded
logger.js:47 Error stack trace: Error: Runtime compiler is not loaded
at Le (core.js:3286)
at t.compileModuleAndAllComponentsAsync (core.js:3346)
at l.ngOnChanges (html-outlet.directive.ts:52)

Expected behavior

the dynamic component should load

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Angular version: 6.0.0


Browser:
- [x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.9.1
- Platform:  Windows

Others:

facing same issue

It sounds like you were running your application in the JIT mode in v5 but then switched over to the AOT mode in v6. The runtime compiler is not available and has never been available in the AOT mode unless you brought it yourself.

Can you please verify that you are bootstrapping your application with https://angular.io/api/core/PlatformRef#bootstrapModule (JIT mode) rather than https://angular.io/api/core/PlatformRef#bootstrapModuleFactory (AOT mode) or if you are using AngularCLI that you have AOT mode turned on in your angular.json, example:

angular/aio/angular.json

Line 21 in 23a98b9

"aot": true,

Do not and i repeat do not import your feature modules in app module and also when addressing feature modules in your routes use this format, this can save you several hours buddy

{ path: 'auth', loadChildren: './modules/auth/auth.module#AuthModule' },
{ path: 'ingestion', loadChildren: './modules/ingestion-dashboard/ingestion-dashboard.module#IngestionDashboardModule'},

Do not use function signature

It sounds like you were running your application in the JIT mode in v5 but then switched over to the AOT mode in v6. The runtime compiler is not available and has never been available in the AOT mode unless you brought it yourself.

Can you please verify that you are bootstrapping your application with https://angular.io/api/core/PlatformRef#bootstrapModule (JIT mode) rather than https://angular.io/api/core/PlatformRef#bootstrapModuleFactory (AOT mode) or if you are using AngularCLI that you have AOT mode turned on in your angular.json, example:

angular/aio/angular.json

Line 21 in 23a98b9

"aot": true,

Hi.
I got same problem.
so we need to remove this line or set as"aot": falst?

@IgorMinar

Do not and i repeat do not import your feature modules in app module and also when addressing feature modules in your routes use this format, this can save you several hours buddy
{ path: 'auth', loadChildren: './modules/auth/auth.module#AuthModule' },
{ path: 'ingestion', loadChildren: './modules/ingestion-dashboard/ingestion-dashboard.module#IngestionDashboardModule'},
Do not use function signature

The same was happening to me. @IgorMinar function signature breaks the aot build in prod mode. Should the issue be reopened?

@SHANURRAHMAN

Do not and i repeat do not import your feature modules in app module and also when addressing feature modules in your routes use this format, this can save you several hours buddy
{ path: 'auth', loadChildren: './modules/auth/auth.module#AuthModule' },
{ path: 'ingestion', loadChildren: './modules/ingestion-dashboard/ingestion-dashboard.module#IngestionDashboardModule'},
Do not use function signature

Same thing happened to me. Nice catch @SHANURRAHMAN

Not work in angular7. Still get Runtime compiler is not loaded with lazy loading in prod mode. Is there any solution for ng7?

Not work in angular7. Still get Runtime compiler is not loaded with lazy loading in prod mode. Is there any solution for ng7?

Same here been investigating this for over 20 hours, I tried most of the suggestion in many forums none of them seem to work :'(

@sandisototo

@sandisototo ... there are issues already which describe how to do it. I used that in Angular 5 and 6. Not sure about Angular 7, I didn't test it with that.

@mlc-mlapis

@mlc-mlapis I have my app-routing-module.ts setup like this for all my routes( By the way I tried loadChildren: () => HomeModule) also)

I get the same error:

@sandisototo

@sandisototo
Using loadChildren: () => HomeModule requires jit compiler.
If you have a problem with loadChildren property that uses string then please create small reproduction

@alexzuza

@alexzuza What do you mean by a small reproduction?

@sandisototo

@sandisototo ... as I said before ... search Angular issues for JitCompiler ... you should find how to go ...

The first step is to import:

import { COMPILER_OPTIONS, CompilerFactory, Compiler } from '@angular/core';
import { JitCompilerFactory } from '@angular/platform-browser-dynamic';

@sandisototo

@sandisototo I mean you could create a github repository with a minimum amount of code that uses Angular 7 and shows your issue. This will help us to investigate.

Just sharing my rare experience, as it can help someone else.

I had two submodules with the same path ./app/apps.module#AppsModule in two different modules.
Due to a known issue in angular angular/angular-cli#10128, I couldn't get this dynamically loaded using LoadChildren.

I tried to use LoadChildrenCallback as a work around. But as I use AOT in production, I couldn't get it done as well.

The workaround i did was to load the SubModules by navigating to the parent folder.
ie in my module storage I added the submodule apps as below

const routes: Routes = [
    { path: 'apps', loadChildren: "../storage/apps/apps.module#AppsModule" },
];

A suggestion for CLI - should flag-up when we build using --aot or --prod flag

Do not and i repeat do not import your feature modules in app module and also when addressing feature modules in your routes use this format, this can save you several hours buddy
{ path: 'auth', loadChildren: './modules/auth/auth.module#AuthModule' },
{ path: 'ingestion', loadChildren: './modules/ingestion-dashboard/ingestion-dashboard.module#IngestionDashboardModule'},
Do not use function signature

Just came across this issue but strangely in the official docs it's refering to use arrow function and not mentioning any problems with aot, see Lazy Loading Feature Modules .

I remember some time ago that the official docs also stated to use lazy loading syntax like yours, but it looks like it has changed since.

Changed in Angular 8. Angular 7 docs still has that: https://v7.angular.io/guide/lazy-loading-ngmodules

I'm confused. The deprecated string syntax is the only one that works in Angular 7 when lazy loading and using AOT.

Is it a bug that the function style is not working in this mode and is that fixed in Angular 8?

In order to eagerly load modules with a function reference when AOT enabled for Angular 7, you need to create an NgFactory module as you can see from this PR - #13909.

A working solution for me was creating a clone of my module and adding .ngfactory postfix to the filename and also adding NgFactory postfix to the module class name.

import { FirstPageModuleNgFactory } from '../pages/first-page.module.ngfactory';
import { SecondPageModuleNgFactory } from '../pages/second-page.module.ngfactory';

export function loadFirstPageModule() {
    return FirstPageModuleNgFactory;
}

export function loadSecondPageModule() {
    return SecondPageModuleNgFactory;
}

const routes: Routes = [
    {
        path: '',
        component: HomePageComponent,
        children: [
            {
                path: '',
                redirectTo: 'first',
                pathMatch: 'full',
            },
            {
                path: 'first',
                loadChildren: loadFirstPageModule,
            },
            {
                path: 'second',
                loadChildren: loadSecondPageModule,
            },
        ],
    },
];

This article takes a deep dive into what the issues are for pre-Angular 8 concerning lazy-loading and how it can be fixed: https://blog.angularindepth.com/automatically-upgrade-lazy-loaded-angular-modules-for-ivy-e760872e6084

removing AOT compilation on SSR for lazy loading

I am also using this method to add dynamic component & getting this error in Angular 8. How can i resolve it. Is there any way to make it work with aot?

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

Error: Runtime compiler is not loaded in angular6 --prod mode #23878

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Error: Runtime compiler is not loaded in angular6 --prod mode #23878

Description

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Activity

uma075 commented on May 15, 2018

IgorMinar commented on May 22, 2018

codebanesr commented on Sep 20, 2018

cquezpro commented on Oct 31, 2018

marianobarbuscio commented on Dec 2, 2018

reisandbeans commented on Jan 5, 2019

tzjoke commented on Feb 26, 2019

sandisototo commented on Feb 26, 2019

mlc-mlapis commented on Feb 26, 2019

sandisototo commented on Feb 26, 2019

alexzuza commented on Feb 26, 2019

sandisototo commented on Feb 26, 2019

mlc-mlapis commented on Feb 26, 2019

alexzuza commented on Feb 26, 2019

farajfarook commented on Mar 5, 2019

puravupadhyay commented on May 31, 2019

knnhcn commented on Jun 26, 2019

puravupadhyay commented on Jun 26, 2019

rcollette commented on Jul 12, 2019

onderceylan commented on Jul 25, 2019

tracyalison11 commented on Aug 26, 2019

akvaliya commented on Sep 20, 2019

angular-automatic-lock-bot commented on Oct 21, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions