Angular12升级至16后Monaco Editor CSS加载失败求助

• 匹配适配版本的依赖包
  Angular 16对第三方库版本要求更严格，先卸载旧的Monaco相关包，安装对应适配版本：

  npm uninstall monaco-editor ngx-monaco-editor
  npm install monaco-editor@^0.44.0 ngx-monaco-editor@^16.0.0
  

• 配置Angular资源与样式
  打开angular.json，找到build配置下的assets数组，添加Monaco的资源映射：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    {
      "glob": "**/*",
      "input": "node_modules/monaco-editor/min",
      "output": "assets/monaco/"
    }
  ],
  

  同时在styles数组中引入Monaco的核心样式文件：

  "styles": [
    "src/styles.scss",
    "node_modules/monaco-editor/min/vs/editor/editor.main.css"
  ]
  

• 配置Webpack处理CSS文件（针对Webpack 5）
  Angular 16默认用Webpack 5，需要明确配置加载器处理Monaco的CSS文件：

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

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

  2. 在项目根目录创建webpack.config.js，添加CSS加载规则：

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

  3. 修改angular.json中的构建配置，替换为自定义Webpack builder：

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

• 清理缓存重新构建
  执行以下命令彻底清理依赖和缓存，避免旧配置干扰：

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

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