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

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

import { EditArticleComponent } from './components/articles/edit-article/edit-article.component';

import { ListArticlesComponent } from './components/articles/list-articles/list-articles.component';

import { ReadArticleComponent } from './components/articles/read-article/read-article.component';

const routes: Routes = [

  { path: 'list', component: ListArticlesComponent },

  { path: 'edit', component: EditArticleComponent },

  { path: 'read', component: ReadArticleComponent },

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule {

 }

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

import { BrowserModule } from '@angular/platform-browser';

import { HttpClientModule } from '@angular/common/http';  //*for url to web-api

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { ListArticlesComponent } from './components/articles/list-articles/list-articles.component';

import { EditArticleComponent } from './components/articles/edit-article/edit-article.component';

import { ReadArticleComponent } from './components/articles/read-article/read-article.component';

@NgModule({

  imports: [

    BrowserModule,

    AppRoutingModule, //*imports app-routing file

    HttpClientModule  //for web-api cll

  ],

   declarations: [

    AppComponent,

    ListArticlesComponent,

    EditArticleComponent,

    ReadArticleComponent

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

<div style="flex-direction: column;">

<div >

  <a [routerLink]="['/list']">List Articles</a>  

</div>

<div>

<a [routerLink]="['/read']">read</a>

</div>

</div>

<router-outlet></router-outlet>