如何将子组件设为router-outlet默认路由？懒加载双路由出口导航报错求助

Hey there, let's work through this routing error you're hitting. That TypeError from defaultUrlMatcher almost always ties back to issues with how your routes are configured, especially when mixing lazy loading and multiple router-outlets. Here's what's likely going on and how to fix it:

Why This Happens #

The error pops up because the router's URL matcher tries to split a path that's undefined or invalid. In your case, with two outlets and lazy loading, it's probably one of these two issues:

• A route in your lazy-loaded dbapp module has a missing or invalid path value
• You're navigating to a child route without specifying which router-outlet it should load into, confusing the matcher

Step-by-Step Fixes #

1. Audit Your Lazy-Loaded Route Config #

First, double-check your dbapp routing module. Every route needs a valid path—no empty strings unless it's a deliberate default route, and definitely no undefined values.

❌ Bad Example:

const dbappRoutes: Routes = [
  {
    path: '',
    children: [
      { path: undefined, component: YourComponent } // This undefined path breaks the matcher
    ]
  }
];

✅ Good Example:

const dbappRoutes: Routes = [
  {
    path: '',
    component: DbappRootComponent, // The component with your underscored router-outlet
    children: [
      { path: 'overview', component: OverviewComponent },
      { path: '', redirectTo: 'overview', pathMatch: 'full' } // Valid default route
    ]
  }
];

2. Specify the Outlet When Navigating #

With multiple router-outlets, you have to tell the router which outlet to load the child route into. Otherwise, it doesn't know where to send the lazy-loaded content, leading to path parsing failures.

In Template (Router Link):

If your outlets are named (e.g., primary and dbOutlet), use this syntax:

<a [routerLink]="[{ outlets: { dbOutlet: ['dbapp', 'overview'] } }]">Go to Dbapp Overview</a>

In Component Code:

import { Router } from '@angular/router';

// ...

constructor(private router: Router) {}

navigateToDbapp() {
  this.router.navigate([{ outlets: { dbOutlet: ['dbapp', 'overview'] } }]);
}

Also, make sure your main app route config explicitly links the lazy-loaded route to the correct outlet:

// app-routing.module.ts
const appRoutes: Routes = [
  { path: '', component: MainLayoutComponent }, // Uses the default 'primary' outlet
  {
    path: 'dbapp',
    outlet: 'dbOutlet', // Matches the name of your second router-outlet
    loadChildren: () => import('./dbapp/dbapp.module').then(m => m.DbappModule)
  }
];

3. Verify Your Router Map Paths #

Cross-check your Router Map (with underscored outlet components) against your actual route paths. Ensure the full path starting with https://www.artngcore.c... lines up exactly with the path values in your app and dbapp route configs—even a tiny mismatch can throw off the matcher.

Test It Out #

After making these changes, restart your app and try navigating again. If the error is gone, you nailed the issue. If not, pop open your browser's dev tools Network tab to see the actual URL being requested, then compare it to your route configs to spot any remaining mismatches.

内容的提问来源于stack exchange，提问作者JSON