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