Problem with more than two router-outlet in the app

Question

[...]
<header>
     <a routerLink="/lista-empresa" href="javascript:;">Empresa</a>
</header>
[...]
<main>
<router-outlet name="conteudo"></router-outlet>
</main>
[...]

company.routing.module.ts

const empresaRoutes: Routes = [
    {
        path: '',
        component: EmpresaListasComponent,
        outlet: 'conteudo'
    }
]

@NgModule({
    imports: [RouterModule.forChild(empresaRoutes)],
    exports: [RouterModule]
})
export class EmpresaRoutingModule { }

app.routing.module.ts

const ROUTES:Routes=[
    {path:'', component:PrincipalComponent},
    {path:'lista-empresa', loadChildren:'app/empresa/empresa.module#EmpresaModule'}
];
@NgModule({
    imports:[RouterModule.forRoot(ROUTES)],
    exports:[RouterModule]
})
export class RoutingModule{}

app.component.html

<router-outlet></router-outlet>

Now to the problem. By clicking on routerLink, the component that should be rendered in outlet=Conteudo does not work as expected. The page is blank.

From what I understand in my research, by giving a name to my router-outlet. The component should be rendered inside it. Where am I going wrong ?

Note: This is the Gift after selecting the route lista-empresa

Answer 1

I put my Empresacomponent as Principalcomponent’s son and removed the outlet parameter from the Router, removed the name attribute from the <router-outlet></router-outlet>, and resolved.

Loads Component Company as Principalcomponent Child

 const PRINCIPAL_ROUTES: Routes = [
    {path: '', component: PrincipalComponent, 
    children:[
        {path: '', loadChildren: 'app/empresa/empresa.module#EmpresaModule'},        
    ]},

];

and in the main of the

<router-outlet></router-outlet>

Full discussion on English stackoverflow here