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?

Improve this question
2
  • 1
    check out this post, might give you a little insight and direction stackoverflow.com/questions/35539622/… Commented Aug 24, 2016 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. Commented Aug 24, 2016 at 16:18

1 Answer 1

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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.
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 :-)
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.
Nvm on that last comment, I found that it was b/c I was missing actual loader files themselves.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.