Question

Angular CLI编译器生成源映射（.map文件），该源映射允许在Chrome开发人员工具中调试原始打字稿代码。使用JIT编译器/ ng serve在本地进行开发时，我已经在使用此功能。

但是，当我使用AOT编译器/ ng build为Web服务器构建预览版本时，尽管可以在dist目录中找到所有映射文件，但是我无法调试代码。原因是ng buid没有将源代码.ts文件导出到dist文件夹中。

如果缺少源代码，源映射的目的是什么？

如何实现将相关源代码（.ts）导出到dist上的ng build？ angular.json是否有cli参数或设置？

编辑

我现在了解没有源文件的源映射的目的（请参阅注释）-目的是调试本地文件系统上的源代码。 Chrome允许为此添加到本地文件的映射。但是，出于以下几个原因，我仍在寻找一种将原始源代码提供给我的应用的方法：

我对Chrome的“将文件夹添加到工作区”功能有非常不好的经验。有时无法识别文件，忽略断点，Chrome崩溃。
一个人可能建议使用IDE的调试器来解决这些问题。但是，在附加（！）Chrome调试器时，我仍然没有找到配置 WebStorm 来调试打字稿文件的方法。调试打字稿与具有Node.js或JavaScript-Debug配置的 WebStorm 一起使用，但不适用于“附加Node.js / Chrome”调试配置。我调试了在移动设备上运行的应用程序，因此必须使用此调试选项。
即使其他开发人员在不同的分支/代码库中工作，其他开发人员也应该能够调试该应用程序。

当我写这个问题时，我认为某些配置错误。既然我了解了Angular的源映射的意图，我将询问您是否存在提供源文件的解决方法。例如，angular.json允许指定资产规则，但是当我试图利用资产规则来实现此目的时，我并没有成功。

Answer 1

您需要创建一个新环境，为此环境添加设置并使用此配置进行构建。参见示例：

创建新的环境文件environment.dev.ts：

export const environment = {
  production: false,
  baseUrl: 'http://192.168.1.11',
  port: ':2992',
  api: 'api',
  debug: true,
  type: 'dev'
};

在配置部分下的angular.json中添加环境构建设置。注意“ sourceMap”布尔值：

"dev": {
  "fileReplacements": [{
     "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.dev.ts"
   }],
   "optimization": true,
   "outputHashing": "all",
   "sourceMap": true,
   "extractCss": true,
   "namedChunks": false,
   "aot": true,
   "extractLicenses": true,
   "vendorChunk": false,
   "buildOptimizer": true
}

然后在此环境下构建

ionic cordova build android -c dev

为什么dist中缺少打字稿源代码？

1 个答案: