AngularClass/angular2-webpack-starter

rvalimaki

@rvalimaki

Mar 09 2016 12:31

Hi, am I the only one to get "RangeError: Maximum call stack size exceeded" when trying to serve compiled bundles? webpack-dev-server works fine, more or less.

``` EXCEPTION: RangeError: Maximum call stack size exceededt.logError @ browser_adapter.ts:73t.logGroup @ browser_adapter.ts:84e.call @ exception_handler.ts:49(anonymous function) @ application_ref.ts:257e._notifyOnError @ ng_zone.ts:454t.onError @ ng_zone.ts:355e.run @ polyfills.8546ea7f0b535a24e15a.bundle.js:8093(anonymous function) @ ng_zone.ts:371(anonymous function) @ polyfills.8546ea7f0b535a24e15a.bundle.js:8066A @ polyfills.8546ea7f0b535a24e15a.bundle.js:7314N @ polyfills.8546ea7f0b535a24e15a.bundle.js:7326I @ polyfills.8546ea7f0b535a24e15a.bundle.js:7297(anonymous function) @ polyfills.8546ea7f0b535a24e15a.bundle.js:6969n @ ng_zone.ts:410e.run @ polyfills.8546ea7f0b535a24e15a.bundle.js:8089(anonymous function) @ ng_zone.ts:371(anonymous function) @ polyfills.8546ea7f0b535a24e15a.bundle.js:8066b @ polyfills.8546ea7f0b535a24e15a.bundle.js:7108
browser_adapter.ts:73 STACKTRACE:t.logError @ browser_adapter.ts:73e.call @ exception_handler.ts:52(anonymous function) @ application_ref.ts:257e._notifyOnError @ ng_zone.ts:454t.onError @ ng_zone.ts:355e.run @ polyfills.8546ea7f0b535a24e15a.bundle.js:8093(anonymous function) @ ng_zone.ts:371(anonymous function) @ polyfills.8546ea7f0b535a24e15a.bundle.js:8066A @ polyfills.8546ea7f0b535a24e15a.bundle.js:7314N @ polyfills.8546ea7f0b535a24e15a.bundle.js:7326I @ polyfills.8546ea7f0b535a24e15a.bundle.js:7297(anonymous function) @ polyfills.8546ea7f0b535a24e15a.bundle.js:6969n @ ng_zone.ts:410e.run @ polyfills.8546ea7f0b535a24e15a.bundle.js:8089(anonymous function) @ ng_zone.ts:371(anonymous function) @ polyfills.8546ea7f0b535a24e15a.bundle.js:8066b @ polyfills.8546ea7f0b535a24e15a.bundle.js:7108

sorry, that's pretty unreadable

angular/angular#5964 <- might be related

rvalimaki

@rvalimaki

Mar 09 2016 12:38

Seems that development build (npm run build:dev) is working for me on this regard. It's only build:prod, that's giving me that maximum call stack size exceeded.

Joanne Yae

@nyjy85

Mar 09 2016 23:31

How can i make a third party library into a global variable so that I don't have to import or require it in individual modules? For example, I want lodash to be globally available. How do i configure webpack to do this?

I tried to alias it like this : alias: {
lodash: path.resolve( __dirname, './node_modules/lodash')
}

then added a new plugin:
new webpack.ProvidePlugin({
myLodash: "lodash",
})

but it doesn't work

Ben

@sysupbda

Mar 09 2016 23:35

I was about to say that I use DI for such cases

Joanne Yae

@nyjy85

Mar 09 2016 23:35

What is DI?

Ben

@sysupbda

Mar 09 2016 23:35

But in fact I don't really have such cases anymore :)

Dependency Injection

I used lodash a lot in ES5, but there are only very few things I would be missing in ES6 that would justify me still using lodash with typescript or ES6

Not sure how you could DI an entire module though to be honest

Joanne Yae

@nyjy85

Mar 09 2016 23:36

well, you can do it with jquery

but it only works for jquery -_-;; and i dont know why

Ben

@sysupbda

Mar 09 2016 23:36

With the alias logic you mentioned?

Joanne Yae

@nyjy85

Mar 09 2016 23:37

for some reason you don't need an alias for jquery

new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})

thats all you need

Ben

@sysupbda

Mar 09 2016 23:38

you've made me curious. Would like to see what others say how they would do this. But I really find it extremely rare to need a module across many components modules since typescript and ng2

Joanne Yae

@nyjy85

Mar 09 2016 23:38

you're right, its rare but i use lodash and moment everywhere

would like to have it available globally without requireing it in all my components

Ben

@sysupbda

Mar 09 2016 23:39

yep.. i understand. i'll keep watching for answers here :) you might have more success in a webpack specific chat though no?