No NgModule metadata found for 'AppModule' (again)

[wiltzius]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Area

- [X] devkit
- [ ] schematics

Versions

node v8.11.2
npm version 5.6.0 (tho I use yarn 1.7.0)
MacOS High Sierra

Repro steps

Repro case with instructions here:

https://github.com/wiltzius/ng-toolkit/tree/angular_and_webpack_demystified_step3

The log given by the failure

app.js:861 Uncaught Error: No NgModule metadata found for 'class{}'.
at e.resolve (app.js:861)
at e.getNgModuleMetadata (app.js:839)
at e._loadModules (app.js:1065)
at e._compileModuleAndComponents (app.js:1065)
at e.compileModuleAsync (app.js:1065)
at e.compileModuleAsync (app.js:1365)
at e.bootstrapModule (app.js:220)
at Module. (app.js:1373)
at n (app.js:1)
at app.js:1

Desired functionality

The @ngtools/webpack plugin doesn't produce any runtime errors?

Mention any other details that might be useful

This is roughly the same issue that's described in issue #8798 however that issue has a lot of different complaints in it and has been closed, so I thought it would be cleaner as a new one.

[alexzuza]

You wrote in your tsconfig.json

"angularCompilerOptions": {
    "mainPath": "./app/main.ts"
}

I could be wrong but seems there is no such option here. Anyway your path is incorrect. It should be ./src/main.ts

If you open webpack.config.json you can specify mainPath there.

new AngularCompilerPlugin({
  tsConfigPath: './tsconfig.json',
  mainPath: './src/main.ts',   <==== this line
  sourceMap: true
})

Also you should inject your scripts in body instead of head when use HtmlWebpackPlugin otherwise angular won't find my-app element when bootstrapping app.

new HtmlWebpackPlugin({
  template: __dirname + '/src/index.html',
  output: __dirname + '/dist',
  inject: 'body'   <=== this line
}),

Another way to solve your issue is use angularCompilerOptions.entryModule option like:

"angularCompilerOptions": {
  "entryModule": "src/app/app.module#AppModule"
}

[wiltzius]

Ah, yes I see -- the angularCompilerOptions are not the same as the AngularCompilerPlugin options, and the mainPath can only be set in the latter not in the former. That does indeed explain it, thank you for the help! Sorry this wasn't a real bug.

[wiltzius]

Hmm, I think there's still something going on here that doesn't quite work. The minimal test case I originally came up with did indeed have the problems you pointed out, thank you. We're still having trouble in our real app trying to use AngularCompilerPlugin.

It seems related to the fact that it's a hybrid AngularJS and Angular 6 app. Here's another repro, slightly more complicated than the original but incorporating the fixes that you originally pointed out:

https://github.com/wiltzius/ng-toolkit/tree/example-breakage-2

I've tried both the entryModule approach and the mainPath approach but they both seem to have the same problem.

Is there some specific way that AngularCompilerPlugin needs to be set up to work with a hybrid AngularJS + Angular app?

Thank you again.

[alexzuza]

@wiltzius Hey again

You should go through the following steps:

1. Open webpack.config.js
   https://github.com/wiltzius/ng-toolkit/blob/5785dfa4fd61faaa7da3b745c80f1ddc910a1f4a/webpack.config.js#L38

2. Replace './src/app/app.module.ts#AppModule' with './src/app/app.module#AppModule'
   Note i removed .ts

3. Open main.ts
   https://github.com/wiltzius/ng-toolkit/blob/5785dfa4fd61faaa7da3b745c80f1ddc910a1f4a/src/main.ts#L16-L17

4. Replace

const platformRef = platformBrowserDynamic();
return platformRef.bootstrapModule(AppModule);

with

return platformBrowserDynamic().bootstrapModule(AppModule);

Don't ask me why is it so :)))

Now it's time to get the following error :)

app.js:formatted:43405 Unhandled Promise rejection: StaticInjectorError(Dr)[$injector]:
StaticInjectorError(Platform: core)[$injector]:
NullInjectorError: No provider for $injector!

[wiltzius]

Wow! Thank you, once again. That's pretty unexpected haha.

I copied that line of code about platformRef bootstrapping directly from the Angular docs:

https://angular.io/guide/upgrade-performance#specifying-a-factory-for-the-angular-module

So if a specific invocation of platformRef bootstrapping is required by @ngtools/webpack, I wonder if maybe it should be mentioned somewhere in the @ngtools/webpack docs?

[HarelM]

I would like the following code in my main.ts file work with AOT - currently it breaks:

if (environment.isCordova) {
    let onDeviceReady = () => {
        window.open = cordova.InAppBrowser.open;
        platformBrowserDynamic().bootstrapModule(ApplicationModule);
    };
    document.addEventListener("deviceready", onDeviceReady, false);
} else {
    platformBrowserDynamic().bootstrapModule(ApplicationModule);
}

I know I can do replace the main.ts when compiling to cordova, but the above still doesn't work in cordova due to the fact that it is ran inside the onDeviveReady method...
Any suggestions how to solve this?

[alexzuza]

@HarelM Will this work for you?

if (environment.isCordova) {
    let onDeviceReady = () => {
        window.open = cordova.InAppBrowser.open;
        bootstrapFn();
    };
    document.addEventListener("deviceready", onDeviceReady, false);
} else {
    bootstrapFn();
}

function bootstrapFn() {
  platformBrowserDynamic().bootstrapModule(ApplicationModule);
}

[HarelM]

@alexzuza Thanks for the tip!
I have tested it and it works.
Never the less, there's a bug here.