Webpack with angular 1.5 and ui-router 1.0.0-beta.3 causes angular undefined error

[milo-]

When updating from beta.2 to beta.3 I get an error saying angular-ui-router.js:6625 Uncaught TypeError: angular.module is not a function

I'm using webpack with angular 1.5.

I believe the issue might be caused by angular not working exporting itself correctly: http://stackoverflow.com/questions/35571090/why-requireangular-returns-an-empty-object

I think this is the same issue reported by @elesdoar

[christopherthielen]

@milo- thanks for the link.

I think this behavior changed in 71bfaa0 where we now do:
import * as angular from "angular";

Help me understand how we reproduce the behavior Uncaught TypeError: angular.module is not a function. I'm using webpack and do not have the same problem.

Here's a minimal repository which shows webpack working with ui-router 1.0.0-beta.3 and angular: https://github.com/christopherthielen/ui-router-webpack . See if you can fork the repository and get the error to occur.

I'd really like to fix this, but I need to be able to reproduce it first.

it's true that the core angular.js file doesn't support CommonJS, but if you install it from NPM, a tiny wrapper file called index.js is provided.

This seems like it should work out of the box with webpack. Can you help me understand why this doesn't work for you?

[christophercr]

Hi @milo- ,

I got the same error a couple a days ago, and in my case I was playing around with the aliases in Webpack and tried out putting an alias like "angular" : "angular/angular.min.js" so the minified version would be used instead.

When I added the ui-router 1.0.0 beta 3, I got the error and I think it is obvious because the angular.min.js is not declared as module in angularjs typings. As I said, I just wanted to see how the aliases worked so I just simply removed the alias and the issue was gone.

I hope this helps, but if not, at least be aware that using the minified version of angularjs also causes the same issue.

[milo-]

Thanks both for getting back to me!

It seems to be caused by using bower rather than npm for managing dependencies. I'm guessing the bower version doesn't export the module, so ui-router can't pick it up. I've pushed the failing code into a PR: https://github.com/christopherthielen/ui-router-webpack/pull/1/files

I'm going to switch over our to using npm on my side to resolve this. Let me know if I can be any more help.

[milo-]

👍 thanks @christopherthielen

[elesdoar]

👍 Thanks

[AdityaTandon02]

Hi Team,
I am getting a strange issue.
I am using 1.0.0-beta.3 version of angualar ui-router. To get the file I use "http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-beta.3/angular-ui-router.min.js" CDN path.
Problem is when get this file on Chrome (Version 55.0.2883.87 m) data is different and when i get this from Firefox (version 50.1.0) data is different.
On chrome data is valid but on firefox data is not valid, it is broken due to which i am facing issue and not able to load ui router file.
Do you have any idea why i am getting different data on different browsers whereas my cdn url is same. Is this an issue from cdn end.

[christopherthielen]

I have literally no idea. Perhaps try a different CDN

http://unpkg.com/[email protected]/release/angular-ui-router.min.js

[AdityaTandon02]

Thanks for quick turnaround Christopher.
This CDN is working fine in both the browsers.
Can we use this CDN in our production application ?. Just confirming.

[christopherthielen]

Can we use this CDN in our production application ?. Just confirming.

@AdityaTandon02 I'd advise you to read over the information provided by unpkg.com about their CDN: https://unpkg.com/#/about

then you can make that decision for yourself.