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.
|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.
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.
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.
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.
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.
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: -