How to Create Angular Project: Step-by-Step Guide

To create an Angular project, first install the Angular CLI using npm install -g @angular/cli. Then run ng new project-name to generate a new project with default settings.

Syntax

The main command to create an Angular project is ng new <project-name>. Here:

• ng is the Angular CLI command line tool.
• new tells the CLI to create a new project.
• <project-name> is the name you choose for your project folder.

You can add options like --routing to include routing or --style to choose CSS preprocessor.

bash

ng new my-angular-app --routing --style=scss

Example

This example shows how to create a new Angular project named my-angular-app with routing and SCSS styling.

bash

npm install -g @angular/cli
ng new my-angular-app --routing --style=scss
cd my-angular-app
ng serve

Output

✔ Packages installed successfully.
✔ Project 'my-angular-app' successfully created.
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Common Pitfalls

Common mistakes when creating Angular projects include:

• Not installing Node.js and npm before Angular CLI.
• Skipping the global install of Angular CLI (npm install -g @angular/cli).
• Choosing invalid project names with spaces or special characters.
• Not running ng serve inside the project folder.

Always check your Node.js and npm versions with node -v and npm -v before starting.

bash

npm install @angular/cli
# Wrong: missing -g installs CLI locally, causing 'ng' command not found

ng new my-project
# Wrong: project name has space, should be 'my-project'

cd my-angular-app
ng serve
# Right: serve runs the app on localhost:4200

Quick Reference

Command	Description
npm install -g @angular/cli	Install Angular CLI globally
ng new	Create a new Angular project
ng serve	Run the Angular development server
ng generate component	Create a new component
ng build	Build the project for production

Key Takeaways

Install Angular CLI globally using npm before creating a project.

Use 'ng new ' to generate a new Angular project with optional flags.

Always run 'ng serve' inside your project folder to start the development server.

Choose valid project names without spaces or special characters.

Check Node.js and npm versions to avoid environment issues.