Create Your First Angular 15 Application

We know Angular 15 is released on November 2022, so now in this article, we will see how to create an Angular 15 project.

See the Angular15 new features from here or Angular15 features Video link.

If you have already worked with angular previously you 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 Angular 15 project

To create a new angular 15 project, first 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

Node -v

Typescript

Go to the Node.js command prompt and install typescript using the below command

Npminstall –gTypescript

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

npminstall -g @angular/cli@latest

Once the above command runs successfully, now check the latest version of angular and run the below command

Ngversion

Since I was already working on angular 14, 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

npminstall -g @angular/cli@latest

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/[email protected]

Now to create an Angular 15 application run the below command

NgnewAngular15App

Once you run the above command it will ask to install 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 angular 15 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 angular 15 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, it will open the angular15 project like below

 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 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 on practical implementation, then see the below video,