How To Create New Project In Angular

The Code Points May 25, 2022 0

In this article we Installing and Setting Up an Angular Development Environment and create first angular project. 

What is Angular CLI:

The Angular CLI allows us to article create an Angular application that includes all of the necessary configuration files and packages in a single command. It also makes it easier to add new functionality to existing Angular applications (components, directives, services, and so on).

The Angular CLI leverages Typescript, Webpack (for module bundling), Karma (for unit testing), and Protractor to produce the Angular Application ( for an end to end testing).

How to Create a new Angular project:

You must first set up your developer environment and install the necessary tools before you can begin working with Angular. Install the following before starting.

1. Visual Studio Code (or any other editor of your choice)
2. NPM Package Manager

Installing Angular CLI:

The first step is to download and install the Angular CLI. We use the npm install command.

npm install -g @angular/cli@latest

The program above updates your machine to the newest version of Angular CLI. The -g flag (which 

stands for global) install the Angular CLI system-wide, allowing you to utilize it in all of your projects.

Check the Angular CLI Version:

Using the command, you may determine the current installed Angular CLI version.

ng --version

As of the time of writing, the most recent version is 8.12.1. The program above also displays the version of the node you have installed. This link will keep you up to date on the current Angular CLI version.

Create a new Angular Application:

Using Angular CLI, creating your first Angular project has become a breeze. All you have to do is run the command from the Command Prompt.

ng new Angular-Demo

The command above will create a folder called Angular-Demo in which all of the essential dependencies and configuration settings will be copied. The Angular CLI accomplishes the following tasks:

• This command creates a new directory. Angular-Demo was developed.
• Creates the application's folder structure.
• Installs the Angular libraries as well as any other requirements.
• Installs and sets up TypeScript
• Installs and sets up Testing using Karma and Protractor

Now, Run your new Angular Project

All you have to do to run your application is type the following command.

ng serve 

The Angular application is compiled and the Webpack development server is invoked with the command above. Our project folder is monitored by the server. It compiles the project anew whenever you make any modifications to the code.

Run angular application using npm start is another option.

HTTP Port 4200 is used by the Webpack Development server. As a result, open a browser and type http://localhost:4200/ to see the Angular-Demo app running in the browser.

Angular project Folder structure:

When you open the Angular-Demo Folder in Visual Studio Code, you'll see the folder structure below.

├── e2e
│   ├── src
│   │   ├── app.e2e-spec.ts 
│   │   ├── app.po.ts
│   ├── protractor.conf.js 
│   ├── tsconfig.e2e.json
├── node_modules
├── src
│   ├── app
│   │   ├── app-routing.module.ts
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   ├── assets
│   │   ├── .gitkeep
│   ├── environments
│   │   ├── environment.prod.ts
│   │   ├── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
├── .editorconfig
├── .gitignore
├── angular.json
│── browserslist   
├── karma.conf.js
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json

You can read the article for the Angular project Folder structure and details.

Conclusion:

To start a new Angular project, we must first install angular/cli. To start a new project, we use ng new <app name>. The Angular CLI performs an outstanding job of acquiring and setting all of the essential libraries. To run our application, we use ng serve, which runs the Webpack development server on port 4200.