In this section, we will guide you through the process of setting up your development environment for Angular. This includes installing necessary tools and creating a basic project structure. By the end of this section, you will have a fully functional Angular development environment ready for building applications.

Before we begin, ensure you have the following installed on your machine:

• Node.js: Angular requires Node.js for its build and development processes.
• npm (Node Package Manager): npm is included with Node.js and is used to install Angular CLI and other dependencies.

1. Download Node.js:

   • Visit the Node.js official website.
   • Download the LTS (Long Term Support) version for your operating system.

2. Install Node.js:

   • Run the downloaded installer and follow the on-screen instructions.
   • Verify the installation by opening a terminal or command prompt and typing:

     node -v
     npm -v
     

   • You should see the version numbers of Node.js and npm.

The Angular CLI (Command Line Interface) is a powerful tool that helps you create, build, and manage Angular applications.

1. Install Angular CLI globally:
   • Open a terminal or command prompt and run the following command:

     npm install -g @angular/cli
     

   • Verify the installation by typing:

     ng version
     

   • You should see the Angular CLI version along with other related information.

1. Create a new project:

   • Navigate to the directory where you want to create your project.
   • Run the following command:

     ng new my-first-angular-app
     

   • You will be prompted to choose options such as adding Angular routing and selecting a stylesheet format (CSS, SCSS, etc.). Choose according to your preference.

2. Navigate to the project directory:

   cd my-first-angular-app
   

1. Start the development server:

   • Run the following command:

     ng serve
     

   • The Angular CLI will compile the application and start a development server.

2. Open the application in a browser:

   • Open your browser and navigate to http://localhost:4200/.
   • You should see the default Angular welcome page.

Here is a brief overview of the project structure created by Angular CLI:

• Node.js and npm not recognized:

  • Ensure that Node.js and npm are added to your system's PATH.
  • Restart your terminal or command prompt after installation.

• Permission issues on npm install:

  • Use sudo (Linux/macOS) or run the command prompt as an administrator (Windows).

• Port 4200 already in use:

  • Specify a different port using the --port flag:

    ng serve --port 4300
    

You have successfully set up your Angular development environment. You installed Node.js, npm, and Angular CLI, created a new Angular project, and served it locally. In the next section, we will dive into creating your first Angular application and understanding its architecture.