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

The reason for this error is that your library is not up to date.

Check the app.module.ts files.

Remove in order and then install the new sample.

Answer 2

The easiest solution I find is to locate the Error file (VS code will give a link to the file where the error prompted) then identify the culprit dependency, now delete from package.json or update the dependency to fix the error. and remember to do

npm install

if you delete it.

Answer 3

So, I spent a few hours on this over the past few days and, although there are many useful answers here, thought I'd chip in. From the error itself, it's obvious this is mostly an issue with dependency injection. Many Angular packages break as we update versions. For me, this occurred when upgrading firebase modules.

Angular changes how it imports and reads modules across versions as well as module locations, which causes this issue. @angular/localize is definitely a helpful module.

Also, on the topic of firebase - it's not really documented well anywhere but angularfire2 and @angular/fire cannot work together and @angular/fire is where angularFire resides now, as can be seen when installing the package:

Answer 4

For this error:

"Namespace node_module/@angular/core/core has no exported member ɵɵFactoryDeclaration", "Namespace node_module/@angular/core/core has no exported member ɵɵInjectorDeclaration"

You should replace this:

static ɵfac: i0.ɵɵFactoryDef < ScreenTrackingService, [null, {
  optional: true;
}, {
  optional: true;
}, null, {
  optional: true;
}] > ;

With this:

static ɵprov: i0.ɵɵInjectableDef<ScreenTrackingService>;

in ScreenTrackingService component.

Answer 5

I am facing the same issue.

This link might help.

These are the steps in the official update guide: If you depend on localization first run this command:

ng add @angular/localize

And make localization work in your code with the necessary refactorings to $localize()

• run these commands

ng update @angular/core@10 @angular/cli@10
ng update @angular/core@11 @angular/cli@11

Update to typescript 4

Answer 6

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 primeng@11.4.2

Answer 7

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.

Answer 8

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.