1. Generate components

                  ng g c pages/general/contact
                  ng g c pages/general/login
                  ng g c pages/general/signup
                  ng g c pages/general/home
                  ng g c pages/general/about
                  ng g c pages/general/not-found

                  

2. Route setting

src/app/app.routes.ts

import component files

                  import { HomeComponent } from './pages/general/home/home.component';

                  import { LoginComponent } from './pages/general/login/login.component';
                  import { SignupComponent } from './pages/general/signup/signup.component';
                  import { NotFoundComponent } from './pages/general/not-found/not-found.component';

                  import { AboutComponent } from './pages/general/about/about.component';
                  import { ContactComponent } from './pages/general/contact/contact.component';

                  

add routes

                  export const routes: Routes = [
                      { path: '', component: HomeComponent, },

                      { path: 'login', component: LoginComponent },
                      { path: 'signup', component: SignupComponent },

                      { path: 'about', component: AboutComponent },
                      { path: 'contact', component: ContactComponent },

                      { path: '**', component: NotFoundComponent }
                  ];

                  

complete code in route

                  import { Routes } from '@angular/router';

                  import { HomeComponent } from './pages/general/home/home.component';

                  import { LoginComponent } from './pages/general/login/login.component';
                  import { SignupComponent } from './pages/general/signup/signup.component';
                  import { NotFoundComponent } from './pages/general/not-found/not-found.component';

                  import { AboutComponent } from './pages/general/about/about.component';
                  import { ContactComponent } from './pages/general/contact/contact.component';

                  export const routes: Routes = [
                      { path: '', component: HomeComponent, },

                      { path: 'login', component: LoginComponent },
                      { path: 'signup', component: SignupComponent },

                      { path: 'about', component: AboutComponent },
                      { path: 'contact', component: ContactComponent },

                      { path: '**', component: NotFoundComponent }
                  ];

                  

3. Html view

src/app/app.component.html

                  <div class="app">
                      <header>
                        <section>
                          <h1>{/{ title }/}</h1>
                        </section>
                        <nav>
                          <h2>3 Links with Routes</h2>
                          <ul>
                            <li><a routerLink="/">Home</a></li>
                            <li><a routerLink="/login">Login</a></li>
                            <li><a routerLink="/signup">Signup</a></li>
                          </ul>
                          <h3>2 Links with Child Routes</h3>
                          <ul>
                            <li><a routerLink="/about">About</a></li>
                            <li><a routerLink="/contact">Contact</a></li>
                          </ul>
                        </nav>
                      </header>

                      <main>
                        <h4>Routes Result</h4>
                        <router-outlet></router-outlet>
                      </main>

                      <footer>
                        
                      </footer>

                    </div>

                

1. routerLink in ahref tag
2. router-outlet for content rendering