Angular v18项目构建/测试失败：无法解析Leaflet CSS文件

问题原因 #

Angular 18使用的@angular-devkit/build-angular:application新应用构建器，内置了CSS处理流程，你自定义的webpack.config.js中的CSS loader规则和Angular原生处理逻辑冲突，导致生产构建/测试时无法正确解析Leaflet的CSS文件。开发服务正常是因为开发环境的CSS处理逻辑与生产构建不同，冲突未暴露。

解决方案 #

1. 移除自定义Webpack中的CSS规则 #

删除webpack.config.js里的CSS处理规则，若无需自定义JS转译，甚至可以直接删除整个文件：

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, 
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },

2. 修正angular.json配置 #

你的styles数组已正确引入Leaflet相关CSS，但需移除组件级样式（组件样式应在组件的styleUrls中声明，而非全局styles数组）：

"styles": [
  "src/styles.css",
  "node_modules/leaflet/dist/leaflet.css",
  "node_modules/leaflet-search/dist/leaflet-search.min.css",
  "node_modules/leaflet-control-geocoder/dist/Control.Geocoder.css",
  "node_modules/leaflet-geosearch/dist/geosearch.css",
  "node_modules/leaflet-draw/dist/leaflet.draw.css"
],

3. 清理缓存并重新构建 #

执行命令清理构建缓存，避免旧配置残留：

rm -rf node_modules/.angular/cache
npm run build

4. （可选）正确配置自定义Webpack（若需保留） #

如果确实需要自定义Webpack，需安装适配插件并修改angular.json：

• 安装依赖：

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

• 修改构建器配置：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:application",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 其他原有配置...
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 其他原有配置...
    }
  }
}

注意：即使配置自定义Webpack，也不要添加CSS相关loader规则，让Angular原生逻辑处理CSS。

验证 #

完成以上步骤后，重新执行npm run build或ng test，即可正常解析Leaflet的CSS文件，不再出现模块解析错误。

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