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

[kylecordes]

Please provide us with the following information:

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

OSX El Cap

1. 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

1. 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.

1. 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.

1. 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.

[vaskgjuri]

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.

Slowest Trees | Total
----------------------------------------------+---------------------
BundlePlugin | 18639ms
Funnel | 9402ms
BroccoliTypeScriptCompiler | 3810ms
vendor | 3074ms

Slowest Trees (cumulative) | Total (avg)
----------------------------------------------+---------------------
BundlePlugin (1) | 18639ms
Funnel (12) | 11211ms (934 ms)
BroccoliTypeScriptCompiler (1) | 3810ms
vendor (1) | 3074ms`

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

[justinrassier]

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.

[vaskgjuri]

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

[justinrassier]

@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.

[kylecordes]

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.)

[filipesilva]

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.

[kylecordes]

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.?

[filipesilva]

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.

[kylecordes]

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.

[justinrassier]

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.

[filipesilva]

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]

There is an issue opened on SystemJS builder regarding this topic: systemjs/builder#614

[sgbeal]

@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:

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

[filipesilva]

@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.

[sgbeal]

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

#888

[filipesilva]

This issue should not be present anymore in the upcoming beta.6 as it was fixed in 065e98f. Details regarding can be found in systemjs/builder#614 (comment)

[angular-automatic-lock-bot]

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.}