如何在Monaco Editor中正确高亮TS文件里的Angular HTML模板？

我在Angular中使用默认配置集成ngx-monaco-editor-v2，StackBlitz和VS Code能正确高亮TS代码里的Angular HTML模板，但本地实现达不到预期效果。以下是我的现有配置及解决提示：

现有配置 #

依赖安装 #

npm install ngx-monaco-editor-v2 monaco-editor --save

angular.json 配置 #

"assets": [{"glob": "**/*", "input": "node_modules/monaco-editor", "output": "/assets/monaco/"}]

Angular模块配置 #

import { AppComponent } from './app.component';
import { MonacoEditorModule } from 'ngx-monaco-editor-v2';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    MonacoEditorModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

组件代码 #

monaco-editor.component.html

<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>

monaco-editor.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "monaco-editor",
  templateUrl: "./monaco-editor.html",
})
export class MonacoEditorComponent {
  editorOptions = {
    theme: "vs-dark",
    language: "typescript",
  };

  code: string = `@Component({
  selector: 'my-app',
  template: \`<mat-toolbar fxLayout="row" fxLayoutAlign="start center" color="primary" class="mat-elevation-z8">
  <h1>
    Angular Monaco Editor library demo
  </h1>
</mat-toolbar>
<div class="editor-container" fxLayout="column">
  <h2 class=" mat-headline">Custom theme example</h2>
  <ngx-monaco-editor fxFlex [options]="editorOptions" [(ngModel)]="code" (init)="editorInit($event)">
  </ngx-monaco-editor>
</div>\`,
  styleUrls: [\`./app.component.scss\`],
})
export class AppComponent {}`;
}

解决提示 #

1. 启用TypeScript语言服务的Angular模板支持
   Monaco默认的TypeScript服务未开启Angular相关语法高亮，需在模块初始化时配置：

// 修改AppModule中MonacoEditorModule的初始化配置
MonacoEditorModule.forRoot({
  onMonacoLoad: () => {
    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
      target: monaco.languages.typescript.ScriptTarget.Latest,
      module: monaco.languages.typescript.ModuleKind.CommonJS,
      strict: true,
      // 开启Angular编译器选项以支持模板高亮
      angularCompilerOptions: {
        enableIvy: true
      }
    });
  }
})

2. 验证Monaco资源加载完整性
   打开浏览器开发者工具的Network标签，检查/assets/monaco/路径下的所有文件是否加载成功，重点确认语言服务相关JS文件无404错误。

3. 升级依赖版本
   可能存在版本兼容问题，尝试升级到最新稳定版：

npm update ngx-monaco-editor-v2 monaco-editor

4. 切换原生集成方案
   若上述方法无效，可放弃封装库，直接集成原生Monaco Editor，并手动引入Angular语言服务插件来实现模板高亮。

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