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:
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:
Step 5: Run Your Angular 9 Application
Now, you can run your Angular 9 application using the following command:
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:
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.
node_modules/: This folder contains all the npm packages that your project depends on.
angular.json: This file contains configuration options for the Angular CLI.
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.
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.