CODEWITHSUNDEEP
angularnpm
iamconfusion
iamconfusion

Reputation: 47

Can't run Angular app, ng serve throwing errors

The problem

I am currently working on a project and managed to clone the repository into my computer. I used npm install to download the packages. The moment I use ng serve the errors show up. The application Fails to compile, but still runs in localhost. I am not sure how to approach this error and how to overcome it. Project is currently running on Angular 8. Provided below is the package.json file and the error in question.

package.json

{
  "name": "universal-demo",
  "version": "7.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "ssr": "npm run build:universal && npm run generate:prerender && npm run server",
    "ssr:debug": "ng build --aot=true --output-hashing=all --named-chunks=false --build-optimizer=true  && ng run universal-demo:server:dev && webpack && node server.js",
    "ssr:cw": "ng build --aot=true --output-hashing=all --named-chunks=false --build-optimizer=true --watch",
    "ssr:sw": "ng run universal-demo:server:dev --watch",
    "ssr:webpack": "webpack --watch",
    "ssr:server": "nodemon server.js",
    "ssr:watch": "run-p ssr:universal:build:*",
    "ssr:universal:build:browser": "ng run universal-demo:build:dev --watch",
    "ssr:universal:build:server": "node ./node_modules/npm-delay 15000 && ng run universal-demo:server:dev --watch",
    "ssr:universal:build:webpack": "node ./node_modules/npm-delay 30000 && webpack --config webpack.config.js --watch",
    "ssr:universal:build:nodemon": "node ./node_modules/npm-delay 35000 && nodemon --inspect server.js",
    "format:check": "prettier --write --config ./.prettierrc --list-different \"src/{app,environments,styles}/**/*{.ts,.json,.scss}\"",
    "build": "ng build",
    "build:server": "ng run universal-demo:server:production",
    "build:prod": "ng build --prod",
    "build:universal": "ng run universal-demo:build:production && ng run universal-demo:server:production && webpack --progress --colors",
    "server": "node server.js",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:prerender": "npm run build:universal && npm run generate:prerender",
    "generate:prerender": "node prerender.js",
    "bundle-report": "ng build --stats-json && webpack-bundle-analyzer dist/stats.json",
    "bundle-report:prod": "ng build --stats-json --prod && webpack-bundle-analyzer dist/stats.json",
    "serve:prerender": "cd dist && http-server"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.2.3",
    "@angular/cdk": "^11.0.3",
    "@angular/common": "8.2.3",
    "@angular/compiler": "8.2.3",
    "@angular/core": "8.2.3",
    "@angular/forms": "8.2.3",
    "@angular/material": "^11.0.3",
    "@angular/platform-browser": "8.2.3",
    "@angular/platform-browser-dynamic": "8.2.3",
    "@angular/pwa": "0.803.0",
    "@angular/router": "8.2.3",
    "@angular/service-worker": "8.2.3",
    "@gorniv/ngx-universal": "1.1.5",
    "@nguniversal/common": "next",
    "@nguniversal/express-engine": "next",
    "@nguniversal/module-map-ngfactory-loader": "next",
    "@ngx-meta/core": "7.0.0",
    "@ngx-translate/core": "11.0.1",
    "@ngx-translate/http-loader": "4.0.0",
    "angular-bootstrap-md": "^8.1.1",
    "bootstrap": "^4.3.1",
    "chart.js": "^2.5.0",
    "cookie-parser": "1.4.4",
    "core-js": "3.2.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "intersection-observer": "^0.7.0",
    "ng-lazyload-image": "^6.1.0",
    "reflect-metadata": "0.1.13",
    "rxjs": "6.5.2",
    "rxjs-tslint": "^0.1.8",
    "zone.js": "0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.0",
    "@angular/cli": "8.3.0",
    "@angular/compiler-cli": "8.2.3",
    "@angular/language-service": "8.2.3",
    "@angular/platform-server": "8.2.3",
    "@types/jasmine": "3.4.0",
    "@types/jasminewd2": "2.0.6",
    "@types/node": "12.0.10",
    "chai": "4.2.0",
    "codelyzer": "5.1.0",
    "cross-env": "5.2.0",
    "jasmine-core": "3.4.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.2.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "2.0.0",
    "karma-coverage-istanbul-reporter": "2.1.0",
    "karma-jasmine": "2.0.1",
    "karma-jasmine-html-reporter": "1.4.2",
    "mocha": "6.2.0",
    "nodemon": "1.19.1",
    "npm-delay": "1.0.4",
    "npm-run-all": "4.1.5",
    "prettier": "1.18.2",
    "prettier-tslint": "0.4.2",
    "protractor": "5.4.2",
    "source-map-support": "0.5.13",
    "ssri": "6.0.1",
    "ts-mocha": "6.0.0",
    "ts-node": "8.3.0",
    "tslint": "5.19.0",
    "typescript": "3.5.3",
    "webpack-bundle-analyzer": "3.4.1",
    "webpack-cli": "3.3.7",
    "webpack-node-externals": "1.7.2"
  }
}

