Angular 17中加载monaco-editor的TTF字体失败求助

问题分析 #

当直接导入import * as monaco from 'monaco-editor'获取类型时，Angular构建工具会尝试加载monaco-editor ESM模块中的CSS文件，该CSS引用了TTF字体文件，但Angular默认配置没有处理这类文件的规则，导致构建失败。你之前使用的font-awesome-loader是专门针对Font Awesome的加载器，无法通用处理TTF文件，因此无效。

解决方案 #

方案一：仅导入类型（推荐） #

如果只是需要monaco.editor.IStandaloneCodeEditor这类类型定义，无需导入monaco的运行时代码，改用类型导入即可避免加载CSS和字体文件：

import type * as monaco from 'monaco-editor';

这种方式只会引入TypeScript类型，不会触发任何资源加载，完全规避构建错误。

方案二：配置Webpack正确处理TTF文件 #

如果确实需要完整导入monaco-editor模块（不只是类型），请按以下步骤配置：

1. 安装自定义Webpack构建器
   Angular 17默认使用ESBuild，要自定义Webpack配置需安装@angular-builders/custom-webpack：

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

2. 修改Webpack配置文件
   替换现有webpack.config.js内容，使用Webpack 5原生的asset/resource类型（无需额外安装loader）：

export default (config, options) => {
  // 保留原有规则，避免覆盖Angular默认配置
  const existingRules = config.module.rules || [];
  
  return {
    ...config,
    module: {
      ...config.module,
      rules: [
        ...existingRules,
        {
          test: /\.ttf$/,
          type: 'asset/resource',
          generator: {
            filename: 'assets/fonts/[name].[hash][ext]' // 指定字体输出路径
          }
        }
      ]
    }
  };
};

若使用Webpack 4，可改用file-loader：

npm install --save-dev file-loader

export default (config, options) => {
  const existingRules = config.module.rules || [];
  
  return {
    ...config,
    module: {
      ...config.module,
      rules: [
        ...existingRules,
        {
          test: /\.ttf$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[hash].[ext]',
                outputPath: 'assets/fonts/'
              }
            }
          ]
        }
      ]
    }
  };
};

3. 更新angular.json配置
   将build和serve的builder替换为自定义Webpack构建器，并指定配置文件路径：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 保留原有其他配置（如outputPath、index、main等）
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    // 保留原有其他配置
  }
}

4. 重新构建项目
   执行ng build或ng serve，此时TTF文件会被正确处理，构建错误即可解决。

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