升级至Angular 16后无法访问Webpack调试功能
Angular 16升级后Chrome调试Sources中Webpack文件夹不显示的问题
我接手了一个基于Angular 10开发的项目,将其连同依赖包升级至Angular 16后遇到问题:运行ng serve -o并在Chrome中调试页面时,Sources面板下的Webpack文件夹无法显示(原Angular 10版本正常显示)。经排查得知需修改angular.json的serve配置,但尝试多次调整均无效,且找不到匹配的参考示例。这是我首个非从零搭建的Angular项目,原开发者已离职,附上当前的angular.json配置文件如下:
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "ng-shears": { "root": "", "sourceRoot": "src", "projectType": "application", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "aot": true, "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "tsConfig": "src/tsconfig.app.json", "polyfills": "src/polyfills.ts", "assets": [ "src/assets", "src/favicon.ico" ], "styles": [ "src/styles.css", "node_modules/primeicons/primeicons.css", "node_modules/primeng/resources/themes/nova-alt/theme.css", "node_modules/primeng/resources/primeng.min.css", "src/styles.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/moment/min/moment.min.js" ] }, "configurations": { "production": { "budgets": [ { "type": "anyComponentStyle", "maximumWarning": "6kb" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ] }, "qa": { "budgets": [ { "type": "anyComponentStyle", "maximumWarning": "6kb" } ], "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.qa.ts" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "ng-shears:build" }, "configurations": { "production": { "browserTarget": "ng-shears:build:production" }, "qa": { "browserTarget": "ng-shears:build:qa" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "ng-shears: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": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/moment/min/moment.min.js" ], "styles": [ "src/styles.css", "node_modules/font-awesome/css/font-awesome.min.css", "node_modules/primeng/resources/themes/fluent-light/theme.css", "node_modules/primeng/resources/primeng.min.css" ], "assets": [ "src/assets", "src/favicon.ico" ] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "src/tsconfig.app.json", "src/tsconfig.spec.json" ], "exclude": [ "**/node_modules/**" ] } } } }, "ng-shears-e2e": { "root": "e2e", "sourceRoot": "e2e", "projectType": "application", "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "./protractor.conf.js", "devServerTarget": "ng-shears:serve" } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "e2e/tsconfig.e2e.json" ], "exclude": [ "**/node_modules/**" ] } } } } }, "schematics": { "@schematics/angular:component": { "prefix": "app", "style": "css" }, "@schematics/angular:directive": { "prefix": "app" } }, "cli": { "analytics": false } }
内容的提问来源于stack exchange,提问作者cszynkowski
相关产品推荐
相关产品推荐

