Angular 6 hello world example

In this post I'm going to setup angular 6 project and do small code demonstration for understanding the structure of the project.

Prerequisites 

1. You should have install java 1.8 or above.
2. You should have Eclipse installed in your PC.
3. Your PC should setup Maven installed and configured.

 First of all lets install Angular and node in local machine. First we need to install node in local machine. You can download nodejs from following location. In my application I'm using node version node-v8.11.3-x64. Install it in your local machine. Then we can install Angular in local machine. Open command prompt and type following command and press enter it will install Angular in your local machine globally.

npm install -g @angular/cli

It will take around 1 minute to install Angular and now our machine ready to start the Angular developments.

Lets create Maven project to create our Hello World Angular application. Go to File -> New -> Maven Project and check on create simple project tick box as show below.

Then click next and provide Group ID ,Artifact ID and change the packaging to war as show in bellow screen shot. Then Click Finish.

Then go to main folder under src and right click on it then got to Show In -> Console then type following command to generate angular project under main folder.

ng new AngularHelloWorld

Then click enter and that command will create AngularHelloWorld project for you. Then you can refresh the project and see new folder has been created under main folder similar to bellow screen shoot.

Then go to AnngularHellowWorld - >src -> App and open the app.component.html folder and past following content inside it.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to Angular Hello World App!
  </h1>
</div>

Then again open Command Prompt and go to AngularHelloWorld folder and build the Angular Application by entering following commands.

ng build

Then you should able to see similar out put to bellow screen shot.

Then lets verify our application build successfully by refreshing project folder and you will be able to Angular generated output on dist folder under  AngularHelloWorld.

Then copy the content on AngularHelloWorld under dist folder and place it on the WebContent folder as show in bellow.

For this manual content copy we have to change one modification on index.html you have to change the following change.

<base href="/">
To
<base href="/AngularHelloWorld/">

Then lets and web.xml in to our project. Write click on webapp folder and new -> Folder and give folder name as WEB-INF. Then create web.xml file inside on it with following content.

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Angular Web Application</display-name>
</web-app>

Final project structure would be similar to following figure.

Now write click on our AngularHelloWorld  project and go to run As -> Maven Install then you can see the generated war file on target folder. Now you can run your angular web application on tomcat server by deploying it on internal or external tomcat server.

Then you will be able to access your Angular web application on following URL http://localhost:8080/AngularHelloWorld/.

You will be able to see similar output as below figure.

You can access sample project in following GITHUB location.