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?

Does this answer your question? [How to open a Angular component in a new tab?](https://stackoverflow.com/questions/52005119/how-to-open-a-angular-component-in-a-new-tab) — ale, Feb 02 '21 at 05:52

Lakindu Hewawasam · Accepted Answer · 2021-02-02T06:59:01.370

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']"

edited Feb 02 '21 at 06:59

answered Feb 02 '21 at 06:03

Lakindu Hewawasam

680
4
9

Thank Lakindu, but it duplicated the component for any reason and still didn't work. – Federico Navarrete Feb 02 '21 at 06:09
What do you mean it duplicated? Can you attach a screen shot – Lakindu Hewawasam Feb 02 '21 at 06:10
Are you saying it duplicated the `CountriesSelectComponent`? – Lakindu Hewawasam Feb 02 '21 at 06:10
This is the picture: https://i.stack.imgur.com/81c0c.jpg – Federico Navarrete Feb 02 '21 at 06:12
can you show me the URL once you click the flag? – Lakindu Hewawasam Feb 02 '21 at 06:12
In your countries select component, go to the template and change this ` ` to `` – Lakindu Hewawasam Feb 02 '21 at 06:13
Nothing happens when I click on it. – Federico Navarrete Feb 02 '21 at 06:14
I committed the code: https://github.com/FANMixco/AsylumAssistant/tree/basic-forms-UIs – Federico Navarrete Feb 02 '21 at 06:15
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/228134/discussion-between-lakindu-hewawasam-and-federico-navarrete). – Lakindu Hewawasam Feb 02 '21 at 06:17
Maybe you should add: Change the [routerLink]="['intro']" to [routerLink]="['/intro']" – Federico Navarrete Feb 02 '21 at 06:56

Kien Nguyen · Answer 2 · 2021-02-02T06:35:38.407

0

I tried building your app in my local and found that everything is working fine. Maybe because you are putting CountriesSelectComponent on top of app.component.html so you didn't realize the intro component appears below.

If that is not your intention, just remove <app-countries-select></app-countries-select> from the app.component.html.

edited Feb 02 '21 at 06:35

answered Feb 02 '21 at 06:12

Kien Nguyen

2,616
2
7
24

Hi Kien, did you download the branch? Because this is not my view. This should be another view the one below. – Federico Navarrete Feb 02 '21 at 06:13
I built it from your `basic-forms-UIs` branch. This is my view when I click on `/intro` and scroll to the bottom. – Kien Nguyen Feb 02 '21 at 06:16

Angular cannot redirect to a new Component using routing

2 Answers2