fikkatra fikkatra - 5 months ago 79
AngularJS Question

TypeScript & SystemJS: angular ui router module not registered in transpiled js

I'm writing an

AngularJS
app, with
TypeScript
as a transpiler and
SystemJS
for module loading. I'm trying to load the
angular-ui-router
module to configure the routing, but fail to do so. I get this error:


angular.js:38 Uncaught Error: [$injector:modulerr]


This is the script:

import * as angular from "angular";
import * as router from "angular-ui-router";

const app: angular.IModule = angular.module("my.website", ["ui.router"]);
app.config((stateProvider: router.IStateProvider) => {
...
});


This is how the script is transpiled:

System.register(["angular"], function(exports_1, context_1) {
...


As you can see, the angular-ui-router is not registered, and hence the module is not loaded. Why? What am I doing wrong?

For completeness:
this is the SystemJS config:

System.config({
defaultJSExtensions: true,
map: {
"angular": "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js",
"angular-ui-router": "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"
}
});


These are the relevant TypeScript settings:

"target": "es5",
"module": "system"


I have loaded the TypeScript definition files using
typings
.

Transpiling is done by
gulp-typescript
.

Any clues?

Answer

I managed to get it working by importing both the file and the module. Ugly as it is, this works:

import * as angular from "angular";
import "angular-ui-router";
import * as router from "angular-ui-router";

const app: angular.IModule = angular.module("my.website", ["ui.router"]);
app.config((stateProvider: router.IStateProvider) => {
    ...
});