External type definition

[GregorBiswanger]

Hi,

one more question :) How I can set a TS type definition with your component? I tested with an ViewChild and access to your editor property. But I don´t get the same functions support of this sample: https://stackoverflow.com/questions/43058191/how-to-use-addextralib-in-monaco-with-an-external-type-definition

do you have any idea?

[jmarc-roy]

Hi @GregorBiswanger ,

You can use our MonacoEditorLoaderService to wait until monaco-editor is loaded and then directly configure the monaco instance. Be carrefull to configure monaco before you display any ngx-monaco-editor components with the wanted monaco extra config.

You can find an example in this issue: #5.

Hope it helps !

[GregorBiswanger]

How I can get the current monaco instance?

This does not working

import * as monaco from 'monaco-editor';
...
  constructor(private monacoLoader: MonacoEditorLoaderService) {
    monacoLoader.isMonacoLoaded.subscribe({
      next: () => {

        monaco.languages.typescript.typescriptDefaults.addExtraLib(
          '', 'node_modules/rxjs/index.d.ts');
      }
    });
  }

[jmarc-roy]

This should work:

import {filter, take} from 'rxjs/operators';
import { MonacoEditorLoaderService } from '@materia-ui/ngx-monaco-editor';
...
  constructor(private monacoLoader: MonacoEditorLoaderService) {
    monacoLoader.isMonacoLoaded
      .pipe(filter(isLoaded => isLoaded === true), take(1))
      .subscribe(() => {   
        (window as any).monaco.languages.typescript.typescriptDefaults.addExtraLib(
          '', 'node_modules/rxjs/index.d.ts');
     });
  }

[GregorBiswanger]

Thanks for the information! Unfortunately it does not work. I also tried static text to try it out. To make sure that it is not because of the fact that the type definition file can not pull. Unfortunately does not work.

Please check with you if this works, the variable blub should be suggested:

import {filter, take} from 'rxjs/operators';
import { MonacoEditorLoaderService } from '@materia-ui/ngx-monaco-editor';
...
  constructor(private monacoLoader: MonacoEditorLoaderService) {
    monacoLoader.isMonacoLoaded
      .pipe(filter(isLoaded => isLoaded === true), take(1))
      .subscribe(() => {   
         ((window as any).monaco).languages.typescript.typescriptDefaults.addExtraLib("export declare var blub: any;");
     });
  }

According to the documentation everything would normally be correct ?! https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults

[jmarc-roy]

It seems that you have to remove the 'export' from your declaration. This works:

import {filter, take} from 'rxjs/operators';
import { MonacoEditorLoaderService } from '@materia-ui/ngx-monaco-editor';
...
  constructor(private monacoLoader: MonacoEditorLoaderService) {
    monacoLoader.isMonacoLoaded
      .pipe(filter(isLoaded => isLoaded === true), take(1))
      .subscribe(() => {   
         ((window as any).monaco).languages.typescript.typescriptDefaults.addExtraLib('declare var blub: any;');
     });
  }

[GregorBiswanger]

THANK YOU! No plan why that should bother him. You saved me the weekend.

The ((window as any).monaco) solution is not really sexy. Maybe you can make a facade and make it available via property?! or as value for the isMonacoLoaded.subscribe?! even if you do nothing else under the hood. Just as an idea.

[jmarc-roy]

Glad that it works ! Yes I agree that it is not really sexy. I will definitely make something to improve that.