Angular 16 + Nx项目集成Monaco Editor遇CSS解析错误求助

一、修复tsconfig继承失效问题 #

更换为@angular-builders/custom-webpack:browser executor后，默认的tsconfig继承逻辑可能被覆盖，需要显式指定配置路径：

1. 在项目的project.json中，给browser executor添加tsConfig配置项，强制指定使用的tsconfig文件：

"executor": "@angular-builders/custom-webpack:browser",
"options": {
  "tsConfig": "apps/[你的项目名]/tsconfig.app.json",
  "customWebpackConfig": {
    "path": "apps/[你的项目名]/webpack.config.js"
  },
  // 保留原有其他配置
}

2. 检查tsconfig.app.json的extends属性，确保指向Nx的基础配置文件：

"extends": "../../tsconfig.base.json",
"compilerOptions": {
  // 你的项目编译配置
}

二、解决CSS解析错误问题 #

使用自定义webpack配置后，Angular默认的CSS loader规则可能丢失，需要在webpack.config.js中手动补充样式处理逻辑：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (config, options) => {
  // 补充CSS文件解析规则，排除node_modules但保留monaco-editor的样式
  config.module.rules.push({
    test: /\.css$/,
    use: [
      options.mode === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
      'css-loader'
    ],
    exclude: /node_modules\/(?!monaco-editor)/,
  });

  // 生产环境下启用CSS提取插件
  if (options.mode === 'production') {
    config.plugins.push(new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    }));
  }

  // 处理Monaco Editor的字体文件
  config.module.rules.push({
    test: /\.ttf$/,
    use: ['file-loader']
  });

  return config;
};

执行以下命令安装所需依赖：

npm install style-loader css-loader mini-css-extract-plugin file-loader --save-dev

三、Monaco Editor的必要配置补充 #

1. 在project.json的assets配置中添加Monaco的静态资源：

"assets": [
  "apps/[你的项目名]/src/favicon.ico",
  "apps/[你的项目名]/src/assets",
  {
    "glob": "**/*",
    "input": "node_modules/monaco-editor",
    "output": "assets/monaco-editor"
  }
]

2. 在main.ts中配置Monaco的worker资源路径：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

(window as any).MonacoEnvironment = {
  getWorkerUrl: function (workerId, label) {
    return `assets/monaco-editor/min/vs/base/worker/workerMain.js`;
  }
};

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

四、验证构建与模块问题排查 #

执行Nx构建命令测试：

nx build [你的项目名]

若仍有模块找不到的问题，检查tsconfig.app.json的include配置，确保Monaco的类型文件被包含：

"include": [
  "src/**/*.ts",
  "node_modules/monaco-editor/monaco.d.ts"
],
"exclude": [
  "src/test.ts",
  "src/**/*.spec.ts"
]

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