If you’ve gone through the Angular 4 basics and created your first Angular 4 app, you already had built your Angular apps using Angular CLI.
This tool is very useful, especially for developers to create and scaffolding their angular apps easily.
How to build Angular apps using Angular CLI?
Angular CLI is a Command Line Interface, that helps you to build Angular apps using nodejs style. Also, it performs all the tedious tasks that you need while creating an Angular app.
The people who find difficult to perform or scaffolding their apps, this tools is dedicated to them.
And it’s like superpower for an Angular developer because by using Angular CLI they can perform almost everything that requires a developer to perform like create, build, compile, serve, test, etc.
So, let’s start with the details and see how we can scaffold our angular apps using Angular CLI.
Install Angular CLI
You should have npm installed if you’d like to install the Angular CLI.
[js]
npm install
[/js]
Now, install the Angular CLI using npm.
[js]
npm install -g @angular/cli
[/js]
If you’re having any troubles, you can use sudo as well.
[js]
sudo npm install -g @angular/cli
[/js]
You can check the version of installed CLI.
[js]
ng version
[/js]
Updating Angular CLI
To update Angular CLI, you need to remove the previously installed version and then you should remove the cache.
[js]
npm uninstall -g @angular/cli
npm cache clean
# if npm version is > 5 then use `npm cache verify` to avoid errors (or to avoid using –force)
npm install -g @angular/cli@latest
[/js]
Get help on Angular CLI
[js]
ng help
[/js]
Also, you can get the help on specific command
[js]
ng help generate
[/js]
Create an app Angular app
[js]
ng new app-name
[/js]
Few options,
| --dry-run | only output the files created and operations performed, do not actually create the project. |
| --verbose | output more information. |
| --skip-install | Don’t npm install, useful when offline or with slow internet. |
| --skip-tests | Don’t create spec files. |
| --skip-git | Don’t initialize a git repo. |
| --source-dir | Name of the source directory |
| --routing | Add routing to the app. |
| --prefix | Specify the prefix to use for components selectors. |
| --style | Defaults to css, but can be set to scss. |
| --inline-style | Use inline styles for components instead of separate files. |
| --inline-template | Use inline templates for components instead of separate files. |
Organizing the app by generate
While creating an angular app, you would require creating multiple components, directives, etc, on that point generate keyword will help you to perform these tedious tasks automatically.
[js]
ng generate component home
[/js]
Here, is the list of things that you can generate using ng generate.
| Component | ng g component my-new-component |
| Directive | ng g directive my-new-directive |
| Pipe | ng g pipe my-new-pipe |
| Service | ng g service my-new-service |
| Class | ng g class my-new-class |
| Guard | ng g guard my-new-guard |
| Interface | ng g interface my-new-interface |
| Enum | ng g enum my-new-enum |
| Module | ng g module my-module |
Serving your app
Finally, to compile and run your application you’d require serve.
[js]
ng serve
[/js]
You can navigate to http://localhost:4200/ in your browser. The app will automatically reload if you change any of the source files.
Also, you can change the default HTTP host and port where you’d like to run your application.
[js]
ng serve –host 0.0.0.0 –port 4201
[/js]
Running the tests
[js]
ng test
[/js]
Few options,
| --watch | Retest when some files change. |
| --code-coverage | Add a coverage report. |
| --progress | Show the progress while running the tests. |
| --browsers | Specify with browsers to use. |
| --colors | Use colors in the output or not. |
Run Linter on your project
[js]
ng lint
[/js]
Few options,
| --fix | Apply fixes for linting errors. |
| --force | Force success even when linting fails. |
Building Your App
You can build your app using build command.
[js]
ng build
[/js]
Few options,
| --target | Specify the target for the build (e.g.: --target production). |
| --aot | Use ahead of time compilation. |
| --base-href | Specify the base href to use. |
| --deploy-url | Specify the deployment url. |
| --extract-css | Put the global styles in a CSS file instead of keeping it in the JavaScript. |
| --watch | Rebuild every-time a file changes. |
Moreover, you can go through with the list of Angular CLI commands and it’s options here.
I hope, now you’re ready to create your angular apps using Angular CLI in quick time.
