Юнит тест Жасмин на Angular обратный маршрут не найден

Question

Я недавно обновился до Angular 9.1.0-r c .2 и все выглядит в рабочем состоянии. Я могу получить приложение, обслуживаемое локально и на сервере, но при запуске модульных тестов с жасмином в каждом тесте я получаю следующую ошибку:

    Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'not-found'
    Error: Cannot match any routes. URL Segment: 'not-found'
        at ApplyRedirects.noMatchError (http://localhost:9876/Users/asithadesilva/Sites/my-project/node_modules/@angular/router/fesm2015/router.js:4327:1)
        at CatchSubscriber.selector (http://localhost:9876/Users/asithadesilva/Sites/my-project/node_modules/@angular/router/fesm2015/router.js:4291:1)
        at CatchSubscriber.error (http://localhost:9876/Users/asithadesilva/Sites/my-project/node_modules/rxjs/_esm2015/internal/operators/catchError.js:29:1)
        at MapSubscriber._error (http://localhost:9876/Users/asithadesilva/Sites/my-project/node_modules/rxjs/_esm2015/internal/Subscriber.js:75:1)
        at MapSubscriber.error (http://localhost:9876/Users/asithadesilva/Sites/my-project/node_modules/rxjs/_esm2015/internal/Subscriber.js:55:1)
        at MapSubscriber._error (http://localhost:9876/Users/asithadesilva/Sites/my-project/node_modules/rxjs/_esm2015/internal/Subscriber.js:75:1)
        at MapSubscriber.error (http://localhost:9876/Users/asithadesilva/Sites/my-project/node_modules/rxjs/_esm2015/internal/Subscriber.js:55:1)
        at MapSubscriber._error (http://localhost:9876/Users/asithadesilva/Sites/my-project/node_modules/rxjs/_esm2015/internal/Subscriber.js:75:1)
        at MapSubscriber.error (http://localhost:9876/Users/asithadesilva/Sites/my-project/node_modules/rxjs/_esm2015/internal/Subscriber.js:55:1)
        at ThrowIfEmptySubscriber._error (http://localhost:9876/Users/asithadesilva/Sites/my-project/node_modules/rxjs/_esm2015/internal/Subscriber.js:75:1)
    error properties: Object({ rejection: Error: Cannot match any routes. URL Segment: 'not-found', promise: [object Promise], zone: Zone({ _parent: Zone({ _parent: Zone({ _parent: Zone({ _parent: null, _name: '<root>', _properties: Object({  }), _zoneDelegate: ZoneDelegate({ _taskCounts: Object({ microTask: 0, macroTask: 0, eventTask: 0 }), zone: <circular reference: Object>, _parentDelegate: null, _forkZS: null, _forkDlgt: null, _forkCurrZone: null, _interceptZS: null, _interceptDlgt: null, _interceptCurrZone: null, _invokeZS: null, _invokeDlgt: null, _invokeCurrZone: null, _handleErrorZS: null, _handleErrorDlgt: null, _handleErrorCurrZone: null, _scheduleTaskZS: null, _scheduleTaskDlgt: null, _scheduleTaskCurrZone: null, _invokeTaskZS: null, _invokeTaskDlgt: null, _invokeTaskCurrZone: null, _cancelTaskZS: null, _cancelTaskDlgt: null, _cancelTaskCurrZone: null, _hasTaskZS: null, _hasTaskDlgt: null, _hasTaskDlgtOwner: null, _hasTaskCurrZone: null }) }), _name: 'ProxyZone', _properties: Object({ ProxyZo ...

Вот как я настроить мои маршруты: app-routing.module.ts

import { MetaGuard } from '@ngx-meta/core';
import { UserModule } from './modules/user/user.module';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoggedInGuard } from 'ngx-auth-firebaseui';

import { AdminGuard } from '@shared/guards/admin.guard';
import { CourseModule } from './modules/course/course.module';
import { AdminModule } from './modules/admin/admin.module';
import { PagesModule } from './pages/pages.module';

const routes: Routes = [
  {
    path: '',
    loadChildren: async (): Promise<PagesModule> =>
      import('./pages/pages.module').then((m: { PagesModule: PagesModule }) => m.PagesModule)
  },
  {
    canActivateChild: [MetaGuard],
    path: 'admin',
    loadChildren: async (): Promise<AdminModule> =>
      import('./modules/admin/admin.module').then((m: { AdminModule: AdminModule }) => m.AdminModule),
    canActivate: [LoggedInGuard, AdminGuard]
  },
  {
    path: 'course',
    loadChildren: async (): Promise<CourseModule> =>
      import('./modules/course/course.module').then((m: { CourseModule: CourseModule }) => m.CourseModule),
    data: {
      title: 'Course'
    }
  },
  {
    path: '**',
    redirectTo: '/not-found',
    data: {
      title: 'Page Not Found'
    }
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled'
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

pages-routing.module.ts

import { NotFoundComponent } from './not-found/not-found.component';
import { HomeComponent } from './home/home.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'not-found',
    component: NotFoundComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PagesRoutingModule {}

app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MetaModule.forRoot({
      provide: MetaLoader,
      useFactory: metaFactory
    }),
    FirebaseModule,
    SharedModule,
    Angulartics2Module.forRoot({
      gst: {
        trackingIds: [environment.googleAnalytics]
      }
    })
  ],
  bootstrap: [AppComponent]
})

В компонентах, которые фактически вызывают этот маршрут: this.router.navigate(['not-found']);

Что я пробовал:

• Удалите вызовы Asyn c в Route
• LazyLoad Children: loadChildren: './modules/course/course.module#CourseModule'
• Set this.router.navigate(['/not-found'])
• Загружен NotFoundComponent непосредственно в основной app-routing.module. ts
• Когда я закомментирую любой компонент, который использует этот маршрут, модульные тесты работают нормально.

Обратите внимание, что когда я работаю с приложением, я могу попасть на страницу не найден. Я как бы застрял на этом, и был бы признателен за любые намеки на то, что может быть причиной этого.

Answer 1

Похоже, я смог решить проблему благодаря ответу здесь: { ссылка }

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule.withRoutes([{ path: 'not-found', component: NotFoundComponent }]),
        ...,
      ],
      declarations: [..., NotFoundComponent],
    }).compileComponents();
  }));

Отредактируйте свой RouterTestingModule и используйте withRoutes, добавьте путь и Компонент маршрута, который отсутствует. Оригинальный ответ подробно объясняет, почему это происходит.