Problem with more than two in-app router

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

empresa.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 let's get into the problem. When you click routerLink , the component that should be rendered in outlet=Conteudo does not work as expected. The page is left blank.

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

Note: This is the Sun after selecting the lista-empresa