How to Create a New Angular Project?
In this tutorial, we will show you how to create a new Angular project.
To create a new Angular project, do the following:
- Open a terminal and run the Angular CLI ng new project-name command as shown in the example below:
- When you are prompted with Would you like to add Angular routing? Choose Yes by pressing Y.
- When you see Which stylesheet format would you like to use? Choose CSS and press Enter.
- After the project gets created, navigate to the project folder:
- Run the project by executing the following command:
- If your installation and setup was successful, you should see a page like the following on your browser, running at http://localhost:4200/:
- Open your Angular project in Visual Studio Code IDE. If Visual Studio Code is not already installed on your machine, download and install it from https://code.visualstudio.com/download.
- Go to the root component of the project at src\app\ and open src\app\app.component.html file. Remove everything from the file except the last line <router-outlet></router-outlet>. The <router-outlet></router-outlet> acts as a placeholder which Angular dynamically updates based on the selected route. Now, add <h1>Hello World!</h1> to the file src\app\app.component.html and make the code look like the following: src\app\app.component.html
ng new my-sample-angular-app
ng serve --open
The ng serve command starts the server, monitors your files, and rebuilds the app as you modify the files.
The —open (or simply -o) option opens your browser to http://localhost:4200/.
You will see something like this on your browser: