为什么 dist 中缺少 typescript 源代码？

Question

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

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

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

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

编辑

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

• 我对 Chrome 的“将文件夹添加到工作区”功能的体验非常糟糕。有时文件无法识别、断点被忽略、Chrome 崩溃。

• 有人可能会建议使用 IDE 的调试器来解决这些问题。但是，我仍然没有找到一种方法来配置 WebStorm 以在附加（！）Chrome 调试器时调试打字稿文件。使用带有 Node.js 或 JavaScript-Debug 配置的 WebStorm 调试 typescript，但不适用于“附加 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