IntelliSense not working with extra libraries in Monaco Editor with Angular 17

I'm developing an Angular 17 application using the Monaco Editor with the ngx-monaco-editor-v2 package. While the editor works fine in TypeScript mode, I'm unable to get IntelliSense to recognize extra libraries or custom classes that I define. Specifically, I want to use a custom class Car with a method myMethod() in my code, but IntelliSense does not suggest this class or its methods.

I attempted to add the extra library using the monaco.languages.typescript.javascriptDefaults.addExtraLib method. Here’s the relevant part of my code:

monaco.languages.typescript.javascriptDefaults.addExtraLib(`
declare class Car {
myMethod(): void;
}
`, "Car");


I also set the compiler options for TypeScript as follows:

monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES5,
module: monaco.languages.typescript.ModuleKind.CommonJS,
allowJs: true,
checkJs: true,
});


Despite these efforts, when I type const instance = new Car(); in the editor, I do not see any IntelliSense suggestions for Car or its methods. I expected that after adding the extra library, IntelliSense would recognize the Car class and provide suggestions for its methods.

Additional Information Here’s a snippet of my component code for context:

CodeComponent.component.html

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


CodeComponent.component.ts

import { Component, OnInit } from '@angular/core';
import * as monaco from 'monaco-editor';

@Component({
selector: 'app-code',
templateUrl: './code.component.html',
styleUrls: ['./code.component.scss'],
})
export class CodeComponent implements OnInit {
code: string = `
const instance = new Car();
instance.myMethod();
`;

editorOptions = {
theme: 'vs-dark',
language: 'typescript',
automaticLayout: true,
};

// Monaco Editor Initialization
onEditorInit(editor: monaco.editor.IStandaloneCodeEditor): void {
monaco.languages.typescript.javascriptDefaults.addExtraLib(`
declare class Car {
myMethod(): void;
}
`, "Car");

console.log("getExtraLibs", monaco.languages.typescript.javascriptDefaults.getExtraLibs());

monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES5,
module: monaco.languages.typescript.ModuleKind.CommonJS,
allowJs: true,
checkJs: true,
});
}
ngOnInit(): void {}
}


package.json

"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/router": "^17.3.0",
"monaco-editor": "^0.52.2",
"ngx-monaco-editor-v2": "^18.1.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
}

Continue reading...