3

I'm using Webpack to bundle AngularJS with Typescript (with the default setup suggested here) and I cannot include modules that do not have default exports, such as ui-bootstrap. Modules such as ui-router do not have such problem since their typings mention a default export.

JS code works:

import * as angular from 'angular';
import router from 'angular-ui-router';
import uibootstrap from 'angular-ui-bootstrap';

angular.module('app', [uirouter, uibootstrap]);

However the same code in Typescript (target: es6, module: es6, all settings same as those mentioned in webpack guide) drops error:

Module "node_modules/@types/angular-ui-bootstrap/index" has no default export.

Using angular.module('app', [uirouter, 'ui.bootstrap']); instead throws a 'ui.bootstrap' not found error.

Mike Drakoulelis
  • 762
  • 11
  • 25

2 Answers2

4

You can set allowSyntheticDefaultImports to true in your tsconfig.json to continue importing import uibootstrap from 'angular-ui-bootstrap'; as if angular-ui-bootstrap had a default export.

"compilerOptions": {
    "allowSyntheticDefaultImports": true
}
Saravana
  • 37,852
  • 18
  • 100
  • 108
  • This seems like the right solution, but it still did not import the library, making "ui.route" include in my angular module non-functional. – Mike Drakoulelis May 25 '17 at 12:52
2

It seems using a simple import 'angular-ui-router' works.

Mike Drakoulelis
  • 762
  • 11
  • 25