Skip to main content

Creating a New Angular Project

Before starting to create a new Angular project, make sure that Node.js and npm(Node package manager) are installed in your system. If not, download and install the latest stable version of Node.js from the official website. npm comes bundled with Node.js, so when you install Node.js, npm will get installed automatically.

Step 1: Install Angular CLI​

Angular CLI (Command Line Interface) is a powerful tool to initialize, develop, and maintain Angular applications. It can be installed globally on your system using npm. To install Angular CLI, open your terminal or command prompt and run the following command:

npm install -g @angular/cli

This command installs the latest version of Angular CLI globally on your system.

Step 2: Creating a New Angular Project​

After installing Angular CLI, you are ready to create a new Angular project. In your terminal or command prompt, navigate to the directory where you want to create your project and run the following command:

ng new my-first-project

Replace 'my-first-project' with the name you want to give to your Angular project. This command creates a new folder with the name of your project in the directory where you run the command and sets up the basic structure of an Angular project.

Step 3: Running the Application​

Now that you have created your Angular project, you might want to preview it in the browser. To do that, navigate into your project folder using the terminal or command prompt:

cd my-first-project

Then, start the local development server using the following command:

ng serve

This command starts the local development server. By default, the server runs on port 4200.

You can now view your application in the browser by going to http://localhost:4200. If everything has been set up correctly, you should see a "Welcome to my-first-project!" message on the page.

Congratulations! You have successfully created and served your first Angular project. Start building your Angular application by editing the project files in your favorite text editor. Remember, every time you make changes to your files, the application will automatically reload if the development server is running.

Conclusion​

Creating a new Angular project is a simple task when using Angular CLI. This tool takes care of the initial setup and configuration, allowing you to focus on building your application. Keep learning and experimenting with different components and features of Angular to become proficient in this powerful framework.