Decorators in Angular 9 do not have the capability to support function expressions

Question

Decorators in Angular 9 do not have the capability to support function expressions

Currently, I am working with Angular 9 and facing an issue while generating dynamic routes values during runtime. I have implemented a ComplexUrlRouter to achieve this functionality and integrated it into my Route configuration. However, I encountered the following 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.

Here is a snippet from my app.module.ts file:

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: '' }
];

And here is part of my complex.url.matcher.ts file:

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

export function ComplexUrlMatcher(paramName: string, regex: RegExp) {
  // Function implementation goes here
}

I have tried researching on StackOverflow for a solution but haven't been able to find one that resolves my issue. The Angular Docs URL https://angular.io/guide/aot-compiler#no-arrow-functions mentions that "In version 5 and later, the compiler automatically performs this rewriting while emitting the .js file." However, even though I am using Angular 9, the error persists.

angular typescript arrow-functions

Answer 1

Answer №1

Inline function calls are restricted when used with decorators in AOT compilation.

To resolve this issue, it is recommended to convert the inline function call into a function reference as shown below:

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: '' }
];

Additionally,

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 };
  }
}

Answer 2

Inline function calls are restricted when used with decorators in AOT compilation.

To resolve this issue, it is recommended to convert the inline function call into a function reference as shown below:

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: '' }
];

Additionally,

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 };
  }
}

Decorators in Angular 9 do not have the capability to support function expressions

Answer №1

Similar questions

Limit the elements in an array within a specified range of dates

What is the best way to incorporate a component template into various modules or components?

Can you provide instructions on how to display data in two lines within a mat-select field?

By using providedIn: 'root', services are automatically registered for testing

Analyzing a sizable JSON file serving as the data source for a PostgreSQL database

Display the content of an md-dialog with a scroll bar

update angular component after deleting an item

Mastering the art of mocking modules with both a constructor and a function using Jest

Error: The function createImageUrlBuilder from next_sanity__WEBPACK_IMPORTED_MODULE_0__ is not defined as a valid function

Can we determine the type signature of useCallback for an event handler by inference?

converting an angular object into a string representation

Disabling the intellisense feature for locale suggestions in Monaco is recommended

Tips on ensuring that the Angular frontend waits for the response from an Express REST call

Guide to defining a typescript class property using an index signature

Angular Notification not visible

Version 5 of angularfie2 is encountering an issue where the type 'Observable<{}[]>' cannot be assigned to the type 'Observable<any[]>'

Navigate to the logout page upon encountering an error during the request

The Angular Material Autocomplete component fails to show items upon upgrading the angular/material package to the newest version

Some files are missing when performing an npm install for a local package

Using jest-dom without Jest is definitely an interesting challenge that many developers may