In this article, we will see what Angular CLI is, why it was created, what you can do with it, how to install and how to use it for app development.
What is Angular CLI?
Angular CLI is a Command-Line-Interface that can be used to scaffold and create an application that follows best practices out of the box.
Why Angular CLI was created?
Creating an Angular app from scratch is a difficult and time-consuming task. If you are not using a code-generator tool, every time you create a new Angular app, you have to create a folder structure and add some files, most of which is boiler-plate code. When working in a team, how do you make sure everyone is following the Angular conventions and style guide? How do you create a build optimized for production? How to configure unit and end-to-end tests? To answer all these questions, the Angular team came up with Angular CLI which can help create projects, follow their style-guide, generate code, test, and create optimized builds.
What you can do with Angular CLI:
Create a new Angular application
Generate code(components, modules etc.)
Lint the code
Host the code in development server to preview your app while development.
Run unit tests
Run end-to-end(E2E) tests
Build your code for deployment to production
NodeJS 6.9.0 or higher version is required to use Angular CLI. You can download it from NodeJS website.
To check the version of node, run command following command:
Installing Angular CLI
npm install -g @angular/cli
This will install Angular CLI globally on your machine.
After it is installed, you can check the version of the angular CLI:
Depending upon the The result should be something like this:
Generate a New Angular Application
You can create a new Angular app using the following command:
ng new my-app
This command creates an Angular app in its folder named my-app. It also runs npm install to get all the packages it needs, generates unit tests and one end-to-end test.
Common ng new options:
Aliases are specified in parentheses wherever available, you might want to use them to shorten the command.
--routing: default false, configures routing
--prefix (-p) //Set prefix to apply to generated selectors.
--style: default 'css', can be 'less', 'scss' //Define your styles
--dry-run (-d): default false, //Verify the file names, remove when ready to generate the app
--skip-install: skips npm install
--skip-tests (-S): default is true, skips creating tests
Go to angular-cli-new page to see all options for the new command.
ng new test-app --routing --style scss --dry-run
This command, the app name is test-app, so project files will be created under folder test-app. Routing is configured for you and style file generated will be scss instead of css.
Since --dry-run is mentioned, it won't create any files yet, it just lists the files that will be generated for this command.
dry-run comes very handily if you want to see what files will be generated and where those files will be generated, so you can update the command before actually generating the files.
If you run this command without --dry-run, the files will be actually generated. So, let's run the command:
ng new test-app --routing --style scss
Running the app
To run the application, go into the project folder:
It will start the Angular Live Development server on localhost:4200
Now open any browser and go to localhost:4200, the app should be running:
Apart from app, you can generate common angular features like Components, Services, NgModules using ng generate command. Let's see them all.
To generate a component with name navbar, run:
ng generate component navbar
Instead of typing the full command, you may use aliases which make the command shorter:
ng g c navbar car // with aliases, g = generate, c = component
Let say we want to generate a directive my-ad-rotator:
ng g d my-ad-rotator
by default, a directive is not generated in a folder, if you like to generate it in a folder, run this instead:
ng g d my-ad-rotator --flat false
To generate a service with name weather-info:
ng g s weather-info
Generating Classes, Interfaces, Enum
ng g cl cat
ng g i animal
ng g e gender
ng g p short-date
ng g m dashboard
Building the code
We can use build to compile the app to an output directory. All builds use bundling and production build adds uglification and tree-shaking.
ng build command without any other parameters is for development, it generates code in the output folder specified in angular.json file, which is dist\test-app in our case.
You can see in the output it generated various js files and corresponding source maps.
Production build is different from development build in many ways, overall development build is targeted to help faster development and production build is generally targeted to be secure and run faster. So, output file sizes in development are larger than in production.
ng build --prod
In production build:
Source maps are not generated.
Uglification is done.
Tree-Shaking is done.
AOT is performed.
Bundling is done.
Common ng build options
--sourcemap(-sm) //If you like to generate source-map in prod. It is on for development by default.
--aot //If you like to do AOT in the development build. It is on for prod by default.
--watch(-w) // Watch and rebuild.
--environment(-e) //Build environment
--target(-t) //Build target
--dev //Shortcut for dev environment and target
--prod //Shortcut for prod environment and target
ng serve compiles the code and starts listening on port 4200 by default. It serves the compiled output from memory, which makes it faster and efficient for live reloads.
By default ng serve does not open a browser, use -o switch to serve and open the app in default browser:
ng serve -o
All build options are available with ng serve along with some extra options:
--open(-o) //Opens in the default browser, by default ng serve does not open the browser
--port(-p) //Port to listen when serving
--live-reload(-lr) //Reload when changes occur
--ssl //Serve using https
--proxy-config(-pc) //Proxy configuration file
Execute unit tests and end-to-end tests
Angular CLI can run the unit tests you have written in spec files. It will execute tests on all *.spec.ts files.
I will run the unit tests and watch for any changes and run again if any change detected.
Common ng test options
--code-coverage (-cc) //Generate code coverage report, false by default
--colors //Enable/disable output colors, true by default
--single-run(-sr) //Executes test one time, no watching
--progress //Log progress to console, true by default
--sourcemaps(-sm) //Generate source-maps, true by default
--watch(-w) //Run test once, and watch, true by default
End to End Tests
To compile, serve and run e2e tests, run command:
Common ng e2e options
--config(-c), //Specify config file, default is protractor.conf.js
--element-explorer(-ee) //Open protractor element explorer
--serve(-s) // Serve on a random port, default true
--specs(-sp) // Override spect to test, by default tests all specs
--webdriver-update(-wu) // Try to update webdriver(default true)