IVY Error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class

[stevethemacguy]

🐞 bug report

Affected Package

The issue might be related to package

ng-packagr

Is this a regression?

Yes, the previous version in which this bug was not present was: 8.2.14

Description

Possible duplicate of #35331, #34983, #35255, and #30972, but I'm including a minimal reproduction repo. Building with IVY throws the following error (see the Exception or Error section)

Our real app, which uses a shared module, throws a slightly different error:

Running the ng-packagr postinstall script adds "ivy_ngcc" folders to some of our other dependencies, but does not touch the angular2-highcharts library. The library does not use the Angular Package Format, which might be part of the problem, but I'm not the library's author and have never built an ES6/angular library myself, so I'm just guessing at a potential fix.

Unfortunately, the library is no longer maintained, but it is one of our app's core/major dependencies. I also attempted to rebuild the library from the source files after adding the following to the library's package.json file:

"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
"ngPackage": {
  "lib": {
    "entryFile": "index.d.ts"
  }
},

But this produces the following error:

There is no "files" array provided in the library's package.json file, so I'm not sure what the error is referring to. I fixed all Angular 9-related issues prior to re-building the library, so I assume it has to do with the way it's packaged or how it exports the modules/components.

🔬 Minimal Reproduction

StackBlitz
https://angular-ivy-cant-be-resolved.stackblitz.io

GitHub repo in case StackBlitz isn't working:
https://github.com/stevethemacguy/angular-ivy-cant-be-resolved-bug

Steps to Reproduce

1. Download or clone the repo
2. npm install
3. ng build (or ng serve)

Expected behavior: IVY builds the app
Actual behavior: IVY displays an error.

🔥 Exception or Error

ERROR in node_modules/angular2-highcharts/dist/index.d.ts:8:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class

8 export declare class ChartModule {

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.2
Node: 10.15.3
OS: darwin x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.2
@angular-devkit/build-angular     0.900.2
@angular-devkit/build-optimizer   0.900.2
@angular-devkit/build-webpack     0.900.2
@angular-devkit/core              9.0.2
@angular-devkit/schematics        9.0.2
@angular/cli                      9.0.2
@ngtools/webpack                  9.0.2
@schematics/angular               9.0.2
@schematics/update                0.900.2
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant?
After disabling IVY, our real app successfully builds in AOT (prod mode) using Angular 9.0.1, so the issue seems to be an Angular regression that is un-related to our app (except for the angular2-highcharts dependency). Our app uses a custom angular/webpack build. It does not use Angular CLI.

[robertlimanto]

any idea on this error?

[houdass]

Hi guys, I figured out what going wrong, I had a Angular 8 project (containing a library project) that I have upgraded to Angular 9 (with a lib also: ng generate library core, I created at first a new angular 9 project to compare the differences with my project made with ng 8, i figure out that there is some things missing, here is the steps I followed:

• Delete node_modules
• Delete dist folder
• In the Angular 9 project lib there is a new file called: tsconfig.lib.prod.json

{
  "extends": "./tsconfig.lib.json",
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

• In your angular.json add the following:

{
  ...
  "projects": {
     ...
     "configurations": {
            "production": {
              "tsConfig": "projects/core/tsconfig.lib.prod.json"
             }
      }
  ...
  }
}

• run ng build --prod, and everything will work :D

PS: in this case the library is called "core"

[atakangah]

@houdass I want to try your fix. But, I cannot see any

tsconfig.lib.prod.json

file. And I am not building a library. My NG6002 error is coming from primeNG library. A component library that I am using to build my app. I am lost as to the fix you are proposing. Please explain further.

[gkalpak]

Thx for sharing your solution, @houdass. However, yours seems to be different issue that than the one reported here.

[AliAdravi]

Rebuild the application (ng build) and and use ng start, everything work but
could not show anything in browser.
Log show: Uncaught Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global $localize() function that needs to be loaded.
Please run ng add @angular/localize from the Angular CLI.

so run ng add @angular/localize
and everything started working, wow

[ImmutableVector]

Not sure this will provide anyone relief or assist with figuring out what the root cause is, but cleaning my cache seemed to help resolve the issue.
npm cache clean --force

The only other step that I did was I ran a --prod serve after the clean.
ng serve --prod

I do not know if the clean or --prod thing had anything to do with fixing it for me, or if maybe the combination of them did anything, but I can no longer repro this bug in my project. Note, I can run without --prod and still have successful builds going forward.

Other than that, I saw this first when adding HttpClientModule as I was going through the tour of heroes tutorial.

[flash-me]

Hi @stevethemacguy ,

I just encountered the same issue and was able to track it down to one property in the tsconfig.json:
Ensure that the tsconfig.json of your library has set "importHelpers": true

What I tried with importHelper in their corresponding tsconfig.json:

Angular Library	Consuming App	Result
true	true	works!
true	false	works!
false	true	fails!
false	false	fails!

Cheers
flash ⚡️

[FranzZemen]

When get NG6002 with a module issue as above, delete the top node_modules in the workspace (where you should have installed it), and rebuild libraries/apps.

Seems like on first build, output is added to node_modules that gets occasionally confused.

This 'trick" works for me with problems incrementally added angular material modules to a library and app.