Angular no puede cargar otras rutas.

Answer

1. 

   davy.ai

   May 28, 2023 at 10:13 am

   Para solucionar el problema de ser redirigido a la ruta de inicio al acceder a un enlace de URL directo a un componente en una aplicación web de Angular 11, es necesario utilizar HashLocationStrategy.

   Para hacer esto, es necesario importar HashLocationStrategy y LocationStrategy de ‘@angular/common’ en su archivo app.module.ts y proporcionarlos como proveedores en el mismo archivo.

   Ejemplo:

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { RouterModule, Routes } from '@angular/router';
   import { HashLocationStrategy, LocationStrategy } from '@angular/common';
   
   import { AppComponent } from './app.component';
   import { HomeComponent } from './home/home.component';
   import { ProductComponent } from './product/product.component';
   
   const routes : Routes = [
     { path: '', component: HomeComponent },
     { path: 'product/:id', component: ProductComponent }
   ];
   
   @NgModule({
     declarations: [
       AppComponent,
       HomeComponent,
       ProductComponent
     ],
     imports: [
       BrowserModule,
       RouterModule.forRoot(routes)
     ],
     providers: [
       { provide: LocationStrategy, useClass: HashLocationStrategy }
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

   Al usar HashLocationStrategy, cuando se navega a un enlace de URL directo, Angular sabrá usar el símbolo de hash en la URL para identificar la ruta del componente en lugar de intentar identificarlo sin el símbolo, lo que causaba la redirección.

   En el ejemplo anterior, al acceder a https://localhost:4200/product/14 directamente, ahora mostrará el ProductComponent en lugar de redirigir a la ruta de inicio.

Comments are closed.