【问题标题】:Can't run Angular app, ng serve throwing errors无法运行 Angular 应用程序,ng 服务抛出错误
【发布时间】:2022-02-08 07:26:30
【问题描述】:

问题

我目前正在处理一个项目并设法将存储库克隆到我的计算机中。我使用 npm install 来下载软件包。我使用 ng serve 的那一刻,错误就出现了。应用程序编译失败,但仍然在 localhost 中运行。我不知道如何处理这个错误以及如何克服它。项目目前在 Angular 8 上运行。下面提供的是 package.json 文件和有问题的错误。

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 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>;

到目前为止我所做的尝试

  1. 删除了 node_modules 和 npm install
  2. 删除了 node_modules 和 package-lock.json 然后使用 npm install
    • 还使用了 npm install --legacy-peer-deps,结果相同
  3. 使用 NVM [v9, v12, v14, v16] 更改了节点版本
  4. 卸载并重新安装 Angular cli

更新

我遗漏的一点是,还有另一个项目基本相同,只是用于不同的目的。它具有相同的 package.json 并具有相同的文件结构。尤其是这个其他项目确实可以正常工作并正确编译以开始本地开发。

话虽如此,我最终只是从另一个项目中复制并粘贴了 node_modules 文件夹并将其粘贴到这个有问题的项目中,它就可以工作了!从那以后我没有遇到任何问题。

【问题讨论】:

    标签: angular npm


    【解决方案1】:

    您显示的错误来自 ngUniversal/common 依赖项,您可以从错误消息中看到。依赖项在您的package.json 中设置为next。尝试一些特定的版本号,直到你得到一个有效的版本号。对具有相同消息的任何其他包执行相同操作。版本可以在这里找到:https://www.npmjs.com/package/@nguniversal/common

    第一个数字是主要版本,当它发生变化时表示重大变化。

    "@nguniversal/common": "next",
    
    "@nguniversal/common": "13.0.2",
    
    "@nguniversal/common": "12.1.3",
    

    您可能应该对任何具有 next 值的依赖项执行此操作,因为它们不一定是稳定版本。

    您也可以尝试latest 标签,它将获得最新的稳定版本(当前为 13.0.2)。

    "@nguniversal/common": "latest",
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-12-09
      • 1970-01-01
      • 2021-11-18
      • 2019-01-01
      • 2011-03-05
      相关资源
      最近更新 更多