Angular 4 Child Routing is not working

Question

everyone. I'm working with angular but I've some issues with the routing. I've followed some tutorials, but the routing is not working. Can somebody check my code and tell me what I'm doing worse?

This is my principal router module:

import { NgModule }      from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { LoginComponent } from './login/login.component';
import { ListadoSolicitudComponent } from './solicitudes/listado_solicitud.component';

const routes: Routes = [
	{ path: 'solicitud', loadChildren: './solicitudes/solicitudes.module#SolicitudesModule' },
	{ path: 'admin', loadChildren: './administracion/administracion.module#AdministracionModule' },
	{ path: 'login', component: LoginComponent },
	{ path: 'solicitudes', component: ListadoSolicitudComponent },
	{ path: '', redirectTo: '/solicitudes', pathMatch: 'full' }
];
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule{ }

My principal module

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

import { Contenedor } from './contenedor.component';
import { SolicitudesModule } from './solicitudes/solicitudes.module';
import { AdministracionModule } from './administracion/administracion.module';
import { AppRoutingModule }  from './app-routing.module';
import { LoginComponent } from './login/login.component';
import { ListadoSolicitudComponent } from './solicitudes/listado_solicitud.component';

@NgModule({
    declarations: [Contenedor, LoginComponent, ListadoSolicitudComponent],
    imports: [BrowserModule, AppRoutingModule/*, SolicitudesModule, AdministracionModule*/],
    providers: [],
    bootstrap: [Contenedor]
})
export class ContenedorModule { }

And, this is one of the two router child module (SolicitudesRutaModule):

import { NgModule } from '@angular/core';
import { RouterModule, Routes} from '@angular/router';

//Importo los componentes
import { ListadoSolicitudComponent } from './listado_solicitud.component';

import { registrosolicitud } from './registro_solicitud.component';
import { RegistroParticipantes } from './registro_participantes.component';
import { Proyeccion } from './proyeccion_gastos.component';
import { DatoSolicitud } from './datos_solicitud.component';
import { ordencompra } from './orden_compra_solicitud.component';
import { Bitacora } from './bitacora.component';
import { AprobarSolicitud } from './aprobar.component';
import { editarsolicitud } from './editar_solicitud.component';

const Route: Routes = [
  { path: '', component: ListadoSolicitudComponent,
  children: [
    { path: 'registro', component: registrosolicitud },
    { path: 'gasto', component: Proyeccion },
    { path: 'participantes', component: RegistroParticipantes },
    { path: 'compra', component: ordencompra },
    { path: 'bitacora', component: Bitacora },
    { path: 'aprobar', component: AprobarSolicitud },
    { path: 'edit', component: editarsolicitud }
  ]}
];
// Metadatos del módulo
@NgModule({
    imports: [ RouterModule.forChild(Route) ],
    exports: [ RouterModule ]
})
export class SolicitudesRutaModule { }

Answer 1

You do not import the SolicitudesRutaModule.

In your AppRoutingModule, you should do:

{ path: 'solicitudes', loadChildren: 'path/to/module#SolicitudesRutaModule' },

Note that if registro is a child of the default route '' in your SolicitudesRutaModule, the ListadoSolicitudComponent should have a <router-outlet></router-outlet> in its template. If this is not the case, put the other routes like registro in the same array as the default route ''.