Why am I getting "no exported member" errors when attempting to upgrade Angular?

Question

The issue

I am trying to upgrade from Angular V9 to V11 and I'm struggling quite a lot with the the following errors

Namespace node_module/@angular/core/core has no exported member ɵɵFactoryDeclaration Namespace node_module/@angular/core/core has no exported member ɵɵInjectorDeclaration Namespace node_module/@angular/core/core has no exported member ɵɵNgModuleDeclaration Namespace node_module/@angular/core/core has no exported member ɵɵɵComponentDeclaration

but I'm not fully sure what it means and how I could fix it.

What I tried

I've looked at an alike issue: Ng serve throwing @angular/core/core has no exported member 'eeFactoryDef' which was the only trail I could find of this issue but it hasn't really helped me.

I tried deleting my whole node_modules folder and reinstalling npm dependencies with npm i. I tried npm ci as well. I also tried adding

      "@angular/core/*": [
        "./node_modules/@angular/core/*"
      ]

OR

      "@angular/*": [
        "./node_modules/@angular/*"
      ]

to my tsconfig.json, but that also didn't help.

What I believe to be the issue

I have no clue about this, but I think that something is wrong with the paths of my NPM dependencies, since it refers to @angular/core/core, but there's no such folder in my node_modules.

If I go to the node_modules/@angular/core/core.d.ts file, which I believe to be the /core/core path, although I'm not sure about this, then I see the same error there as well, which confuses me even more because I thought the issue would be between Angular and dependencies but not within Angular itself.

Package.json

{
  "name": "WorthaShot",
  "version": "0.0.3",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.0-next.7",
    "@angular/cdk": "^11.2.7",
    "@angular/common": "~12.0.0-next.7",
    "@angular/compiler": "~12.0.0-next.7",
    "@angular/core": "~11.2.8",
    "@angular/fire": "^6.1.4",
    "@angular/flex-layout": "^10.0.0-beta.32",
    "@angular/forms": "~12.0.0-next.7",
    "@angular/material": "^11.2.7",
    "@angular/platform-browser": "~12.0.0-next.7",
    "@angular/platform-browser-dynamic": "~12.0.0-next.7",
    "@angular/router": "~12.0.0-next.7",
    "@angular/service-worker": "~12.0.0-next.7",
    "@fortawesome/angular-fontawesome": "^0.8.2",
    "@fortawesome/fontawesome-common-types": "^0.2.35",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@ngbmodule/material-carousel": "^0.7.1",
    "@ngx-meta/core": "^9.0.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "firebase": "^8.3.2",
    "flag-icon-css": "^3.5.0",
    "guid-typescript": "^1.0.9",
    "ngx-color-picker": "^10.1.0",
    "ngx-image-compress": "^8.0.4",
    "ngx-markdown": "^10.1.1",
    "ngx-sharebuttons": "^8.0.5",
    "ngx-spinner": "^10.0.1",
    "ngx-toastr": "^13.2.1",
    "rxjs": "~6.6.7",
    "tslib": "^2.2.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1102.7",
    "@angular/cli": "~11.2.7",
    "@angular/compiler-cli": "~12.0.0-next.7",
    "@angular/language-service": "~12.0.0-next.7",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^14.14.37",
    "codelyzer": "^6.0.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.10.2",
    "tslint": "~6.1.3",
    "typescript": "^4.2.3"
  }
}

What am I missing or not understanding here?

Answer 1

In case you are facing the issue after having installed primeng please note that the latest version of primeng (12.0.0-rc.1) does not work with the latest version of angular. You need to install an earlier version of primeng, for me 11.4 worked perfectly!

npm i [email protected]

Answer 2

I was getting this error even without an upgrade. I was getting with "@angular/core": "~9.1.1" with Node v12.16.2 and npm 4.0.2 . It was occuring from primeNg components. I upgraded to node: '14.17.0' and npm to npm: '6.14.13', created a new angular app, reinstalled all dependencies including primeNg, add all your code from current project, recompile and the error is gone.

Answer 3

so I came across this issue while doing a tutorial on FireBase

What the tutorial suggested I do was this:

1. Install angular fire by running npm install @angular/fire
2. Replace all occurrences of angularfire2 with @angular/fire (when importing)
3. Replace all occurrences of afAuth.auth with afAuth

Upon doing this, I also had to enable allowSyntheticDefaultImports in the tsConfig file (Under compiler options, "allowSyntheticDefaultImports": true).

This fixed my issue.