Loading TTF of monaco-editor in Angular 17

I have installed ngx-monaco-editor-v2 in my Angular 17.3.3 app as specified in the instructions, i.e.:

1. npm install monaco-editor ngx-monaco-editor-v2 --save (current versions: 0.47.0 for monaco-editor, 17.0.1 for ngx-monaco-editor-v2)
2. add glob to assets in angular.json:

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

I then import it in app.config.ts (the default Angular app from ng new is standalone):

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimationsAsync(),
    importProvidersFrom(MonacoEditorModule.forRoot())
  ],
};

This works, and I can use Monaco via the wrapper, like this (in my consumer component):

1. import Monaco in the standalone component imports, e.g.:

import { MonacoEditorModule } from 'ngx-monaco-editor-v2';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    CommonModule,
    RouterOutlet,
    FormsModule,
    ReactiveFormsModule,
    MonacoEditorModule,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})

2. add editor options, e.g.:

public editorOptions = {
  theme: 'vs-light',
  language: 'markdown',
  wordWrap: 'on',
  // https://github.com/atularen/ngx-monaco-editor/issues/19
  automaticLayout: true,
};

3. in the component's template, place the editor:

<div id="editor">
  <ngx-monaco-editor
    [options]="editorOptions"
    formControlName="text"
    (onInit)="onEditorInit($event)"
    style="height: 100%"
  />
</div>

I can use onEditorInit to get a reference to the editor, which works:

public onEditorInit(editor: any) {
  this._editor = editor;
  editor.focus();
}

Now I would need to work with the editor reference, so rather than using any I would set the type to monaco.editor.IStandaloneCodeEditor. This requires importing monaco like import * as monaco from 'monaco-editor'.

As soon as I try this, I get this build error:

Application bundle generation failed. [6.012 seconds]

✘ [ERROR] No loader is configured for ".ttf" files: node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.ttf
    node_modules/monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.css:9:6:
      9 │   src: url(./codicon.ttf) format("truetype");

So the Angular's Webpack does not seem to be able to load the TTF font required by Monaco. I have tried to add a custom Webpack configuration, which means:

1. installing this loader to load TTF: npm install --save-dev font-awesome-loader.
2. adding a new webpack.config.js file to the root of my project, with this content:

export default (config, options) => {
  return {
    ...config,
    module: {
      ...config.module,
      rules: [
        {
          test: /\.ttf$/,
          use: ["font-awesome-loader"],
        },
      ],
    },
  };
};

Yet, no luck. I am still getting the same error. Could anyone suggest how to fix this load issue?

The @angular-devkit/build-angular:application builder has a new option "loader" which you can define how different file types should be loaded.

In your angular.json, add this option to fix the issue.

Read this pull https://github.com/angular/angular-cli/pull/26371 to learn more about this option.