Webpack异步loader优先级问题：修改TS代码后@ngtools/webpack未处理修改内容

你遇到的核心问题是**@ngtools/webpack v1.x版本会绕过webpack的标准loader处理管道，直接读取磁盘上的原始TypeScript文件进行编译**，完全不接收上游loader（也就是你的test-loader）修改后的内存内容。

具体来说，旧版本的@ngtools/webpack（v1.x对应Angular 5及更早版本）中的AngularCompilerPlugin为了优化Angular项目的编译速度，并没有遵循webpack常规的loader工作流程——它会直接调用TypeScript Compiler API去读取磁盘上的.ts源文件，而不是从loader链中获取经过处理后的内容。所以哪怕你的test-loader已经修改了文件内容，这些修改只停留在webpack的内存管道里，根本没被@ngtools/webpack看到。

针对这个问题，你可以根据项目情况选择以下方案：

方案1：替换为ts-loader+angular2-template-loader组合（推荐） #

放弃使用@ngtools/webpack，改用常规的TS loader链处理文件，这样test-loader修改后的内容会被后续loader正常接收并处理。配置示例如下：

module.exports = {
  // ...其他webpack配置
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          'test-loader', // 你的自定义loader放在最前面
          'ts-loader',
          'angular2-template-loader' // 处理Angular组件的模板和样式
        ],
        exclude: /node_modules/
      },
      // ...其他规则（比如处理html、css等）
    ]
  },
  // 记得移除原配置中的AngularCompilerPlugin相关代码
};

方案2：修改test-loader逻辑（不推荐） #

如果必须保留@ngtools/webpack，可以让test-loader在处理文件时直接修改磁盘上的原始.ts文件（而不是只修改内存中的内容）。但这种方式会污染你的源代码，开发过程中容易引发混乱，除非是临时测试场景，否则不建议使用。

方案3：升级相关依赖（成本较高） #

升级@ngtools/webpack到对应Angular 6+的版本（比如v6.x及以上），同时将webpack升级到v4+、TypeScript升级到3.x及以上。新版本的@ngtools/webpack已经优化了与webpack loader管道的兼容性，会正常接收上游loader处理后的内容。不过这个方案需要同步升级Angular框架版本，对现有项目的改动较大，需要评估成本。

你可以在test-loader中添加日志，打印处理后的文件内容，然后对比@ngtools/webpack编译后的输出产物，如果产物中没有出现你修改的内容，就可以确认是@ngtools/webpack没有读取到loader处理后的内容。

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