Angular 17自定义Logger服务：为何无法保留TypeScript调用行号？

直接console.log(new Error().stack)能显示TypeScript行号，拆分栈信息后却拿到JavaScript路径，核心原因和浏览器/Node.js的栈信息格式化逻辑以及Angular的构建流程有关：

• 浏览器的自动源映射转换：当你直接打印整个stack字符串时，浏览器会自动利用Angular构建生成的sourcemap文件，把栈里的JavaScript路径和行号映射回对应的TypeScript文件位置。这个转换是浏览器控制台层面做的，不是栈字符串本身就包含TS信息。
• 栈字符串的原始内容是JS信息：new Error().stack返回的原始字符串里，其实存储的都是编译后的JavaScript文件路径和行号。你拆分栈信息时取到的是原始的JS位置，而浏览器控制台显示TS信息是后续做的映射渲染，并没有修改栈字符串本身的内容。
• Angular构建的产物特性：Angular 17默认使用ESBuild构建，会生成sourcemap文件用于调试，但这些sourcemap不会被嵌入到栈信息里，只是浏览器在渲染控制台输出时才会读取并做映射转换。

举个例子，原始栈字符串可能是这样的：

Error
    at Logger.log (http://localhost:4200/main.js:123:45)
    at AppComponent.ngOnInit (http://localhost:4200/main.js:678:90)

浏览器控制台显示时会自动转成对应的app.component.ts:23，但你拆分字符串拿到的还是main.js:678:90。

如果要在代码里拿到TS行号，需要自己借助sourcemap解析库（比如source-map），读取对应的sourcemap文件，手动把JS行号映射回TS位置。

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