angular, how to fix TypeError: Cannot read properties of undefined (reading 'filter') at Recognizer.processSegmentAgainstRoute

Question

I have the following error

vendor.js:65556 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'filter')
TypeError: Cannot read properties of undefined (reading 'filter')
    at Recognizer.processSegmentAgainstRoute (vendor.js:148933:17)
    at Recognizer.processSegment (vendor.js:148880:29)
    at Recognizer.processSegmentGroup (vendor.js:148832:17)
    at Recognizer.processChildren (vendor.js:148852:35)
    at Recognizer.processSegmentAgainstRoute (vendor.js:148936:29)
    at Recognizer.processSegment (vendor.js:148880:29)
    at Recognizer.processSegmentAgainstRoute (vendor.js:148958:27)
    at Recognizer.processSegment (vendor.js:148880:29)
    at Recognizer.processSegmentGroup (vendor.js:148832:17)
    at Recognizer.processChildren (vendor.js:148852:35)
    at resolvePromise (polyfills.js:9099:19)
    at resolvePromise (polyfills.js:9046:9)
    at polyfills.js:9173:9
    at _ZoneDelegate.invokeTask (polyfills.js:8120:171)
    at Object.onInvokeTask (vendor.js:88703:25)
    at _ZoneDelegate.invokeTask (polyfills.js:8120:54)
    at Zone.runTask (polyfills.js:7881:37)
    at drainMicroTaskQueue (polyfills.js:8329:23)

How can I fix this ?

Answer 1

The error doesn't explain well where the error happen...

Basically this is due to a mal formatted routing declaration.
You shouldn't use '**' but '' instead

Here is an example

const routes = [
  {
    path: '**', // <-- ** is incorrect, should be ''
    component: AuthComponent,
    children: [
      {
        path: '',
        loadChildren: () => import('./auth.module').then((m) => m.AuthModule),
      },
    ],
  },
]

@NgModule({
  declarations: [AuthComponent],
  imports: [
    RouterModule.forChild(routes),
    // ...