angular: AOT with route url matcher: Invalid configuration of route '': routes must have either a path or a matcher specified

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Getting error using route URL matcher with AOT enabled:

Uncaught Error: Invalid configuration of route '': routes must have either a path or a matcher specified

Expected behavior

No error.

Minimal reproduction of the problem with instructions

Generate a brand new project with angular-cli using package manager yarn.
Generate a component named TestComponent.
Import router module with test route using matcher:

@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {
        matcher(segments: UrlSegment[]) {
          if (segments.length) {
            return {
              consumed: [segments[0]],
            };
          } else {
            return undefined;
          }
        },
        component: TestComponent,
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Run ng serve and it should work as expected.
Run ng serve -aot=true (or ng build -prod), it gives runtime error complaining invalid configuration of route.

Environment


Angular version: 4.3.4


Browser:
- [x] Chrome (desktop) version 60.0.3112.90
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v8.1.2
- Platform: Windows 10

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 34 (4 by maintainers)

Links to this issue

angular - Invalid configuration of route '': routes must have either a path or a matcher specified - Stack Overflow

Most upvoted comments

I think you can’t provide route path from a variable or from any function. Using this way in case of AOT, on runtime the app throws error.

{ path: ‘signin’, component: SigninComponent } // This works

const SignIn: string = ‘signin’; { path: SignIn, component: SigninComponent } // This doesn’t

I don’t know the reason, but this fixes my problem. Will appreciate if someone explains this. Thanks.

+17

kgrvr on Feb 27, 2018

@vicb https://github.com/vilic/bug-repros/tree/angular-18662

vilicvane on Aug 16, 2017

Object.freeze() - you have function call

You probably could use: export const RoutingConstant = { signin: ‘signin’ }

but as all the app.product-routes.ts is only for defining constants I don’t need to define object. import * as ProductRoutes … makes it available as it was object.

mateusz-sawit on Apr 20, 2018

Ya you’re exporting each individual constant string. What I was doing was like this:

export const RoutingConstant = Object.freeze({ 'signin': 'signin' });

kgrvr on Apr 20, 2018

@jurStv No, I tried something like using computed property and quoted property. It did actually make the output look relatively correct to me (at least there would be matcher method in the output instead of nothing), but it doesn’t actually work.

vilicvane on Sep 18, 2017