@types/angular-ui-router|angular-ui-bootstrap|angular-translate "Module 'angular' has no exported member 'ui'"

[pocesar]

• I tried using the latest angular-ui-router/angular-ui-router.d.ts file in this repo and had problems.

angular-ui-router isn't working when using @types/angular-ui-router.

"Module 'angular' has no exported member 'ui'"

every file now is red, and won't compile

Looks like having a <reference types="angular" /> alongside a import * as angular from 'angular'; won't work

Same thing happens with angular-ui-bootstrap

The modules that depend on @types/angular are outright broken. I'm not using angular global variable and when I do import * as angular from 'angular' then try to access a module namespace, such as angular.ui.bootstrap, angular.translate, angular.ui, they all give the error Module 'angular' has no exported member 'ui'

the code below fails:

'use strict';

import * as angular from 'angular';

class Config {
    static $inject = ['$stateProvider', '$urlRouterProvider'];

    constructor($stateProvider: angular.ui.IStateProvider, $urlProvider: angular.ui.IUrlRouterProvider) {
         /*...*/
    }
}

angular.module('Module', []).config(Config);

[mhegazy]

This should be fixed by #10170

you can either use it as a module:

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

class Config {
    static $inject = ['$stateProvider', '$urlRouterProvider'];

    constructor($stateProvider: angular.ui.IStateProvider, $urlProvider: angular.ui.IUrlRouterProvider) {
        /*...*/
    }
}

angular.module('Module', []).config(Config);

or as a global but use /// <reference types=... />

/// <reference types="angular" />
/// <reference types="angular-ui-router" />

class Config {
    static $inject = ['$stateProvider', '$urlRouterProvider'];

    constructor($stateProvider: angular.ui.IStateProvider, $urlProvider: angular.ui.IUrlRouterProvider) {
        /*...*/
    }
}

angular.module('Module', []).config(Config);

[pocesar]

@mhegazy is this the new behavior for 2.0+ when using @types? can't have "true" globals that you include once and it's available everywhere?

@types/angular-ui-router and @types/angular-ui-bootstrap are still broken btw

[pocesar]

[mhegazy]

@mhegazy is this the new behavior for 2.0+ when using @types? can't have "true" globals that you include once and it's available everywhere?

you can. /// <reference types="angular" /> should make ng available in your compilation.

[mhegazy]

@types/angular-ui-router and @types/angular-ui-bootstrap are still broken btw

the latest in https://github.com/DefinitelyTyped/DefinitelyTyped/tree/types-2.0 looks right to me. can you point out what is not working for you?
how are you importing angular?

[pocesar]

I'm using import * as angular from 'angular'. when I try to use angular.ui.IStateProvider (from angular-ui-router), it doesn't exist in angular. even if I'm adding the angular-ui-router in another file (my base module), I now need to include it in every file?

[mhegazy]

you need to import that too. import "angular-ui-router"; or add a types reference to it /// <reference types="angular-ui-router" />

[pocesar]

please make a switch in tsconfig.json that makes it behave the old way, I can't refactor my project at this very moment :(

[mhegazy]

please make a switch in tsconfig.json that makes it behave the old way

what is the "old" way?

if you are using declaration files you got from typings or tsd, it should work with no change. this is only for the @types packages on npm. if you do not want to use them at the moment, you do not have to.

[rupampatel2006]

I am also having the same issue.

[asadsahi]

Same issue... Just installed @types/angular

imported angular in typescript file:
import * as angular from 'angular';

However ui namespace isn't available on ng.

Getting:

Module 'angular' has no exported member 'ui'.

[jsmarsch]

Why is this closed? Does that mean it's never going to be fixed, or is there another issue for it? (still broken for me)

[kirillgroshkov]

Still broken for me too

[ognjenkurtic]

And still is

[mattarau]

@asadsahi That's because @types/angular actually has no ui member. This member is defined by @types/angular-ui-router.

Which must be installed separated:

npm i -D @types/angular-ui-router

[helgetan]

Anyone found a solution yet ?
@mhegazy could you reopen the ticket?

[ghost]

I just got this issue when trying to upgrade angular-ui-router from 1.0.0-beta.1 to 1.0.0-rc.1. I also want to upgrade TS, and get rid of typing in favor of @types... All this I got in yeoman-fountain generated angular1 application. It makes my angry because I am wasting my time :(
@mhegazy could you please reopen the ticket?

[kamilbrk]

This is still an issue. My workaround for the time being:

    "fix-duplicate-dts": "rimraf node_modules/@types/oclazyload/node_modules/@types/angular && rimraf node_modules/@types/angular-ui-bootstrap/node_modules/@types/angular && rimraf node_modules/@types/ngtoaster/node_modules/@types/angular && rimraf node_modules/@types/angular-translate/node_modules/@types/angular && rimraf node_modules/@types/angular-mocks/node_modules/@types/angular && rimraf node_modules/@types/angular-gridster/node_modules/@types/angular && rimraf node_modules/@types/angular-storage/node_modules/@types/angular && rimraf node_modules/@types/ui-select/node_modules/@types/angular",
    "postinstall": "npm run fix-duplicate-dts",
    "postuninstall": "npm run fix-duplicate-dts"

Sometimes I just have to run the task manually, but most of the time it's done with postinstall script.

[sarod]

I had the same Module 'angular' has no exported member 'xxx'. error after I upgraded my dependency to @types/angular@1.6.x.
In my case it was related to several angular type definitions in my node_modules. Angular types were defined in node_modules/@types/angular and in node_modules/@types/ng-file-upload/node_modules/@types/angular.

This was due to the fact that yarn resolved angular with different versions. I had two entries for angular with different resolution in the yarn.lock file:

"@types/angular@*":
  version "1.6.7"
  resolved "https://registry.yarnpkg.com/@types/angular/-/angular-1.6.7.tgz#8935a2b4a796fe7ca4f59f533f467804722fb0c4"
  dependencies:
    "@types/jquery" "*"

"@types/angular@1.6.x":
  version "1.6.32"
  resolved "https://registry.yarnpkg.com/@types/angular/-/angular-1.6.32.tgz#fc791aad038227d9413eb5e552993e1076f8a509"

"@types/ng-file-upload@^11.1.31":
  version "11.1.34"
  resolved "https://registry.yarnpkg.com/@types/ng-file-upload/-/ng-file-upload-11.1.34.tgz#670fd0515c8e08668b27b7bbe30356b3b8011780"
  dependencies:
    "@types/angular" "*"

Removing the yarn.lock and rerunning yarn install solved the issue but it modified too many other dependency in my case.

Using yarn install --flat would probably have solved the problem but I didn't want to change how all dependencies are resolved.

So I fixed the issue by manually changing the yarn.lock file to

"@types/angular@*", "@types/angular@1.6.x":
  version "1.6.32"
  resolved "https://registry.yarnpkg.com/@types/angular/-/angular-1.6.32.tgz#fc791aad038227d9413eb5e552993e1076f8a509"

"@types/ng-file-upload@^11.1.31":
  version "11.1.34"
  resolved "https://registry.yarnpkg.com/@types/ng-file-upload/-/ng-file-upload-11.1.34.tgz#670fd0515c8e08668b27b7bbe30356b3b8011780"
  dependencies:
    "@types/angular" "*"