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>