Angular-cli: 3rd party lib wiki instructions - broken with ng serve -prod

Created on 29 May 2016 · 17Comments · Source: angular/angular-cli

Please provide us with the following information:

OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

OSX El Cap

Versions. Please run ng --version. If there's nothing outputted, please
run in a Terminal:
node --version
And paste the result here.

$ ng --version
(node:11861) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.5
node: 6.1.0
os: darwin x64

Repro steps. Was this an app that wasn't created using the CLI? What change did you
do on your code? etc.
ng new your app
Follow instructions in https://github.com/angular/angular-cli/wiki/3rd-party-libs to add the moment.js library.
ng serve, works fine
ng serve -prod - the application never finishes bootstrapping, never replaces the "loading" text. No messages, just failure.
The log given by the failure. Normally this include a stack trace and some
more information.

This is an extremely frustrating failure mode: there is no log output. There is no error. If there is nothing in the terminal, there is nothing in the browser console. The application simply fails to ever come to life.

Mention any other details that might be useful.

Thanks! We'll be in touch soon.

Based on the number of issues open in the last few days that mention it, the wiki page about adding libraries appears to be insufficient at best, and more likely wrong (at least for -prod). I suggest replacing it or augmenting it with a demo repository showing an example:

Several common third-party libraries, integrated in the recommended way.
Tested with each new CLI release.
Tested with the -prod option.

bufix

Source

kylecordes

👍3

Most helpful comment

It seems that autodetecting the module format for moment was broken. I've updated https://github.com/angular/angular-cli/wiki/3rd-party-libs with current steps and tested locally, please tell me if they don't work for you.

Basically additional configuration is needed in system-config.js:

const packages: any = {
  'moment':{
    format: 'cjs'
  }
};

Regarding the tsconfig, they were put down in the projects themselves because there are scenarios where one can have multiple apps in a single repo. https://github.com/angular/material2 for instance does this.

filipesilva on 1 Jun 2016

👍2

All 17 comments

Same here. ng build-prod passes well:

`| Building"{{content-for}}" has been deprecated and will be removed before RC.
Built project successfully. Stored in "dist/".
File sizes:
....

index.js: 36.06 KB (3.77 KB gzipped)
navigation.component.css: 262 B (172 B gzipped)
stock-front.component.css: 24 B (44 B gzipped)
main.js: 1.1 MB (227.92 KB gzipped)
system-config.js: 2.73 KB (812 B gzipped)
es6-shim.js: 131.74 KB (30.4 KB gzipped)
Reflect.js: 36.91 KB (5.29 KB gzipped)
system.src.js: 159.57 KB (38.99 KB gzipped)
zone.js: 52.72 KB (11.37 KB gzipped)`

ng serve prod passes well as well:

`Livereload server on http://localhost:49152
Serving on http://localhost:4200/
"{{content-for}}" has been deprecated and will be removed before RC.

Build successful - 37548ms.

and nothing happens in browser, except the Loading... string. No error.

vaskgjuri on 30 May 2016

I can confirm this as well. I am using lodash in a simple service, and the dev builds work perfectly. When I run ng build -prod my app does not bootstrap. After several hours, I found that 3rd party library imports cause the app not to bootstrap, but the build looks fine, and there is no logging.

justinrassier on 31 May 2016

@justinrassier can you share what exactly was causing your problem?

vaskgjuri on 31 May 2016

@vaskgjuri I created a simple repo demonstrating the problem and how to reproduce here: https://github.com/justinrassier/angular-cli-issue-951

Let me know if anything is unclear or if you need additional information.

justinrassier on 31 May 2016

The repo published by @justinrassier the above shows exactly the same problem as I first reported. One thing I noticed in that repo, Justin added an additional tsconfig at the top of the project, in addition to the one inside the src provided by angular-cli. I can confirm that this is not the trigger of the problem. It fails just as spectacularly if you did not add an additional tsconfig.

(By the way, I wonder if angular-cli is going to keep this arrangement of tsconfig down inside the src directory; I've been working with typescript quite extensively, and generally have found more typical approach putting tsconfig.json at the top seems to work best. But CLI is about going with the flow of however the tool wants to do things.)

kylecordes on 31 May 2016

Basically additional configuration is needed in system-config.js:

const packages: any = {
  'moment':{
    format: 'cjs'
  }
};

filipesilva on 1 Jun 2016

👍2

Thank you. Were you able to coax an error message out of it discover this config change needed? Or did you have to guess it, compare to other projects, etc.?

kylecordes on 1 Jun 2016

I couldn't get an error message per se, but instead noticed that in prod mode only main.js was being loaded whereas I knew app/app.js should also be loaded. That seemed to indicate that the bootstrap code wasn't being reached.

I posited that perhaps the bundling of main.ts was messing up user code, and went to check up on moment.js. It seemed to have a rather weird format and I supposed that maybe SystemJS was having trouble figuring out the kind of module, so I tried explicitly declaring it.

filipesilva on 1 Jun 2016

Thank you, that is helpful, it is a good clue for me and others is the same thing in the future to know where to start looking around - specifically in the contents of libraries being loaded, to try determining what type of module they are and then instruct SystemJS as to that type. It is very unfortunate, although I'm guessing not something that angular-cli could fix, that the process starting the page (even before the angular bootstrap) fails in this way if system can't figure out how to load the library. Ouch.

kylecordes on 1 Jun 2016

This worked like a charm for me as well. Thank you for the fix!

Hopefully in the future this can be a bit more automated. I could see how this could trip some people up who may not understand the differences between the different types of module syntax enough to dig into their vendor libraries and help guide System.js to the right format type. But for now, I am excited to see it working.

justinrassier on 1 Jun 2016

Yeah I can't quite get why SystemJS has no problem picking the module format up when loading it at runtime, but it breaks when bundled via builder. I'll try to open up an issue there, perhaps it is fixable.

filipesilva on 2 Jun 2016

There is an issue opened on SystemJS builder regarding this topic: https://github.com/systemjs/builder/issues/614

filipesilva on 3 Jun 2016

@filipesilva the workaround for 'moment' got me past the "empty page, no error" phase, but ng is still failing to copy the code needed for bootstrapping the whole process:

ngnobundle

i can't use the "tree shaking" approach to load systemjs - that's a chicken/egg scenario.

sgbeal on 3 Jun 2016

@sgbeal do you have a separate issue for that? I don't want to hijack this issue, they are different and this one is also linked to a SystemJS issue so clutter here is doubly bad.

filipesilva on 3 Jun 2016

@filipesilva i did have one, but you closed it yesterday ;)

https://github.com/angular/angular-cli/issues/888

sgbeal on 3 Jun 2016

This issue should not be present anymore in the upcoming beta.6 as it was fixed in https://github.com/angular/angular-cli/pull/1028/commits/065e98f40384f8b28dcaf84028c411043697ff11. Details regarding can be found in https://github.com/systemjs/builder/issues/614#issuecomment-224857014

filipesilva on 9 Jun 2016

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}