In this article, we’ll be learning how to install Angular CLI 9 and use it to initialize an Angular 9 project.
Angular CLI is the official tool for initializing and working with Angular projects. It saves you from the hassle of complex configurations and build tools like TypeScript, Webpack, and so on. After installing Angular CLI, you’ll need to run a command to generate a project and another to serve it using a local development server to play with your application. Like most modern frontend tools these days, Angular CLI is built on top of Node.js.
Node.js is a server technology that allows you to run JavaScript on the server and build server-side web applications. However, Angular is a front end technology, so even if you need to install Node.js on your development machine, it is only for running the CLI.
Once you build your app for production you won’t need Node.js because the final bundles are just static HTML, CSS, and JavaScript that can be served by any server or a CDN.
Note
If you are creating a full-stack web application with Angular, you may need Node.js for creating the back end part if you like to use JavaScript for the front end and back end.
Check out the MEAN stack – it’s an architecture that includes MongoDB, Express (a web server and REST API framework built on top of Node.js) and Angular. You can read this article if you’d like a step-by-step post to getting started.
In this case, Node.js is used to build the back end part of your app and can be replaced with any server-side technology that you want such as PHP, Ruby, or Python. But Angular doesn’t depend on Node.js except for its CLI tool and for installing packages from NPM.
NPM stands for Node Package Manager. It’s a registry for hosting Node packages. In recent years it’s also been used to publish front end packages and libraries like Angular, React, Vue.js and even Bootstrap.
How to Install Angular CLI v9?
As a prerequisite, you need Node and NPM installed on your development machine. There are many ways to do that, such as:
Let’s keep it simple and use the official website. Simply visit the download page and grab the binaries for Windows, then follow the setup wizard.
You can make sure Node is installed on your system by running the following command in a command prompt which should display the installed version of Node,
_$ node -v _
Next, run the following command to install Angular CLI:
_$ npminstall @angular/cli _
After the command finishes successfully, you should have Angular CLI installed.
How to Use Angular CLI v9?
After setting up Angular CLI v9, you have many commands at your disposal. You can start by checking the version of the Angular CLI using:
_$ ng version _
This will display a similar output:
Angular CLI: 9.0.2
Node: 12.14.0
OS: Linux x64
Angular:
…
Ivy Workspace:
Package Version
@angular-devkit/architect 0.900.2
@angular-devkit/core 9.0.2
@angular-devkit/schematics 9.0.2
@schematics/angular 9.0.2
@schematics/update 0.900.2
rxjs 6.5.3
Next, you can run is the help command for getting a complete usage help, $ ng help. The CLI provides the following commands:
version (v)
: Outputs Angular CLI version.You can use Angular CLI to quickly generate your Angular project by running the following command in your command-line interface:
_$ ng new frontend _
Note
frontend is the name of the project. You can , of course, choose any valid name for your project. Since we’ll create a full-stack application I’m using frontend as a name for the front-end application.
As mentioned earlier, the CLI will ask you Would you like to add Angular routing? You can answer by entering y (Yes) or n (No), which is the default option. It will also ask you about the stylesheet format you want to use (such as CSS). Choose your options and hit Enter to continue.
After that you’ll have your project created with a directory structure and a bunch of configurations and code files. It’ll be mostly in TypeScript and JSON formats. Let’s see the role of each file:
main.ts
: the main starting file from where the AppModule is bootstrappedAngular CLI provides a complete tool-chain for developing front-end apps on your local machine. As such, you don’t need to install a local server to serve your project — you can simply use the ng serve command from your terminal to serve your project locally.
First, navigate inside your project’s folder and run the following commands,
You can now navigate to the http://localhost:4200/ address to start playing with your front end application. The page will automatically live-reload if you change any source file.
Angular CLI provides an ng generate command which helps developers generate basic Angular artifacts such as modules, components, directives, pipes, and services,
_$ ng generate component my-component _
my-component is the name of the component. The Angular CLI will automatically add a reference to components, directives and pipes in the src/app.module.ts file.
If you want to add your component, directive or pipe to another module (other than the main application module, app.module.ts), you can simply prefix the name of the component with the module name and a slash:
_$ ng g component my-module/my-component _
my-module is the name of an existing module.
In this guide, we’ve learned to install Angular CLI v9 and initialize a new Angular 9 project from scratch.
Thank you for reading!
#angular #angular9 #angularcli #JavaScript