0

tengo un problema que no encuentro la solución. Tengo una página que se encarga de renderizar distintas rutas en angular. Cuando inicio mi aplicación la primer vista que se carga es la de login, el problema surge cuando quiero ingresar a otras rutas directamente por su nombre ya que estas no me aparecen y siempre me redireccionan al login, ¿Podrían indicarme sobre que puedo estar haciendo mal?. La idea sería poder poner localhost:4200/validate-code y que se cargue la pagina, pero no funciona. De antemano muchas gracias.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ForgotPasswordComponent } from './components/auth/forgot-password/forgot-password.component';
import { LoginComponent } from './components/auth/login/login.component'
import { ResetPasswordComponent } from './components/auth/reset-password/reset-password.component';
import { ValidateCodeComponent } from './components/auth/validate-code/validate-code.component';


const dashboardModule = () => import('./components/dashboard/dashboard.module').then(x => x.DashboardModule);

const routes: Routes = [
  //{ path: '', component: LoginComponent},
  { path: 'login', component: LoginComponent,},
  { path: 'validate-code', component: ValidateCodeComponent},
  { path: 'forgot-password', component: ForgotPasswordComponent},
  { path: 'reset-password/:_id', component: ResetPasswordComponent },
  { path: 'dashboard', loadChildren: dashboardModule },
  { path: '**', redirectTo: ''},

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

export const routingComponents = [
  LoginComponent,
  ValidateCodeComponent, 
  ForgotPasswordComponent, 
  ResetPasswordComponent
]

app-module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';

//Componentes
import { SharedModule } from './components/shared/shared.module';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from './shared/interceptors/token.interceptor';
import { ErrorInterceptor } from './shared/interceptors/error.interceptor';


@NgModule({
  declarations: [
    AppComponent,
    routingComponents
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    SharedModule,
  ],
  providers: [
   { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
   //{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

app-component.html

<body>
    <router-outlet></router-outlet> 
</body>
2
  • Que error te da la consola cuando intentas navegar?
    – ayaleil
    Commented el 10 jun. 2022 a las 19:23
  • Ese es el problema, no me da ningún tipo de error, solamente no me deja abrir ventanas nuevas porque las redirecciona automáticamente a login Commented el 14 jun. 2022 a las 1:01

2 respuestas 2

0

Prueba esto:

    const routes: Routes = [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'login',
      },
      { path: 'login', component: LoginComponent},
      { path: 'validate-code', component: ValidateCodeComponent},
      { path: 'forgot-password', component: ForgotPasswordComponent},
      { path: 'reset-password/:_id', component: ResetPasswordComponent },
      { path: 'dashboard', loadChildren: dashboardModule },
      { path: '**', component: LoginComponent},
    ];
0

debes definir <router-outlet> </router-outlet>

en el app.component.html

1
  • 2
    Explica el porque de tu respuesta y como es que resuelve la pregunta, veo que eres nuevo, date una vuelta por Cómo responder y por recorrido de bienvenida para que comprendas mejor el funcionamiento del sitio, de paso ganas tus primeras medallas. Commented el 15 ago. 2023 a las 19:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.