Typescript+AngularJS+Webpack modules without default export

Question

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.

Answer 1

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

Answer 2

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
}