search

mgechev / angular-seed

🌱 [Deprecated] Extensible, reliable, modular, PWA ready starter project for Angular (2 and beyond) with statically typed build and AoT compilation
https://mgechev.github.io/angular-seed
MIT License
4.57k stars 1.45k forks source link

Prod build fails with external libraries #473

Closed fourctv closed 8 years ago

fourctv commented 8 years ago

In a previous version of the seed, when you used systemjs builder to bundle the app, I was able to get a production build with backbone+jquery+underscore. External libraries were put into dist/prod/libs folder.

Now with the changes to prod build to use browserify, I can't get that a prod build to work! Instructions on Read.me or wiki on how to add 3rd party libraries do not cover that.

In systemjs days I'd add my external dependencies to config.ts and they'd be copied into libs. Now, with browserify I've tried to add my external libs to PROD_NPM_Dependencies, but that did not work. I've also tried to manually edit the resulting index.html to force load my external libs but it still fails.

Any hints or tips on how to get a prod build going with those external libs?

TIA

Bigous commented 8 years ago

+1 - after browserify, production build does not work very well.

mgechev commented 8 years ago

@fourctv you don't have to add your dependencies to PROD_NPM_DEPENDENCIES. Browserify automatically resolves and bundles everything. PROD_NPM_DEPENDENCIES is used for CSS files and any other dependencies such as es6-shim or related, which are not directly referenced inside of your files with an import statements.

Bigous commented 8 years ago

Hi @mgechev, maybe I'm doing something wrong ... but in development env, no problem is occuring.. in prod build..

