Installing and Setting Up an Angular Development Environment

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

  1. Choosing and Installing Editor
  2. Install Package Manager
  3. Choosing Language
  4. 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

The NPM is a Package Manager similar to what NuGet is for Visual Studio. It is the Package manager of choice for the Javascript projects. NPM is used to install libraries, Packages & applications from Public repositories.

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.

Installing NPM

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.

NPM Configuration

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

We need to choose a language to write our angular application. The Angular Applications must be written in Javascript. This gives us few options, including the current version of Javascript (i.e. ES5), ES2015, Typescript, and Dart etc.

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

The Typescript is a superset of Javascript. The Code written in Typescript cannot be used directly in the web browser. It must be compiled to Javascript before running in the web browser. This process is known as Transpiling.

Typescript is an Open source language. It is built and maintained by Microsoft.

Why Typescript

The Javascript is the default language of the web. But it does come with few problems. It does not support types. This makes it prone to run-time errors, it also makes it difficult to debug. Javascript does not support namespaces. Code Organisation is another major issue with Javascript code. Typescript Solves all these problems.

Features of Typescript

Typescript also supports Modules, classes, Interfaces and Generics. This makes Typescript ideal choice to for our Angular Application.

Typescript Supports all current specification of Javascript (i.e. ES5 & ES2015 ). The major advantages of Typescript are that you can transpile it to either ES5 or ES2015. Currently, not many browsers support ES2015. So you have to transpile your code to ES5. But in future, as more and more browser becomes ES2015 compliant, you do not have to worry about upgrading your Javascript code. Typescript does that to you behind the scene.

Typescript Configuration

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.

Installing Typescript

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

In Our applications, we create a lot of javascript files. We then include them in our main HTML file using the <script> tag. When user requests for your file, the browser loads these file. This is inefficient as it reduces the page speed as the browser requests each file separately.

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

Webpack is a powerful module loader. It takes modules with dependencies and generates static assets representing those modules. Webpack has the ability to bundles any kind of file: JavaScript, TypeScript, CSS, SASS, LESS, images, HTML, fonts etc. The clever parser that can process nearly every 3rd party library.

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.

Webpack Configuration

The Webpack can be configured by using the webpack.config.js. Configuration file

Installing Webpack

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

The above will install the Webpack and update the project.json file

Resources

  1. webpack

System.Js

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.

System.Js Configuration

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:

Installing SystemJS

The SystemJS can be installed via NPM Package Manager.

Resources

Webpack Vs SystemJS

You can refer to these articles to find out the difference between Webpack and SystemJS

Conclusion

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

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top