角度单元测试：未捕获错误：未捕获（承诺）：错误：无法匹配任何路由

Question

我正在为运行时的 Angular 单元测试而苦苦挣扎 “ng 测试”，我在终端中收到以下错误。

ERROR: 'Unhandled Promise rejection:', 'Cannot match any routes. URL Segment: 'my-account'', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: Cannot match any routes. URL Segment: 'my-account'
Error: Cannot match any routes. URL Segment: 'my-account'

ERROR: 'Unhandled Promise rejection:', 'Cannot match any routes. URL Segment: 'my-cards'', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: Cannot match any routes. URL Segment: 'my-cards'
Error: Cannot match any routes. URL Segment: 'my-cards'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/router/fesm5/router.js:2469:1)

ERROR: 'Unhandled Promise rejection:', 'Cannot match any routes. URL Segment: 'add-beneficiary/manage-recurring-transfer'', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: Cannot match any routes. URL Segment: 'add-beneficiary/manage-recurring-transfer'
Error: Cannot match any routes. URL Segment: 'add-beneficiary/manage-recurring-transfer'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/router/fesm5/router.js:2469:1)


ERROR: 'Unhandled Promise rejection:', 'Cannot match any routes. URL Segment: 'home'', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', Error: Cannot match any routes. URL Segment: 'home'
Error: Cannot match any routes. URL Segment: 'home'

路由文件如下-

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OtpComponent } from './otp/otp.component';
import { AuthGuard } from './_guards/auth.guard'

const routes: Routes = [
  { path: '', loadChildren: './login/login.module#LoginModule' },
  {
    path: 'login',
    loadChildren: './login/login.module#LoginModule'
  },
  {
    path: 'forgot-password',
    loadChildren: './forgot-password/forgot-password.module#ForgotPasswordModule'
  },
  {
    path: 'home',
    loadChildren: './home/home.module#HomeModule', canActivate: [AuthGuard]
  },
  {
    path: 'my-account',
    loadChildren: './my-account/my-account.module#MyAccountModule', canActivate: [AuthGuard]
  },
  {
    path: 'account-setting',
    loadChildren: './account-setting/account-setting.module#AccountSettingModule', canActivate: [AuthGuard]
  },
  {
    path: 'create-account',
    loadChildren: './create-account/create-account.module#CreateAccountModule',
  },
  {
    path: 'my-cards',
    loadChildren: './my-cards/my-cards.module#MyCardsModule', canActivate: [AuthGuard]
  },
  {
    path: 'my-cards/:card_id',
    loadChildren: './my-cards/my-cards.module#MyCardsModule', canActivate: [AuthGuard]
  },
  {
    path: 'faq',
    loadChildren: './faq/faq.module#FaqModule'
  },
  {
    path: 'change-password',
    loadChildren: './change-password/change-password.module#ChangePasswordModule'
  },
  {
    path: 'add-beneficiary',
    loadChildren: './add-beneficiary/add-beneficiary.module#AddBeneficiaryModule', canActivate: [AuthGuard]
  },
  {
    path: 'give-feedback',
    loadChildren: './feedback/feedback.module#FeedbackModule', canActivate: [AuthGuard]
  },
  {
    path: 'my-profile',
    loadChildren: './my-profile/my-profile.module#MyProfileModule', canActivate: [AuthGuard]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true, onSameUrlNavigation: 'reload' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { PolymerModule } from '@codebakery/origami';
import { AppComponent } from './app.component';

import { AuthGuard } from './_guards/auth.guard';
import { LoginModule } from './login/login.module';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PolymerModule,
    BrowserAnimationsModule,
    HttpClientModule,
    RouterModule,
    LoginModule,
    SharedModule,
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MbwHttpInterceptor,
      multi: true,
    },
    AuthGuard
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule { }

请帮助我在上面遗漏或做错了什么....

我还尝试了 stackoverflow 的多种解决方案，在具有路由的组件的 spec.ts 文件中尝试使用 RouterTestingModule.withRoutes[]，

还尝试将 routerLink="/home" 更改为 [routerLink]=['home'] 这也没有用， 在运行 ng 测试时，上述错误仍然存在....

Answer 1

您必须通过 RouterModule 或 RouterTestingModule 提供路由。

RouterTestingModule.withRoutes(
      [
        {path: 'home', component: HomeComponent}
      ]
    )

如果你只想让它识别路由而不调用组件，你可以使用“redirectTo”：

{path: 'home', redirectTo: ''}