Setting up an Angular 2 Development Environment

In this article we will understand for Setting up an Angular 2 Development Environment.

When we start working on Angular 2 project even before to that we have setup an atmosphere for Angular 2 in your IDE. It all totally depends on your wish or developers choice which IDE to use for developing Angular. Naturally .NET people will like to use Visual Studio, Java developers are comfortable with their Eclipse IDE and someone will like to prefer Atom and so on.

Here in this write-up we have decided to use VS Code which is not an IDE unlike we have Visual Studio Eclipse. VS Code in clean words it is just a pure source code editor with that you can just write the code. And for rest other project activity like code editing, debugging, code review tools, web server, repository and testing tools we need to install, configure and run it separately. With that if you are new comer then learning Angular 2 will be indeed much more in-depth in true sense.

Good! We have finally settled down for the software which will be used to create Angular project. Next is to create a platform on which Angular 2 project will start building.

Now in order to create project in Angular 2 next thing is to download four important files. So here are the names of the files which are required. Angular 2 stands and practically get started building on the files. We have collected these four files from angular.io site and put it as simple download by creating its tiny URL link as mentioned here http://tinyurl.com/jeehlqo

Before you begin download first create a folder with a suitable name "Angular on the drive your HDD where do you want to save your project.

	package.json, systemjs.config.js, tsconfig.json and typings.json.
	Once that is done, open VS Code and then under Explorer view click and open the folder location just by browsing it.

Below image is the Explorer view and Folder view of those files. You might be thinking why these JSON files are used. Each file has its own purpose because which they are here downloaded, included and used in the project? Do not worry we will be answering to all your questions as we progress ahead.

Sneak-peek into JSON files.

Below is the snapshot of each 3 JSON files and 1 Jscript(.js) file when opened it under VS code. In the following part of this write-up we will reveal why these 3 JSON files and 1 Jscript(.js) file are present and how it will help to build Angular 2 project.

package.json

This JSON file contains references for all the Angular 2 modules installed. Node.js will use this file to download all the Angular modular files. It is the best way and practice in order to manage locally in the system where Angular 2 is running all of the installed npm packages. Package.json file gives the details to npm that let him to know project and tackle with other project dependencies. It installs from npm all dependencies or list of dependencies when "npm install command is fired on command prompt. In other words it is a soft documentation in JSON file form of packages on which Angular 2 project is dependent on. By default, it is generally present in the project root holding packages, its dependencies and various metadata pertaining to the project.

systemjs.config.js

"systemjs.config.js basically is JavaScript file by nature and as the file name says it serves the purpose of defining configuration to "SystemJS. While "SystemJS is nothing but a module loader, which will be helping to load JS files using module protocols like CommonJS(there are other specification also like AMD or UMD).

Under startup HTML page of the Angular 2 application this file is called at the start in order it to be get loaded. "systemjs.config.js file will tell "SystemJS which files to be loaded in the browser. Module loader are required because any browser directly don’t support loading of packages.

tsconfig.json

As the name says it is a TypeScript configuration with type as JSON file. This file is used by TypeScript in order to define how transpiling process takes place in TypeScript. Today’s browsers are still not capable of directly executing TypeScript. First transpilation of TypeScript takes place to JavaScript using it complier which is denoted as "tsc and for that it also requires some configuration.

The availability of this "tsconfig.json file within a project folder shows that the folder is the root of a TypeScript project. The "tsconfig.json file specifies the root files while the compiler options are needed to compile the project.

typing.json

Typings in simple words it is a manager which manage to gives meaning to TypeScript. As it is a new language which some of the old JavaScript libraries inhibit support or unable to consume in TypeScript like Jasmine Testing Library, jQuery etc. For such frameworks in order to make the work with TypeScript we need to use this manager by creating JSON file called as typing.json. This file helps to fix Typings Registry, GitHub, do NPM and local files.

Below is the image of "typing.json file under which it has global dependencies like core-js, jasmine and node while under dependencies it include "loadash.

The Typings folder is managed by a type definition package manager called "Typings or probably its predecessor called as "tsd.

For those of the third-party libraries that do not provide their own type definitions, in such case for that the Typings package manager is used to install those type definitions into your project.

Also recommending to the reader to view very first video from project based videos series a must watch if you are new to Angular 2: -