3

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?

Tekk_Know
  • 161
  • 2
  • 12
  • 1
    check out this post, might give you a little insight and direction http://stackoverflow.com/questions/35539622/how-to-deploy-angular-2-apps – Bean0341 Aug 24 '16 at 16:05
  • I have looked over this link and would like more detail. The approved answer 1.) says that I can transpile the TS and just move over the files. How is this done? The files are already on the server and setup with IIS but the angular never loads, the main app directive doesn't fire and just see "loading..." on index.html. I do have a systemjs.config.js file, does this mean I need to look at solutions around systemjs or can I use webpack? Just looking for a direction to head in. – Tekk_Know Aug 24 '16 at 16:18

1 Answers1

3

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

Jorawar Singh
  • 7,463
  • 4
  • 26
  • 39
  • Thanks for the explanation. I'm beginning to understand this more now. I've opted for webpack. I'm working on configuring it for Angular 2. Thanks again. – Tekk_Know Aug 24 '16 at 17:15
  • smart choice you welcome and if you find difficult for the configuration with webpack look at my seed in config folder it's a very light weight and easy to understand :-) – Jorawar Singh Aug 24 '16 at 17:17
  • I'm getting some errors when I try to build that seem to stem from the entry files ending in .ts. "Error: Cannot resolve module 'ts'" Any idea how to correct this? I have '.ts' in the resolve extension array. – Tekk_Know Aug 24 '16 at 20:27
  • Nvm on that last comment, I found that it was b/c I was missing actual loader files themselves. – Tekk_Know Aug 24 '16 at 21:54