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

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",
"buildrod": "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?

Continue reading...