Integrating Angular 2 into our application

The frontend application is going to be built using Angular 2. At the time of writing this book, the project is still in beta, but it will come in handy to start playing around with Angular and have a good understanding of the environment. Most of the code will follow the official docs view of the tooling and integration methods.

When we first described our folder structure, we saw a package.json file for the client application too. Let's take a look at it, found under the contact-manager/public/package.json path:

{
  "private": true,
  "name": "mean-blueprints-contact-manager-client",
  "dependencies": {
    "systemjs": "^0.19.25",
    "es6-shim": "^0.35.0",
    "es6-promise": "^3.0.2",
    "rxjs": "^5.0.0-beta.2",
    "reflect-metadata": "^0.1.2",
    "zone.js": "^0.6.6",
    "angular2": "^2.0.0-beta.14"
  },
  "devDependencies": {
    "typings": "^0.7.12",
    "typescript": "^1.8.9"
  }
}

To install the necessary dependencies, just use the following command:

$ npm install

You will see npm pulling down different packages, specified in the package.json file.

As you can see, we'll use TypeScript in our client-side application. If you have installed it globally, you can use the following command to compile and watch for changes to your .ts files:

$ tsc -w

Only the most important parts of the application will be discussed. The rest of the necessary files and folders can be found in the final bundled source code.