为什么 Angular 12 构建会破坏 WebStorm 中的 node_modules 导入? [英] Why Angular 12 build is breaking node_modules imports in WebStorm?
问题描述
我们已将应用更新到最新的 Angular 12(ngrx 12、路由器最新版等)...
We have updated our app to the latest Angular 12 (ngrx 12, router latest, etc)...
更新完成得很好，应用程序正在构建并且运行良好，除了一件事......
Update finished pretty well, the app is building and is running good, except one thing...
node_modules 导入被破坏，导致所有常见的 Angular 管道，指令都找不到:
node_modules imports are broken, resulting in all common Angular pipes, directives being not found:
Unresolved pipe async
No directive is matched on attribute ngIf
Unknown html tag mat-spinner
做来自 的建议相关帮助.如果我删除 node_modules/.idea 路径，然后重新安装和重新索引文件，WebStorm 能够解决所有问题.但是！运行 ng serve 再次打破了这一切，只有完整的周期(删除 node_modules/.idea，reindex)有帮助.
Doing advices from related helps. If I delete node_modules/.idea paths and then reinstall and reindex files, WebStorm is able to resolve everything. But ! Running ng serve breaks it all again and only full cycle (delete node_modules/.idea, reindex) helps.
是的，WebStorm 在构建阶段完全丢失了导入，我已经重新检查了几次.删除node_modules/重新安装/重新索引后就好了，即使多次重启WebStorm也不会破坏任何东西，但只运行一次npm run proxy(简单ng serve 脚本，您可以在下面的 package.json 中找到它)完全破坏模块导入 - 您需要执行完全删除/重新索引以恢复它.
Yes, WebStorm loses imports exactly during the build phase, I have rechecked a couple of times. It's good after deleting node_modules/reinstalling/reindexing, even multiple WebStorm restarts won't break anything, but running for just one time npm run proxy (simple ng serve script, you can find it below in package.json) breaks module imports completely - you need to do full delete/reindex to restore it.
这是我们的 package.json.也许包版本有问题?
Here is our package.json. Maybe something is wrong with package versions?
{
"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 命令
I am running my project with 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 包的问题；类似问题已在 2021.1.2 中修复.请考虑将 WebStorm 升级到最新版本
Must be a problem with lazy-compiled Ivy packages; similar issue is fixed in 2021.1.2. Please consider upgrading WebStorm to the latest version
这篇关于为什么 Angular 12 构建会破坏 WebStorm 中的 node_modules 导入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
