Angular 12升级至15后Froala Editor与Webpack 5.75.0适配问题求助

问题描述 #

Angular 12项目升级到15后，执行ng serve时触发Froala Editor相关报错：

./node_modules/froala-editor/css/froala_style.min.css?ngGlobalStyle:7:0 - Error: Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

推测是Webpack 5.75.0无法兼容该文件加载逻辑，手动创建webpack.config.js后又引发其他类型Bug。

当前相关配置信息：

angular.json #

"styles": [
  "src/styles.scss",
  "node_modules/froala-editor/css/froala_editor.pkgd.min.css",
  "node_modules/froala-editor/css/froala_style.min.css",
],
"scripts": [
  "node_modules/echarts/dist/echarts.min.js",
  "node_modules/froala-editor/js/froala_editor.pkgd.min.js",
],

index.html #

<link href="/node_modules/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet">

app.module.ts #

....
import {FroalaEditorModule, FroalaViewModule} from 'angular-froala-wysiwyg';
.......
FroalaEditorModule.forRoot(),
FroalaViewModule.forRoot(),

解决方案 #

• 移除重复CSS引入：index.html与angular.json中重复配置了froala_editor.pkgd.min.css，会导致加载冲突。删掉index.html里的<link>标签，仅保留angular.json中的styles配置即可。
• 升级Froala适配Angular 15：旧版本angular-froala-wysiwyg不兼容Webpack 5，执行命令升级至兼容版本：

  npm install angular-froala-wysiwyg@latest froala-editor@latest
  

• 避免直接创建webpack.config.js：Angular CLI会自动管理Webpack配置，手动创建会覆盖默认规则引发问题。若需自定义，使用@angular-builders/custom-webpack扩展配置：
  1. 安装依赖：

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

  2. 修改angular.json的builder配置：

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

  3. 创建webpack.extra.js添加必要规则（如CSS loader）：

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

• 清除缓存重新构建：执行以下命令清理缓存并重装依赖：

  ng cache clean
  rm -rf node_modules package-lock.json
  npm install
  ng serve
  

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