We know angular 15 is released in November 2022, so now in this article, we will see how to create an Angular 15 project.
See the Angular15 new features Article Link or Angular15 features Video link.
If you have already worked with angular previously we know, angular CLI helps us to build an angular application. Creating a new project in angular is now as simple as installing the Angular CLI and running the ng new command.
What is Angular CLI
The Angular CLI helps us to create an Angular application and it uses Typescript, it creates an angular application with all the configuration files and the packages in one single command.
It helps us to add features (components, pipe, services, directives, etc.) to existing or new Angular applications.
How to create a new Angular15 project
To create a new angular15 project, 1st we need to set up the system environment
Installing Visual Studio Code
We need an editor to create the application so for that we need to install VS code, it is easy to install and helps us to create an angular application easily. You can download Visual Studio Code from the following link.
Node.Js
Node.js is the open source, cross-platform javascript run time environment.
Go to https://nodejs.org/en/
And install the LTS version
Install the Package Manager
To install Angular and its dependencies, we now need to install Node Package Manager ( NPM).
NPM is the node.js package manager for JavaScript, which is automatically installed when we install node.js.
To see the version of NPM, run the below command on the Node.js command prompt like below
Typescript
Go to the Node.js command prompt and install typescript using the below command
Angular CLI (command line interface)
It is a tool that allows us to create a project using the command line argument.
So below is the command to create the latest angular project
Once the above command runs successfully, now check the latest version of angular and run the below command
Ngversion
Since I was working already I angular 14 previously, so for me only I need to run the Angular CLI command.
Below is the image when my angular version is v14,
Now I ran below CLI command and then check the angular version like the below image
So this is the way we can upgrade the angular version to the latest version.
You can also install the older version of Angular as shown below,
- MDAngular8
- cdAngular8
- npmi @angular/cli@8.3.8
Now to create an Angular15 application run the below command
Once you run the above command it will ask for installing routing like below, give Y and press enter
After that, it will ask to add CSS like the below,
Once you press enter, it will take a few minutes to create the Angular 15 Application.
So from above, we can see, the angular15 project creation is in progress.
From the above image, we can see, the angular 15 projects was created successfully.
After Creating this project, now let's open the VS code, go File tab then select the folder, and go to the directory where we created the angular15 project, from there, select the angular15 project folder. Once you will load the project, you will see all files in VS code.
Now run the ng serve –o command,
If you face an error like below then delete ng.ps1 file
PS C:\Users\DELL\Angular15App> ng serve -o
ng : File C:\Users\DELL\AppData\Roaming\npm\ng.ps1 cannot be loaded. The file C:\Users\DELL\AppData\Roaming\npm\ng.ps1 is not digitally signed.
You cannot run this script on the current system. For more information about running scripts and setting execution policies, see
about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
Then follow the below points then run ng serve –o again,
- Delete ng.ps1 from the directory C:\Users\% usernam%\AppData\Roaming\npm\
- Try to clear the npm cache directory C:\Users\%usernam%\AppData\ Roaming\npm-cache\
Note:- Sometimes without clearing the cache also, the above error is resolved.
Now run the ng serve –o command, Again, you will see output like below
Now to verify that this application is created in Angular15, just go to the package.json file and see all the libraries are in v15 like below.
To build the application below is the command
ng build
To run the application below is the command
ng serve
after serving the application, go to the browser and enter the below URL, this is the default URL where the angular application run.
http://localhost:4200/
If you are looking Practically, then see the below video,
-------------------------------------------------------------------
EmoticonEmoticon