เปลี่ยนเส้นทาง URL แต่ไม่แสดงหน้าที่เกี่ยวข้อง

กำลังพยายามนำทางระหว่างหน้าต่างๆ แต่ไม่ได้ผล ฉันได้กำหนดเส้นทางแล้ว กำลังใช้ routerLink ตามเอกสาร Angular และได้ตรวจสอบหัวข้อ Stackoverflow นับไม่ถ้วน แต่ก็ยังไม่สามารถทำงานได้

โครงการของฉันเป็นโครงการใหม่ ดังนั้นโดยพื้นฐานแล้วฉันมีเพียง 3 องค์ประกอบเท่านั้น: _ AppComponent (พาเรนต์ไปยังอีก 2 รายการ) _ WelcomePageComponent _ LandingPageComponent

นี่คือ app.module.ts ที่ฉันกำหนดเส้นทางไว้

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { WelcomePageComponent } from './welcome-page/welcome-page.component';
import { LandingPageComponent } from './landing-page/landing-page.component';

const routes: Routes = [
  { path: '', component: AppComponent},
  { path: 'welcome', component: WelcomePageComponent },
  { path: 'landing', component: LandingPageComponent }
];

@NgModule({
  entryComponents: [
    WelcomePageComponent,
    LandingPageComponent
  ],
  declarations: [
    AppComponent,
    WelcomePageComponent,
    LandingPageComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

นี่คือ html ที่ฉันพยายามสร้างลิงก์ไปยังหน้ายินดีต้อนรับ

<ul>
  <li>
    <a [routerLink]="['/welcome']" routerLinkActive="active">Welcome Page</a>
  </li>
</ul>


<router-outlet></router-outlet>

เมื่อคลิกลิงก์ URL จะไม่เปลี่ยนแปลงแต่เปลี่ยนหน้า แม้ว่าจะแสดงเนื้อหาหน้ายินดีต้อนรับ แต่ฉันอยากจะเปลี่ยนหน้าทั้งหมด

ฉันทำอะไรผิดที่นี่?

ขอบคุณ