Angular13无法在浏览器debug_angular 升级后无法debug

前言

本文将介绍如何解决在Angular 13中无法在浏览器中进行调试的问题，并提供了一种解决方法。

发生场景

根据项目需求，升级至Angular 13后，发现无法在浏览器中进行调试。

问题原因

无法进行调试的原因是，当使用Angular 13的npm start命令时，会自动选择生产环境，从而无法在浏览器中进行调试。

解决办法

下面是解决该问题的三个步骤：

1. 在angular.json文件的build配置中添加development对象：

"configurations": {
    ...
    "development": {
        "sourceMap": true,
        "optimization": false
    }
}
1
2
3
4
5
6
7

2. 在angular.json文件的serve配置中添加development对象：

"configurations": {
    ...
    "development": {
        "browserTarget": "<app-name>:build:development" //<app-name>需要修改为具体项目名称
    }
}
1
2
3
4
5
6

3. 修改package.json文件中的scripts下的dev命令：

"dev": "...ng build --configuration=development && ng serve --configuration development"
1

后言

希望本文对您有所帮助。如果您有任何问题，请在下方留言，我将尽力解答。