module 'ng' has no exported member 'ui' when using ui-router type definition for typescript

Question

I am trying to use this typescript definition file for ui-router:

https://github.com/borisyankov/DefinitelyTyped/blob/master/angular-ui/angular-ui-router.d.ts

Here is the code at the top of the definition file:

// Type definitions for Angular JS 1.1.5+ (ui.router module)
// Project: https://github.com/angular-ui/ui-router
// Definitions by: Michel Salib <https://github.com/michelsalib>
// Definitions: https://github.com/borisyankov/DefinitelyTyped

/// <reference path="../angularjs/angular.d.ts" />

declare module ng.ui {

    interface IState {
    ...

Here is how I am using it:

module MyModule
{
    export class MyStateConfig
    {
        constructor(
            //                     -> error on the word ng.ui on next line
            private $stateProvider: ng.ui.IStateProvider, 
            private $urlRouterProvider: ng.ui.IUrlRouterProvider
            ...)
        {
            this.$stateProvider.state(...

This was working in Visual Studio but now with WebStorm I get a message saying "

module 'ng' has no exported member 'ui'

Can someone give me advice on this. Is this something to do with a different module system with WebStorm?

Answer 1

Have you tried adding a reference comment in your module source file? Something like...

/// <reference path="path/to/angular-ui/angular-ui-router.d.ts" />

Visual Studio doesn't require this because its msbuild tasks automatically tell the compiler to reference any definition that are included in the project. I'm guessing WebStorm doesn't use msbuild project files.

Answer 2

1. Ensure the @types/angular-ui-bootstrap npm package is installed.

   npm install @types/angular-ui-bootstrap

2. Check your tsConfig.json file, in compilerOptions, look for a types array. Try removing types or replacing with typeRoots. Something like this:

   "compilerOptions": { "target": "ES5", "sourceMap": true, .... .... "typeRoots": [ "node_modules/@types" ] },