Webpack 自定义加载器似乎不起作用（对于 haml-haml-loader）

Question

运行我自己的 Angular 应用程序非常新。我正在使用this guide 通过 webpack 设置 haml 加载，但它非常旧，ngx 不再支持弹出，所以我正在尝试使用 this package 进行一些自定义 webpack 配置。

我在编译时遇到这个错误：

ERROR in Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> %header
|   test

这是我的 angular.json 中与自定义 webpack 相关的部分：

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./extra-webpack.config.js",
          "mergeStrategies": {
            "externals": "replace"
          }
        },

还有额外的webpack.config.js：

const path = require('path');

module.exports = {
    module: {
      rules: [
        { test: /\.haml$/, loader: 'haml-haml' }
      ]
    }
};

编辑：不知道如何为此设置小提琴或 stackblitz，但我有一个新的 repo 可以复制问题：https://github.com/jugglervr/haml-test

Answer 1

问题是您错过了设置包@angular-builders/dev-server 来为您的应用程序提供服务。这是使它再次工作的步骤：

安装它：

npm i -D @angular-builders/dev-server

同样在 angular.json 中，将 build 属性的值从 @angular-devkit/build-angular:dev-server 替换为 serve 块下的 @angular-builders/custom-webpack:dev-server：

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
}

最后说明：看起来 webpack 不再允许在我们指定加载器时省略 loader，所以将加载器附加到您的 webpack 配置中：

{ test: /\.haml$/, loader: 'haml-haml-loader' }