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

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

]
}]

Continue reading...