In this tutorial I'll guide you through a simple routing-setup in Angular 6.

We will do this in three steps:

• setting up our components
• setting up our router
• linking our router

Setting up your components:

1. CMD: ng generate component views/my-component1
2. CMD: ng generate component views/my-component2
   Now your project-structure should look more or less like this:

Setting up your router:

Use the AngularCLI to generate your routing-module:

1. CMD:ng generate module app-routing --flat --module=app
2. edit src/app/app-routing.module.ts so it looks like this:

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { MyComponent1Component } from './views/my-component1/my-component1.component';
import { MyComponent2Component } from './views/my-component2/my-component2.component';

@NgModule({
  declarations: [ 
    MyComponent1Component, MyComponent2Component
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'component1', component: MyComponent1Component },
      { path: 'component2', component: MyComponent2Component },
      { path: '**', redirectTo: 'component1' }
    ])
  ],
  exports: [
    RouterModule,
  ],
  providers: [],

})
export class AppRoutingModule {}

Linking your router:

1. Add the RoutingModule to the app.modules.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing.module';
import { MyComponent1Component } from './views/my-component1/my-component1.component';
import { MyComponent2Component } from './views/my-component2/my-component2.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule,AppRoutingModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

2. Modify your app.components.ts:
   You will have to add router-links to acces your components.

A routerlink might look like this:

<a routerLinkActive="active" routerLink="/component1">Component 1</a> 

Your final app.components.ts might look like this:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div class="container">
    <ul>
      <li>
        <a routerLinkActive="active" 
          routerLink="/component1">Component 1</a> 
      </li>
      <li>
        <a routerLinkActive="active" 
          routerLink="/component2">Component 2</a> 
      </li>
    </ul>
      <div>
        <router-outlet></router-outlet>
      </div>
  </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
}

Example: