【发布时间】：2021-05-21 10:04:18
【问题描述】：
所以我有一些总容量为 800 mb 的 node_modules
所以我这样做了：
npm install -production
现在 npm_modules 的大小为：344 mb。
但是如果我尝试使用 npm start 运行 angular。我收到此错误：
An unhandled exception occurred: Could not find module "@angular-devkit/build-angular" from "C:\\source\\nien\\cityflows\\src\\dashboard-frontend".
See "C:\Users\nien\AppData\Local\Temp\ng-M2OCCf\angular-errors.log" for further details.
但是如果我安装这个模块：@angular-devkit/build-angular
然后我的 npm_moduels 又是 800 MB。
那我现在该怎么办？
谢谢。
好的，这是我的 package.json 文件：
{
"name": "dashboard-frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve -o",
"build": "ng build --stats.json --prod=true --deleteOutputPath=false",
"test": "ng test",
"lint": "npm run lint.eslint && npm run lint.prettier && npm run lint.types",
"lint.eslint": "eslint . --ext ts",
"lint.prettier": "prettier -c src/**/*.ts",
"lint.types": "tsc --noEmit",
"e2e": "ng e2e"
},
"private": true,
"browser": {
"fs": false,
"path": false,
"os": false
},
"dependencies": {
"@angular-material-components/datetime-picker": "^5.0.3",
"@angular/animations": "~10.2.1",
"@angular/cdk": "10.2.7",
"@angular/common": "~10.2.1",
"@angular/compiler": "~10.2.1",
"@angular/core": "~10.2.1",
"@angular/elements": "10.2.0",
"@angular/forms": "~10.2.1",
"@angular/material": "10.2.7",
"@angular/material-moment-adapter": "^11.2.0",
"@angular/platform-browser": "~10.2.1",
"@angular/platform-browser-dynamic": "~10.2.1",
"@angular/router": "~10.2.1",
"@fortawesome/angular-fontawesome": "0.7.0",
"@fortawesome/fontawesome-svg-core": "1.2.30",
"@fortawesome/free-solid-svg-icons": "5.14.0",
"@mapbox/mapbox-gl-geocoder": "4.7.0",
"@types/jest": "^26.0.15",
"@types/mocha": "^8.0.4",
"angular-auth-oidc-client": "^11.2.0",
"angular-gridster2": "10.1.6",
"angular-plotly.js": "3.0.0",
"bootstrap": "4.5.2",
"bootstrap-icons": "1.3.0",
"idb": "6.0.0",
"jasmine": "^3.6.3",
"jest": "^26.6.3",
"luxon": "1.25.0",
"mapbox-gl": "^1.12.0",
"material-icons": "^0.3.1",
"moment": "^2.29.1",
"ngx-mapbox-gl": "4.8.1",
"plotly.js": "1.55.2",
"rxjs": "~6.5.4",
"ts-jest": "^26.4.4",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1102.1",
"@angular/cli": "~10.2.0",
"@angular/compiler-cli": "~10.2.1",
"@angular/language-service": "~10.2.1",
"@types/jasmine": "^3.5.14",
"@types/jasminewd2": "~2.0.3",
"@types/luxon": "1.25.0",
"@types/mapbox-gl": "1.12.5",
"@types/node": "^12.12.62",
"@types/plotly.js": "^1.50.21",
"@typescript-eslint/eslint-plugin": "^4.4.1",
"@typescript-eslint/parser": "^4.4.1",
"eslint": "^7.11.0",
"eslint-config-google": "^0.14.0",
"eslint-config-prettier": "^6.13.0",
"eslint-plugin-prettier": "^3.1.4",
"gzipper": "^4.4.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"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",
"prettier": "^2.1.2",
"prettier-eslint": "^11.0.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.0.5"
}
}
这是我的 angular.json 文件：
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"dashboard-frontend": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/dashboard-frontend",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css",
"./node_modules/mapbox-gl/dist/mapbox-gl.css",
"./node_modules/@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css"
],
"scripts": [
"node_modules/plotly.js/dist/plotly.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [{
"type": "initial",
"maximumWarning": "4mb",
"maximumError": "6mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "dashboard-frontend:build"
},
"configurations": {
"production": {
"browserTarget": "dashboard-frontend:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "dashboard-frontend:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"codeCoverage": true,
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "dashboard-frontend:serve"
},
"configurations": {
"production": {
"devServerTarget": "dashboard-frontend:serve:production"
}
}
}
}
}
},
"defaultProject": "dashboard-frontend",
"cli": {
"analytics": false
}
}
好的，我现在是这样的：
"dependencies": {
"@angular-devkit/build-angular": "^0.1102.1",
"@angular-material-components/datetime-picker": "^5.0.3",
"@angular/animations": "~10.2.1",
"@angular/cdk": "10.2.7",
"@angular/common": "~10.2.1",
"@angular/compiler": "~10.2.1",
"@angular/core": "~10.2.1",
"@angular/elements": "10.2.0",
"@angular/forms": "~10.2.1",
"@angular/material": "10.2.7",
"@angular/material-moment-adapter": "^11.2.0",
"@angular/platform-browser": "~10.2.1",
"@angular/platform-browser-dynamic": "~10.2.1",
"@angular/router": "~10.2.1",
"@fortawesome/angular-fontawesome": "0.7.0",
"@fortawesome/fontawesome-svg-core": "1.2.30",
"@fortawesome/free-solid-svg-icons": "5.14.0",
"@mapbox/mapbox-gl-geocoder": "4.7.0",
"@types/jest": "^26.0.15",
"@types/mocha": "^8.0.4",
"angular-auth-oidc-client": "^11.2.0",
"angular-gridster2": "10.1.6",
"angular-plotly.js": "3.0.0",
"bootstrap": "4.5.2",
"bootstrap-icons": "1.3.0",
"idb": "6.0.0",
"jasmine": "^3.6.3",
"jest": "^26.6.3",
"luxon": "1.25.0",
"mapbox-gl": "^1.12.0",
"material-icons": "^0.3.1",
"moment": "^2.29.1",
"ngx-mapbox-gl": "4.8.1",
"plotly.js": "1.55.2",
"rxjs": "~6.5.4",
"ts-jest": "^26.4.4",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular/cli": "~10.2.0",
"@angular/compiler-cli": "~10.2.1",
"@angular/language-service": "~10.2.1",
"@types/jasmine": "^3.5.14",
"@types/jasminewd2": "~2.0.3",
"@types/luxon": "1.25.0",
"@types/mapbox-gl": "1.12.5",
"@types/node": "^12.12.62",
"@types/plotly.js": "^1.50.21",
"@typescript-eslint/eslint-plugin": "^4.4.1",
"@typescript-eslint/parser": "^4.4.1",
"eslint": "^7.11.0",
"eslint-config-google": "^0.14.0",
"eslint-config-prettier": "^6.13.0",
"eslint-plugin-prettier": "^3.1.4",
"gzipper": "^4.4.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"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",
"prettier": "^2.1.2",
"prettier-eslint": "^11.0.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.0.5"
}
所以我做了一个 npm install -production。但我的 node_modules 现在是：591 MB 大。
如果我执行 npm start：
我得到这个错误：
An unhandled exception occurred: Cannot find module 'typescript'
Require stack:
- C:\source\nien\cityflows\src\dashboard-frontend\node_modules\@angular-devkit\build-angular\src\dev-server\index.js
- C:\Users\nien\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
- C:\Users\nien\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\index.js
- C:\Users\nien\AppData\Roaming\npm\node_modules\@angular\cli\models\architect-command.js
- C:\Users\nien\AppData\Roaming\npm\node_modules\@angular\cli\commands\serve-impl.js
- C:\Users\nien\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\schematics\tools\export-ref.js
- C:\Users\nien\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\schematics\tools\index.js
- C:\Users\nien\AppData\Roaming\npm\node_modules\@angular\cli\utilities\json-schema.js
- C:\Users\nien\AppData\Roaming\npm\node_modules\@angular\cli\models\command-runner.js
- C:\Users\nien\AppData\Roaming\npm\node_modules\@angular\cli\lib\cli\index.js
- C:\Users\nien\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js
- C:\Users\nien\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
See "C:\Users\nien\AppData\Local\Temp\ng-0FRknQ\angular-errors.log" for further details.
好吧，我也升级到了 angualr 11。但我得到了这个信息：
√ Browser application bundle generation complete.
√ ES5 bundle generation complete.
Initial Chunk Files | Names | Size
scripts.3cf268d47c462590e7d9.js | scripts | 3.27 MB
main-es5.87f2f0f48772e84377c6.js | main | 2.49 MB
main-es2015.87f2f0f48772e84377c6.js | main | 2.36 MB
styles.d540d930321db4c962dc.css | styles | 245.64 kB
polyfills-es5.259ae27e17f48bc03647.js | polyfills-es5 | 131.80 kB
polyfills-es2015.732b81c0b5a3e3dbb1bc.js | polyfills | 36.16 kB
runtime-es2015.a4dadbc03350107420a4.js | runtime | 1.45 kB
runtime-es5.a4dadbc03350107420a4.js | runtime | 1.45 kB
| Initial ES5 Total | 6.13 MB
| Initial ES2015 Total | 5.91 MB
但我仍然收到此错误：
Error: bundle initial-es5 exceeded maximum budget. Budget 6.00 MB was not met by 133.51 kB with a total of 6.13 MB.
当我做ng build --prod.
【问题讨论】：
-
你能发布你的 package.json，你的 angular-devkit 可能会在 devDependencies 中被提及
-
移动 @angular-devkit/build-angular": "^0.1102.1"，从 devDependencies 到 dependencies
-
全局安装 typescript "npm install -g typescript"
标签： javascript angular node-modules