Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
stevethemacguy opened this issue Feb 13, 2020 · 77 comments
Labels
area: compiler Issues related to `ngc`, Angular's template compiler
Milestone

Comments

@stevethemacguy
Copy link

stevethemacguy commented Feb 13, 2020

🐞 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)

StackBlitz Error

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

Concise 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:

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
Copy link

any idea on this error?

@houdass

This comment has been minimized.

@atakangah

This comment has been minimized.

@gkalpak
Copy link
Member

gkalpak commented Feb 14, 2020

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

@AliAdravi

This comment has been minimized.

@ImmutableVector
Copy link

ImmutableVector commented Feb 16, 2020

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
Copy link
Contributor

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
Copy link

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.

@flash-me
Copy link
Contributor

flash-me commented Feb 16, 2020

Ok, more details on this!

  • So setting "importHelpers": true solves the problem always.
  • When setting to false not only your library will break. Also I observed that the bundle size will explode

I thought setting importHelpers to false would cause the typescript compiler to include the helper methods into the bundle. And indeed this is happing. But not only once!!

A quick look into the created bundles reveals following with importHelpers set to false:

UMD Bundle

image

FESM2015 Bundle

image

Maybe this is also the reason why the bundle sizes grew?

Cheers
flash ⚡

@paksouse
Copy link

Hello,
I have the same problem in my poject "NX monorepo project",

  • "importHelpers": true didnot help

  • "enableIvy": false for the libs and "enableIvy": true for the demo project that inject the libs dinot work either.

Any suggestions please ^^
regards.

@FranzZemen
Copy link

FranzZemen commented Feb 17, 2020 via email

@rafastellato
Copy link

Hello,

Same problem here. I tried to delete node_modules and reinstall packages again but didn't work. The "importHelpers" for me was true already.

I need start a new angular project and I am thinking if I should start with Angular 9

@paksouse
Copy link

@FranzZemen thanks for your suggestion but didnot works.
ERROR in Failed to compile entry-point @project/lib (es2015 as esm2015) due to compilation errors:
libs/.../...module.ts:7:14 - error NG6002: Appears in the NgModule.imports of testModule, but could not be resolved to an NgModule class

@rafastellato
Copy link

