为什么 Angular 12 构建破坏了 WebStorm 中的 node_modules 导入？
Why Angular 12 build is breaking node_modules imports in WebStorm?
我们已将我们的应用程序更新到最新的 Angular 12（ngrx 12、路由器最新等）...
更新非常顺利，应用程序正在构建并且 运行 很好，除了一件事...
node_modules 导入被破坏，导致所有常见的 Angular 管道，找不到指令：
Unresolved pipe async
No directive is matched on attribute ngIf
Unknown html tag mat-spinner
听取 related 的建议会有所帮助。如果我删除 node_modules/.idea 路径，然后重新安装和重新索引文件，WebStorm 能够解决所有问题。 但是 ! 运行 ng serve 再次打破了这一切，只有完整的循环（删除 node_modules/.idea，重建索引）才有帮助。
是的，WebStorm 恰好在构建阶段丢失了导入，我已经重新检查了几次。删除node_modules/reinstalling/reindexing后很好，即使多次重启WebStorm也不会破坏任何东西，但是运行一次npm run proxy（简单ng serve 脚本，您可以在下面的 package.json 中找到它）完全破坏模块导入 - 您需要执行完整的 delete/reindex 才能恢复它。
这是我们的package.json。也许包版本有问题？
{
"name": "project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"proxy": "ng serve --proxy-config proxy.conf.json --disable-host-check --host 0.0.0.0 -c local",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.1.4",
"@angular/cdk": "^12.1.4",
"@angular/common": "~12.1.4",
"@angular/compiler": "~12.1.4",
"@angular/core": "~12.1.4",
"@angular/elements": "~12.1.4",
"@angular/forms": "~12.1.4",
"@angular/localize": "^12.1.4",
"@angular/material": "^12.1.4",
"@angular/material-moment-adapter": "^12.1.4",
"@angular/platform-browser": "~12.1.4",
"@angular/platform-browser-dynamic": "~12.1.4",
"@angular/router": "~12.1.4",
"@ng-bootstrap/ng-bootstrap": "^7.0.0",
"@ng-select/ng-select": "^4.0.0",
"@ngrx/data": "^12.3.0",
"@ngrx/effects": "^12.3.0",
"@ngrx/entity": "^12.3.0",
"@ngrx/router-store": "^12.3.0",
"@ngrx/store": "^12.3.0",
"@ngrx/store-devtools": "^12.3.0",
"@ngu/carousel": "^3.0.1",
"@sentry/angular": "^5.27.1",
"@sentry/tracing": "^5.27.1",
"@sweetalert2/ngx-sweetalert2": "^8.1.1",
"@swimlane/ngx-datatable": "^16.0.3",
"@types/deep-equal": "^1.0.1",
"@types/dompurify": "^2.0.2",
"@types/lodash": "^4.14.157",
"@yellowspot/ng-truncate": "^1.5.1",
"bootstrap": "^4.5.2",
"class-transformer": "^0.2.3",
"class-validator": "^0.12.2",
"cookie-parser": "^1.4.5",
"date-fns": "^2.12.0",
"deep-equal": "^2.0.3",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-unicorn": "^28.0.2",
"lodash": "^4.17.15",
"material-icons": "^0.3.1",
"moment": "^2.27.0",
"ng-recaptcha": "^6.1.0",
"ngx-dropzone": "^2.3.0",
"ngx-image-cropper": "^3.2.1",
"ngx-mat-select-search": "^3.3.0",
"ngx-scrollbar": "^7.5.2",
"rxjs": "~6.5.5",
"sweetalert2": "^10.3.3",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^12.1.4",
"@angular/cli": "^12.1.4",
"@angular/compiler-cli": "~12.1.4",
"@ngrx/schematics": "^11.1.1",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"eslint": "^7.21.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"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.3.0",
"tslint": "~6.1.0",
"typescript": "~4.3.5"
}
}
我是 运行 我的项目 npm run proxy command
Angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"projector": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/projector",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/scss"
]
},
"scripts": [],
"allowedCommonJsDependencies": [
"lodash",
"formiojs",
"native-promise-only",
"core-js",
"jwt-decode",
"fetch-ponyfill",
"compare-versions",
"moment-timezone/moment-timezone",
"json-logic-js",
"jstimezonedetect",
"class-transformer",
"validator",
"ngx-dynamic-form-builder"
],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "4mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "8kb"
}
]
},
"local": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.local.ts"
}
]
}
},
"defaultConfiguration": "local"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "projector:build"
},
"configurations": {
"production": {
"browserTarget": "projector:build:production"
},
"local": {
"browserTarget": "projector:build:local"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "projector:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"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": "projector:serve"
},
"configurations": {
"production": {
"devServerTarget": "projector:serve:production"
}
}
}
}
}
},
"defaultProject": "projector",
"cli": {
"defaultCollection": "@ngrx/schematics"
}
}
一定是懒编译的ivy包有问题； similar issue 已于 2021.1.2 修复。请考虑将 WebStorm 升级到最新版本
我们已将我们的应用程序更新到最新的 Angular 12（ngrx 12、路由器最新等）...
更新非常顺利，应用程序正在构建并且 运行 很好，除了一件事...
node_modules 导入被破坏，导致所有常见的 Angular 管道，找不到指令：
Unresolved pipe async
No directive is matched on attribute ngIf
Unknown html tag mat-spinner
听取 related 的建议会有所帮助。如果我删除 node_modules/.idea 路径，然后重新安装和重新索引文件，WebStorm 能够解决所有问题。 但是 ! 运行 ng serve 再次打破了这一切，只有完整的循环（删除 node_modules/.idea，重建索引）才有帮助。
是的，WebStorm 恰好在构建阶段丢失了导入，我已经重新检查了几次。删除node_modules/reinstalling/reindexing后很好，即使多次重启WebStorm也不会破坏任何东西，但是运行一次npm run proxy（简单ng serve 脚本，您可以在下面的 package.json 中找到它）完全破坏模块导入 - 您需要执行完整的 delete/reindex 才能恢复它。
这是我们的package.json。也许包版本有问题？
{
"name": "project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"proxy": "ng serve --proxy-config proxy.conf.json --disable-host-check --host 0.0.0.0 -c local",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.1.4",
"@angular/cdk": "^12.1.4",
"@angular/common": "~12.1.4",
"@angular/compiler": "~12.1.4",
"@angular/core": "~12.1.4",
"@angular/elements": "~12.1.4",
"@angular/forms": "~12.1.4",
"@angular/localize": "^12.1.4",
"@angular/material": "^12.1.4",
"@angular/material-moment-adapter": "^12.1.4",
"@angular/platform-browser": "~12.1.4",
"@angular/platform-browser-dynamic": "~12.1.4",
"@angular/router": "~12.1.4",
"@ng-bootstrap/ng-bootstrap": "^7.0.0",
"@ng-select/ng-select": "^4.0.0",
"@ngrx/data": "^12.3.0",
"@ngrx/effects": "^12.3.0",
"@ngrx/entity": "^12.3.0",
"@ngrx/router-store": "^12.3.0",
"@ngrx/store": "^12.3.0",
"@ngrx/store-devtools": "^12.3.0",
"@ngu/carousel": "^3.0.1",
"@sentry/angular": "^5.27.1",
"@sentry/tracing": "^5.27.1",
"@sweetalert2/ngx-sweetalert2": "^8.1.1",
"@swimlane/ngx-datatable": "^16.0.3",
"@types/deep-equal": "^1.0.1",
"@types/dompurify": "^2.0.2",
"@types/lodash": "^4.14.157",
"@yellowspot/ng-truncate": "^1.5.1",
"bootstrap": "^4.5.2",
"class-transformer": "^0.2.3",
"class-validator": "^0.12.2",
"cookie-parser": "^1.4.5",
"date-fns": "^2.12.0",
"deep-equal": "^2.0.3",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-unicorn": "^28.0.2",
"lodash": "^4.17.15",
"material-icons": "^0.3.1",
"moment": "^2.27.0",
"ng-recaptcha": "^6.1.0",
"ngx-dropzone": "^2.3.0",
"ngx-image-cropper": "^3.2.1",
"ngx-mat-select-search": "^3.3.0",
"ngx-scrollbar": "^7.5.2",
"rxjs": "~6.5.5",
"sweetalert2": "^10.3.3",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^12.1.4",
"@angular/cli": "^12.1.4",
"@angular/compiler-cli": "~12.1.4",
"@ngrx/schematics": "^11.1.1",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"eslint": "^7.21.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"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.3.0",
"tslint": "~6.1.0",
"typescript": "~4.3.5"
}
}
我是 运行 我的项目 npm run proxy command
Angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"projector": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/projector",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/scss"
]
},
"scripts": [],
"allowedCommonJsDependencies": [
"lodash",
"formiojs",
"native-promise-only",
"core-js",
"jwt-decode",
"fetch-ponyfill",
"compare-versions",
"moment-timezone/moment-timezone",
"json-logic-js",
"jstimezonedetect",
"class-transformer",
"validator",
"ngx-dynamic-form-builder"
],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "4mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "8kb"
}
]
},
"local": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.local.ts"
}
]
}
},
"defaultConfiguration": "local"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "projector:build"
},
"configurations": {
"production": {
"browserTarget": "projector:build:production"
},
"local": {
"browserTarget": "projector:build:local"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "projector:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"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": "projector:serve"
},
"configurations": {
"production": {
"devServerTarget": "projector:serve:production"
}
}
}
}
}
},
"defaultProject": "projector",
"cli": {
"defaultCollection": "@ngrx/schematics"
}
}
一定是懒编译的ivy包有问题； similar issue 已于 2021.1.2 修复。请考虑将 WebStorm 升级到最新版本