How to Create a New Angular 9 Project Using npm?

Here’s a detailed guide on how to create a new Angular 9 project using npm:

Step 1: Install Node.js and npm

Follow the instructions in step 1 of the previous tutorial to install Node.js and npm on your Windows machine.

Step 2: Install Angular CLI

In this step, we will install Angular CLI version 9 specifically. Open a command prompt or PowerShell window and run the following command:

npm install -g @angular/cli@9

Verify the installation by running:

ng version

Ensure that the version displayed is version 9.

Step 3: Create a New Angular 9 Project

Navigate to the directory where you want to create your project and run the following command to create a new Angular 9 project:

ng new my-angular9-app

This command will create a new folder my-angular9-app with the new Angular 9 project inside. Follow the prompts to set up your project (for example, setting up routing and selecting a stylesheet format).

Step 4: Navigate to Your Project Directory

Change your current directory to the project directory that was created in the previous step:

cd my-angular9-app

Step 5: Run Your Angular 9 Application

Now, you can run your Angular 9 application using the following command:

ng serve

The Angular CLI will compile your project and start a development server. Once the server is running, open a browser and navigate to http://localhost:4200 to see your new Angular 9 application running.

Step 6: Understanding the Project Structure

Take some time to explore the structure of your new Angular 9 project. Here are some of the key folders and files you’ll find:

  1. src/: This is where the source code of your application lives. It contains the following important subdirectories and files:
  • app/: Contains the components, services, and other files for your application.
  • assets/: Contains static assets like images and icons.
  • environments/: Contains files for configuring different environments (e.g., development and production).
  • index.html: The main HTML file that serves as the entry point for your application.
  • styles.css: Contains global styles for your application.
  1. node_modules/: This folder contains all the npm packages that your project depends on.
  2. angular.json: This file contains configuration options for the Angular CLI.
  3. package.json: This file contains metadata about your project, including the list of dependencies and scripts that can be run using npm.

Step 7: Making Your First Change

To make your first change, open the src/app/app.component.ts file in a text editor and modify the title property in the AppComponent class. Save your changes and the Angular CLI will automatically rebuild your application and reload it in the browser.

Conclusion

You’ve now created a new Angular 9 project using npm and the Angular CLI version 9. You’ve also learned how to run your application and make a simple change. You are ready to start developing your Angular 9 application!

I hope this guide is helpful. Let me know if there is anything else you would like to learn or explore.