Angular 14 pathMatch Type 'string' is not assignable to type '"full" | "prefix"' Error

Question

Just upgraded to Angular 14, getting error:

Types of property 'pathMatch' are incompatible.
        Type 'string' is not assignable to type '"full" | "prefix"'.

Calling from:

import { Routes as routes } from './routes';
@NgModule({
  imports: [
    RouterModule.forChild(routes)
    ]...})

with routes being

export const Routes = [
  {
    path: '',
    redirectTo: '/signup',
    pathMatch: 'full'
  }]

The whole thing worked perfectly on Angular 10. Any ideas ?

Answer 1

You can create a type and cast to it:

type PathMatch = "full" | "prefix" | undefined;

const routes = [
  {
    path: 'achievements',
    component: AchievementOverviewComponent,
    pathMatch: 'full' as PathMatch
  }
]

More info in a related answer: Typescript Type 'string' is not assignable to type.

Answer 2

Just define routes as Routes, so TypeScript will know that pathMatch is 'full', 'prefix' or undefined.

This is better than the currently accepted (and working) answer, because it also type checks the other properties.

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

export const routes: Routes = [
  {
    path: '',
    redirectTo: '/signup',
    pathMatch: 'full'
  }]