after i upgrade my angular project from v9 to v16 a lot of issues happened: first when use ng serve to run the project this warning appear Warning: Unable to locate stylesheet: D:\DevOps_\Nada\Nada\Dev\Sky.Nada.DesignPortal\ClientApp\assets\Styles\glyphicons.min.css this appear for all links in my index.html although is use in index.html -- and the webpack folder stop appearing in the browser debugging tool in source tab angular.json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "ClientApp": { "projectType": "application", "schematics": {}, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "strict": false, "options": { "allowedCommonJsDependencies": [ "angular-slickgrid", "stream", "qrcode", "lodash", "style-dictionary", "jszip", "devexpress-diagram", "devexpress-gantt", "devextreme-quill", "jsbarcode", "crypto-js", "secure-web-storage", "jquery", "xml2js", "pdfjs-dist", "file-saver", "exceljs", "devextreme-dist" ], "outputPath": "dist/ClientApp", "index": "src/index.html", "main": "src/main.ts", "polyfills": [ "zone.js", "src/polyfills.ts" ], "tsConfig": "tsconfig.app.json", "aot": true, "assets": [ "src/favicon.ico", "src/assets", "src/web.config" ], "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/assets/Styles/fontawesome.min.css", "src/assets/Styles/font-awesome.min.css", "node_modules/stimulsoft-reports-js/Css/stimulsoft.designer.office2013.whiteblue.css", "node_modules/stimulsoft-reports-js/Css/stimulsoft.viewer.office2013.whiteblue.css", "node_modules/@aws-amplify/ui-angular/theme.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/@popperjs/core/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/stimulsoft-reports-js/Scripts/stimulsoft.reports.js", "node_modules/stimulsoft-reports-js/Scripts/stimulsoft.viewer.js", "node_modules/stimulsoft-reports-js/Scripts/stimulsoft.designer.js" ] }, "configurations": { "prod": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" }, { "replace": "src/aws-exports-dev.ts", "with": "src/aws-exports-prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "30mb", "maximumError": "30mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" } ] }, "test": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.test.ts" }, { "replace": "src/aws-exports-dev.ts", "with": "src/aws-exports-test.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "30mb", "maximumError": "30mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" } ] }, "dev": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.dev.ts" } ], "optimization": false, "devtool": "source-map", "outputHashing": "all", "sourceMap": true, "extractCss": true, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "30mb", "maximumError": "30mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" } ] }, "local": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.local.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "30mb", "maximumError": "30mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "ClientApp:build" }, "configurations": { "prod": { "browserTarget": "ClientApp:buildrod" }, "test": { "browserTarget": "ClientApp:build:test" }, "dev": { "browserTarget": "ClientApp:build:dev" }, "development": { "optimization": false, "outputHashing": "all", "sourceMap": true, "namedChunks": true, "extractLicenses": false, "vendorChunk": true, "buildOptimizer": false, "budgets": [] }, "local": { "browserTarget": "ClientApp:build:local", "optimization": false, "outputHashing": "all", "sourceMap": true, "namedChunks": true, "extractLicenses": false, "vendorChunk": true, "buildOptimizer": false, "budgets": [] } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "ClientApp: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", "src/web.config" ], "styles": [ "node_modules/devextreme/dist/css/dx.common.css", "node_modules/devextreme/dist/css/dx.light.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/assets/Styles/fontawesome.min.css", "src/assets/Styles/font-awesome.min.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ] } }, "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-angularrotractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "ClientApp:serve" }, "configurations": { "prod": { "devServerTarget": "ClientApp:serverod" }, "test": { "devServerTarget": "ClientApp:serve:test" }, "dev": { "devServerTarget": "ClientApp:serve:dev" }, "local": { "devServerTarget": "ClientApp:serve:local" } } } } } }, "cli": { "analytics": false } } tsconfig.json (note that when I update "target" to "ES2022" error appear that this value not valid value) { "compileOnSave": false, "compilerOptions": { "strict": false, "allowJs": true, "allowSyntheticDefaultImports": true, "baseUrl": "./", "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "importHelpers": true, "lib": [ "ES2022", "dom" ], "moduleResolution": "node", "outDir": "./dist/out-tsc", "resolveJsonModule": true, "sourceMap": true, "target": "ES2022", "module": "ES2022", "types": [ "jquery", "node" ], "paths": { "stream": [ "node_modules/stream-browserify" ] } }, "allowedCommonJsDependencies": [ "angular-slickgrid", "stream" ], "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": false }, "exclude": [ "node_modules", "static", "lib" ], "include": [ "src/**/*.ts" ], "files": [ "src/polyfills.ts" ] } packages.json { "name": "client-app", "version": "22.5.0", "resolutions": { "webpack": "^5.0.0" }, "scripts": { "ng": "ng", "start": "node --max_old_space_size=14192 ./node_modules/@angular/cli/bin/ng serve", "build": "ng build --configuration=dev", "build-prod-patch": "npm version patch && node ./replace.build.js && ng build --configuration=dev && node ./versioning.build.js", "build-prod-no-patch": "node ./replace.build.js && ng build --configuration=dev && node ./versioning.build.js", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "-": "0.0.1", "@angular/animations": "^16.2.0", "@angular/cdk": "^16.2.12", "@angular/common": "^16.2.0", "@angular/compiler": "^16.2.0", "@angular/core": "^16.2.0", "@angular/flex-layout": "15.0.0-beta.42", "@angular/forms": "^16.2.0", "@angular/material": "^16.2.12", "@angular/platform-browser": "^16.2.0", "@angular/platform-browser-dynamic": "^16.2.0", "@angular/router": "^16.2.0", "@aws-amplify/ui-angular": "^5.0.7", "@babel/runtime": "^7.23.8", "@floating-ui/dom": "^1.5.4", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0", "@popperjs/core": "^2.11.8", "angular-code-input": "2.0.0", "aws-amplify": "^6.0.12", "bignumber.js": "^9.0.1", "bootstrap": "^5.3.0", "core-js": "3.6.1", "crypto-js": "^4.0.0", "devextreme": "23.1.7", "devextreme-angular": "23.1.7", "devextreme-aspnet-data-nojquery": "2.6.1", "devextreme-dist": "23.1.7", "exceljs": "^4.2.0", "file-saver": "^2.0.5", "jquery": "^3.4.1", "jsbarcode": "^3.11.0", "jspdf": "^2.5.1", "jspdf-autotable": "^3.5.13", "ngx-barcode6": "^1.0.13", "ngx-device-detector": "6.0.2", "pdfjs": "^2.4.7", "pdfjs-dist": "2.5.207", "replace-in-file": "^6.3.5", "rxjs": "~7.8.0", "save": "^2.4.0", "secure-web-storage": "^1.0.2", "stimulsoft-reports-js": "^2023.3.2", "stream": "^0.0.2", "stream-browserify": "^3.0.0", "timers": "^0.1.1", "tslib": "^2.3.0", "zone.js": "~0.13.3" }, "devDependencies": { "@angular-devkit/build-angular": "^16.2.11", "@angular/cli": "~16.2.11", "@angular/compiler-cli": "~16.2.0", "@angular/language-service": "~16.2.0", "@types/jasmine": "~4.3.0", "@types/jasminewd2": "~2.0.3", "@types/jquery": "^3.5.27", "@types/node": "^12.19.14", "jasmine-core": "~4.6.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "protractor": "^7.0.0", "ts-node": "~8.3.0", "typescript": "~5.1.3" } } Continue reading...
