Uncaught (in promise) 无法匹配任何路由。网址段：答案

【问题标题】：Uncaught (in promise) Cannot match any routes. URL Segment:Uncaught (in promise) 无法匹配任何路由。网址段：
【发布时间】：2018-08-07 21:25:24
【问题描述】：

即使我已经定义并导入app.module，我的应用程序也无法识别我的路线。

收到数据时，我重定向到这个，但我总是出现这个异常：

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

还有例外

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

【问题讨论】：

您的路线定义为previewStep，但您正在尝试访问PreviewStep
啊，我不知道路由名称是否区分大小写。我会查一下。非常感谢

标签： angular typescript routing

【解决方案1】：

其实角度路由名称是区分大小写的。

这意味着我们必须将 PreviewStep 更改为 previewStep 以匹配路由名称。

要覆盖这种情况，请更改路由名称或创建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
        }
   ]
})

【讨论】：