Angular2 - How to deploy/build npm based Angular 2 site

Question

I'm relatively new to all this, I've read a few other questions that feel similar but my inexperience is causing me to question which path is best.

I have a functioning Angular 2 site based on the Quick Start from the Angular 2 guide. Its currently using the lite-server to host locally, but I'd like to move it to our server so it can be viewed externally. My understanding is that I'll need to convert the TS files to JS (which I thought was already happening in real time from lite-server) and then move those files to the server?

Could someone explain the steps required to make this happen? It feels as though the Angular 2 quick start favors Systemjs to build, however I've seen many posts where webpack is mentioned.

Are systemjs and webpack interchangeable? Are they the preferred ways to build an Angular 2 project to a deployable format?

Answer 1

First of all some clarification

It's not lite server who compile your files to js it's typescript tsc. If you have tried angulor.io's 5 Min Quickstart then you can see in first stage it's installing these dependencies

"devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",------>for serving app to browser
    "typescript": "^1.8.10",----->for compiling
    "typings":"^1.0.4"
  }

and here you can see in this script how it happneds

"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",

first it run tsc which compile your files to js later it run it in watch mode so it can detect any changes and re-compile your files and in the and it run lite script command which have this

"lite": "lite-server"

Now to your actual question

Angular2 - How to deploy/build npm based Angular 2 site?

There are many ways many tools like grunt, gulp, webpack and jspm. Angular team has also announced a new tool angular-cli which makes thing lot easier.

Note it's still under development and not stable. learn about angular-cli

There are many guides for how to use these tools. I have also one

angular2-webpack-seed

Webpack is on the top of all other tools, it's my opinion so for sure there are other's those prefer to something else. I believe webpack gives you lot of options. There are many plugins for make your life easy. you can run your app with webpack-dev-server which also provide you awesome functionality.

learn about webpack