Angular-cli: Latest @ngtools/webpack breaks compilation - Uncaught Error: No NgModule metadata found for 't'.

[ChrisDalley]

Bug Report or Feature Request (mark with an x)

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

Versions.

"Node": "7.2.1"
"NPM": "4.0.5"
"@ngtools/webpack": "1.3.3"

Repro steps.

Hi Angular CLI team! I have been using @ngtools/webpack to build and compile my angular universal app based on @fulls1z3 's ng-seed/universal repo.

With versions 1.3.3 and before, our builds have been working fine but since the latest releases 1.4.2, we have been getting errors raised when running our apps webpack bundles. See related issue ng-seed/universal#29.

Webpack/Node does not error during the build process but upon running the app, we get this in the console. We have reverted back to 1.3.3 whilst we look for a fix to this but wanted to raise it to see if you can help.

Uncaught Error: No NgModule metadata found for 't'.
    at t.resolve (app.3be5665….bundle.js:1)
    at t.getNgModuleMetadata (app.3be5665….bundle.js:1)
    at t._loadModules (app.3be5665….bundle.js:1)
    at t._compileModuleAndComponents (app.3be5665….bundle.js:1)
    at t.compileModuleAsync (app.3be5665….bundle.js:1)
    at e._bootstrapModuleWithZone (app.3be5665….bundle.js:1)
    at e.bootstrapModule (app.3be5665….bundle.js:1)
    at r (app.3be5665….bundle.js:1)
    at r (app.3be5665….bundle.js:1)
    at Object.163 (app.3be5665….bundle.js:1)

Mention any other details that might be useful.

ng-seed/universal

[filipesilva]

@hansl can you take a look?

[Alekcei]

I also have this problem,
With simultaneousworked Aot and jit

[Alekcei]

I also have this problem,
With simultaneousworked Aot and jit

[buu700]

This might be related to or share a root cause with my issue here: https://github.com/clbond/angular-ssr/issues/44

In that instance, @clbond concluded that the error was probably from multiple instances of reflect-metdadata being loaded into this SSR process, which was/is most likely being caused by my project's Docker image having another node_modules accessible to the rendering script (at a higher level in the filesystem).

[webdeveloperneeraj]

I am also getting this error
Please provide any solution to fix it.

[fulls1z3]

@ChrisDalley @filipesilva @Alekcei @buu700 @webdeveloperneeraj @hansl I wanted bring some information to this issue, as my name and repo was mentioned earlier.

It was working fine with @ngtools/webpack v1.3.3, when we were working with a single main.ts which imports the AppModule and using the platformBrowserDynamic().bootstrapModule(AppModule) function to bootstrap the app.

After upgrading to v1.4.0 ~ v1.5.5 the AoT compilation was completing without a problem. However, when we tried to serve the app (using to home/root URL), the app was stuck at the loading screen with an error message as below:

Uncaught Error: No NgModule metadata found for 't'.

Well, this message contains no relevant information about t, because the bundle was minified using UglifyJs. Turned it off, and then the contents of t changed exactly into:

Uncaught Error: No NgModule metadata found for 'AppModule'.

It made a sense, and I added main-aot.ts for AoT compilation which imports the AppModuleNgFactory created in the memory during compilation, and using the platformBrowserDynamic().bootstrapModuleFactory(AppModuleNgFactory) function to bootstrap the app.

As a result, the compilation and serving the app were both successful 🎉

I don't suggest anyone this workaround as a complete solution, but I hope it could help people to correct their compilation and supply some idea to the Angular team.

---

main.ts

// angular
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// libs
import { bootloader } from '@angularclass/bootloader';

// app
import { AppModule } from './app/app.module';

export function main(): any {
  return platformBrowserDynamic().bootstrapModule(AppModule);
}

// HMR support
if (module['hot'])
  module['hot'].accept();

bootloader(main);

main-aot.ts

// angular
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// libs
import { bootloader } from '@angularclass/bootloader';

// app
import { AppModuleNgFactory } from './app/app.module.ngfactory';

export function main(): any {
  return platformBrowserDynamic().bootstrapModuleFactory(AppModuleNgFactory);
}

bootloader(main);

P.S.: I know these are not the entry points contain add-on's such as HMR, bootloader, etc. which were nor suggested neither supported by the official documentation of Angular. But at least, it gives you a more or less an idea how they look like.

[CanKattwinkel]

Uncaught Error: No NgModule metadata found for function(){}

I recently run into this issue when upgrading a Setup with HMR to Angular 5 rc6 and CLI to 1.5 rc3. I could resolve the issue by removing access to module[ 'hot' ].

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
  if (module[ 'hot' ]) {
    hmrBootstrap(module, bootstrap);
  } else {
    console.error('HMR is not enabled for webpack-dev-server!');
    console.log('Are you using the --hmr flag for ng serve?');
  }
} else {
  bootstrap();
}

was changed to

export const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
  hmrBootstrap(module, bootstrap);
} else {
  bootstrap();
}

I'm leaving this here since a google search brought myself here

[hansl]

Closing this as answered/fixed.

[gvmohzibat]

I had to remove the package-lock.json and run npm install again to solve the issue. I've also fixed it by removing node_modules before.

[angular-automatic-lock-bot[bot]]

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._}