How to highlight properly angular html templates in ts files with monaco-editor?

I use default monaco configuration for angular

Packages:

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


angular.json config:

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


Angular module config:

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 { }


And then in monaco-editor.component.html:

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


And then in monaco-editor.component.html:

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 {}`;
}


This is how e.g. stackblitz or vscode can display it.

And this is how it works for me

Any hints?

Continue reading...