How to Create a new project in Angular 15 | Create Angular 15 First application

How to Create a new project in Angular 15 | Create Angular 15 First application

Angular 15 project creation.

We know angular 15 is released in November 2022, so we will see how to create a new Angular 15 project.

See the Angular15 new features, Blog 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.

System Environment

integrated development environment (IDE)

IDE is software for building applications that combines common developer tools into a single GUI.

Here, I am using Visual Studio code as IDE.

Visual Studio Code (VS Code)

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and fast.

Installing Visual Studio Code

You can download Visual Studio Code from the following link.

Download link:- https://code.visualstudio.com/

Node.Js

What is NodeJS used for?

Node. js is an open-source, cross-platform JavaScript runtime environment and library for running web applications outside the client's browser.

Download Link:- https://nodejs.org/en/

Package Manager(npm)

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 command prompt like below.

node -v

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

npm install -g @angular/cli@latest

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

ng version

You can also install the older version of Angular as shown below,

  • MDAngular8

  • cdAngular8

  • npmi @angular/cli@8.3.8

Creating new Angular Application

Now to create an Angular15 application run the below command

ng new Angular15App

Once you run the above command it will ask for installing routing like below, type Y and press enter

After that, it will ask to select CSS like the one below,

You can select any one CSS or SCSS or Sass or Less. Here, I am selecting normal CSS.

Once you press enter, it will take a few minutes to create the Angular 15 Application.

After installing the packages successfully.

Now open the project in VS code.

To go project folder open it with vs code like this.

or from VS code also we can open like below

after opening in VS code open new terminal

go to the project directory and run the below command

ng serve –o

after compiling we can see the output in browser like this.

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 or npm start

after serving the application, go to the browser and enter the below URL, this is the default URL where the angular application run.

localhost:4200

Thanks! for Reading. Please follow me for more updates on Frontend knowledge, updates, tips & tricks.