Monaco-editor: File 'monaco-editor/monaco.d.ts' is not a module [Angular 2]

Created on 12 Sep 2016  路  14Comments  路  Source: microsoft/monaco-editor

Hello,

I am trying to use monaco editor within an Angular 2 project.
I found a way to integrate it with the workaround proposed here: https://github.com/Microsoft/monaco-editor/issues/18#issuecomment-231788869

But I would like now to create a CustomCompletionItemProvider which implements monaco.languages.CompletionItemProvider.

But when I try to import from monaco, I got this error:

File 'monaco-editor/monaco.d.ts' is not a module

Any idea why the monaco.d.ts is not recognize as a module?
The module is declared as:
declare module monaco
Maybe an export is missing ?

You could check the sample project I made for that here: https://github.com/Coleim/monaco_exemple

Thanks for the support.
Cheers
Clement

integration
Source
picture Coleim
👍7 😕1

Most helpful comment

First of all thanks for making this awesome editor open source! Really appreciate that.

I think the problem is that the monaco.d.ts declares several modules (declare module), although monaco does not ship in modules but in one big object called monaco on the global object. To reflect this, you should rather use declare namespace. I just copied the file and replaced declare module by declare namespace and I could access the typings without any import.

However, of course, it would be great if monaco would actually ship in ES6 modules, so that webpack could handle that, but there is already another issue for that.

picture Yogu on 10 Feb 2017
👍5

All 14 comments

I am sorry I am not an expert in the way TypeScript pulls in .d.ts files and what format they should have (of an internal module or of an external module).

I have got TypeScript to import the monaco editor ambient types via adding this to typings/index.d.ts:

/// <reference path="../node_modules/monaco-editor/monaco.d.ts" />

and then using it:

import CompletionItemProvider = monaco.languages.CompletionItemProvider;

I am sorry I don't have a better answer, I also don't understand how I should ship the .d.ts file (given the editor is not a commonjs module).

alexdima picture alexdima on 12 Sep 2016
👍2

ping @jrieken @dbaeumer any advice on how the monaco.d.ts should look like -- I am confused and unsure what is the latest thinking in TypeScript. Please note that the editor is not commonjs, even though we distribute it through npm.

alexdima picture alexdima on 12 Sep 2016

Hi

Thanks a lot, I'll check if the workaround with typings is enough and I'll tell you.

Cheers

Coleim picture Coleim on 12 Sep 2016

I added it in the typings.json as a global dependency.

    {
      "globalDependencies": {
        "core-js": "registry:dt/core-js#0.0.0+20160725163759",
        "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
        "node": "registry:dt/node#6.0.0+20160831021119",
        "monaco-editor": "file:./node_modules/monaco-editor/monaco.d.ts"
      }
    }

With that, it seems to work.
It should be enough for me as a first workaround.
Thanks

Coleim picture Coleim on 12 Sep 2016
👍2

The problem is the typing has declare module monaco instead of the correct declare module "monaco-editor"

rezonant picture rezonant on 11 Dec 2016
👍4

any news here? i think that @rezonant has right!

meriturva picture meriturva on 19 Dec 2016

Well, the editor API sits behind a big fat global named "monaco". That is what monaco.d.ts defines, an ambient global and not a module.

alexdima picture alexdima on 18 Jan 2017

Yes, to get Monaco to work with Angular 2 I had to load loader.js via

Related issues

aarinsmith picture aarinsmith  路  3Comments
galusben picture galusben  路  3Comments
galyech picture galyech  路  3Comments
zeegin picture zeegin  路  3Comments
hawkerm picture hawkerm  路  3Comments