Angular 10 beta is released so the final release is due soon. Let’s see how to install the latest beta version and create a new project.
In this tutorial, we are going to learn how to install Angular 10 CLI globally in our development system using the node package manager (NPM) and also learn to create an Angular 10 project using Angular CLI 10.
To install Angular CLI, we must have Node and NPM installed and configured in our development machine. Check out the following tutorial on: Downloading and installing Node.js and npm
Open the terminal and run the given below command to check out the currently installed version of Angular.
ng --version
# or
ng v
You will see the following output on your terminal screen, and this contains the current Angular set up information.
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.0.0-rc.7
Node: 13.11.0
OS: darwin x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.900.0-rc.7
@angular-devkit/core 9.0.0-rc.7
@angular-devkit/schematics 9.0.0-rc.7
@schematics/angular 9.0.0-rc.7
@schematics/update 0.900.0-rc.7
rxjs 6.5.3
To update the Angular CLI globally, we have to uninstall the current Angular CLI packages from our development system.
npm uninstall --global angular-cli
If your npm version is higher then 5, then you have to clear the cache using the below command.
npm cache verify
Now, we will install the @angular/cli@10.0.0-next.0 package.
npm install -g @angular/cli@next
Verify the global installed Angular version.
ng v
Output will be:
Angular CLI: 10.0.0-next.0
Node: 13.11.0
OS: darwin x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1000.0-next.0
@angular-devkit/core 10.0.0-next.0
@angular-devkit/schematics 10.0.0-next.0
@schematics/angular 10.0.0-next.0
@schematics/update 0.1000.0-next.0
rxjs 6.5.4
Sometimes we face the following warning if “global CLI version is greater than our local Angular CLI version”.
This issue occurs because local angular packages have high priority than the global angular packages.
To sort out this problem, we can upgrade local Angular CLI packages.
rm -rf node_modules
npm uninstall --save-dev angular-cli
npm install -g @angular/cli@next
npm install
We have completed all the required steps, and now we are going to install a brand new Angular 10 project using Angular CLI.
ng new angular10-app-example
Angular CLI will ask you a few questions:
# ? Would you like to add Angular routing? Yes
# ? Which stylesheet format would you like to use? SCSS
We enabled the Angular routing in our Angular project and also set the stylesheet format to SCSS to style Angular components.
We are all set, now run the following command to start the project in the browser.
ng serve --open
You can view your Angular 10 app on this url: http://localhost:4200.
#angular #web-development #javascript