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

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...
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...
FAQ: Mac OS X Services HEIC to JPG on Right-Click Service Q: Where’d all my services go? I don’t see anything in the Services menu. A: If you don’t select anything before...
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...
Right-Click to Translate (Look Up) with Google Tra... If you are not native english speaker, you may be frustrated with default "look up" options you get after selecting a text and right clicking. There a...
Translate Selected Text to English on Right Click ... TL;DR; Need instant translation right in context menu? You can accomplish it for free with one line of code in Automator, or you can proc...
Buy me a coffeeOut of coffee 😱, please help!