Angular v11升级至v12后遇到的若干问题解决方案求助

1. 配置文件angular.json中的development区块消失 #

Angular 12重构了默认配置结构，升级过程中旧的开发配置会被自动合并移除，你可以手动补全对应配置：

• 在angular.json的projects.<你的项目名>.architect.build.configurations节点下新增development配置项：

"development": {
  "buildOptimizer": false,
  "optimization": false,
  "vendorChunk": true,
  "extractLicenses": false,
  "sourceMap": true,
  "namedChunks": true
}

原有的production配置无需修改，直接保留即可。

2. Visual Studio Code中的断点无法正常命中 #

按以下顺序排查修复：

• 首先确认上一步的development配置中sourceMap参数已设置为true，未开启sourcemap会直接导致断点无法映射到源码
• 检查VS Code工作区.vscode/launch.json的启动配置，确认webRoot参数指向项目根目录，参考配置如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "启动Angular调试",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

• 如果仍无法命中，删除项目根目录下的.angular缓存文件夹，重新启动ng serve后再调试。

3. 执行ng serve命令时出现生产环境相关警告 #

Angular 12开始ng serve默认使用生产配置启动，修改angular.json指定默认启动配置即可解决：

• 在projects.<你的项目名>.architect.serve节点下新增对应配置关联，同时设置默认启动配置为development：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "production": {
      "browserTarget": "<你的项目名>:build:production"
    },
    "development": {
      "browserTarget": "<你的项目名>:build:development"
    }
  },
  "defaultConfiguration": "development"
}

配置完成后直接执行ng serve即可默认启动开发环境，无需额外加参数，也不会再出现生产环境相关警告。

内容的提问来源于stack exchange，提问作者GotRakija