Angular5嵌套路由失效求助：无法匹配'empresa-list'路由

Hey there, let's figure out why your named router outlet isn't working as expected. The error you're seeing happens because your routerLink is pointing to a root-level route that doesn't exist—empresa-list is actually a child route under principal and tied to a named outlet, so we need to adjust the link syntax.

Your Current Code Snippets #

principal.component.html

[...] 
<a routerLink="/empresa-list">Abrir</a> 
[...] 
<main> 
  <router-outlet name="content"></router-outlet> 
</main> 
[...]

app.routing.module.ts

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

const ROUTES:Routes =[ 
  {path:'principal', loadChildren: 'app/principal/principal.module#PrincipalModule'} 
] 

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

principal.routing.module.ts

import { Routes } from "@angular/router"; 
import { PrincipalComponent } from "./principal.component"; 
import { NgModule } from "@angular/core"; 
import { RouterModule } from "@angular/router"; 
import { EmpresaListasComponent } from "../empresa/empresa-listas/empresa-listas.component"; 

const PRINCIPAL_ROUTES: Routes = [ 
  {path: '', component: PrincipalComponent}, 
  {path: 'empresa-list', component:EmpresaListasComponent, outlet: 'content'} 
]; 

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

What's Wrong Here? #

When you use routerLink="/empresa-list", Angular looks for this route at the root level (outside the principal lazy-loaded module). But your empresa-list route is a child route under principal and assigned to the content named outlet—so the link syntax doesn't match your route structure.

Fix Steps #

• Update the routerLink in principal.component.html
  You need to specify the parent route (/principal) and explicitly target the content outlet using Angular's named outlet syntax. Replace your existing link with:

  <a [routerLink]="['/principal', { outlets: { content: ['empresa-list'] } }]">Abrir</a>
  

  Let me break this down:

  • '/principal': Tells Angular to navigate to the parent route first.
  • { outlets: { content: ['empresa-list'] } }: Specifies that we want to load the empresa-list route into the content named outlet.

• Double-check your route configuration
  Your principal.routing.module.ts is already set up correctly:

  • The empty path route loads PrincipalComponent (which contains the named outlet).
  • The empresa-list route is tied to the content outlet and uses the correct component.

• Verify module imports
  You've already imported EmpresaModule into PrincipalModule, which ensures EmpresaListasComponent is available—so that part is good to go.

Modified principal.component.html #

[...] 
<a [routerLink]="['/principal', { outlets: { content: ['empresa-list'] } }]">Abrir</a> 
[...] 
<main> 
  <router-outlet name="content"></router-outlet> 
</main> 
[...]

Why This Works #

This syntax tells Angular to navigate to the principal route, then load the empresa-list component into the content outlet that's inside PrincipalComponent. This matches your nested route structure and named outlet setup, so the error should disappear, and EmpresaListasComponent will render in the correct place.

内容的提问来源于stack exchange，提问作者Jeterson Miranda Gomes