CODEWITHSUNDEEP
angularroutes
Honchar Denys
Honchar Denys

Reputation: 1518

Matching url with Angular 8 Routing cause errors in build production

I have app which runs smoothly, but when I try to build production, I got below error:

ERROR in Error during template compile of 'ViewModule'
  Function calls are not supported in decorators but 'matcher' was called.

Which cause by below code

import { NgModule } from '@angular/core';
import { Routes, RouterModule, UrlSegment } from '@angular/router';
import { ViewComponent } from './view.component';
export function matcher(replace):any {
    const checker = function(url){
        if(url[0].path.toLowerCase().indexOf(replace)>-1){
            return {
                consumed: url,
                posParams: {
                    project_id: new UrlSegment(url[0].path.toLowerCase().replace(replace, ''), {})
                }
            };
        }
        return null;
    }
    return checker;
}
const routes: Routes = [{
    component: ViewComponent,
    path: '',
    children: [{
        path:  ':project_id',
        matcher:  matcher('i-'),
        loadChildren: () => import('app/create.module').then(m => m.CreateModule)

    }]
}];

@NgModule({
    declarations: [ ViewComponent],
    imports: [RouterModule.forChild(routes)]
})
export class ViewModule { }

which match the url and if it's start with i- then we load CreateModule page.

Upvotes: 1

Views: 320

Answers (1)

skolldev
skolldev

Reputation: 1197

You should not call the function, only provide the function.

export function matcher(url: UrlSegment[]): any {
    const checker = function(url){
        if(url[0].path.toLowerCase().indexOf('i')>-1){
            return {
                consumed: url,
                posParams: {
                    project_id: new UrlSegment(url[0].path.toLowerCase().replace('i, ''), {})
                }
            };
        }
        return null;
    }
    return checker;
}

const routes: Routes = [{
    component: ViewComponent,
    path: '',
    children: [{
        path:  ':project_id',
        matcher
        loadChildren: () => import('app/create.module').then(m => m.CreateModule)

    }]

Your matcher function should have the signature matcher(url: UrlSegment[]) : UrlMatchResult

For more information, take a look at the Angular documentation for this topic: https://angular.io/api/router/UrlMatcher

Upvotes: 1

Related Questions