Angular4升级Angular9时Webpack提示缺少loader的问题

你遇到的核心问题是自定义的webpack.config.js没有被Angular CLI加载——从Angular 6+开始，官方CLI不再自动识别根目录的Webpack配置文件，必须通过自定义构建器来集成。下面是一步步的解决方案：

1. 安装自定义Webpack构建器 #

首先安装Angular官方推荐的自定义Webpack集成工具，让CLI能识别你的配置文件：

npm install @angular-builders/custom-webpack --save-dev
npm install @angular-builders/dev-server --save-dev # 如需开发服务器支持请安装

2. 修改angular.json替换默认构建器 #

打开项目根目录的angular.json，找到projects下你的项目配置，修改architect.build和architect.serve的构建器指向：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js" // 明确指向你的自定义Webpack配置
      },
      // 保留原有outputPath、index、main等配置项
    },
    "configurations": {
      "production": {
        // 保留原有生产环境配置
      }
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "browserTarget": "你的项目名称:build"
    }
  }
}

这样Angular CLI执行ng build或ng serve时，就会加载你的自定义Webpack配置了。

3. 调整Webpack Loader配置适配Angular9项目 #

你的原有Loader配置需要做一些适配调整：

• 路径匹配：Angular9默认源码在src目录，把原来的include: /ClientApp/改成include: /src/
• TS Loader优化：Angular9更适合使用@ngtools/webpack而非ts-loader，它能更好地处理Angular的AOT编译等逻辑，替换TS相关配置：

{
  test: /\.ts$/,
  include: /src/,
  use: ['@ngtools/webpack']
}

• HTML Loader校验：确保你的组件中templateUrl指向的HTML文件路径能被raw-loader的规则匹配到，若使用Angular默认的templateUrl写法，也可以保留原有raw-loader配置，但要保证路径规则正确。

4. 验证CSPROJ与package.json的命令关联 #

你的Angular9项目CSPROJ中执行npm run build -- --prod，请确保package.json的scripts中build命令指向Angular CLI的构建：

"scripts": {
  "build": "ng build"
}

这样Visual Studio触发发布时，才会执行带自定义Webpack配置的构建流程。

5. 测试构建 #

现在重新执行构建命令：

ng build --prod

或者通过Visual Studio的发布流程触发，应该就能正确加载Webpack Loader配置，处理HTML文件了。

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