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?

No clue what caused it, but upgrading version by version using the [guide from Angular itself](https://update.angular.io/), I didn't get the error anymore. Don't be dumb like me. — Ruben Szekér, Apr 11 '21 at 08:24

score 16 · Answer 1 · answered Jun 11 '21 at 08:23

16

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

answered Jun 11 '21 at 08:23

Tamas Illes

169
1
4

1

Although the "tricky" behavior of `npm install` by default using "latest" I think the guys from PrimeNG should read [this enlightening post about npm prereleases versioning](https://medium.com/@mbostock/prereleases-and-npm-e778fc5e2420) and use `--tag next` when publishing in order to avoid this kind of problem. – Iogui Jun 11 '21 at 19:07
Maybe a good way to avoid this pitfall is to always install things this way: `npm i package-name@*` – Iogui Jun 11 '21 at 19:12
This answer completely solved my issue. Angular 11 and the latest versions of PrimeNg do not like each other. Thanks. – Danielle Jul 14 '21 at 02:27
I did the upgrading of Node and NPM which did not work. This is the answer. – webdad3 Sep 28 '21 at 00:54

akarahman · Answer 2 · 2021-06-01T08:29:07.517

3

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.

edited Jun 01 '21 at 08:29

answered Jun 01 '21 at 07:32

akarahman

235
2
15

Thanks. Had the same issue (multiple Node versions, and a blank brain (i.e. a weekend between the project switches :P ) – JimiSweden Jun 28 '21 at 11:14
NOTE: when switching node version I had to reinstall the node_modules (delete and install) since I had run the npm install with the wrong node.js version – JimiSweden Jun 28 '21 at 11:28

score 2 · Answer 3 · edited Jun 02 '21 at 10:26

2

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

What the tutorial suggested I do was this:

Install angular fire by running npm install @angular/fire
Replace all occurrences of angularfire2 with @angular/fire (when importing)
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.

edited Jun 02 '21 at 10:26

Dharman

30,962
25
85
135

answered Jun 02 '21 at 10:21

Peter Couper

21
2

thanks for this, I was facing the exact same issue. They need to update their documentation. Just curious, whether you know the difference between `@angular/fire` and `angularfire2`? – user3794740 Aug 21 '21 at 19:40
1

Check this out: https://stackoverflow.com/questions/41573769/firebase-vs-angularfire – Peter Couper Aug 23 '21 at 06:21

score 2 · Answer 4 · answered Sep 16 '21 at 09:01

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:

score 0 · Answer 5 · answered Jun 25 '21 at 06:09

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

score 0 · Answer 6 · edited Aug 30 '21 at 20:47

0

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.

edited Aug 30 '21 at 20:47

isherwood

58,414
16
114
157

answered Aug 30 '21 at 20:39

Jayananda Jena

1

1

I attempted to format your post into something decipherable. Please revise further as needed. – isherwood Aug 30 '21 at 20:47

score 0 · Answer 7 · answered Dec 20 '21 at 04:43

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.

score 0 · Answer 8 · answered Jan 02 '22 at 07:58

0

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.

answered Jan 02 '22 at 07:58

Sadegh Maasoomi

132
4

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

8 Answers8