Minimalist Angular2 Set Up

Question

I am having a hard time understanding what's really needed to use Angular2's base functionality with Typescript. As in, what does a minimalist project look like? What dependencies do I absolutely need to have in a "real" project (not just "Hello World", but nothing complex)?

I realize that this question has answers, for example, on the angular site, but they seem to include a lot of fluff. Angular books seem to be out of date. For example, I ran npm install on angular2 and got different packages than what ng-book2 listed (though admittedly, I got it a while back, so it may have been updated).

1. Install node OR MAKE SURE YOU HAVE THE LATEST! Even relatively fresh installations might be out of date now. Easiest way to reinstall node on windows is to simply go to the site and download the installer again.
2. npm install angular2
3. npm install -g typescript
4. ???

I am throwing a bounty on this, so it would be nice to get a list of steps and a little bit of example code with basic functionality. I am also interested in what needs to be referenced in the project and why. (For example, one difference I noticed from Angular 1 is that people seem to reference multiple files in the Angular 2 folder which npm installs, why?)

P.S. Preferrably with Webpack, or an explanation on whether SystemJs and WebPack can be ignored for a minimalist set up.

Answer 1

Answer 1:

Just came across a link - Manually setting Angular 2 Environment which really explains why we are adding so and so files for our Angular 2 app setup.

• There are manual steps involved so as compared to npm install angular-cli we better (upto some extent) know what we are doing
• It is minimalist - no testing - just include what is needed for Angular2 - Hello world.

There is one mistake I found in a code file they've provided. In index.html file, instead of

System.import('/angular2/src/app/environment_main')
            .then(null, console.error.bind(console));

Refer

 System.import('/app/environment_main')
            .then(null, console.error.bind(console));

It should be the relative path of the file where we tell the Angular to load the component.

Hope it answers.

---

Answer 2:

After nodejs installation, you can do this by just 3 commands.

npm install -g typings
npm install -g angular-cli

ng new PROJECT_NAME

This will set up a new project with Angular2.

Run the commands:

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

That is it, you now have a simple example project made with Angular 2. You can now navigate to the link displayed in terminal and see what it is running.

---

For beginners' I suggest first approach to understand better - what's going on and all..

Answer 2

Here is a plunker for the minimal angular2 setup. This is the starting template the angular team uses.

http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=catalogue

They have been maintaining this link as they update the framework.

Answer 3

Angular2 is a framework and has a lot of dependencies. So yeah, there is a lot of fluff which needs configured for everything to work.

The Angular2 quickstart is what you need. So for a short answer: the minimal project is almost the same as with a complex project (libs/dependencies/build related).

The only thing that you can skip from that quick start are the tests.

Answer 4

I described how to create the minimalistic Angular 2 RC.6 project that uses SystemJS here: https://yakovfain.com/2016/09/01/starting-an-angular-2-rc-6-project/

For the minimalistic Webpack-based project see this project: https://github.com/Farata/angular2typescript/tree/master/chapter10/basic-webpack-starter