Hello World with Angular CLI

Last Updated: April 16, 2022

I am going to use Angular CLI to create the famous Hello World program. If you have installed the Angular CLI you can run the following command at your terminal to create helloworld project

ng new helloworld

If you want to create the project with routing you can use the –routing flag

ng new helloworld --routing

When you open the created project with SublimeText you can see the following folder structure

You can see the src folder in folder structure. That is the most important folder in your project. So this is where you are doing your development work

You can see the node_modules folder where you have the node.js libraries you need for this project.

I am going to edit the src\app\app.component.html file. You can delete all content of that file and add the following code.

<div style="text-align: center;">
<h1>Hello World</h1>
</div>

Now you have to build the project using the following command at the command line. When you run the command the first time it will create a folder named build and place the files inside it. This is what you are going to upload to your production server.

ng build

Then you can run the server.

ng serve -o

This will run the server and open the browser

Test