CODEWITHSUNDEEP
angulartypescriptroutes
Antoine V
Antoine V

Reputation: 7204

Uncaught (in promise) Cannot match any routes. URL Segment:

My application doesn't recognize my route even that I already defined it and imported in app.module.

When receiving the data, I redirect to this but I have always this exception:

onSubmit(){
    this.transactionService.createTransactionIfNotExist(this.video).subscribe(
      transaction => this.router.navigate([transaction.currentStep.action, this.video.id, transaction.token ]));
  }

transaction.currentStep.action = PreviewStep
this.video.id = 1
transaction.token = f54db125-ca01-4afc-b714-76c127abb261

and the exception

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'PreviewStep/1/f54db125-ca01-4afc-b714-76c127abb261'
Error: Cannot match any routes. URL Segment: 'PreviewStep/1/f54db125-ca01-4afc-b714-76c127abb261'

transaction.routing

export const routing: ModuleWithProviders = RouterModule.forChild([
   { path: 'previewStep/:videoId/:transactionId', component: PreviewStepComponent }
]);

transaction.module

import { PreviewStepComponent } from "./components/preview-step/preview-step.component";
import { routing } from './transaction.routing';

@NgModule({
  imports: [
    CommonModule, routing, FormsModule, SharedModule, RouterModule
  ],
  declarations: [PreviewStepComponent],
  providers: []
})
export class TransactionModule { }

app.module

import { AppRoutingModule } from './app-routing.module';
import { TransactionModule } from './transaction/transaction.module';

@NgModule({
  declarations: [
  ],
  imports: [
    AppRoutingModule,
    TransactionModule,
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 1

Views: 1605

Answers (1)

Antoine V
Antoine V

Reputation: 7204

In fact, angular routing name is case sensitive.

That means we must change PreviewStep to previewStep to match the route name.

To override this situation, either changer the route name or create a UrlSerializer.

import { DefaultUrlSerializer, UrlSerializer, UrlTree } from '@angular/router';

export class TitleCaseUrlSerializer extends DefaultUrlSerializer {  
    public parse(url: string): UrlTree {
        function toTitleCase(url) {
            return url.split('/')
                       .map(segment => segment ? 
                                       segment[0].toUpperCase() + segment.substr(1) : 
                                       segment)
                       .join('/');
        }
        return super.parse(toTitleCase(url));
    }
}

@NgModule({
   imports: [ ... ],
   declarations: [ ... ],
   providers: [
        {
            provide: UrlSerializer,
            useClass: TitleCaseUrlSerializer
        }
   ]
})

Upvotes: 1

Related Questions