如何让Ionic 5 + Angular 11项目ionic serve时输出.ts文件详细报错信息

1. 配置angular.json开发环境参数 #

打开项目根目录的angular.json文件，定位到projects → 你的项目名称 → architect → serve节点，做如下配置：

• 确认defaultConfiguration字段值为development，避免默认启用生产环境配置
• 在configurations.development节点下开启sourcemap、关闭代码优化：

"serve": {
  "configurations": {
    "development": {
      "sourceMap": true,
      "optimization": false,
      "buildOptimizer": false,
      "namedChunks": true,
      "vendorChunk": true
    }
  },
  "defaultConfiguration": "development"
}

2. 校验tsconfig编译配置 #

打开根目录的tsconfig.json，确保compilerOptions下存在以下配置：

{
  "compilerOptions": {
    "sourceMap": true,
    "mapRoot": "./"
  }
}

如果项目存在单独的开发环境ts配置文件（如tsconfig.dev.json），需要同步修改上述参数。

3. 关闭开发环境生产模式 #

检查src/main.ts文件，确保没有全局启用生产模式，正确的配置逻辑如下：

import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

同时确认src/environments/environment.ts中的production字段值为false。

4. 重启开发服务 #

所有配置修改完成后，停止当前运行的ionic serve进程，重新执行命令启动服务，刷新浏览器即可看到包含.ts文件路径和具体行号的完整报错信息。
如果配置后仍不生效，可使用强制开启sourcemap的启动命令：ionic serve -- --source-map=true

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