JeffreyDevloo commented 5 years ago

Serving with --prod breaks dynamic rendering

Serving the application with ng serve --prod breaks the dynamic rendering It's not the first nor the last tutorial with dynamic loading which is facing this issue.

Reproduction

Steps to reproduce the problem:

Clone/download the repository
Run npm install
Run ng serve --prod
Browse localhost:4200
Click the Lazy load module button:

The console logs the following error:

ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded
Error: Runtime compiler is not loaded
    at Object.qs (core.js.pre-build-optimizer.js:33579)
    at lazy-loader.service.ts:24
    at a.invoke (zone-evergreen.js.pre-build-optimizer.js:359)
    at Object.onInvoke (core.js.pre-build-optimizer.js:34201)
    at a.invoke (zone-evergreen.js.pre-build-optimizer.js:358)
    at t.run (zone-evergreen.js.pre-build-optimizer.js:124)
    at zone-evergreen.js.pre-build-optimizer.js:855
    at a.invokeTask (zone-evergreen.js.pre-build-optimizer.js:391)
    at Object.onInvokeTask (core.js.pre-build-optimizer.js:34182)
    at a.invokeTask (zone-evergreen.js.pre-build-optimizer.js:390)
    at P (zone-evergreen.js.pre-build-optimizer.js:797)
    at P (zone-evergreen.js.pre-build-optimizer.js:754)
    at zone-evergreen.js.pre-build-optimizer.js:858
    at a.invokeTask (zone-evergreen.js.pre-build-optimizer.js:391)
    at Object.onInvokeTask (core.js.pre-build-optimizer.js:34182)
    at a.invokeTask (zone-evergreen.js.pre-build-optimizer.js:390)
    at t.runTask (zone-evergreen.js.pre-build-optimizer.js:168)
    at _ (zone-evergreen.js.pre-build-optimizer.js:559)

Attempted solution

Ok. The error indicates that there is no compiler provided. Let's provide the JITCompiler to our application: Changing app.module.ts to

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

import { AppComponent } from './app.component';

