Búsqueda de sitios web

typescript - Las expresiones de función no son compatibles en los decoradores Angular 9


Estoy trabajando con Angular 9 y estoy generando valores de rutas dinámicas en tiempo de ejecución, para lo cual estoy usando un ComplexUrlRouter como se muestra a continuación y usándolo en Route. Pero me está dando el siguiente error

Error: src/app/app.module.ts(33,45): Error durante la compilación de la plantilla de 'AppRoutes' Forma de expresión no soportada. src/app/utility/complex.url.matcher.ts(4,10): Error durante la compilación de la plantilla de 'ComplexUrlMatcher' Las expresiones de función no son soportadas en los decoradores. Considere cambiar la expresión de función a una función exportada.

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

complejo.url.coincididor.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 };
  }
}

Busqué en muchas publicaciones de StackOverflow pero no pude resolver lo mismo. Revisé la URL de los documentos de Angular https://angular.io/guide/aot-compiler#no-arrow-functions, allí se menciona que "En la versión 5 y posteriores, el compilador realiza automáticamente esta reescritura mientras emite el archivo .js." y estoy usando Angular 9 pero aún así sigo obteniendo el error.

Respuesta #1

Las llamadas a funciones en línea no están permitidas por AOT dentro de los decoradores.

Considera convertir la llamada a la función en línea en una referencia de función:

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

Y

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