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

Closed
milo- opened this Issue Oct 26, 2016 · 9 comments

Projects

None yet

5 participants

@milo-
milo- commented Oct 26, 2016

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
Contributor
christopherthielen commented Oct 26, 2016 edited

@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
christophercr commented Oct 27, 2016 edited

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-
milo- commented Oct 27, 2016

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.

@christopherthielen christopherthielen added this to the 1.0.0-beta.4 milestone Nov 1, 2016
@christopherthielen christopherthielen added a commit that closed this issue Nov 1, 2016
@christopherthielen christopherthielen fix(build): Use global `angular` reference if require('angular') is f…
…alsey or empty

- its empty when required from bower, which doesnt export anything

Closes #3113
2982613
@milo-
milo- commented Nov 2, 2016

👍 thanks @christopherthielen

@elesdoar
elesdoar commented Nov 2, 2016

👍 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
Contributor

I have literally no idea. Perhaps try a different CDN

http://unpkg.com/angular-ui-router@1.0.0-rc.1/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
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment