The goal of this article is to share my experience after learning and creating my first angular client with angular 4.

My Project Under-Surviellance on the client side is under grand refactoring. Previously I used only html+javascript. off course for the UI, I used the bootstrap 4 libraries.

Here are the steps I took to create a decent dashboard as shown on the github readme.

Installations

As a first step, I installed up-to-date nodejs with npm and Angular CLI. After installing npm, the angular cli can be installed as follows:
npm install @angular/cli
On windows, npm is installed with the nodejs installation file.

Create Angular 4 new project
ng new [project name]

Design

Now we need a new webpage – say, it is a portal with a chat service. your webpage should be devided into independent sections. Those sections will be encapsulated into components. In this case, the chat box will go into component. This component will be declared in the index.html.

Pack with webpack

WebPack comes out of the box with angular4. all you need to do in order to generate its default configuration is to run the command:
npm run build
This will create the webpack configuration files. the output files will be thrown to default foulder named dist. you need to change the output directory from the webpack configuration file named webpack.config.js.

UI

For the UI, I used Angular Material.