1.0.0alpha0 doesn't return module name

[roxeteer]

When using Webpack (or probably some other similar library), it was possible to import ui-router 0.2.* like this:

const angular = require('angular');

angular.module('myApp', [
  require('angular-ui-router')
]);

This is possible because when ui-router is imported, the script returns the module name 'ui.router'. The 1.0.0alpha0 doesn't do this, which means I need to separately import it:

const angular = require('angular');
require('angular-ui-router')

angular.module('myApp', [
  'ui.router'
]);

[christopherthielen]

Weird, it should be exporting it.

https://github.com/angular-ui/ui-router/blob/1.0.0alpha0/src/ui-router.ts#L11

What is coming out of require('angular-ui-router') for you?

[roxeteer]

It seems to return an object. Here's a screenshot from the Chrome console:

Here's the error message I get:

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module idamaps due to:
Error: [$injector:modulerr] Failed to instantiate module {"common":{"abstractKey":"abstract","services":{"location":{},"locationConfig":{}},"trace":{"_enabled":{},"approximateDigests":0}},"params":{"paramTypes":{"enqueue":true,"typeQueue":[],"defaultTypes":{"hash":{"pattern":{}},"string":{"pattern":{}},"int":{"pattern":{}},"bool":{"pattern":{}},"date":{"pattern":{},"capture":{}},"json":{"pattern":{}},"any":{"pattern":{}}},"types":{}}},"path":{},"resolve":{},"state":{},"transition":{"RejectType":{"2":"SUPERSEDED","3":"ABORTED","4":"INVALID","5":"IGNORED","SUPERSEDED":2,"ABORTED":3,"INVALID":4,"IGNORED":5},"defaultTransOpts":{"location":true,"relative":null,"inherit":false,"notify":true,"reload":false,"custom":{}},"$transitions":{}},"url":{"matcherConfig":{"_isCaseInsensitive":false,"_isStrictMode":true,"_defaultSquashPolicy":false}},"view":{},"default":"ui.router"} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
http://errors.angularjs.org/1.4.9/ng/areq?p0=module&p1=not%20a%20function%2C%20got%20Object
    at http://localhost:8080/vendor-a50833a82babe20069e0.js:8157:13

[nateabele]

We transpile from ES6 modules, so that's why it looks like that. I'm not sure if we can do that and support legacy AMD identically to before. If you're using ES6, then you can change your code to look like this:

import angular from 'angular';
import uiRouter from 'angular-ui-router';

angular.module('myApp', [
  uiRouter
]);

Alternatively, you can just do require('angular-ui-router').default.

[christopherthielen]

I think we can remain as a UMD module and fix the bundle using with a webpack option. See the visualizer config:
https://github.com/ui-router/visualizer/blob/master/webpack.config.js#L7-L9

[christopherthielen]

I was wrong. Looks like there's no simple way to support CJS default require().

Alternatively, you can just do require('angular-ui-router').default.

If you are building your app using CommonJS require, use @nateabele's workaround to get the module name or use ES6 module import import uiRouter from 'angular-ui-router'

Going forward, we are going to embrace ES6 modules.

Some more reading:

http://stackoverflow.com/questions/33505992/babel-6-changes-how-it-exports-default

microsoft/TypeScript#2719