Problem with compiling a project using version 5.1.2 in Angular with 5.1.3 version. ERROR in Error: No NgModule metadata found for ‘AppModule’.

[Bloodcast69]

Versions

Angular CLI: 1.6.2
Node: 6.11.4
OS: linux x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

If you have some package like angular material for some older version, and angular with the newest version, you could try to reproduce the problem.

Observed behavior

While there is mismatch in Angular version (Angular and project versions), console throws a compile error pasted below.

Desired behavior

If there is a version mismatch, Angular compiles correctly and throws no errors during compilation process.

Mention any other details that might be useful (optional)

Hello guys,

We have package installed by npm. Package dependency is set to 5.1.2. Now, when we try to use it on a fresh project (using Angular 5.1.3) we are getting following error:

Paste the error code below:

ERROR in Error: No NgModule metadata found for ‘AppModule’.
at NgModuleResolver.resolve (/Users/michaelhe/mydev/mdbpro-ng5app/node_modules/@angular/compiler/bundles/compiler.umd.js:20276:23)
at CompileMetadataResolver.getNgModuleMetadata (/Users/michaelhe/mydev/mdbpro-ng5app/node_modules/@angular/compiler/bundles/compiler.umd.js:15229:60)
at visitLazyRoute (/Users/michaelhe/mydev/mdbpro-ng5app/node_modules/@angular/compiler/bundles/compiler.umd.js:31090:104)
at AotCompiler.listLazyRoutes (/Users/michaelhe/mydev/mdbpro-ng5app/node_modules/@angular/compiler/bundles/compiler.umd.js:31058:20)
at AngularCompilerProgram.listLazyRoutes (/Users/michaelhe/mydev/mdbpro-ng5app/node_modules/@angular/compiler-cli/src/transformers/program.js:156:30)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/Users/michaelhe/mydev/mdbpro-ng5app/node_modules/@angular/compiler-cli/src/ngtools_api.js:44:36)
at AngularCompilerPlugin._getLazyRoutesFromNgtools (/Users/michaelhe/mydev/mdbpro-ng5app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:248:66)
at Promise.resolve.then.then (/Users/michaelhe/mydev/mdbpro-ng5app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:562:50)
at process._tickCallback (internal/process/next_tick.js:109:7)

webpack: Failed to compile.

However, if we change Angular version within project package.json to 5.1.2 it works like a charm. We thought that it's caused by newest version 5.1.3, however we have tested our package against 5.1.3 and it works like a charm. So as a result if project and package versions are same (i.e. both use 5.1.3 OR both use 5.1.2) there is no issue with compilation. However as soon as there is version mismatch and module is getting different version installed within Node_modules/package_name/node_modules we are getting error mentioned above.

We know that there is some similar case posted on GitHub ( #8798 ). There are no fix for our problem, but it's quite similar.

You can read topic for this case on our forum ( https://mdbootstrap.com/support/mdb-angular-pro-startup-issue/ ).

Best Regards,
Damian from mdbootstrap.com

[clydin]

Angular version need to be consistent throughout the project. This is the reason peer dependencies are used for libraries.
The issue here is in the library's package.json:

  "peerDependencies": {
  "@angular/animations": "5.0.0 - 5.1.2",
  "@angular/common": "5.0.0 - 5.1.2",
  "@angular/compiler": "5.0.0 - 5.1.2",
  "@angular/core": "5.0.0 - 5.1.2",
  "@angular/forms": "5.0.0 - 5.1.2",

This is saying that the package is only usable up to version 5.1.2. Unless the library is using internal APIs, there's no reason to do this. Angular follows semver. These should be set to the minimum Angular version required based on the features used by the library. If Angular 5.0.0 contains the required minimum feature set then ^5.0.0 would be the appropriate value.

[Bloodcast69]

We've checked our library, and we've 100% sure that it will works fine in 5.0.0 - 5.1.2 version. For upper version we're not sure until we're not test it. So we need to secure our package.json that our library uses only this 5.0.0 - 5.1.2 versions of Angular. Other version could works good but we're not sure about that.

[clydin]

In that case, you'll need to closely monitor Angular releases and generate a new version of the package for every release. The user of the library should receive a peer dependency warning upon install if the versions mismatch so the user will know that something is wrong. You can also restrict the peer dependencies to "~5.1.0" to at least allow patch versions which only contain bug fixes.

However, if this is the only package then there shouldn't be multiple versions of Angular being installed as only peer dependencies are used. Is the Pro version using different dependencies?

[Bloodcast69]

Pro version uses same dependencies like free. We will take a deep look in few next days to this case.

[clydin]

I'm going to close this then; as from the CLI side everything appears to be working as intended. However, feel free to re-open if there are additional concerns.

[angular-automatic-lock-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.}