Angular cannot redirect to a new Component using routing

Question

I am building a small app, and somehow, it's not redirecting. I'm trying to open the IntroComponent, but nothing happens when I do click on my links, or I try to open it:

These are my pieces of code:

app.component.html:

<app-countries-select></app-countries-select>

<router-outlet></router-outlet>

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CountriesSelectComponent } from './home/countries-select/countries-select.component';
import { IntroComponent } from './intro/intro.component';

const routes: Routes = [
  { path: 'intro', component: IntroComponent },
  { path: 'countries-select', component: CountriesSelectComponent },
  { path: '',   redirectTo: '/countries-select', pathMatch: 'full' },
  { path: '**', component: CountriesSelectComponent }
];

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

app.module.ts:

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CountriesSelectComponent } from './home/countries-select/countries-select.component';
import { FormsModule } from '@angular/forms';
import { FormComponent } from './form/form.component';
import { IntroComponent } from './intro/intro.component';
import { OptionsComponent } from './options/options.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    CountriesSelectComponent,
    FormComponent,
    IntroComponent,
    OptionsComponent,
    AboutComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

countries-select.component.html:

<div class="container text-center">
  <h2 for="welcome">Welcome to Spain</h2>
  <p>Choose Your Country of Origin</p>

  <div>
    <ul class="list-group" [style.height.px]="innerHeight">
      <li *ngFor="let country of countriesList" class="list-group-item">
        <a routerLink="/intro"  routerLinkActive="active">
          <img class="countryImg" [src]="'/assets/img/countries/' + country.flag + '.png'" /> {{ country.name }}
        </a>
      </li>
    </ul>
  </div>
</div>

intro.component.html:

<div class="container text-center">
  <video poster="" id="v" playsinline autoplay webkit-playsinline (ended)="introEnded()">
    <source src="assets/vid.mp4" type="video/mp4">
  </video>

  <a href="#" class="btn btn-success text-right">Next</a>
</div>

Also, this is my GitHub repo: https://github.com/FANMixco/AsylumAssistant/tree/basic-forms-UIs

Does anyone have any idea what I'm doing wrong?

Answer 1

Simply remove the app-countries-select from the app-component.html and then replace that with a router-outlet

Also change the [routerLink]="['intro']" to [routerLink]="['/intro']"