[Docs - System.js branch] Explain the correlation between gulpfile.js and index.html for prod build

[jbgarr]

I'm trying to run the build.prod command and running into issues. The main thing that I'm having a hard time putting together is how the gulpfile and index.html would need to be updated in order to add additional libraries/dependencies. My app runs fine in dev mode, but it blows up during the build.prod process. I have a number of external dependencies that I'm trying to work with including ngrx. Can someone please help guide me through the process of adding external dependencies to my gulpfile so that it builds correctly?

Another thing that would be nice would be explaining how one could use a systemjs.config.js file to store the system.js config info in an external file rather than having it all in the index.html file. That section of the index.html file could end up really long so it would be nice to have it in a separate file. Thanks for any help you can provide.

[jeeyun]

Hi @jbgarr thank you for your feedback. I've filed a separate issue to externalize the systemjs config into a separate file (#21). Meanwhile to answer your questions:

1. if dev mode is working but not prod mode: chances are you haven't updated the systemjs config for the gulp task that's producing the prod build. You can look at bundle:vendor:js task in gulpfile.js and add in external dependencies that your app has. I know this is not ideal. We are hoping to address this and consolidate when we address [System.js branch] Externalize systemjs config to a separate file #21.
2. I think we could definitely improve documentation and/or structure for adding external dependencies. I'll leave this issue open and use it to address improvements.

[jbgarr]

Hi @jeeyun thanks for the reply. I have been playing with the gulpfile for a while and can't seem to get the right combination of things figured out. It seems in addition to adjusting the bundle:vendor:js task, I'm also supposed to update the bundle:app:js task since if I don't then I get errors when running the build.prod script (and the errors are thrown during the bundle:app:js task). Do you have any examples you can share about how an external library should be added (with updates in all the necessary files)?

[jeeyun]

In general bundle:vendor:js contains 3rd party libraries from which your application imports from. So that includes things like various angular libraries, clarity, etc. bundle:app:js contains the bundled code from your application, so this is the code that you wrote. You will see in this task that we exclude bundling of external libraries in the config (they can be excluded here, because when your code imports it'll get it from the vendor.js, which is produced by bundle:vendor:js + copy:deps:js tasks):

meta: {
        '@angular/*':         { build: false },
        'clarity-angular*' :  { build: false },
        'rxjs*':             { build: false }
      },

So if you have external libraries you should exclude those there as well.

If you are more familiar/comfortable with angular-cli or webpack maybe give those branches a try instead. We started out with the systemjs branch because that was the more popular way to do it at the time. We are maintaining all 3 branches of the seed though, and plan to do so for the time being.

[jbgarr]

Ah, ok! That was what I was missing... I think I had tried different variations of including the meta {build: false} for some external libraries, but I didn't realize that it needed to be included for every one of them. Thanks for the clarification. I'm up and running now 😄