How to implement routing in Angular?

Question

I got a project developed by Angular. I got a problem implementing routing properly. I defined a button on the welcome page, So when you click on that, You'll be directed to the main page actually. Here's the problem; I got two buttons instead of only one!

<div class="container text-center">
    
    
    <a class="btn btn-lg btn-warning btn-block" routerLink="persons">List of Persons</a>
   
    
</div>
<div class="mt-5 container text-center">
    <router-outlet></router-outlet>
</div>

Here's a how the first page looks like

This is the person's HTML page supposed to be shown after clicking on the button.

<h1 class="container">
  <p>You currently have {{ favoritesIds.length }} favorites</p>
  <app-welcome-message [name]="person[0].name"></app-welcome-message>
</h1>
<div class="row justify-content-center align-items-center ms-4 container">
  <div class="col-sm-4 text-center" *ngFor="let p of person">
    <app-profile-info
    [isFavorite]="favoritesIds.includes(p.id)"
    [person]="p"
    (selectEvent)="favoriteHandler($event)"></app-profile-info>
  </div>
  <div class="mt-5">
    <app-new-friend-card></app-new-friend-card>
  </div>
</div>

Here is app.module.ts

imports: [
    BrowserModule,
    RouterModule.forRoot([
      {path: '', component: FirstPageComponent},
      {path: 'persons', component: AppComponent},
      {path: 'newfriend', component: NewFriendPageComponent}
    ])
  ],
  providers: [],
  bootstrap: [FirstPageComponent]

A J · Accepted Answer · 2022-09-24 07:05:17Z

I assume your first code snippet is taken from your app.component.html, is that correct? It would definitely help if you could add the file names to your code snippets. What you should do first of all is to add pathMatch: 'full' as an option to your first route.

imports: [
    BrowserModule,
    RouterModule.forRoot([
      {path: '', pathMatch: 'full', component: FirstPageComponent},
      {path: 'persons', component: AppComponent},
      {path: 'newfriend', component: NewFriendPageComponent}
    ])
  ],
  providers: [],
  bootstrap: [FirstPageComponent]

Angular routing works by iterating through the list of routes until a matching one is found (by default it is checked if the target route starts with one of the configured ones). Since your first route is empty, every route will start with it, leading to other routes being never loaded.

Nevertheless it's kind of strange that the second route contains component: AppComponent. Usually AppComponent is the root component of your application, where also the <router-outlet> is contained. If this is the case, seeing the duplicate button is correct, since you are first of all rendering your AppComponent, but once you route angular router injects AppComponent again right after your <router-outlet></router-outlet>.

Collectives™ on Stack Overflow

How to implement routing in Angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related