Joseph Assem Sobhy Joseph Assem Sobhy - 1 month ago 9
TypeScript Question

How do you deploy Angular 2 apps?

How do you deploy Angular 2 apps once they reach the production phase?

All the guides I've seen so far (even on angular.io) are counting on a lite-server for serving and browserSync to reflect changes - but when you finish with development, how can you publish the app?

Do I import all the compiled

.js
files on the
index.html
page or do I minify them using gulp? Will they work? Do I need SystemJS at all in the production version?

Answer

You are actually here touching two questions in one. First one is how to host your application. And as @toskv mentioned its really too broad question to be answered and depends on numerous different things. Second one is more specific - how do you prepare the deployment version of the application. You have several options here:

  1. Deploy as it is. Just that - no minification, concatenation, name mangling etc. Transpile all your ts project, copy all your resulting js/css/... sources + dependencies to the hosting server and your are good to go.
  2. Deploy using special bundling tools. Like webpack or systemjs builder. They come with all possibilities that are lacking in #1. You can pack all your app code into just couple of js/css/... files that you reference in your html. Systemjs buider even allows you to get rid of need to include systemjs as part of your deployment package.

Yes you will most likely need to deploy systemjs and bunch of other external libraries as part of your package. And yes you will be able to bundle them into just couple of js files you reference from your html page. You do not have to reference all your compiled js files from the page though - systemjs as a module loader will take care of that.

I know it sounds muddy - to help get you started with the #2 here are two really good sample applications:

SystemJS builder: angular2 seed

WebPack: angular2 webpack starter

Look how they do it - and hopefully this will help you to find your way of bundling apps you make.