For me, disable Ivy works! (To disable Ivy, you need add a flag "enableIvy" false in the file tsconfig.app.json. More information here: https://angular.io/guide/ivy)

But, I dont know the consequences of doing this, and when I would can enable again.

@flash-me
Copy link
Contributor

flash-me commented Feb 17, 2020

@paksouse and you are sure that you enabled importHelpers for your library? That's strange because at work I tried even more library repositories and this definitely solved the issues.. Hm.

and as @rafastellato mentioned, for libraries ivy must be disabled, which is already told in the docs, though.
And with 9.x.x ivy is enabled by default, which means existing libs must set it to false explicitly.

Another point: For libraries installed by npm, you can't really set importHelpers to true, so you must struggle around with deleting node_modules, if it helps.

@Embraser01
Copy link

For those who "importHelpers": true didn't solve the problem and are using yarn workspaces:

You need to specify the node_module folder in the postinstall script.

Ex: If you have a workspace with the angular project in packages/client/package.json you have to set the postinstall script to:
ngcc --source ../../node_modules --properties es2015 browser module main --first-only --create-ivy-entry-points

For more options you can go [here].(https://github.com/angular/angular/blob/master/packages/compiler-cli/ngcc/main-ngcc.ts#L20)

@stevethemacguy
Copy link
Author

stevethemacguy commented Feb 17, 2020

Thank you for the responses. Adding "importHelpers" and deleting node modules has no effect. My (real) application does not use Angular CLI, so CLI solutions won't necessarily work. It's more likely an issue with how the angular2-highcharts library is exporting modules/classes, which is something I can't control.

@paksouse
Copy link

thank you for your answers @Embraser01 @flash-me
Its works for me localy even with a huge warning about "typescript.js 5203:41-60
Critical dependency: the request of a dependency is an expression" but i get the same error "NG6002" in the jenkins server!

gkalpak added a commit to gkalpak/angular that referenced this issue Feb 18, 2020
In ES2015 and ES5, class identifiers may have aliases. Previously, the
`NgccReflectionHost`s recognized the following formats:
- ES2015: `const MyClass = MyClass_1 = class ...`
- ES5:
    ```js
    var MyClass = (function () {
      function InnerClass() {}
      InnerClass_1 = InnerClass;
      ...
    }());
    ```

In addition to the above, this commit adds support for recognizing an
alias outside the IIFE in ES5 (which was previously not supported):
`var MyClass = MyClass_1 = (function () { ... }());`

Fixes angular#35399
gkalpak added a commit to gkalpak/angular that referenced this issue Feb 18, 2020
In ES5 and ES2015, class identifiers may have aliases. Previously, the
`NgccReflectionHost`s recognized the following formats:
- ES5:
    ```js
    var MyClass = (function () {
      function InnerClass() {}
      InnerClass_1 = InnerClass;
      ...
    }());
    ```
- ES2015:
    ```js
    let MyClass = MyClass_1 = class MyClass { ... };
    ```

In addition to the above, this commit adds support for recognizing an
alias outside the IIFE in ES5 classes (which was previously not
supported):
```js
var MyClass = MyClass_1 = (function () { ... }());
```

Fixes angular#35399
gkalpak added a commit to gkalpak/angular that referenced this issue Feb 18, 2020
In ES5 and ES2015, class identifiers may have aliases. Previously, the
`NgccReflectionHost`s recognized the following formats:
- ES5:
    ```js
    var MyClass = (function () {
      function InnerClass() {}
      InnerClass_1 = InnerClass;
      ...
    }());
    ```
- ES2015:
    ```js
    let MyClass = MyClass_1 = class MyClass { ... };
    ```

In addition to the above, this commit adds support for recognizing an
alias outside the IIFE in ES5 classes (which was previously not
supported):
```js
var MyClass = MyClass_1 = (function () { ... }());
```

Jira issue: [FW-1869](https://angular-team.atlassian.net/browse/FW-1869)

Fixes angular#35399
@dhubens
Copy link

dhubens commented Mar 10, 2020

@dhubens Well yes but no haha

I forgot to mentioned that i've already set the importHelpers: true.

I maked my library works, but because we are not working in a monorepo project, so if you are in this case. this is not work for you at all :(

As many people said, IVY seems to not process symlinked deps. so i maked a trick to bypass this.

  • remove node_modules from the app
  • remove the library dependencie declaration from the package.json of the app
  • npm i on the app
  • compile the library ( ivy disabled )
  • copy the content of the dist folder of the library to the node_modules folder in the app
  • run the postinstall script manually ("postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points")

This creates the __ivy_ngcc__ folder and everthing works fine (well some paths to the assets folder i break due the added level, but this is not releveant)

yeah, y knowk that this is not a solution at all, but i only need to see if the error is gone, because my library includes a demo app on where everithing works fine since the beginning, and i only need to see if the library works as a npm package.

Once i sed that the error is gone, i had proceed to publish the library on a private nexus and this works just fine. All the problem cames from the symlinked deps

@CandyMan00 Even if this works, it's just a dirty hack while developing. For every new line of code I would have to copy the dist folder manually and run ngcc. I mean ngcc does something when I use preserveSymLinks: true in the main project. But it's still not working when I import HttpClientModule within the library.

@petebacondarwin
Copy link
Member

petebacondarwin commented Mar 10, 2020

Yes, I could package the library and publish it on npm, but I want to actively develop the library and can't publish a new version every time I want to test a new line of code.

@dhubens - just to clarify... I am not proposing to publish the library. Just package it into a tgz archive file (via the command npm pack run inside the library folder). This can then be used one the same machine via file://... dependency in your test application package.json. For example:

"dependencies": {
  ...
  "my-library": "file:///path/to/my-library/project/dist/my-library.tgz",
  ...
}

The main downside of this is that you need to rebuild and re-pack your library, and then re-install it into your test library each time you want to test a change. But generally, in my experience, you will work mostly with unit tests locally to the library for the most part, and then treat tests in your test project as an e2e test.

If you want to use the test project as more of a unit test environment, then the approach is to include the actual source of the library (TS files) directly via pathMappings in your test project. This avoids ngcc altogether as ngtsc will build the library as part of your application, allowing fast turnaround. The downside of this is that you are testing a direct ivy build of you library and not the ViewEngine build that will actually be deployed.

@SumailaBello
Copy link

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.

It works for me.

This worked for me

@clement911
Copy link

npm cache clean --force didn't help for us.

Deleting node_modules and running npm install also still results in the same error.

@SumailaBello
Copy link

npm cache clean --force didn't help for us.

Deleting node_modules and running npm install also still results in the same error.

Try disabling ivy.

@clement911
Copy link

Disabling Ivy does work but then what's the point of upgrading to angular 9?
From what I understand, Ivy is THE big update of version 9...

@flash-me
Copy link
Contributor

@clement911 #35399 (comment)

cheers
flash ⚡

@clement911
Copy link

As it turns out, for us the issue was caused by the presence of node_modules folder inside the src folder. Removing this folder made this error go away.
Hope it helps...

@flash-me
Copy link
Contributor

flash-me commented Mar 17, 2020

Yes, I could package the library and publish it on npm, but I want to actively develop the library and can't publish a new version every time I want to test a new line of code.

@dhubens - just to clarify... I am not proposing to publish the library. Just package it into a tgz archive file (via the command npm pack run inside the library folder). This can then be used one the same machine via file://... dependency in your test application package.json. For example:

"dependencies": {
  ...
  "my-library": "file:///path/to/my-library/project/dist/my-library.tgz",
  ...
}

The main downside of this is that you need to rebuild and re-pack your library, and then re-install it into your test library each time you want to test a change. But generally, in my experience, you will work mostly with unit tests locally to the library for the most part, and then treat tests in your test project as an e2e test.

If you want to use the test project as more of a unit test environment, then the approach is to include the actual source of the library (TS files) directly via pathMappings in your test project. This avoids ngcc altogether as ngtsc will build the library as part of your application, allowing fast turnaround. The downside of this is that you are testing a direct ivy build of you library and not the ViewEngine build that will actually be deployed.

@petebacondarwin

  1. cd into dist folder of <lib>
  2. npm link
  3. go back In your app root
  4. npm link <lib>
  5. ???
  6. profit

Don't struggle around with packaging for developing locally. ..

https://docs.npmjs.com/cli/link.html

cheers
flash ⚡

@neharica
Copy link

neharica commented Mar 23, 2020

Yes, I could package the library and publish it on npm, but I want to actively develop the library and can't publish a new version every time I want to test a new line of code.

@dhubens - just to clarify... I am not proposing to publish the library. Just package it into a tgz archive file (via the command npm pack run inside the library folder). This can then be used one the same machine via file://... dependency in your test application package.json. For example:

"dependencies": {
  ...
  "my-library": "file:///path/to/my-library/project/dist/my-library.tgz",
  ...
}

The main downside of this is that you need to rebuild and re-pack your library, and then re-install it into your test library each time you want to test a change. But generally, in my experience, you will work mostly with unit tests locally to the library for the most part, and then treat tests in your test project as an e2e test.

If you want to use the test project as more of a unit test environment, then the approach is to include the actual source of the library (TS files) directly via pathMappings in your test project. This avoids ngcc altogether as ngtsc will build the library as part of your application, allowing fast turnaround. The downside of this is that you are testing a direct ivy build of you library and not the ViewEngine build that will actually be deployed.

@petebacondarwin We are trying to upgrade monorepo to Angular V9 and are maintaining it by rush.js (https://rushjs.io/pages/intro/welcome/) and we are using pnpm as a package manager. I am facing the above mentioned IVY Error NG6002 error while running tests of libraries. ("enableIvy" flag is set to false for all the libraries and application too. Have considered all the above suggestions but nothing helped) . From the documentation and the error that is shown during rush test, it is clear that the corresponding module(here in our case @angular/flex-layout) has not been processed correctly by the ngcc compiler. Documentation says we need to run "ngcc" command for the modules to be IVY compliant. But somehow pnpm is not picking up postinstall script(which includes ngcc command) present in package.json of each library and is not executed. Even though we are able to install and build(done by ng-packagr) the entire project which includes both libraries and demo app, we are blocked because of tests throwing this issue. Any suggestions or help around this would be greatly appreciated.

Note: Everything works fine individually meaning running install, build and test using yarn in each library and application works but collectively when we run rush test, we are facing this issue. (Reason : because we don't face symlinks issue when we run projects individually)

@yamaha252
Copy link

yamaha252 commented Mar 24, 2020

app <- library2 + (library1 <- library2) – doesn't work for me (library2 errors), although app which imports only library2 works fine. (I use npm link)

@petebacondarwin
Copy link
Member

@yamaha252 - is this when ngcc processes the libraries? Do you use pathMappings to relate library2 to library1? If so, then may be this PR that just landed will help: #36180. But without more information about your specific scenario it is difficult to know.

@yamaha252
Copy link

yamaha252 commented Mar 24, 2020

@petebacondarwin nope, I just use yarn link library1 in my app and library1 is built with library2 which is installed from repo. library2 is also installed from repo in my app.
If I use installed library1 (not a link) everything is allright.
If I use linked library2 in my app everything is also allright. (I have "preserveSymlinks": true in architect.build.options in angular.json)

All the libraries are built with disabled Ivy and importHelpers: true option. Packages versions are the same everywhere.

Errors are on compilation library1 (es2015 as esm2015)

ERROR in Failed to compile entry-point @cbdev/ui-kit (es2015 as esm2015) due to compilation errors:
../angular-mfa/node_modules/@angular/cdk/a11y/a11y-module.d.ts:9:22 - error NG6002: Appears in the NgModule.imports of FocusModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/cdk/a11y) which declares A11yModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

9 export declare class A11yModule {
                       ~~~~~~~~~~
../angular-mfa/node_modules/@angular/common/http/http.d.ts:2801:22 - error NG6002: Appears in the NgModule.imports of IconModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/common/http) which declares HttpClientModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

2801 export declare class HttpClientModule {
                          ~~~~~~~~~~~~~~~~
../angular-mfa/node_modules/@cbdev/ui-kit/fesm2015/ui-kit.js:153:5 - error NG6002: Appears in the NgModule.imports of ButtonIconModule, but itself has errors

153 let IconModule = class IconModule {
        ~~~~~~~~~~
../angular-mfa/node_modules/@cbdev/ui-kit/fesm2015/ui-kit.js:153:5 - error NG6002: Appears in the NgModule.imports of InputModule, but itself has errors

153 let IconModule = class IconModule {
        ~~~~~~~~~~
../angular-mfa/node_modules/@cbdev/ui-kit/fesm2015/ui-kit.js:169:5 - error NG6002: Appears in the NgModule.imports of InputModule, but itself has errors

169 let ButtonIconModule = class ButtonIconModule {
        ~~~~~~~~~~~~~~~~
../angular-mfa/node_modules/@cbdev/ui-kit/fesm2015/ui-kit.js:42:5 - error NG6002: Appears in the NgModule.imports of InputModule, but itself has errors

42 let FocusModule = class FocusModule {
       ~~~~~~~~~~~
../angular-mfa/node_modules/@cbdev/ui-kit/fesm2015/ui-kit.js:42:5 - error NG6002: Appears in the NgModule.imports of InputModule, but itself has errors

42 let FocusModule = class FocusModule {
       ~~~~~~~~~~~
../angular-mfa/node_modules/@angular/cdk/a11y/a11y-module.d.ts:9:22 - error NG6002: Appears in the NgModule.imports of SelectModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/cdk/a11y) which declares A11yModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

9 export declare class A11yModule {
                       ~~~~~~~~~~
../angular-mfa/node_modules/@cbdev/ui-kit/fesm2015/ui-kit.js:169:5 - error NG6003: Appears in the NgModule.exports of FormModule, but itself has errors

169 let ButtonIconModule = class ButtonIconModule {
        ~~~~~~~~~~~~~~~~
../angular-mfa/node_modules/@cbdev/ui-kit/fesm2015/ui-kit.js:670:5 - error NG6003: Appears in the NgModule.exports of FormModule, but itself has errors

670 let InputModule = class InputModule {
        ~~~~~~~~~~~
../angular-mfa/node_modules/@cbdev/ui-kit/fesm2015/ui-kit.js:1186:5 - error NG6003: Appears in the NgModule.exports of FormModule, but itself has errors

1186 let SelectModule = class SelectModule {
         ~~~~~~~~~~~~

@petebacondarwin
Copy link
Member

I'm afraid that ngcc is not able to follow symlinks, so this is probably the root of your problem: ngcc is not able to compile library1 (because it a symlink). So even though the TS compiler can follow the symlink to library1 when building library2, it cannot compile successfully because it library1 has not been processed by ngcc.

@yamaha252
Copy link

yamaha252 commented Mar 25, 2020

@petebacondarwin thank you! I understood, you're right. If I use installed library2 the compiler prepares library1 because it's in the common node_modules folder of the app. If I use linked one, the compiler tries to use library1 form the symlink's node_modules folder and there is not prepared by ngcc library1 package.

@yamaha252
Copy link

Finally, I solve my problem. I have to have Ivy enabled for development to use npm/yarn link as it's by default in the latest angular cli setup. :)

@mtgibbs
Copy link

mtgibbs commented Mar 25, 2020

Just fyi: I have the problems only in conjunction with yarn link or npm link. Oh, and you have to use ngcc after linking.

@dhubens - I am afraid that ngcc does not process packages that have been symlinked into the node_modules directory. This is probably the cause of your errors. Instead generate a packed version of your library and then install that into your application project.

This was my problem when trying to work locally. When I npm pack my library and install the tar via file:/, ngcc has no problem and I can proceed. It's a little annoying because I have to keep a terminal open to keep packing the tar, but its no show-stopper. Thanks @petebacondarwin

@yazan-mehrez
Copy link

As it turns out, for us the issue was caused by the presence of node_modules folder inside the src folder. Removing this folder made this error go away.
Hope it helps...

@clement911 Please can you explain which folder exactly you removed?

@clement911
Copy link

@yazan-mehrez src/node_modules. See #36060

@yazan-mehrez
Copy link

@yazan-mehrez src/node_modules. See #36060

@clement911 I don't have this folder, I did all the solutions here but I'm still stuck. flex layout is not working with ivy properly.

@flash-me
Copy link
Contributor

@petebacondarwin

I'm using npm link as described here which creates a link within node_modules and ngcc is able to handle it. So it works

cheers
flash ⚡

@petebacondarwin
Copy link
Member

@flash-me - I am glad that it is working for you. But just to be clear, when ngcc finds a symlink it does not follow it. Now it may be that the CLI is following symlinks and then passing the source of the symlink to ngcc, which may well work.

@flash-me
Copy link
Contributor

@petebacondarwin Good to know that the symlink support is related to cli and not ngcc. I just wanted to mention it. sorry if my formulation sound kinda offensive

cheers
flash ⚡

@petebacondarwin
Copy link
Member

No worries @flash-me !

@JoelKThomas
Copy link

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.

This worked for me also

@HanaaGhasoub
Copy link

Hi,
What is the final solution for that error?
FYI, its working fine when build locally, but when run build prod it fails.
Please help me in that as soon as.
image

My tsconfig.ts
image

Package.json build scripts
image

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators May 21, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: compiler Issues related to `ngc`, Angular's template compiler
Projects
None yet
Development

Successfully merging a pull request may close this issue.