Angular CLI Tutorial (Install & Commands)

Angular CLI

The Angular CLI (command line interface) is a tool to initialize, develop, scaffold and maintain Angular application following best practices.

Installation

First of all make sure you have npm installed. If you don’t know what npm is navigate to node.js first. To install the Angular CLI just open terminal (cmd + N) and run this command:

npm install @angular/cli -g

The -g flag stands for global, so you are able to use it anywhere on your computer, not just in your current location. The terminal output should look like this:

Angular CLI

Angular CLI install process

Angular CLI installed

Angular CLI installed

And you are done. Now you are able to create, generate, serve and maintain (test, lint and format) your angular app.

Generate new project

OK, now examples. For me the biggest advantage in compare to classic methods in creating project. The new command. Usage is pretty easy. Just navigate to folder you want to create the project, for example to your destop:

cd ~/Desktop

And run the awsome ng new command with name of your app, for example “my-app”:

ng new my-app

You should end up with something similar to this:

Angular CLI generating new project

Angular CLI generating new project

Angular CLI generated project folder and terminal output

Angular CLI generated project folder and terminal output

Angular CLI generated project file structure

Angular CLI generated project file structure

Development

Now when you have your project generated we can start our live-reload development server. First of all navigate to the newly created project folder:

cd myapp

and run the ng serve command:

ng serve

You should see similar output:

Angular CLI - serving

Angular CLI serving with ng serve command

Andwhen you navigate to http://localhost:4200 in your browser, you will see the default project component:

Angular CLI - generated project

Angular CLI generated project served on http://localhost:4200/

Build

To distribute your app you have to create the production version, that you can place to the server. With ng-build command:

ng build -prod

The production bundle is created and placed in dist folder located in you project folder.

Angular CLI - build command

Angular CLI build output (ng build -prod)

Angular CLI dist folder created with build process

Angular CLI dist folder created with build process

On top of it when you run ng build command with -prod flag, the AOT compilation is in place. No setting needed!

Related Post

MacBook wifi issue – OS X keeps reconnecting Last few weeks I was facing annoying wifi problems. My mac was reconnecting every 5 minutes. On top of that BSSID was reseting so I saw BSSID changing...
PPTP VPN on MAC OS X Sierra, High Sierra and Mojav... PPTP VPN for Mac OS X Introduction PPTP VPN is no longer supported on macOS Sierra and High Sierra and that is just fine, because there are some se...
Convert HEIC to JPG on Right Click for Free Convert HEIC to JPG on Right-Click In iOS 11 Apple is replacing the JPEG image format with the new HEIC alternative. But what to do when device or p...
Right Click to Create New File on Mac OS X TL;DR; Windows has a lot of cons but it has also some pros. One of them is a smooth way to create empty file on right-click. Mac OS doesn't come with...
FREE ePub Quicklook and Spotlight Plugins for Mac ... When you have a lot of ePub books, it can be useful to see excerpt and meta data information in quicklook. Even more important...
Free Better Battery Stats and Time Remaining for M... Better Battery Stats and Time Remaining for Mac OS TL;DR; Do you miss the time remaining indicator on your MacBook, MacBook Air, or MacBook Pro? He...
Buy me a coffeeOut of coffee 😱, please help!