Bence Hornyák

Getting started with Angular CLI

Angular is a huge framework, the learning curve is steep. Angular team created a CLI to lower the steep. It takes a long time to understand fully what you are doing, but in the end I think its worth the time.

Install node

If you are using linux or mac my suggestion is to install nvm and follow their guide.
If you are on Windows just install the lts version.

Install the CLI

First make sure you’ve installed node and npm. Open up a terminal and basically you can just copy-paste to it:

node -v
# Mine is: v8.11.4

Then
npm -v
# Mine is: 6.4.1

Then you can install the CLI:

npm i -g @angular/cli

To test the installation run:

ng -v

If everything went well you can just run:

ng new project-name

It will ask for a few questions, but pretty much that’s it, you’ve created your very first Angular application.

To see what comes with the generated angular project:

cd project-name
ng serve -o

ng serve -o explained

ng serve fires up a webpack-dev server with the scaffolded default settings and the -o switch opens your default browser.
Angular comes with live reload by default, so if you make a change for example in your app.component.ts it will auto-magically reload your browser.

Couple of useful CLI commands

  1. ng build
    Compiling your app to production mode:
    ng build --prod

  2. ng update
    List of upgradeable Angular packages:
    ng update
    Update a single package:
    ng update <package-name>
    To updated all of ‘em:
    ng update --all

  3. ng test
    Runs unit tests:
    ng t or ng test
    Generate test coverage:
    ng t --codeCoverage
    You will have a coverage folder, opening the index.html with your browser you can see the coverage.

  4. ng add
    Adds support for external libraries to your project:
    ng add @angular/pwa
    This configures PWA support to your application.

  5. ng generate
    Generating files based on schematics. This is one of the most powerful CLI command, you can generate a ton of things.
    To mention a couple: service, component, pipe, module, class etc…
    ng g c component-example => Generates a component.
    ng g s service-example => Generates a service.
    Etc…

Conclusion

We barely scratched the surface, you can see the CLI gives a lot of power and you have to learn it, if you want to be as efficient as possible.
As a next step you should become familiar with the CLI, try out commands.

This project is maintained by benceHornyak b_hornyak