如何在Monaco Editor中添加Angular专属代码的支持功能

报错本质是 Monaco 默认没有适配 Angular 专属语法、也没有内置 Angular 类型定义导致的，按以下步骤配置即可解决：

• 第一步：先将编辑器的语言模式设置为 typescript，这是识别 Angular 代码的基础配置。
• 第二步：开启 TypeScript 装饰器支持，Angular 大量使用装饰器语法，Monaco 默认的 TS 配置未开启该特性，需要手动修改编译选项：

monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
  target: monaco.languages.typescript.ScriptTarget.ES2020,
  module: monaco.languages.typescript.ModuleKind.ESNext,
  experimentalDecorators: true, // 核心配置，用于识别@Component等装饰器
  moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeNext,
  allowSyntheticDefaultImports: true,
  skipLibCheck: true
})

• 第三步：注入 Angular 相关的类型声明文件，Monaco 默认没有内置 Angular 包的类型定义无法识别 @angular/core 等包导出的API，你需要把用到的 Angular 相关包的 .d.ts 类型定义加载到 Monaco 的 TS 语言服务中，示例代码如下：

// 以加载@angular/core类型定义为例
monaco.languages.typescript.typescriptDefaults.addExtraLib(
  `/* 这里填入你提前提取的@angular/core包的d.ts类型定义内容 */`,
  'node_modules/@angular/core/index.d.ts'
)
// 按照同样的方式添加@angular/common、@angular/compiler等你需要用到的Angular包的类型定义即可

如果不想手动维护所有类型定义，可以接入自动类型获取工具，自动拉取用户代码中导入依赖的类型文件。

如果需要更进一步支持 Angular 模板语法校验、templateUrl/styleUrls 路径关联校验等特性，可以引入适配 Monaco 的 Angular 语言服务插件。

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