Runtime errors when using buildOptimizer. JIT compilation broken.

[jcgillespie]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

I don't know. I would guess this is a recent thing arising from the introduction of AOT, Ivy, and the build optimizer.

Description

We faced an issue with an application we were developing where the legacy application had content stored in a database. This content is essentially an Angular template and could not be known at compile-time. The situations and constraints in the project led us to create dynamic components/modules on the fly. This worked beautifully in development and then failed when deployed to production.

In diagnosis, this works as long as the build optimizer is NOT enabled. Having a production build, with the optimizer, but without the buildOptimizer, enabled still works.

I believe I've seen unofficially in other issues that using AOT and JIT together, but since it works with the buildOptimizer disabled, this feels like an issue with the optimizer.

🔬 Minimal Reproduction

Here is a reproduction repo
Once you've npm install'd, you can run the repro this way.
ng serve <-- working
ng serve --configuration=production <--working
ng serve --configuration=production-build-optimized <-- broken.
The only difference between the configurations is the buildOptimizer setting.
You can run all three side-by-side-by-side by adding different --port values.

In a working build, you'll see an additional "Runtime Hello!" message as well as the Angular logo. When broken, those elements will be missing and there will be a console error.

If this isn't a bug, that error message is misleading for this situation.. :)

🔥 Exception or Error

main.7000374ef126bad8069c.js:1 ERROR Error: Uncaught (in promise): Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
    at Ae (main.7000374ef126bad8069c.js:1)
    at Function.get (main.7000374ef126bad8069c.js:1)
    at St (main.7000374ef126bad8069c.js:1)
    at new Af (main.7000374ef126bad8069c.js:1)
    at ud (main.7000374ef126bad8069c.js:1)
    at dd (main.7000374ef126bad8069c.js:1)
    at e.md [as compileModuleAndAllComponentsAsync] (main.7000374ef126bad8069c.js:1)
    at e. (main.7000374ef126bad8069c.js:1)
    at Generator.next ()
    at main.7000374ef126bad8069c.js:1
    at T (polyfills.a8d522dff2c1a5c4b9db.js:1)
    at polyfills.a8d522dff2c1a5c4b9db.js:1
    at a (main.7000374ef126bad8069c.js:1)
    at l.invoke (polyfills.a8d522dff2c1a5c4b9db.js:1)
    at Object.onInvoke (main.7000374ef126bad8069c.js:1)
    at l.invoke (polyfills.a8d522dff2c1a5c4b9db.js:1)
    at i.run (polyfills.a8d522dff2c1a5c4b9db.js:1)
    at polyfills.a8d522dff2c1a5c4b9db.js:1
    at l.invokeTask (polyfills.a8d522dff2c1a5c4b9db.js:1)
    at Object.onInvokeTask (main.7000374ef126bad8069c.js:1)

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.1.4
Node: 13.11.0
OS: darwin x64

Angular: 9.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.4
@angular-devkit/build-angular     0.901.4
@angular-devkit/build-optimizer   0.901.4
@angular-devkit/build-webpack     0.901.4
@angular-devkit/core              9.1.4
@angular-devkit/schematics        9.1.4
@ngtools/webpack                  9.1.4
@schematics/angular               9.1.4
@schematics/update                0.901.4
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0
    

Anything else relevant?

[karwank]

I'm facing a similar issue. The funny thing is that when I do "ng serve" and having "Live Development Server" started I change the name of "AppModule" to a different name, for example "AppsModule" in both files (app.module.ts and main.ts) it starts to work and vendor.js containst compiler.

[jcgillespie]

I'm facing a similar issue. The funny thing is that when I do "ng serve" and having "Live Development Server" started I change the name of "AppModule" to a different name, for example "AppsModule" in both files (app.module.ts and main.ts) it starts to work and vendor.js containst compiler.

@karwank I'm not sure I'm following. You renamed the module and it worked? That didn't work for me, but I might be misunderstanding your steps

[karwank]

It may be related with: #11439

[jcgillespie]

It may be related with: #11439

Possibly. I looked at several other issues (many of which are linked in #11439), but this seemed different because it doesn't involve any third-party libraries. This is all just straight Angular functionality. I would agree with a lot of that discussion in 11439: some granularity of control over which optimizations are run would be nice. Better logging or transparency to what IS happening seems like must-have.

[karwank]

After spending a few days on this problem I have found this post: angular/angular#23916 (comment). And point 3 is very sobering. I don't know exactly what you guys want to achieve. But I realized that we only need to have a way to create a dynamic contents which use already existing elements (components). For example:

<div>
  <p>This is a custom page with previously defined elements</p>
  <app-template-contact-form></app-template-contact-form>
  <app-template-map></app-template-map>
</div

I realized that I don't need to use JIT for this purpose. Components can be lazy loaded just like Kevin Kreuzer had shown here: https://medium.com/angular-in-depth/lazy-load-components-in-angular-596357ab05d8. So after analyzing these examples: https://github.com/LayZeeDK/ivy-dynamic-rendering, https://stackblitz.com/angular/ovpljlvlyxo, I have written my own service:

import {
  Injectable,
  Injector,
  ɵrenderComponent as renderComponent,
  Renderer2,
  ComponentFactoryResolver,
  ViewContainerRef
} from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DynamicService {
  
  public renderer: Renderer2;
  public injector: Injector;

  constructor(
    private cfr: ComponentFactoryResolver,
  ) {}

  loadComponentToRef(componentName: string, target: ViewContainerRef) {
    let targetRendererMethod = this.renderComponentToRef;
    this.loadComponent(componentName, target, targetRendererMethod);
  }

  loadComponentToNode(componentName: string, target: HTMLElement) {
    let targetRendererMethod = this.renderComponentToNode;
    this.loadComponent(componentName, target, targetRendererMethod);
  }

  async loadComponent(componentName: string, target: HTMLElement | ViewContainerRef, targetRendererMethod: any) {
    
    let renderMethod = function(ComponentType: any, target: HTMLElement | ViewContainerRef) {
      let componentFactory = this.cfr.resolveComponentFactory(ComponentType);
      return targetRendererMethod.call(this, componentFactory, target)
    }

    switch (componentName) {
      case 'app-template-search':
        await import('@modules/template/search/search.component').then(esModule => { renderMethod.call(this, esModule.default, target) });
        break;
      case 'app-template-map':
        await import('@modules/template/map/map.component').then(esModule => { renderMethod.call(this, esModule.default, target) });
        break;
      default:
        break;
    }

  }

  renderComponentToNode(componentFactory: any, node: HTMLElement) {
    let compRef = componentFactory.create(this.injector)
    let parent = this.renderer.parentNode(node);
    this.renderer.insertBefore(parent, compRef.location.nativeElement, node)
    this.renderer.removeChild(parent, node);
    compRef.changeDetectorRef.detectChanges();

    return compRef
  }

  renderComponentToRef(componentFactory: any, ref: ViewContainerRef) {
    let { instance } = ref.createComponent(componentFactory, null, this.injector);
  }

}

[alan-agius4]

BuildOptimizer, indeed cannot be used with JIT code.

This also seems related to angular/angular#36255 and angular/angular#37216

In your case @jcgillespie, you can avoid using JIT mode and using above approach.

[maxtacco]

@alan-agius4 We are in the same boat as @jcgillespie. The approach described by @karwank is well-known but not viable when you have hundreds of possible template variations.