import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { CrearproyectoComponent } from './crearproyecto/crearproyecto.component';
import { ModifproyectoComponent } from './modifproyecto/modifproyecto.component';
import { GestionproyectoComponent } from './gestionproyecto/gestionproyecto.component';
import { CrearcdpComponent } from './crearcdp/crearcdp.component';
import { ModificarcdpComponent } from './modificarcdp/modificarcdp.component';
import { CopiarcdpComponent } from './copiarcdp/copiarcdp.component';
import { EstadocdpComponent } from './estadocdp/estadocdp.component';
const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: LoginComponent },
  { path: 'Gestionar2', component: SidebarComponent, children:[
    { path: 'hijo0', component: GestionproyectoComponent, outlet: 'cero' },
  ]
  },
  { path: 'Crear', component: SidebarComponent, children:[
    { path: 'hijo', component: CrearproyectoComponent, outlet: 'uno' },
  ]},
  { path: 'Modificar', component: SidebarComponent, children:[
    { path: 'hijo2', component: ModifproyectoComponent, outlet: 'dos' },
  ] },
  { path: 'Crearcdp', component: SidebarComponent, children:[
    { path: 'hijo3', component: CrearcdpComponent, outlet: 'tres' },
  ] },
  { path: 'Modificarcdp', component: SidebarComponent, children:[
    { path: 'hijo4', component: ModificarcdpComponent, outlet: 'cuatro' },
  ] },
  { path: 'Copiarcdp', component: SidebarComponent, children:[
    { path: 'hijo5', component: CopiarcdpComponent, outlet: 'cinco' },
  ] },
  { path: 'Estadocdp', component: SidebarComponent, children:[
    { path: 'hijo6', component: EstadocdpComponent, outlet: 'seis' },
  ] },



];

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

<ul  class="list-unstyled components ">
                    <p><a [routerLink]="['/Gestionar2', {outlets: {'cero': ['hijo0']}} ]">Gestion de Proyecto</a></p>
                    <li class="active">
                        <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle" >Herramientas</a>
                        <ul class="collapse list-unstyled" id="homeSubmenu">
                            <li>
                                <a [routerLink]="['/Crear', {outlets: {'uno': ['hijo']}} ]">Crear</a>
                            </li>
                            <li>
                                <a [routerLink]="['/Modificar', {outlets: {'dos': ['hijo2']}} ]" >Modificar</a>
                            </li>
                            <li>
                                <a href="#" >Eliminar</a>
                            </li>

                        </ul>
                    </ul>

        </nav>
        <!-- ACA TERMINA EL SIDEBAR -->

<div id="content">
    <!-- ACA COMIENZA EL NAVBAR -->
    <!-- ACA TERMINA EL NAVBAR-->
    <!-- ACA COMIENZA CONTENIDO -->

    <div   >
        <router-outlet name="cero"></router-outlet>
        <router-outlet name="uno"></router-outlet>
        <router-outlet name="dos"></router-outlet>
        <router-outlet name="tres"></router-outlet>
        <router-outlet name="cuatro"></router-outlet>
        <router-outlet name="cinco"></router-outlet>
        <router-outlet name="seis"></router-outlet>
    </div>
    <!-- ACA TERMINA EL CONTENIDO-->
</div>