Я работаю над довольно большим angular проектом. Мы были на angular 8 большую часть 2020 года и отложили обновление до angular 9 и 10, потому что в прошлый раз, когда мы пытались выполнить обновление, приложение показалось неправильным. Поэтому мы решили использовать лето для обновления и устранения проблем, с которыми мы столкнулись. Я не участвовал в самом обновлении, а ответственный за это парень уехал в отпуск.
Есть несколько проблем, которые затрагивают нашу среду разработки, и которые мы не испытываем в нашей производственной сборке:
- setTimeout -функции перестали работать. Тайм-аут в 1 секунду может занять 30 секунд. То же самое с разными альтернативами rx js, например delay (). Кажется, что каждая функция, использующая setTimeout (), зависает или зависает.
- Мы потеряли горячую перезагрузку при сохранении.
- Chrome devtools кажется очень медленным.
- В целом приложение кажется непредсказуемым.
- Перекомпиляция приложения при сохранении происходит очень медленно.
И опять же, наша производственная сборка, похоже, не страдает от этих проблем, особенно проблем с setTimeout.
Я попытался просмотреть наши angular. json и tsconfig-конфигурации и выключить 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/"
}