Function expressions are not supported in decorators Angular 9

Question

I am working on Angular 9 and I am generating dynamic routes value in runtime for which I am using a ComplexUrlRouter as below and using the same in Route. But it's giving me below error

Error: src/app/app.module.ts(33,45): Error during template compile of 'AppRoutes' Expression form not supported. src/app/utility/complex.url.matcher.ts(4,10): Error during template compile of 'ComplexUrlMatcher' Function expressions are not supported in decorators Consider changing the function expression into an exported function.

app.module.ts

export const AppRoutes: Routes = [
  { path: '',   component: HomeComponent, pathMatch: 'full' },
  {
    path: 'blog/:id',
    component: ArticleComponent,
    children: [
      {
        path: '',
        component: ArticleComponent
      },
      {
        matcher: ComplexUrlMatcher("title", /[a-zA-Z0-9]+/),
        component: ArticleComponent
      },
    ]
  },{
    path:'add-blog',component:AddPostComponent
  },
  {
    path:'category/:id',
    component:MenuDetailsComponent
  },
  { path: '**', redirectTo: '' }
];

complex.url.matcher.ts

import { UrlSegment, UrlSegmentGroup, Route } from '@angular/router';

export function ComplexUrlMatcher(paramName: string, regex: RegExp) {
  return (
    segments: UrlSegment[],
    segmentGroup: UrlSegmentGroup,
    route: Route) => {
    const parts = [regex];
    const posParams: { [key: string]: UrlSegment } = {};
    const consumed: UrlSegment[] = [];

    let currentIndex = 0;

    for (let i = 0; i < parts.length; ++i) {
      if (currentIndex >= segments.length) {
        return null;
      }
      const current = segments[currentIndex];

      const part = parts[i];
      if (!part.test(current.path)) {
        return null;
      }

      posParams[paramName] = current;
      consumed.push(current);
      currentIndex++;
    }

    if (route.pathMatch === 'full' &&
      (segmentGroup.hasChildren() || currentIndex < segments.length)) {
      return null;
    }

    return { consumed, posParams };
  }
}

I searched many StackOverflow posts but unable to resolve the same. I checked Angular Docs Url https://angular.io/guide/aot-compiler#no-arrow-functions there it's mentioned that "In version 5 and later, the compiler automatically performs this rewriting while emitting the .js file." and I am using Angular 9 but still I am getting error.

Answer 1

Inline function calls are not allowed by AOT inside decorators.

Consider converting the inline function call into a function reference:

export const AppRoutes: Routes = [
  { path: '',   component: HomeComponent, pathMatch: 'full' },
  {
    path: 'blog/:id',
    component: ArticleComponent,
    children: [
      {
        path: '',
        component: ArticleComponent
      },
      {
        matcher: complexUrlMatcher,
        component: ArticleComponent
      },
    ]
  },{
    path:'add-blog',component:AddPostComponent
  },
  {
    path:'category/:id',
    component:MenuDetailsComponent
  },
  { path: '**', redirectTo: '' }
];

And

export const complexUrlMatcher = ComplexUrlMatcher("title", /[a-zA-Z0-9]+/);

export function ComplexUrlMatcher(paramName: string, regex: RegExp) {
  return (
    segments: UrlSegment[],
    segmentGroup: UrlSegmentGroup,
    route: Route) => {
    const parts = [regex];
    const posParams: { [key: string]: UrlSegment } = {};
    const consumed: UrlSegment[] = [];

    let currentIndex = 0;

    for (let i = 0; i < parts.length; ++i) {
      if (currentIndex >= segments.length) {
        return null;
      }
      const current = segments[currentIndex];

      const part = parts[i];
      if (!part.test(current.path)) {
        return null;
      }

      posParams[paramName] = current;
      consumed.push(current);
      currentIndex++;
    }

    if (route.pathMatch === 'full' &&
      (segmentGroup.hasChildren() || currentIndex < segments.length)) {
      return null;
    }

    return { consumed, posParams };
  }
}