Building Angular 6 Application
Tags: angular, javascript, angular2, angular4
Published: 2019-08-13 12:38:24

---
title: Building Angular 6 Application
published: true
tags: angular,javascript,angular2,angular-4
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*ByAhY7BtpARVPzkgM6yV1Q.png)<figcaption>angular 6 series</figcaption>

This is the second part in an n-part [series](https://dev.to/geeksamu/angular-6-article-series-2n26-temp-slug-5101921) about the JavaScript framework, Angular 6.  
In this part, we'll go over build new Angular 6 Applicatin.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know using Angular CLI and how to build your Angular 6application using it.

### Article Series

1. [Angular 6 Article Series](https://dev.to/geeksamu/angular-6-article-series-2n26-temp-slug-5101921)
2. Building Angular 6 Application ( **You’re here** )
3. [Using Angular Material with Angular 6](https://medium.com/@geeksamu/using-angular-material-with-angular-6-862a1c3d04b)
4. [Deploy Angular 6 Application to Netlify](https://medium.com/@geeksamu/deploy-angular-6-application-to-netlify-60b39b9df61c)
5. Creating PWA with Angular 6 ( **Soon** )
6. Dynamic themes in Angular 6 Material ( **Soon** )
7. Angular 6 with GSAP ( **Soon** )
8. Angular 6 with Firebase ( **Soon** )

### Upgrading Angular-CLI

I assume that you have nodejs and npm installed. If not you have to install them first. Just Google it.

First we need to upgrade our CLI or install it for the first time. The next command will install it or upgrade your current version.

```
npm i -g @angular/cli
```

#### Creating new Angular App

Now We want to use CLI to create new Angular 6 Application. Change your directory where you want to create the new app, then run

```
ng new angular6-series --routing --style=scss --skip-tests
```

Where angular6-series is our application's name. But we have some arguments here.  
Let's Explain each argument of our command

- --routing: It builds our routes so I won't have to build them myself
- --style=scss: It changes our styling extension from css to scss as I prefer sass.
- --skip-tests: to skip creating tests files. But You may need them in this case you have to remove this argument.

But If you want to build your application normally without all these options, just run:

```
ng new angular6-series
```

After creating our new app. Move the app directory and run the server.

```
cd angular6-series
ng serve --open
```

ng serve will run the server of our app and the argument --open will open it in the default browser.  
Now you should see this in your browser

![](https://cdn-images-1.medium.com/max/1024/0*2y0SONIf8kaLLPnH.png)

#### Creating Components

Let’s create new component named home and make it our home page with some content.

```
ng g c home
```

This will create the component files. But you’ll see no change in your app. Let’s modify our src/app/app.component.html  
Remove all the code and leave the last tag. It should look like

```
\<router-outlet\>\</router-outlet\>
```

Now open /src/app/app-routing.module.ts  
I want to add the new component as the home page.  
We need to import the HomeComponent and add the route to routes array.

```
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
 {
 path: "",
 component: HomeComponent
 },
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }
```

Now you should see your home component content in your home page.  
Let’s edit our HomeComponent open /src/app/home/home.component.html

```
\<h1\>
 Welcome to our Angular 6 Application
\</h1\>
\<p\>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda repudiandae repellat perferendis corrupti, harum provident
 ipsam illo laudantium magni deleniti corporis modi error aperiam iure molestiae eligendi quo voluptatem minus?
\</p\>
```

Let’s create another component named posts

```
ng g c posts
```

First we need to add new route for our posts component  
open /src/app/app-routing.module.ts and do like we did to the home component  
our file should look like

```
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { PostsComponent } from './posts/posts.component';

const routes: Routes = [
 {
 path: "",
 component: HomeComponent
 },
 {
 path: "posts",
 component: PostsComponent
 },
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }
```

Now open /src/app/posts/posts.component.html  
and add some html

```
\<div class="post"\>
 \<h1\>Post title here\</h1\>
 \<p\>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia minima soluta harum fugit neque accusamus non fuga blanditiis quam enim nemo, quia dolores iure explicabo officia, cumque expedita quis sint.\</p\>
\</div\>
\<div class="post"\>
 \<h1\>Post title here\</h1\>
 \<p\>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia minima soluta harum fugit neque accusamus non fuga blanditiis quam enim nemo, quia dolores iure explicabo officia, cumque expedita quis sint.\</p\>
 \</div\>
```

You can see our new component in the browser by visiting: [http://localhost:4200/posts](http://localhost:4200/posts)

That’s all for now.

Next: [Using Angular Material with Angular 6](https://medium.com/@geeksamu/using-angular-material-with-angular-6-862a1c3d04b)

### If you liked this article, hit that clap button below 👏. check out other articles I’ve written [here](https://blog.wb.gy). And If you find this story useful. As I don’t use Medium Partner Program. Consider a donation through [PayPal](http://paypal.me/geeksamu), or [‘Buy Me a Coffee’](https://ko-fi.com/geeksamu) :)

[Buy Ahmed Abdelsalam a Coffee. ko-fi.com/geeksamu](https://ko-fi.com/geeksamu)

If you have any question comment it below or You can find me on Twitter [@geeksamu](https://twitter.com/geeksamu)

[Ahmed ⚯͛ (@geeksamu) | Twitter](https://twitter.com/geeksamu)