Need to figure out how to import angular2 typings into monaco

[NothingEverHappens]

https://github.com/Microsoft/monaco-editor/issues/276

[itbrandonsilva]

After exploring this a bit, it seems that root cause of this problem is that there isn't a way to flatten type definitions. I was able to get a variety of typings (not ng) imported succesfully, but it's almost clear that the issue is that addExtraLib doesn't traverse imports.

I tried dts-bundle, but it fails when a d.ts file imports a directory that doesn't have an index.d.ts.

Will continue digging soon.

[kirjs]

Oh, cool didn't know you were digging into this. I was considering giving up and just comeing up with a bunch of fake typings for the parts of ng that we use, but let me know if you find something interesting.

[kirjs]

I ended up faking angular imports.

[DanWahlin]

I'm running into this issue as well. Any new solutions aside from faking the imports? Would definitely be nice to point it to something like @angular/core/index.d.ts file and have the types under it traversed.

[kirjs]

@DanWahlin I actually was able to do exactly that (monaco is actually pretty smart and follows the deps chain, it's just they have to be provided with some specific prefix).

As a result the editor became pretty unresponsive, and would often time out and not do type checking at all. There's a chance I was doing something wrong though.

So far I decided to stick with fake typing as those are enough for what I'm trying to do, let me know if you have any progress.

Also see https://github.com/Microsoft/monaco-editor/issues/276

[DanWahlin]

Thanks - appreciate the quick response. I started playing around with dts-bundle as @itbrandonsilva mentioned and hit the same error. Tried another one too but couldn't get it working either (only tried quickly so probably something I'm doing wrong). I'm now going through and adding the key definitions that I need for this scenario. Painful but it's working.

It's very primitive since I'm just trying to get stuff working quickly right now, but here's the current file:

declare var module: any;

declare module "@angular/core" {

    export interface Directive {
        selector?: string;
        inputs?: string[];
        outputs?: string[];
        host?: {[key: string]: string};
        providers?: any[];
        exportAs?: string;
        queries?: {[key: string]: any};
    }

    export interface Component extends Directive {
        moduleId?: string;
        template?: string;
        templateUrl?: string;
        styles?: string[];
        styleUrls?: string[];
        changeDetection?: any;
        viewProviders?: any[];
        animations?: any[];
        encapsulation?: any;
        interpolation?: [string, string];
        entryComponents?: any[];
    }

    //Decorators
    export function Directive(settings: Directive) : any;
    export function Component(settings: Component) : any;
    export function Injectable() : any;

    export function enableProdMode(): void;
    export abstract class OnInit {
        ngOnInit(): void;
    }

    export abstract class OnDestroy {
        ngOnDestroy(): void;
    }
}

It would definitely be nice to have a single d.ts file with everything in it for each Angular module (@angular/core, @angular/http, etc.) for this scenario.

[VictorLeach96]

I seem to have this working now with dts-bundle.