example - router.navigate angular 5

En Angular, ¿qué es ''pathmatch: full'' y qué efecto tiene?

Question

Aquí se usa pathmatch como lleno y cuando elimino este pathmatch ni siquiera carga la aplicación o ejecuta el proyecto

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

import { AppComponent }  from ''./app.component'';
import { WelcomeComponent } from ''./home/welcome.component'';

/* Feature Modules */
import { ProductModule } from ''./products/product.module'';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot([
      { path: ''welcome'', component: WelcomeComponent },
      { path: '''', redirectTo: ''welcome'', pathMatch: ''full'' },
      { path: ''**'', redirectTo: ''welcome'', pathMatch: ''full'' }
    ]),
    ProductModule
  ],
  declarations: [
    AppComponent,
    WelcomeComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Answer 1

pathMatch = ''full'' da como resultado una ruta correcta cuando los segmentos restantes, no coincidentes de la coincidencia de URL es la ruta del prefijo

pathMatch = ''prefix'' le dice al enrutador que coincida con la ruta de redireccionamiento cuando la URL restante comienza con la ruta del prefijo de la ruta de redireccionamiento.

Ref: https://angular.io/guide/router#set-up-redirects

pathMatch: ''full'' significa que toda la ruta URL debe coincidir y es consumida por el algoritmo de coincidencia de ruta.

pathMatch: ''prefix'' significa que se elige la primera ruta donde la ruta coincide con el inicio de la URL, pero luego el algoritmo de coincidencia de ruta continúa buscando rutas secundarias coincidentes donde coincide el resto de la URL.

Answer 2

RouterModule.forRoot([
      { path: ''welcome'', component: WelcomeComponent },
      { path: '''', redirectTo: ''welcome'', pathMatch: ''full'' },
      { path: ''**'', component: ''pageNotFoundComponent'' }
    ])

Caso 1 pathMatch:''full'' : en este caso, cuando la aplicación se inicia en localhost:4200 (o algún servidor), la página predeterminada será la pantalla de bienvenida, ya que la URL será https://localhost:4200/

Si https://localhost:4200/gibberish esto redirigirá a la pantalla pageNotFound debido a la path:''**'' comodín path:''**''

Caso 2 pathMatch:''prefix'' :

Si las rutas tienen { path: '''', redirectTo: ''welcome'', pathMatch: ''prefix'' } , ahora esto nunca alcanzará la ruta comodín ya que cada url coincidiría con path:'''' definido.