export function createCompiler(compilerFactory: CompilerFactory) {
  return compilerFactory.createCompiler();
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
    {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
    {provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory]}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

We should be using the JITCompiler to compile our modules.

Problem with this solution

Now when clicking the button:

core.js.pre-build-optimizer.js:9110 ERROR Error: Uncaught (in promise): Error: No NgModule metadata found for 's'.
Error: No NgModule metadata found for 's'.
    at qw.resolve (compiler.js.pre-build-optimizer.js:20665)
    at Tw.getNgModuleMetadata (compiler.js.pre-build-optimizer.js:19794)
    at yE._loadModules (compiler.js.pre-build-optimizer.js:25582)
    at yE._compileModuleAndComponents (compiler.js.pre-build-optimizer.js:25565)
    at yE.compileModuleAsync (compiler.js.pre-build-optimizer.js:25527)
    at useClass.compileModuleAsync (platform-browser-dynamic.js.pre-build-optimizer.js:216)
    at lazy-loader.service.ts:24
    at a.invoke (zone-evergreen.js.pre-build-optimizer.js:359)
    at Object.onInvoke (core.js.pre-build-optimizer.js:34201)
    at a.invoke (zone-evergreen.js.pre-build-optimizer.js:358)
    at P (zone-evergreen.js.pre-build-optimizer.js:797)
    at P (zone-evergreen.js.pre-build-optimizer.js:754)
    at zone-evergreen.js.pre-build-optimizer.js:858
    at a.invokeTask (zone-evergreen.js.pre-build-optimizer.js:391)
    at Object.onInvokeTask (core.js.pre-build-optimizer.js:34182)
    at a.invokeTask (zone-evergreen.js.pre-build-optimizer.js:390)
    at t.runTask (zone-evergreen.js.pre-build-optimizer.js:168)
    at _ (zone-evergreen.js.pre-build-optimizer.js:559)

Any help is appreciated, I am in the same boat as you are. See https://stackoverflow.com/questions/58220367/angular-8-lazy-loading-yourself-aot-no-ngmodule-metada

juristr commented 5 years ago

🤔 strange. I'm going to take a look at this tomorrow. Because I'm using this approach of lazy loading modules as part of another library which I'm also using in production. And it works with ng 8. I'll let you know

juristr commented 5 years ago

Very strange. I was able to reproduce it as you said on this repo. I've checked and it definitely isn't an issue with Ivy. There it works without problems.

However, as I mentioned, I'm using this approach of lazy loading modules in another bigger library, and there it works 🤔. I'm currently heading to ngrome.io to give a talk, so won't have too much time investigating probably. I'll definitely give it a closer look however next week.

Meanwhile you can have a look at the library yourself (maybe you can figure out the difference 😉 ). Just go to this repo https://github.com/juristr/ngx-lazy-el. It's an NX workspace, so theres the library in the libs folder that gets published to NPM and the demo application which you can launch with yarn start (or ng serve).

You could also try to install that ngx-lazy-el library via npm i @juristr/ngx-lazy-el@1.0.0-rc.1 and see whether that works in your project.

JeffreyDevloo commented 5 years ago

Is the AoT flag set in your bigger project? I've taken a look at ngx-lazy-el and it should encounter similar problems. It's using the compiler at runtime to compile a module and retrieve its component factory, similar to what you are doing here and what I am doing in my own project.

antur84 commented 5 years ago

I'd say the answer lies in the magical naming convention required to ensure @ngtools/webpack creates a factory file for your module. See for reference: https://github.com/juristr/ngx-lazy-el/blob/d113ca2562bd3b34dbdd386dc00a58358847a478/libs/ngx-lazy-el/src/lib/tokens.ts

Any object with a property named loadChildren with a dynamic import to a module will trigger the AOT compiler to generate the factory file needed.

The reason you get Error: Runtime compiler is not loaded is that the module fails the if check during AOT mode, since it hasn't generated a factory file.

if (elementModuleOrFactory instanceof NgModuleFactory) {
     // if ViewEngine (AOT has prebuilt it)
     return elementModuleOrFactory;
}

JeffreyDevloo commented 5 years ago

Thanks @antur84. The key lies in both the naming of a property 'loadChildren'. The callback has to include (m) => m.SOME_EXPORT. If these conditions are met, the module gets compiled with AoT and the factory file is present.

I've taken your response and tagged it as my answer on Stackoverflow with a link to your comment.

EDIT: Added response comment

juristr commented 5 years ago

@antur84 ohhhh very good catch 👏. In fact, in my ngx-lazy-load library I've used the router structure for the configuration to have it work even before v8. So in v7 I "simulated" a routing config, passing in the (at that time) magic lazy loading string and thus the CLI would split it out into a separate module etc..

Very interesting, so although we have dynamic imports there's still some magic involved. I'll update my blog post and definitely bring this to the table of the Angular team, as it is really misleading. Maybe we can add some feature/fix to have the factory file properly generated. I'll update you on how that goes

patachon commented 5 years ago

Do you know any workaround for this? We are trying to migrate our app from v7 to v8 and struggling with this issue. We have some non-routable lazy-loaded module which don't load anymore because of the missing NgModuleFactory...

antur84 commented 5 years ago

I chose the simple workaround to have my own "lazy.service.ts" load method accept a parameter in the shape of {loadChildren: () => Promise<any>}.

Then I keep a (growing :)) file where I have predefined exports setup, one for each lazy component.

export const lazyComp1 = { loadChildren: () => import('path/to/module/name.module').then(x => x.LazyCompModule)};

when loading a component from some place, like on click of a button, I reference this exported property and call my lazy-service. the AOT compiler runs once at compile time and picks this pattern up properly.

import { lazyComp1} from '../lazy-components-registry';

this.lazyLoadService.load(lazyComp1).then(x ....

juristr commented 5 years ago

@antur84 @patachon @JeffreyDevloo Hey guys, I just tried to upgrade the project to Angular RC with Ivy enabled and it seems as if the issue has been resolved there. Can you verify that on your side as well?

Also, if you'd like to verify this on your project, upgrade to the RC and help find issues that might need to be resolved before v9 goes live. If you're wondering, here are the upgrade guides: https://next.angular.io/guide/updating-to-version-9. I'd be curious what the experience is for you

kamilzaharan commented 4 years ago

Have you tried adding emitDecoratorMetadata flag to complier options?

juristr / manually-lazy-load-ngmodule

Support ng serve --prod #1

Serving with --prod breaks dynamic rendering

Reproduction

Attempted solution

Problem with this solution