Before getting started with the Angular, we must set up our development environment and install required tools to work with the Angular application. We need to decide which tools that we are going to use, to help us work efficiently on our Angular Project.
We need to choose a code editor and install it. We also need to choose a language for our development. We need to install Package Manager to install/Manage our dependencies. The choosing of the Module loader is another important decision. In this tutorial, we look at the editors and other libraries that we need and how to install them.
The Important decisions that you need to take care
- Choosing and Installing Editor
- Install Package Manager
- Choosing Language
- Module Loader
Must Read: The Angular Tutorial
Choosing and Installing an Editor
You need to choose an editor for creating your angular projects. You can choose any editor of your choice including any editions of Visual Studio, Eclipse, Atom etc.
We will be using Visual Studio code as our editor. Visual studio code is an open source project and free to use. It can run on Windows, Linux & OS X. It has IntelliSense support, easy integration with Git and support for debugging the applications. It has a great support for Typescript
Installing Visual Studio Code
You can download Visual Studio Code from the following link. The installation procedure is very easy and straightforward process.
Install Package Manager
To install Angular and dependencies, we are going to Node Package Manager or NPM.
Node Package Manager
Why it is Required
We are going to use NPM to install Angular, Typescript, Webpack, SystemJS and any other packages/modules required by our application. NPM is can be used to upgrade these packages as and when necessary. Without NPM, we have to download and install all these packages manually.
You need to install NPM on your machine if it is not already installed.You can test whether the NPM is installed or not by using the command prompt
If NPM is installed, then it will return the version No. The current version No of the NPM is 3.10.3. You can download NodeJS and install it. NPM is installed as part of the NodeJS. Click on the installing node for the instructions and procedures.
The NPM requires the Package.json file, which should contain the list of modules/packages used in your Application. We need to add all the list of dependencies required by our application the configuration file.
Once the Package.json is created, we can install all the dependencies, by running the following command from the command prompt
We will show the sample package.json required in our next tutorial.
Choosing a Language
The Typescript is a popular choice here. The Angular code is also written using Typescript. Many of the tutorial available on the internet also using Typescript. So we will go with the popular choice
What is Typescript
Typescript is an Open source language. It is built and maintained by Microsoft.
Features of Typescript
Typescript also supports Modules, classes, Interfaces and Generics. This makes Typescript ideal choice to for our Angular Application.
Typescript requires two configuration files to work correctly. One is tsconfig.json and another one is typings.json.
The tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to Transpile the Typescript project.
Typings is the simple way to manage and install TypeScript definitions. It uses typings.json , which can resolve to the Typings Registry, GitHub, NPM, Bower, HTTP and local files. Packages can use type definitions from various sources and different versions, knowing they will never conflict for users.
We are going to use NPM package manager to install typescript and its dependencies.
Choosing a Module Loader
Module loader takes a group of modules with their dependencies and merges them into a single file in the correct order. This process is called as Module bundling.
Why Module Loader Required
The above problems can be solved by bundling several files together into one big file. The entire file can be downloaded in one single request reducing the number of requests. You can also minify the file (remove the extra spaces, comments, unnecessary characters etc) and make files smaller
Choosing a Module Loader
There are many module loaders are available. The two more popular Module loaders are Webpack and SystemJS
Webpack is a more flexible module bundler than SystemJS. It can not only bundle modules but also minifies our modules. It also comes with a development server with hot module replacement option.
The Angular CLI project has moved to Webpack from the SystemJS. So we are going to stick with Webpack in our future tutorials.
Webpack Dev Server
The Webpack also comes with a development server. You can see your application running as you develop the application. The Development server uses the Webpack’s watch mode. Any changes made to our application are instantly updated.
The Webpack can be configured by using the webpack.config.js. Configuration file
The best way to install Webpack to your project is to add it your Project.json file as Dev dependency as shown below
And run npm install to install Webpack & Webpack dev server.
You can run the following command from the command line
npm install webpack --save-dev
npm install webpack-dev-server --save
The above will install the Webpack and update the project.json file
System.JS is a module loader that can import modules at run-time in any of the popular formats used today (CommonJS, UMD, AMD, ES6). It also keeps track of all loaded modules in a module registry. System.Js is built on top of the ES6 module loader polyfill. It is smart enough to detect the format of the module being used and handle it appropriately. SystemJS can also transpile ES6 code (with Babel or Traceur) or other languages such as TypeScript and CoffeeScript using plugins.
The System.Js uses the Systemjs.Config.Js to locate and load the modules. This config file tells SystemJs how to find certain modules. We can also map the module names ‘angular’ and ‘angular-route’ to their long paths:
The SystemJS can be installed via NPM Package Manager.
Webpack Vs SystemJS
You can refer to these articles to find out the difference between Webpack and SystemJS
In this tutorial, we looked some of the tools and third-party libraries, which are required to develop and run our Angular Application. In the next tutorial let us build our First Angular Application