Angular 19 - NG04002: Cannot match any routes. URL Segment: 'company-create'

Question

I've been researching this all morning and can't seem to figure this out. I keep getting this error but followed (what I thought) the fix from others. I'm new to routing within a nav component. I'm sure you're not surprised!

Any help is appreciated.

Thanks!

main-nav.component.ts

import { Component, inject } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { AsyncPipe } from '@angular/common';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';
import { RouterOutlet, RouterLink } from '@angular/router';


@Component({
  selector: 'app-main-nav',
  standalone: true,
  templateUrl: './main-nav.component.html',
  styleUrl: './main-nav.component.scss',
  imports: [
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatListModule,
    MatIconModule,
    AsyncPipe,
    RouterOutlet,
    RouterLink
  ]
})
export class MainNavComponent {
  private breakpointObserver = inject(BreakpointObserver);

  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches),
      shareReplay()
    );
}

main-nav.component.html

<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #drawer class="sidenav" fixedInViewport
        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
        [mode]="(isHandset$ | async) ? 'over' : 'side'"
        [opened]="(isHandset$ | async) === false">
      <mat-toolbar>Menu</mat-toolbar>
      <mat-nav-list>
        <a mat-list-item routerLink="/company-create">Create Company</a>
        <a mat-list-item href="#">Link 2</a>
        <a mat-list-item href="#">Link 3</a>
      </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
      <mat-toolbar color="primary">
        @if (isHandset$ | async) {
          <button
            type="button"
            aria-label="Toggle sidenav"
            mat-icon-button
            (click)="drawer.toggle()">
            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
          </button>
        }
        <span>Company LLC</span>
      </mat-toolbar>
      <div class="content-area">
        <router-outlet name="content"></router-outlet>
      </div>
  </mat-sidenav-content>
</mat-sidenav-container>

app.routes.ts

import { Routes } from '@angular/router';
import { CompanyCreateComponent } from './components/company-create/company-create.component';
import { MainNavComponent } from './main-nav/main-nav.component';

export const routes: Routes = [
  {
    path: '',
    component: MainNavComponent,
    children: [
      { path: 'company-create', component: CompanyCreateComponent, outlet: 'content' },
      { path: '', redirectTo: 'company-create', pathMatch: 'full', outlet: 'content' }, // Default view           
    ]
  }
]

Try to change your router link to this: [routerLink]="[{ outlets: { content: ['company-create'] } }]" — Milos Stojanovic
– Milos Stojanovic, Commented May 17 at 11:48
So you do not have a main route at all for 'company-create' ? you are using an outlet for that ? — Henrik Bøgelund Lavstsen
– Henrik Bøgelund Lavstsen, Commented May 19 at 6:02

Yong Shun · Accepted Answer · 2025-05-17 12:27:33Z

1

Your auxiliary route in [routerLink] should be as below so that it will use the named router outlet instead of default router outlet (without name attribute).

<a
  mat-list-item
  [routerLink]="[{ outlets: { content: ['company-create'] } }]"
>
  Create Company
</a>

Assume that you have the (primary) <router-outlet> in your starting component.

Demo @ StackBlitz

Reference: Auxiliary Routes in Angular

answered May 17 at 12:27

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

PPJN May 17 at 19:40

I still can't get this to work. I am using Angular 19. Would I put the content from the app.routing.module file in the app.routes file in an Angular 19 project? I am getting this error: Module '"./app.routes"' declares 'routes' locally, but it is not exported.

Yong Shun May 18 at 0:42

You should import with import {routes} from './app.routes'; in your app.routing.module.ts. If you are only export routes in app.route.ts, you can revamp to: const routes: Routes = [...]; export default routes;. Checkout my demo link for app.route.ts and app-routing.module.ts.

PPJN May 18 at 1:41

Thanks again. It fixed my error but now I can't seem to get my component to load lol. Lots of learning here.

Yong Shun May 18 at 2:06

Perhaps, can you create a demo in StackBlitz to reproduce the issue so that I can help to check it. Thanks.

PPJN May 30 at 18:38

My routes file was a little off. I updated it and this got it to work. Thank you! @Yong Shun

Collectives™ on Stack Overflow

Angular 19 - NG04002: Cannot match any routes. URL Segment: 'company-create'

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related