angular + routing learning (X) to redirect migration URL (copy official text)

• The  /heroes revised to /superheros

First obtain  Hero routing, and migrate them to the new URL. Router(Router) will check all the redirect statements in the configuration before starting navigation for future demand triggered redirection. To support this change, you usually have to  heroes-routing.module file to redirect the old route to the new route.

 

// hero-routing.module.ts
import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HeroListComponent }    from './hero-list/hero-list.component';
import { HeroDetailComponent }  from './hero-detail/hero-detail.component';

const heroesRoutes: Routes = [
  { path: 'heroes', redirectTo: '/superheroes' },
  { path: 'hero/:id', redirectTo: '/superhero/:id' },
  { path: 'superheroes',  component: HeroListComponent, data: { animation: 'heroes' } }, 
  { path: 'superhero/:id', component: HeroDetailComponent, data: { animation: 'hero' } }
];

@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class HeroesRoutingModule { }

 

•  app-routing.module.ts Modify routing empty, to redirect it  /superheroes.

  import { NgModule } from '@angular/core';
  import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
  
  import { ComposeMessageComponent } from './compose-message/compose-message.component';
  import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
  
  import { AuthGuard } from './auth/auth.guard';
  import { SelectivePreloadingStrategyService } from './selective-preloading-strategy.service';
  
  const appRoutes: Routes = [
    {
      path: 'compose',
      component:ComposeMessageComponent,
      outlet: 'popup'
    },
    {
      path: 'admin',
      loadChildren: () => import('./admin/admin.module').then(mod => mod.AdminModule),
      canLoad: [AuthGuard]
    },
    {
      path: 'crisis-center',
      loadChildren: () => import('./crisis-center/crisis-center.module').then(mod => mod.CrisisCenterModule),
      data: { preload: true }
    },
    { path: '', redirectTo: '/superheroes', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
  ];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(
        appRoutes,
        {
          enableTracing: false,
          preloadingStrategy: SelectivePreloadingStrategyService,
        }
      )
    ],
    exports: [
      RouterModule
    ]
  })
  export class AppRoutingModule { }

   

• Since the  RouterLink instruction is not associated with routing configuration, so you need to modify routing links, so that when a new route is activated, they can be kept active. You have to modify  app.component.ts the template  /heroes routing link.

  <h1 class="title">Angular Router</h1>
  <nav>
    <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
    <a routerLink="/superheroes" routerLinkActive="active">Heroes</a>
    <a routerLink="/admin" routerLinkActive="active">Admin</a>
    <a routerLink="/login" routerLinkActive="active">Login</a>
    <a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
  </nav>
  <div [@routeAnimation]="getAnimationData(routerOutlet)">
    <router-outlet #routerOutlet="outlet"></router-outlet>
  </div>
  <router-outlet name="popup"></router-outlet>

   

• Modification  hero-detail.component.ts of the  goToHeroes() method, using the optional navigation routing parameter back  /superheroes.

  gotoHeroes(hero: Hero) {
    let heroId = hero ? hero.id : null;
    this.router.navigate(['/superheroes', { id: heroId, foo: 'foo' }]);
  }