Hello World with Angular CLI

September 6, 2018

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 your project

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

Hello World

Now you have to build the project using following command at the command line. When you run the build command first time it will create a folder name 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