Nov 21, 2016

In this blog I am going to write about an additional tool that you can use to get started with the Angular 2 application a little faster. The tool I am referencing to is called Angular CLI, or the Angular Command Line Interface, which is used within an application such as Node.

The benefit of using the Angular CLI is that it will create all the needed starting files for us as well as some additional pieces of code such as Testing, all from just a single command. Remember, these are the required files to get started with your Angular 2 application:

• Package.json – Includes the package dependencies for your project
• Tsconfig.json - Specifies how the TypeScript compiler will generate JavaScript
• Systemjs.config.js – Used to register all the packages and specifies where to find application modules
• App.module.ts – Our root modules that will import needed parts for our application
• Main.ts – Instructs Angular on how to start our application
• [App].component.ts – Our first component to load up when application starts
• Index.html – Main HTML document where our component will be loaded into

We will go over the additional files that are created in a second. For now, let’s look at how we can start using Angular CLI in our environment. The first thing you have to remember is that Angular CLI is a command line interface, this means we are going to use a console and issue commands to meet our requirements. I prefer to use Node.js for my projects including my Angular 2 applications, but it isn’t the only tool that can be used.

The first thing we need to do is to install Angular CLI before we can use this, installing this is easily achieved if you have Node.js already installed. If you do not have Node.js installed you can go to https://nodejs.org/en/download/ , download the needed version and install it. Once installed you can then use the windows command line interface to issue node commands, in our case we are going to install the Angular-cli tool into the global repository so we can issue the commands anywhere.

The command to install the Angular CLI tool is as follows:

In the above image you can see I issue a NPM command to install angular CLI into the global repository. Once you press enter and it has successfully installed, you should see a list of all the dependencies that have been downloaded and a few warnings that you should not worry about.

With the installation of Angular CLI out of the way, you can now shift your focus on creating your Angular Application. To create an Angular application you can run the following command in the folder of your interest, taking note that we start the command with “ng” as it will then use the Angular-cli tool. You will notice that all Angular CLI command will start with the “ng”.

Once you have issued the command, you will then see the Command line tool putting the needed code in place for you by creating files and downloading then needed dependencies to get started.

Just before I move on to the final result of this command, I would like to look over some of the commands that are made available by using the Angular CLI tool:

• Ng new – Create a new Angular project under the current directory (default)
• Ng format- Formats your code by using clang-format
• Ng generate – This can be used to create new code in your project, such as components, directives and services all with a base template
• Ng Test – Used to run unit test, using Karma

After you have successfully executed the “ng New” command to create a project you will have the needed starting files for angular 2 applications but also the following, please be aware these are not all of them just some of them.

• e2e – This folder contains code that will allows you to do end-to-end testing of your application, this includes a simple test
• src – contains code for the application
  • app – contains the components for your application and test code as well.
  • environment – contains code for controlling what is available for the environment, either production or not.

I will conclude this blog post by running the “ng serve” command, which will deploy it and run the application on a specific port.

In my case it is running on port number 4200, once loaded up it will show “app works”. With everything successfully setup you now have an easy to use starting template for your application to build upon.