12

I just updated from Angular 8.2 to 9.

Everything works well if I disable ivy, but when it's enabled I'm getting a lot of errors that seems to be kind of obscure, at least I can't find any results when googling it.

I'm quite sure I've done everything needed for an update, i.e. changed the lazyloading to use dynamic imports and fixed Angular Material import paths etc.

I will also include my package.json dependencies here

  "dependencies": {
    "@angular/animations": "^9.0.0",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "^9.0.0",
    "@angular/compiler": "^9.0.0",
    "@angular/core": "^9.0.0",
    "@angular/fire": "^5.4.2",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "^9.0.0",
    "@angular/http": "^7.2.15",
    "@angular/material": "^9.0.0",
    "@angular/material-moment-adapter": "^8.2.2",
    "@angular/platform-browser": "^9.0.0",
    "@angular/platform-browser-dynamic": "^9.0.0",
    "@angular/platform-server": "^9.0.0",
    "@angular/router": "^9.0.0",
    "@ngrx/effects": "^8.3.0",
    "@ngrx/entity": "^8.3.0",
    "@ngrx/router-store": "^8.3.0",
    "@ngrx/store": "^8.3.0",
    "@zxing/ngx-scanner": "^2.0.1",
    "angular-resizable-element": "^3.2.4",
    "angular-resize-event": "^1.1.1",
    "angular2-highcharts": "^0.5.5",
    "core-js": "^3.6.4",
    "detect-browser": "^4.7.0",
    "firebase": "^7.8.0",
    "google-polyline": "^1.0.3",
    "hammerjs": "^2.0.8",
    "highcharts": "^8.0.0",
    "i18n-iso-countries": "^4.3.1",
    "leaflet": "^1.5.1",
    "mapbox-gl": "^1.4.0",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.26",
    "ng-pick-datetime": "^6.0.7",
    "ngrx-store-freeze": "^0.2.3",
    "ngx-cacheable": "^1.3.2",
    "ngx-cookie-service": "^2.2.0",
    "ngx-csv": "^0.3.1",
    "ngx-file-drop": "^8.0.8",
    "ngx-infinite-scroll": "^0.8.4",
    "papaparse": "^5.0.2",
    "request": "^2.87.0",
    "request-promise": "^4.2.2",
    "rxjs": "^6.5.4",
    "rxjs-compat": "^6.3.3",
    "typescript-string-operations": "^1.3.1",
    "web-animations-js": "^2.3.2",
    "zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.900.1",
    "@angular/cli": "^9.0.0",
    "@angular/compiler-cli": "^9.0.0",
    "@angular/language-service": "^9.0.0",
    "@ngrx/store-devtools": "^8.3.0",
    "@types/body-parser": "^1.17.0",
    "@types/cors": "^2.8.4",
    "@types/detect-browser": "^4.0.0",
    "@types/express": "^4.11.1",
    "@types/firebase": "^3.2.1",
    "@types/helmet": "0.0.37",
    "@types/jasmine": "^3.5.4",
    "@types/jasminewd2": "~2.0.3",
    "@types/leaflet": "^1.2.7",
    "@types/lodash": "^4.14.109",
    "@types/node": "^13.7.1",
    "@types/request": "^2.47.0",
    "@types/request-promise": "^4.1.41",
    "codelyzer": "^5.2.1",
    "concurrently": "^3.5.1",
    "del-cli": "^1.1.0",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "^3.1.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "^3.1.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "protractor": "^5.4.3",
    "puppeteer": "^2.0.0",
    "rxjs-tslint": "^0.1.7",
    "ts-node": "~5.0.1",
    "tslint": "^6.0.0",
    "typescript": "3.6.4",
    "webpack": "^4.41.6"
  },
  "peerDependencies": {
    "typescript": "3.6.4",
    "tslib": "1.10.0"
  },

And errors itself that I'm getting:

enter image description here

I have cleared my node_modules and package-lock.json and ran npm install again

EDIT: maybe also important to note that it's compiling and running with ng serve but when I try to build it or run with AOT ng serve -aot then I get the errors.

raouaoul
  • 681
  • 2
  • 13
  • 33

6 Answers6

4

I fix this problem with removing the node_modules folder and then run npm install.

Mikael S
  • 435
  • 1
  • 4
  • 14
4

I faced the same issue today and here is how I resolved it in my scenario.

Might not be relevant to you but the error is exactly same, hence documenting here.

I was using Linux and this error occurs if you don't have enough permissions on the project folder.

sudo chmod -R 777 <folder>

Once I gave enough permissions, everything was smooth and just runs fine.

Here is the screenshot of the error that I was getting:

enter image description here

Manoj Reddy Mettu
  • 121
  • 7
  • 1
    Had the same issue in Docker. Lesson learned: do `npm install` and `ng build` under the same user that owns the files :) – kolypto Feb 23 '21 at 22:38
  • In my case, I had to switch fom `CMD` to `ENTRYPOINT` inisde Dockerfile. Error: `CMD npm run serve`, works: `ENTRYPOINT ["npm", "run", "serve"]`. Strange.. – Andreas Gyr Mar 25 '21 at 11:41
  • @ManojReddyMettu I am using windows, and importing a separate angular project into nodemodules to use it as libraries. Getting similer errors for those imported modules. Do we need to set any permissions here also? – Pinka Feb 01 '22 at 17:39
2

Getting below error after installing ngx-print (https://www.npmjs.com/package/ngx-print) in my Angular project (ng-version="10.1.6") -

: Compiled successfully.

ERROR in node_modules/ngx-print/lib/ngx-print.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (ngx-print) which declares NgxPrintModule 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.

1 export declare class NgxPrintModule {

Solution - I fix this problem with removing the node_modules folder and package-lock.json and then run npm install.

Pinaki
  • 792
  • 8
  • 17
1

i've fixed thi by execute this command on root of the project:

npx ngcc && ngcc -s dist
omar berrabeh
  • 11
  • 1
  • 2
0

I had been searching for the answer to this question, as I was frustrated from looking into answers that did not help, while I gave up on the internet I tried to look into the dist folder of the build (library) and what is changed, the first thing to noticed was the ive_ngcc_ folder added, which means that it was still processing the build as ivy and not the regular even though I had set the enable ivy : false in my library project. sometimes it happens in angular version 9

Fix steps:

  1. remove node modules folder (library project) used command on windows ( rm .\node_modules)
  2. remove existing dist folder used command (rm .\dist)
  3. remove the package-lock.json file
  4. run npm cache clean --force
  5. just in case I wasn't sure if this would work I ran npm restart (I think this step did the trick)
  6. ran npm install
  7. ran npm build (in tsconfig > angularCompilerOptions > enableIVY: false)
  8. most important recheck dist folder to see if ivy_ngcc folder not present
  9. use npm link or publish beta and use it in parent app (now it should work) !!

key take away the error is misleading as there could be whole host of problems that could raise this same error, my use case was using custom library created for our project. hope this helps some devs out there and save their time !! Happy Coding !!

Environment Details: Win OS 10 npm : 6.14.3 node : 14.17.2 angular:: 9.1.3

NItesh Khanna
  • 1
-1

Some Cases

CI/CD

  1. Whether you're using Linux or Windows, TeamCity or GitLab, it doesn't matter - delete node_modules.

Cache

  1. If you're using cache, delete it too. It's located in the .npm folder - just empty it.

Local Compilation

  1. Follow the steps from CI/CD.

Angular 13+

  1. Empty the .angular folder in your project.
Pannacottik
  • 19
  • 5