EXCEPTION: TypeError: Cannot read property 'init' of undefined
EXCEPTION: TypeError: Cannot read property 'init' of undefined
STACKTRACE:
TypeError: Cannot read property 'init' of undefined
    at http://127.0.0.1:8080/js/app.js:32:18848
    at cb (http://127.0.0.1:8080/js/app.js:22:14502)
    at arguments.(anonymous function) (http://127.0.0.1:8080/js/shims.js:4:6604)
    at http://127.0.0.1:8080/js/shims.js:4:1812
    at r.run (http://127.0.0.1:8080/js/shims.js:4:1996)
    at r.run (http://127.0.0.1:8080/js/app.js:22:13563)
    at http://127.0.0.1:8080/js/shims.js:4:1720

-----async gap-----
Error
    at r (http://127.0.0.1:8080/js/shims.js:4:23251)
    at r.fork (http://127.0.0.1:8080/js/shims.js:4:24177)
    at r.bind (http://127.0.0.1:8080/js/shims.js:4:1686)
    at r.bindOnce (http://127.0.0.1:8080/js/shims.js:4:1788)
    at o (http://127.0.0.1:8080/js/shims.js:4:13732)
    at n.zone.(anonymous function) (http://127.0.0.1:8080/js/shims.js:4:6633)
    at http://127.0.0.1:8080/js/app.js:22:14578
    at e.(anonymous function) (http://127.0.0.1:8080/js/shims.js:4:6712)
    at BootstrapMaterialStarter.ngAfterContentInit (http://127.0.0.1:8080/js/app.js:32:18806)
    at Subscriber.<anonymous> (http://127.0.0.1:8080/js/app.js:32:2331)

-----async gap-----
Error
    at r (http://127.0.0.1:8080/js/shims.js:4:23251)
    at r.fork (http://127.0.0.1:8080/js/shims.js:4:24177)
    at NgZone._createInnerZone (http://127.0.0.1:8080/js/app.js:22:13285)
    at new NgZone (http://127.0.0.1:8080/js/app.js:22:10228)
    at createNgZone (http://127.0.0.1:8080/js/app.js:11:11836)
    at PlatformRef_.application (http://127.0.0.1:8080/js/app.js:11:14815)
    at Object.bootstrap (http://127.0.0.1:8080/js/app.js:1:7670)
    at Object.r.277../fourtwo/components/fourtwo (http://127.0.0.1:8080/js/app.js:31:7946)
    at s (http://127.0.0.1:8080/js/app.js:1:254)
    at e (http://127.0.0.1:8080/js/app.js:1:421)
Uncaught TypeError: Cannot read property 'init' of undefined
EXCEPTION: TypeError: Cannot read property 'init' of undefined
EXCEPTION: TypeError: Cannot read property 'init' of undefined
STACKTRACE:
TypeError: Cannot read property 'init' of undefined
    at http://127.0.0.1:8080/js/app.js:32:18848
    at cb (http://127.0.0.1:8080/js/app.js:22:14502)
    at arguments.(anonymous function) (http://127.0.0.1:8080/js/shims.js:4:6604)
    at http://127.0.0.1:8080/js/shims.js:4:1812
    at r.run (http://127.0.0.1:8080/js/shims.js:4:1996)
    at r.run (http://127.0.0.1:8080/js/app.js:22:13563)
    at http://127.0.0.1:8080/js/shims.js:4:1720

-----async gap-----
Error
    at r (http://127.0.0.1:8080/js/shims.js:4:23251)
    at r.fork (http://127.0.0.1:8080/js/shims.js:4:24177)
    at r.bind (http://127.0.0.1:8080/js/shims.js:4:1686)
    at r.bindOnce (http://127.0.0.1:8080/js/shims.js:4:1788)
    at o (http://127.0.0.1:8080/js/shims.js:4:13732)
    at n.zone.(anonymous function) (http://127.0.0.1:8080/js/shims.js:4:6633)
    at http://127.0.0.1:8080/js/app.js:22:14578
    at e.(anonymous function) (http://127.0.0.1:8080/js/shims.js:4:6712)
    at Menu.BootstrapMaterialStarter.ngAfterContentInit (http://127.0.0.1:8080/js/app.js:32:18806)
    at AbstractChangeDetector.ChangeDetector_FourTwoCmp_2.afterContentLifecycleCallbacksInternal (viewFactory_FourTwoCmp:217:82)

-----async gap-----
Error
    at r (http://127.0.0.1:8080/js/shims.js:4:23251)
    at r.fork (http://127.0.0.1:8080/js/shims.js:4:24177)
    at NgZone._createInnerZone (http://127.0.0.1:8080/js/app.js:22:13285)
    at new NgZone (http://127.0.0.1:8080/js/app.js:22:10228)
    at createNgZone (http://127.0.0.1:8080/js/app.js:11:11836)
    at PlatformRef_.application (http://127.0.0.1:8080/js/app.js:11:14815)
    at Object.bootstrap (http://127.0.0.1:8080/js/app.js:1:7670)
    at Object.r.277../fourtwo/components/fourtwo (http://127.0.0.1:8080/js/app.js:31:7946)
    at s (http://127.0.0.1:8080/js/app.js:1:254)
    at e (http://127.0.0.1:8080/js/app.js:1:421)
Uncaught TypeError: Cannot read property 'init' of undefined
EXCEPTION: TypeError: Cannot read property 'init' of undefined
EXCEPTION: TypeError: Cannot read property 'init' of undefined
STACKTRACE:
TypeError: Cannot read property 'init' of undefined
    at http://127.0.0.1:8080/js/app.js:32:18848
    at cb (http://127.0.0.1:8080/js/app.js:22:14502)
    at arguments.(anonymous function) (http://127.0.0.1:8080/js/shims.js:4:6604)
    at http://127.0.0.1:8080/js/shims.js:4:1812
    at r.run (http://127.0.0.1:8080/js/shims.js:4:1996)
    at r.run (http://127.0.0.1:8080/js/app.js:22:13563)
    at http://127.0.0.1:8080/js/shims.js:4:1720

-----async gap-----
Error
    at r (http://127.0.0.1:8080/js/shims.js:4:23251)
    at r.fork (http://127.0.0.1:8080/js/shims.js:4:24177)
    at r.bind (http://127.0.0.1:8080/js/shims.js:4:1686)
    at r.bindOnce (http://127.0.0.1:8080/js/shims.js:4:1788)
    at o (http://127.0.0.1:8080/js/shims.js:4:13732)
    at n.zone.(anonymous function) (http://127.0.0.1:8080/js/shims.js:4:6633)
    at http://127.0.0.1:8080/js/app.js:22:14578
    at e.(anonymous function) (http://127.0.0.1:8080/js/shims.js:4:6712)
    at LoginCmp.BootstrapMaterialStarter.ngAfterContentInit (http://127.0.0.1:8080/js/app.js:32:18806)
    at AbstractChangeDetector.ChangeDetector_HostLoginCmp_0.afterContentLifecycleCallbacksInternal (viewFactory_HostLoginCmp:26:82)

-----async gap-----
Error
    at r (http://127.0.0.1:8080/js/shims.js:4:23251)
    at r.fork (http://127.0.0.1:8080/js/shims.js:4:24177)
    at NgZone._createInnerZone (http://127.0.0.1:8080/js/app.js:22:13285)
    at new NgZone (http://127.0.0.1:8080/js/app.js:22:10228)
    at createNgZone (http://127.0.0.1:8080/js/app.js:11:11836)
    at PlatformRef_.application (http://127.0.0.1:8080/js/app.js:11:14815)
    at Object.bootstrap (http://127.0.0.1:8080/js/app.js:1:7670)
    at Object.r.277../fourtwo/components/fourtwo (http://127.0.0.1:8080/js/app.js:31:7946)
    at s (http://127.0.0.1:8080/js/app.js:1:254)
    at e (http://127.0.0.1:8080/js/app.js:1:421)
Uncaught TypeError: Cannot read property 'init' of undefined
Bigous commented 8 years ago

When i try to execute my app

Bigous commented 8 years ago

I'm trying to update the ng2-highcharts seed - production build run fails with (undefined navigator) at shim.js ... see it here

mgechev commented 8 years ago

@Bigous I'll work on moving the production build to SystemJS. Tonight I'll be unavailable, ideally we'll only need to rewrite the following lines.

If you have some spare time PR will be greatly appreciated!

krzysztofsaja commented 8 years ago

Hi, I just want to confirm, that after migrating from previous version (angular.beta1) to new version production build doesn't work right.

  1. Even if I followed instruction about adding new task for 'Less', it works only in development mode. I had to changed some gulp files in a dirty way to have some results in production.
  2. In production, I got many errors concerning jQuery, fonts Awesome and some assets (only some of images have wrong paths...). Here is my console log:
Uncaught TypeError: Cannot read property 'navigator' of undefined

:8080/dashboard:76 Live reload enabled. http://127.0.0.1:8080/fonts/fontawesome-webfont.woff2?v=4.5.0 Failed to load resource: the server responded with a status of 404 (Not Found) app.js:37 Uncaught (in promise) ReferenceError: $ is not defined(…) http://127.0.0.1:8080/fonts/fontawesome-webfont.woff?v=4.5.0 Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:8080/fonts/fontawesome-webfont.ttf?v=4.5.0 Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:8080/mail/assets/images/a4.jpg Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:8080/mail/mailbox Failed to load resource: the server responded with a status of 404 (Not Found)

Bigous commented 8 years ago

Hi @mgechev - I'm out (going back to brasil...) when I get there, I'll work on it! tks

Bigous commented 8 years ago

Hi @krzysztofsaja The 404 I'm not sure if it's related... the navigator problem occurs to me too

mgechev commented 8 years ago

@Bigous I'll work on this today, hopefully we'll have the production build fixed by Monday.

fourctv commented 8 years ago

One suggestion would be to maybe have that as config option, so based on a config option you’d use browserif or systemjs. Which one to use would be a user option.

On Feb 14, 2016, at 6:19 AM, Minko Gechev notifications@github.com wrote:

@Bigous https://github.com/Bigous I'll work on this today, hopefully we'll have the production build by Monday.

— Reply to this email directly or view it on GitHub https://github.com/mgechev/angular2-seed/issues/473#issuecomment-183846787.

ghost commented 8 years ago

I am not convinced that I want all my libs bundled. http2 changes the way that files can be downloaded to the browser and with http2 it may be efficient to have more and smaller files. What I am hoping to see is configuration that gives me a very fast home page (possibly server side rendered with universal or isomorphic techniques, https://github.com/angular/universal) and then on-demand downloading of JavaScript libraries if and when I load modules that need them. I want to have a SPA that can do a variety of things possibly filtered by authorization. If a user is not allowed or has no need for some of the modules then those modules and their imports (and dependencies) should not be downloaded to the browser.

mgechev commented 8 years ago

Would you verify the issue is fixed after merging https://github.com/mgechev/angular2-seed/pull/483 ?