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

WORKING ONLINE STARTER APP AS OF JULY 6, 2018

Looks like the Angular team is no longer upkeeping the PLNKR Quick Start. They have moved on to stackblitz, the plunker in the accepted answer is now out of date. Use the link above.

If that breaks in the future, the Angular team seems to post updated links at this url: https://angular.io/guide/setup

Ironically, the link from there is broken now.

Answer 2

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 3

Let me present you the best angular2 seed I actually know.

That seed is particular because it's not a classical angular2 project, but an isomorphic seed for angular2 based on a technology called angular universal. It also has a compression system that makes your project faster, thank to webpack.

Here is a schema that shows you the concept of an isomorphic app.

The concept is pretty easy : Isomorphic from the Greek "isos" for "equal" and "morph" for "shape". Isomorphism describes that if you look at the same entity in two different contexts, you should get the same thing. Here the contexts are server and client. Although the term has been mostly used in mathematics until now, it's an apt term to describe a web programing pattern where the code is shared by the front-end and back-end.

To resume, that pattern is supposed to allow you to make a server rendering. That improvement will make your web application faster, so by the way very SEO friendly and easier to maintain. Google will really love it because without an isomorphic pattern, your angular2 application will have an almost empty HTML structure, which is very bad for semantic.

I also invite you to watch that demonstration of Angular Universal.

I guess you've heard about React.JS, which is a strong competitor of Angular2. React is also an isomorphic framework and you could prefer it for some reasons, that's why you should read that article called "Angular 2 versus React: There Will Be Blood".

Convinced ? : Let's install Angular2 Universal!

The first step is easy : checking that you have the prerequisites. Just type the following command :

node -v && npm -v

If you result looks like that the following output, it means that you have NodeJS and NPM installed.

v5.8.0
3.10.6

If the output is different, here are the full explanation to install NodeJS and NPM on your specific environnent. To clone the repository, you will also need to install git.

When you're done, clone the repository by writing :

git clone https://github.com/angular/universal-starter myProject
cd myProject

Then you will have to install the Node Modules that are used by that project. The list of the dependencies of the project are detailed in the package.json file. To install them, just use the following command in the folder of your project :

npm install

If you are using Ubuntu, you might have a npm authorization issue. In that case you can just run npm install as a sudo user, but be careful, it can fails because the npm version for your sudo user can be different that the npm version for your current user. It means that sudo npm -v could give you a different output than the previous command, in that case update npm as a sudo user and as your current user to have the latest version in both cases.

To finish the installation, you need an npm package called typings just install it by running

npm install typings --global

When it is done, just run the following command to install the typings dependencies :

typings install

When you're done, you can just run the project by running

npm start

If you have an EACCESS (authorisation) issue, you can fix it or still launching that command as a sudo user. Now you can explore that project, play with, and if you have any question : the Angular2 Documentation is here for you!

Answer 4

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 5

Angular 2 is a modular framework, there are some core modules and then plenty of optional ones. These modules can be connected together to form different kinds of apps with different features.

There's some good official documentation about it here https://angular.io/docs/ts/latest/guide/architecture.html

In terms of the quickest way to get started I would recommend angular-cli, just use the webpack branch https://github.com/angular/angular-cli/tree/v1.0.0-beta.11-webpack.8

Answer 6

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

Answer 7

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.