Bootstrap your Angular project with Angular CLI
In order to facilitate the creation of a new Angular project, it is possible to use the Angular CLI. Angular CLI is a CLI providing functionality to bootstrap, upgrade and serve your Angular app. Today we will see how we can use Angular CLI to improve our workflow.
- Bootstrap a new project
- Creating new components
- Serve the application
Start first by installing Angular CLI with the following command:
npm install -g @angular/cli
After the installation, the cli should be available globally via the
ng command. You can try it with
ng help. To bootstrap a project, we use
ng new my-new-project. We can also specify some options, here we specify that we want to skip the tests creation which is set to true by default, we want inline style and inline template.
ng new my-new-project --skip-tests --inline-style --inline-template
This creates the simplest Angular app. We have the main module
app.module.ts and component
In order to build the project we can use
AngularCLI also helps in creating all the boilerplate needed for creating components.
ng g my-component --flat -is -it
Here we specify
-is for inline style and
-it for inline template both are short forms for
--inline-xxx. Other than component, we can also use this command to create directives, services, pipes and guards.
We can then try out the app using
ng serve. The app is served by default on localhost on the port 4200.
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Our application will run and the source code will be watched too therefore every changes in the code will provoke a recompilation and update of the browser.
AngularCLI makes life easier for developing Angular application. It also handle test generation and execution which I haven’t covered. A full list of command can be found by doing
ng help. Hope you liked this post as much I enjoyed writing it. See you next time!