Angular中导入TypeScript组件为字符串遇注入异常的解决方案咨询

问题根源 #

Angular CLI在开发模式下会对组件的.ts/.scss/.html文件做预处理（比如内联模板/样式、添加热更新代码、重写导入路径），导致Webpack的asset/source规则拿到的是Angular处理后的修改版文件，而非原始文件，进而出现无效循环导入或异常内容。

解决方案 #

方案1：分离原始文件到非组件目录

把需要加载为字符串的原始组件文件复制一份到assets或专门的代码片段目录（比如src/assets/code-snippets），导入这份未被Angular预处理的副本：

// 导入副本而非当前组件的源文件
import tsContent from '../assets/code-snippets/checkbox-page.component.ts?raw';

这种方法无需修改Webpack配置，简单直接，适合快速解决问题。

方案2：修改Webpack配置，让Angular跳过带?raw查询的文件

通过自定义Webpack配置，让Angular的loader不处理带有?raw查询参数的文件，确保Webpack的asset/source规则直接读取原始文件：

1. 安装自定义Webpack构建工具

npm install @angular-builders/custom-webpack --save-dev

2. 修改angular.json配置
   找到architect.build和architect.serve的builder字段，替换为自定义Webpack的builder，并指定配置文件路径：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            // 保留原有其他配置
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            // 保留原有其他配置
          }
        }
      }
    }
  }
}

3. 更新webpack.config.js
   添加规则让Angular的TS/SCSS/HTML loader跳过带?raw的文件，同时保留asset/source规则：

module.exports = {
  module: {
    rules: [
      // 排除带?raw的TS文件，避免Angular预处理
      {
        test: /\.ts$/,
        resourceQuery: { not: [/raw/] },
        use: [
          'ts-loader',
          '@angular-devkit/build-angular/src/webpack/loaders/ivy-ngcc-loader'
        ]
      },
      // 排除带?raw的SCSS文件
      {
        test: /\.scss$/,
        resourceQuery: { not: [/raw/] },
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      // 排除带?raw的HTML文件
      {
        test: /\.html$/,
        resourceQuery: { not: [/raw/] },
        use: 'raw-loader'
      },
      // 处理raw导入
      {
        resourceQuery: /raw/,
        type: 'asset/source'
      }
    ]
  }
};

4. 验证结果
   重启开发服务器后，导入./checkbox-page.component.ts?raw即可获取原始组件文件内容，不再出现异常导入语句。

方案3：用raw-loader替代asset/source（兼容Webpack 4或特殊场景）

虽然Webpack 5推荐asset/source，但部分场景下raw-loader和Angular预处理的兼容性更好：

1. 安装依赖：

npm install raw-loader --save-dev

2. 修改Webpack规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|scss|html)$/,
        resourceQuery: /raw/,
        use: 'raw-loader'
      }
    ]
  }
};

同时需按方案2的步骤3，让Angular的loader排除带?raw的文件。

注意事项 #

• 仅开发模式出问题是因为生产模式下Angular会做彻底优化，不会保留预处理的中间代码。
• 修改Webpack配置后必须重启开发服务器才能生效。

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