无法 运行 Angular app, ng serve 抛出错误
Can't run Angular app, ng serve throwing errors
问题
我目前正在做一个项目，并设法将存储库克隆到我的计算机中。我使用 npm install 下载软件包。当我使用 ng serve 时，错误就出现了。应用程序编译失败，但仍在本地主机中运行。我不确定如何处理此错误以及如何克服它。项目目前 运行 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>;
到目前为止我尝试了什么
- 删除了 node_modules 和 npm install
- 删除了 node_modules 和 package-lock.json 然后使用 npm install
- 还使用了 npm install --legacy-peer-deps，结果相同
- 使用 NVM [v9、v12、v14、v16] 更改了节点版本
- 卸载并重新安装 angular cli
更新
我遗漏的一点是，还有另一个项目基本相同，只是用于不同的目的。它具有相同的 package.json 并且具有相同的文件结构。特别是这个其他项目确实可以正常工作并正确编译以开始本地开发。
话虽如此，我最终只是从另一个项目中复制并粘贴 node_modules 文件夹并将其粘贴到这个有问题的项目中，它起作用了！从那以后我没有遇到任何问题。
您显示的错误来自 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",
问题
我目前正在做一个项目，并设法将存储库克隆到我的计算机中。我使用 npm install 下载软件包。当我使用 ng serve 时，错误就出现了。应用程序编译失败，但仍在本地主机中运行。我不确定如何处理此错误以及如何克服它。项目目前 运行 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>;
到目前为止我尝试了什么
- 删除了 node_modules 和 npm install
- 删除了 node_modules 和 package-lock.json 然后使用 npm install
- 还使用了 npm install --legacy-peer-deps，结果相同
- 使用 NVM [v9、v12、v14、v16] 更改了节点版本
- 卸载并重新安装 angular cli
更新
我遗漏的一点是，还有另一个项目基本相同，只是用于不同的目的。它具有相同的 package.json 并且具有相同的文件结构。特别是这个其他项目确实可以正常工作并正确编译以开始本地开发。
话虽如此，我最终只是从另一个项目中复制并粘贴 node_modules 文件夹并将其粘贴到这个有问题的项目中，它起作用了！从那以后我没有遇到任何问题。
您显示的错误来自 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",