The CLI Series part 2 : Angular

Disclaimer

Please take the information presented below with a pinch of salt. As we know , technology is ever developing and expanding and as such concepts and commands and understandings may radically change or become deprecated.

All information contained herein is subject to interpretation and cross verification and should not be taken as fact or best practice

NOTE: This guide is meant for the windows environment , but its concepts and tools should easily transfer to the mac and linux environments as well.

Angular pre-requisites

An IDE capable of interpreting , compiling and executing nodejs code and angular cli commands

I use VSCODE as my main editor when working with anything javascript related

A stable version of nodejs installed

At time of writing this , the version I have installed is v12.18.2

The angular cli installed

At time of writing this , the version I have installed locally is v8.0.3

The appropriate authorities and permissions to execute various commands and scripts on your machine
A nodejs based project to test these scripts that can be easily reset / cloned without permanent damage

The project should also be able implement NPM for package management

What is the Angular CLI ?

The Angular CLI is a tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from your terminal

It's really well developed and gives you an incredible amount of flexibility for designing and building angular applications as well as extending your linting and formatting capabilities.

Benefits of using the Angular CLI

The Angular CLI helps us cut down the JavaScript fatigue and lets us focus on what we like the most: writing code

With the Angular CLI, we can out-of-the-box:

generate a new Angular application
generate Angular files
execute our Angular application
run unit and end-to-end tests
build our application for deployment

This helps us maintain and implement best practices as cli projects have a similar structure as enforced by the build schematic

The dry run flag

A really useful feature , the --dry-run lets you see the impact certain commands will have on your code repository and on your workspace , without actually enacting them.

ng generate component Home --dryRun

Enabling better boiler-plate when generating new projects

We’ve all generated new project from the CLI and filled out the prompts , but you can actually skip some of those prompts by specifying them in your generate command

--prefix myApp : This flag will give your components custom prefixes
--routing : creates a routing schematic for your project
--style - scss : will use a css preprocessor instead of just the default css
--skipTests=true : this command will stop boiler-plate code for unit testing from being created

ng new HelloWorld --routing --style=scss --skipTests=true

Generating new files using the cli

The CLI gives control over the wide range of source files you can generate and even does the admin of registering them and configuring them under the hood , the following are some of the commands you can run and what they do

ng g c unicorn-component - generates a new component and registers it
ng g s everything-service - generates a service , registers it and adds boiler plate code
ng g pipe my-pipe - generates a new pipe with all the right decorators
ng g module fancy-module - generates a new component and adds in the module decorators
ng g interface my-interface - generates a new interface
ng g guard my-guard - generates a new route guard

The --dry-run and --verbose flags can be used with any generate command.

ng g c new-component --dry-run

ng g s new-service --dry-run

Strict mode

Angular has always provided much needed structure and better code and compile time error prevention , with strict mode we can take that to the next level. Using the strict flag we can really up our linting checks. In addition to that , it also enables the following:

Turns on strict Angular compiler flags strictTemplates and strictInjectionParameters
Reduced bundle size budgets by ~75%
Turns on no-any TSLint rule to prevent declarations of type any
Marks your application as side-effect free to enable more advanced tree-shaking

ng new HelloWorld --strict

The ng Add function

Adds the npm package for a published library to your workspace, and configures that project to use that library, as specified by the library's schematic. For example, adding @angular/pwa configures your project for PWA support:

ng add @angular/pwa

Extending NG lint with flags to get a better linting report

NG Lint is a great tool for making sure your Angular project is not breaking any common coding violations buts it's often difficult to read and understand as a beginner , using the following flags helps clean up the output of that report

--fix : This command will automatically fix common linting errors
--format stylish : this command will display the output in a more readable way

ng lint --format stylish --fix

Serving your application on a custom port and automatically opening the browser

The serve command is very widely used in order to set up a development environment to allow you to visualize your coding changes and behavior's on the browser , the following flags can help you customize your experience.

--port : this flag specifics the port to use , the default is 4200
--open: this flag will automatically open the browser window on your specified port , saving you some clicks

ng serve --port 666 --open

Building your application

--named-chunks : this flag will use module names for lazy loaded chunks
--source-map : this will include source maps with your angular build making it easier to identify code and also provides better debugging support
--aot : Use ahead of time compilation.
--base-href : Specify the base href to use.
--deploy-url : Specify the deployment url.

Search This Blog