Importing angular-ui-router and RequireJS domReady as a TypeScript module

467 Views Asked by At

I am using AMD (specifically RequireJS) along with TypeScript in my sample to support external modules. Here's the main.ts which RequireJS loads (through data-main attribute):

/// <reference path="../typings/tsd.d.ts" />
requirejs.config({
  paths: {
    jquery: '../bower_components/jquery/dist/jquery',
    angular: '../bower_components/angular/angular',
    uiRouter: '../bower_components/angular-ui-router/release/angular-ui-router',
    domReady: '../bower_components/requirejs-domready/domReady"
  },
  shim: {
    angular: {
        deps: ['jquery'],
        exports: 'angular'
    },
    uiRouter: {
        deps: ['angular']
    }
  },
  deps: ['bootstrapper']
});

and here's the bootstrapper.ts (not in a working state) file which bootstraps the app:

import angular = require('angular') // works fine
import uiRouter = require('uiRouter') // VS Code throws error. External module not found.
import domReady = require('domReady') // Same error as above.

angular.bootstrap(domReady, ['myApp'], {strictDi: true}); // Not working due to domReady.

I have to resort to use regular RequireJS' define method in order to get the router and domReady dependencies:

define(['angular',
  'domReady',
  'uiRouter'
], (angular, document, uiRouter) => {
  angular.bootstrap(document, ['myApp'], {strictDi: true});
});

Any ideas how can I make the domReady and uiRouter as TypeScript external modules.

1

There are 1 best solutions below

3
On

Any ideas how can I make the domReady and uiRouter as TypeScript external modules.

HotFix

Have a file vendor.d.ts containing the following:

declare module "uiRouter" {
   var dummy:any;
   export = exp;
}
declare module "domReady" {
   var dummy:any;
   export = exp;
}

Alternatively you can create proper ambient declarations for these, or look these up at DefinitelyTyped.