Error

ERROR in ../node_modules/@nguniversal/common/common.d.ts:13:21 - error TS2694: Namespace '"/../../../../../node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

13     static ɵfac: i0.ɵɵFactoryDeclaration<StateTransferInitializerModule, never>;
                       ~~~~~~~~~~~~~~~~~~~~
../node_modules/@nguniversal/common/common.d.ts:14:21 - error TS2694: Namespace '"/../../../../../node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.

14     static ɵmod: i0.ɵɵNgModuleDeclaration<StateTransferInitializerModule, never, never, never>;
                       ~~~~~~~~~~~~~~~~~~~~~
../node_modules/@nguniversal/common/common.d.ts:15:21 - error TS2694: Namespace '"/../../../../../node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.

15     static ɵinj: i0.ɵɵInjectorDeclaration<StateTransferInitializerModule>;
                       ~~~~~~~~~~~~~~~~~~~~~
../node_modules/@nguniversal/common/common.d.ts:23:21 - error TS2694: Namespace '"/../../../../../node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

23     static ɵfac: i0.ɵɵFactoryDeclaration<TransferHttpCacheModule, never>;
                       ~~~~~~~~~~~~~~~~~~~~
../node_modules/@nguniversal/common/common.d.ts:24:21 - error TS2694: Namespace '"/../../../../../node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.

24     static ɵmod: i0.ɵɵNgModuleDeclaration<TransferHttpCacheModule, never, [typeof i1.BrowserTransferStateModule], never>;
                       ~~~~~~~~~~~~~~~~~~~~~
../node_modules/@nguniversal/common/common.d.ts:25:21 - error TS2694: Namespace '"/../../../../../node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.

25     static ɵinj: i0.ɵɵInjectorDeclaration<TransferHttpCacheModule>;
                       ~~~~~~~~~~~~~~~~~~~~~
../node_modules/@nguniversal/common/common.d.ts:35:21 - error TS2694: Namespace '"/../../../../../node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

35     static ɵfac: i0.ɵɵFactoryDeclaration<ɵTransferHttpCacheInterceptor, never>;
                       ~~~~~~~~~~~~~~~~~~~~
../node_modules/@nguniversal/common/common.d.ts:36:22 - error TS2694: Namespace '"/../../../../../node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.

36     static ɵprov: i0.ɵɵInjectableDeclaration<ɵTransferHttpCacheInterceptor>;

What I've attempted so far

  1. deleted node_modules and npm install
  2. deleted both node_modules and package-lock.json and then used npm install
    • also used npm install --legacy-peer-deps with same outcome
  3. changed node versions using NVM [v9, v12, v14, v16]
  4. uninstalled and reinstalled angular cli

Update

Something I've left out is that there is another project that is basically the same, just used for a different purpose. It has the same package.json and has the same file structure. This other project in particular does work and compile properly to begin local development.

With that being said, I ended up just copying and pasting the node_modules folder from the other project and pasting it in this problematic one and it works! I haven't had any issues since.

Upvotes: 0

Views: 2684

Answers (1)

Chris Hamilton
Chris Hamilton

Reputation: 10954

The errors you've shown are coming from the ngUniversal/common dependency, as you can see by the error messages. The dependency is set to next in your package.json. Try some specific version numbers until you get one that works. Do the same for any other packages with the same message. Versions can be found here: https://www.npmjs.com/package/@nguniversal/common

The first number is the major version, when that changes it indicates a breaking change.

"@nguniversal/common": "next",

"@nguniversal/common": "13.0.2",

"@nguniversal/common": "12.1.3",

You should probably do this for any dependencies with the next value, since they are not necessarily stable releases.

You can also try the latest tag, which will get the latest stable release, (currently 13.0.2).

"@nguniversal/common": "latest",

Upvotes: 1

Related Questions