5

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 ?

paulrusu
  • 117
  • 1
  • 7

2 Answers2

12

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.

Wim Ombelets
  • 5,097
  • 3
  • 39
  • 55
  • Do you have any idea why this is ? In the link, they talk about how to solve the specific problem, but they don"t give a hint to why that genereal phenomenon appears. In this case, I would think that "full" would be one of the explicit possibilities as it is a specific string. (pathMatch being derived from Type string). Also, why did it work in previous angular versions ? – paulrusu Oct 15 '22 at 07:20
  • @paulrusu It's to do with TypeScript, not angular in itself. You'd be better off asking this as a separate question or as a comment on the answer I linked to. There are many who are much better suited to answer you. – Wim Ombelets Oct 16 '22 at 12:38
5

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'
  }]
bnGG
  • 191
  • 3
  • 9