我从事一个相当大的角度项目。我们在 2020 年的大部分时间都在使用 Angular 8，并推迟升级到 Angular 9 和 10，因为上次我们尝试升级时，应用程序感觉不对。因此，我们决定利用夏天来升级和解决我们遇到的问题。我没有参与实际的升级，负责人已经去度假了。
我们的开发环境存在一些问题，我们在生产构建中没有遇到这些问题：
- setTimeout -functions 已停止工作。1 秒的超时实际上可能需要 30 秒。与不同的rxjs替代方案相同，例如延迟()。它使每个使用 setTimeout() 的函数看起来都冻结或挂起。
- 我们在保存时丢失了热重载。
- Chrome devtools 感觉非常滞后。
- 该应用程序整体感觉不可预测。
- 保存时重新编译应用程序非常慢。
同样，我们的生产构建似乎没有遇到这些问题，尤其是 setTimeout 的问题。
我曾尝试查看我们的 angular.json 和 tsconfig-configurations 并关闭 Ivy，但运气不佳。另外，我正在运行最新版本的 Node.js，并尝试多次删除 node_modules 和 package-lock.json。
如果有人听说过类似的事情发生，或有任何建议，将不胜感激。是否存在导致 Ivy 编译器出现问题的依赖项？
Angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"hf-client": {
"i18n": {
"locales": {
"nb": {
"translation": "src/assets/i18n/messages.nb.xlf",
"baseHref": ""
}
}
},
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"outputPath": "Static",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"i18nFile": "src/assets/i18n/messages.nb.xlf",
"i18nLocale": "nb",
"tsConfig": "src/tsconfig.app.json",
"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
},
"assets": [
"src/favicon.ico",
"src/assets",
"src/app.config.js",
"src/Web.config",
{
"glob": "**/*",
"input": "node_modules/tinymce/skins",
"output": "/skins"
},
{
"glob": "**/*",
"input": "node_modules/tinymce/themes",
"output": "/themes"
},
{
"glob": "**/*",
"input": "node_modules/tinymce/plugins",
"output": "/plugins"
},
{
"glob": "**/*",
"input": "src/app/shared/plugins/tinymce-mention",
"output": "/plugins/mention"
},
{
"glob": "**/*",
"input": "src/assets/i18n/langsTinyMCE",
"output": "/langs"
}
],
"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/angular2-toaster/toaster.css",
"node_modules/@progress/kendo-theme-bootstrap/dist/all.css",
"node_modules/dragula/dist/dragula.css",
"node_modules/angular-calendar/css/angular-calendar.css",
"src/styles/app.scss"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
},
{
"replace": "src/index.html",
"with": "src/index.release.html"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"hmr": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "hf-client:build"
},
"configurations": {
"production": {
"browserTarget": "hf-client:build:production"
},
"hmr": {
"hmr": true,
"browserTarget": "hf-client:build:hmr"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "hf-client:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"stylePreprocessorOptions": {
"includePaths": [
"src/styles"
]
},
"styles": [],
"assets": [
"src/assets",
"src/favicon.ico",
"src/Web.config",
{
"glob": "**/*",
"input": "node_modules/tinymce/skins",
"output": "/skins"
},
{
"glob": "**/*",
"input": "node_modules/tinymce/themes",
"output": "/themes"
},
{
"glob": "**/*",
"input": "node_modules/tinymce/plugins",
"output": "/plugins"
},
{
"glob": "**/*",
"input": "src/assets/i18n/langsTinyMCE",
"output": "/langs"
}
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"hf-client-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "hf-client:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "hf-client"
}
tsconfig.json
{
"files": [],
"references": [
{
"path": "./src/tsconfig.app.json"
},
{
"path": "./src/tsconfig.spec.json"
}
]
}
tsconfig.app.json
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"types": [
"node"
]
},
"files": [
"main.ts",
"polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
tsconfig.base.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./src",
"downlevelIteration": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2015",
"resolveJsonModule": true,
"esModuleInterop": true,
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}
依赖项
{
"name": "hf-client",
"version": "5.6.1",
"scripts": {
"ng": "ng",
"start": "ng serve --port 8080",
"serve": "ng serve --port 8080",
"serve:hmr": "ng serve --port 8080 --configuration hmr",
"build:no-prod": "ng build",
"build": "ng build --prod",
"build:analyze": "ng build --stats-json",
"postbuild": "node post_build.js",
"stats": "webpack-bundle-analyzer Static/stats.json",
"test": "ng test --code-coverage",
"test-headless": "ng test --code-coverage --browsers=ChromeHeadless",
"test:once": "ng test --watch=false --code-coverage --browsers ChromeHeadless",
"test-no-sm": "ng test --sourceMap=false --code-coverage",
"lint": "ng lint",
"nightwatch-test": "node nightwatch.conf.js && node node_modules/nightwatch/bin/nightwatch -c nightwatch.conf.js",
"nw": "npm run nightwatch-test -- -e chrome-local",
"nwh": "npm run nightwatch-test -- -e chrome-local-headless",
"postinstall": "ngcc --properties es5 browser module main --first-only --create-ivy-entry-points && ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
},
"private": true,
"dependencies": {
"@angular/animations": "^10.0.1",
"@angular/cdk": "^10.0.1",
"@angular/common": "^10.0.1",
"@angular/compiler": "^10.0.1",
"@angular/core": "^10.0.1",
"@angular/forms": "^10.0.1",
"@angular/localize": "~10.0.0",
"@angular/material": "^10.0.1",
"@angular/platform-browser": "^10.0.1",
"@angular/platform-browser-dynamic": "^10.0.1",
"@angular/router": "^10.0.1",
"@angularclass/hmr": "^2.1.3",
"@aspnet/signalr": "^1.1.4",
"@ngxs/devtools-plugin": "^3.6.2",
"@ngxs/storage-plugin": "^3.6.2",
"@ngxs/store": "^3.6.2",
"@progress/kendo-angular-buttons": "^5.4.1",
"@progress/kendo-angular-common": "^1.2.2",
"@progress/kendo-angular-dateinputs": "^4.3.0",
"@progress/kendo-angular-dialog": "^4.1.3",
"@progress/kendo-angular-dropdowns": "^4.2.7",
"@progress/kendo-angular-excel-export": "^3.1.3",
"@progress/kendo-angular-grid": "^4.7.2",
"@progress/kendo-angular-inputs": "^6.5.1",
"@progress/kendo-angular-intl": "^2.0.1",
"@progress/kendo-angular-l10n": "^2.0.1",
"@progress/kendo-angular-layout": "^4.2.3",
"@progress/kendo-angular-pdf-export": "^2.0.3",
"@progress/kendo-angular-popup": "^3.0.5",
"@progress/kendo-angular-tooltip": "^2.1.2",
"@progress/kendo-angular-upload": "^5.3.0",
"@progress/kendo-data-query": "^1.5.3",
"@progress/kendo-drawing": "^1.7.0",
"@progress/kendo-theme-bootstrap": "^4.16.0",
"@tinymce/tinymce-angular": "^2.5.0",
"@w11k/ngx-componentdestroyed": "^4.1.5",
"angular-calendar": "^0.27.14",
"angular-gridster2": "8.3.0",
"angular-text-input-autocomplete": "^0.3.0",
"angular2-toaster": "^7.0.0",
"bootstrap": "^4.4.1",
"chart.js": "^2.8.0",
"cldr-data": "^32.0.1",
"core-js": "^2.5.4",
"date-fns": "^1.30.1",
"dragula": "^3.7.2",
"file-saver": "^1.3.8",
"globalize": "^1.4.2",
"inputmask": "^3.3.11",
"jquery": "^3.5.1",
"ng2-dragula": "^2.1.1",
"ngx-clipboard": "^12.3.1",
"ngx-contextmenu": "^5.3.0",
"node-sass": "^4.14.1",
"rxjs": "~6.5.5",
"rxjs-compat": "^6.5.4",
"sticky-sidebar-v2": "^1.0.1",
"tinymce": "^4.9.8",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1000.0",
"@angular/cli": "^10.0.0",
"@angular/compiler-cli": "^10.0.1",
"@angular/language-service": "^10.0.1",
"@types/jasmine": "^3.5.6",
"@types/jasminewd2": "^2.0.8",
"@types/lodash": "^4.14.149",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine": "^3.5.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"karma-teamcity-reporter": "~1.1.0",
"selenium-download": "^2.0.14",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
},
"proxy": "http://localhost:15631/"
}