Javascript Jasmine和Karma角度测试-路由器出口错误和组件创建测试失败，用于延迟加载组件 我有一个Angular应用程序，可以成功构建和运行 我正在使用ng test 我发现所有组件创建都有错误 我在控制台中看到很多错误，表明无法加载路由器出口 我是一个测角能手，所以任何关于我可以尝试/看什么的评论都可能会有所帮助

更新-来自@Sanket的答案很有用，但我仍然有这个问题。我已经对他的回答发表了评论，以解释剩下的问题

---

与

备份组件加载相关的错误

（我认为路由器出口是一个角度组件，而不是Web组件，因为代码库没有引用

自定义元素\u模式

）

备份模块.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { BackupComponent } from './backup.component';

describe('BackupComponent', () => {
  let component: BackupComponent;
  let fixture: ComponentFixture<BackupComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BackupComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BackupComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should be created', () => {
    expect(component).toBeTruthy();
  });
});

import { Component } from '@angular/core';

@Component({
  selector: 'app-backup',
  templateUrl: './backup.component.html',
  styleUrls: ['./backup.component.css']
})
export class BackupComponent {

  constructor() { }

}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { AccordionModule } from 'ngx-bootstrap';

import { BackupRoutingModule } from './backup-routing.module';
import { BackupComponent } from './components/backup/backup.component';
import { BackupEditComponent } from './components/backup-edit/backup-edit.component';
import { BackupItemComponent } from './components/backup-item/backup-item.component';
import { BackupListComponent } from './components/backup-list/backup-list.component';
import { SharedModule } from '../shared/shared.module';
import { CommonAngularWidgetsLibModule } from '@ecotech/common-angular-widgets-lib';

@NgModule({
  declarations: [
    BackupComponent,
    BackupEditComponent,
    BackupItemComponent,
    BackupListComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    AccordionModule,
    SharedModule,
    CommonAngularWidgetsLibModule,
    BackupRoutingModule
  ]
})
export class BackupModule { }

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { BackupComponent } from './components/backup/backup.component';
import { AuthGuard } from '../guards/auth.guard';
import { BackupEditComponent } from './components/backup-edit/backup-edit.component';
import { PendingChangesGuard } from '../guards/pending-changes.guard';

const routes: Routes = [{
  path: '',
  component: BackupComponent,
  canActivate: [AuthGuard],
  children: [{
    path: 'new',
    component: BackupEditComponent,
    canDeactivate: [PendingChangesGuard]
  }, {
    path: ':id',
    component: BackupEditComponent,
    canDeactivate: [PendingChangesGuard]
  }]
}];

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

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';

import { BackupComponent } from './backup.component';

describe('BackupComponent', () => {
  let component: BackupComponent;
  let fixture: ComponentFixture<BackupComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BackupComponent, BackupListComponent ],
      imports: [RouterTestingModule]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BackupComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should be created', () => {
    expect(component).toBeTruthy();
  });
});

备份.路由.模块.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { BackupComponent } from './backup.component';

describe('BackupComponent', () => {
  let component: BackupComponent;
  let fixture: ComponentFixture<BackupComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BackupComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BackupComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should be created', () => {
    expect(component).toBeTruthy();
  });
});

import { Component } from '@angular/core';

@Component({
  selector: 'app-backup',
  templateUrl: './backup.component.html',
  styleUrls: ['./backup.component.css']
})
export class BackupComponent {

  constructor() { }

}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { AccordionModule } from 'ngx-bootstrap';

import { BackupRoutingModule } from './backup-routing.module';
import { BackupComponent } from './components/backup/backup.component';
import { BackupEditComponent } from './components/backup-edit/backup-edit.component';
import { BackupItemComponent } from './components/backup-item/backup-item.component';
import { BackupListComponent } from './components/backup-list/backup-list.component';
import { SharedModule } from '../shared/shared.module';
import { CommonAngularWidgetsLibModule } from '@ecotech/common-angular-widgets-lib';

@NgModule({
  declarations: [
    BackupComponent,
    BackupEditComponent,
    BackupItemComponent,
    BackupListComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    AccordionModule,
    SharedModule,
    CommonAngularWidgetsLibModule,
    BackupRoutingModule
  ]
})
export class BackupModule { }

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { BackupComponent } from './components/backup/backup.component';
import { AuthGuard } from '../guards/auth.guard';
import { BackupEditComponent } from './components/backup-edit/backup-edit.component';
import { PendingChangesGuard } from '../guards/pending-changes.guard';

const routes: Routes = [{
  path: '',
  component: BackupComponent,
  canActivate: [AuthGuard],
  children: [{
    path: 'new',
    component: BackupEditComponent,
    canDeactivate: [PendingChangesGuard]
  }, {
    path: ':id',
    component: BackupEditComponent,
    canDeactivate: [PendingChangesGuard]
  }]
}];

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

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';

import { BackupComponent } from './backup.component';

describe('BackupComponent', () => {
  let component: BackupComponent;
  let fixture: ComponentFixture<BackupComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BackupComponent, BackupListComponent ],
      imports: [RouterTestingModule]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BackupComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should be created', () => {
    expect(component).toBeTruthy();
  });
});

app.module.ts（缩减）

app.routing.module.ts（削减）-负责延迟加载

备份模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';


const appRoutes:  Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  ...
  { path: 'backups', loadChildren: './backup/backup.module#BackupModule' },
  ... other custom routes
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})

export class AppRoutingModule { }

---

您需要在导入中包含RouterTesting模块，并在声明中包含AppBackupListComponent

下面是测试的示例代码backup.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { BackupComponent } from './backup.component';

describe('BackupComponent', () => {
  let component: BackupComponent;
  let fixture: ComponentFixture<BackupComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BackupComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BackupComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should be created', () => {
    expect(component).toBeTruthy();
  });
});

import { Component } from '@angular/core';

@Component({
  selector: 'app-backup',
  templateUrl: './backup.component.html',
  styleUrls: ['./backup.component.css']
})
export class BackupComponent {

  constructor() { }

}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { AccordionModule } from 'ngx-bootstrap';

import { BackupRoutingModule } from './backup-routing.module';
import { BackupComponent } from './components/backup/backup.component';
import { BackupEditComponent } from './components/backup-edit/backup-edit.component';
import { BackupItemComponent } from './components/backup-item/backup-item.component';
import { BackupListComponent } from './components/backup-list/backup-list.component';
import { SharedModule } from '../shared/shared.module';
import { CommonAngularWidgetsLibModule } from '@ecotech/common-angular-widgets-lib';

@NgModule({
  declarations: [
    BackupComponent,
    BackupEditComponent,
    BackupItemComponent,
    BackupListComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    AccordionModule,
    SharedModule,
    CommonAngularWidgetsLibModule,
    BackupRoutingModule
  ]
})
export class BackupModule { }

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { BackupComponent } from './components/backup/backup.component';
import { AuthGuard } from '../guards/auth.guard';
import { BackupEditComponent } from './components/backup-edit/backup-edit.component';
import { PendingChangesGuard } from '../guards/pending-changes.guard';

const routes: Routes = [{
  path: '',
  component: BackupComponent,
  canActivate: [AuthGuard],
  children: [{
    path: 'new',
    component: BackupEditComponent,
    canDeactivate: [PendingChangesGuard]
  }, {
    path: ':id',
    component: BackupEditComponent,
    canDeactivate: [PendingChangesGuard]
  }]
}];

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

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';

import { BackupComponent } from './backup.component';

describe('BackupComponent', () => {
  let component: BackupComponent;
  let fixture: ComponentFixture<BackupComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BackupComponent, BackupListComponent ],
      imports: [RouterTestingModule]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BackupComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should be created', () => {
    expect(component).toBeTruthy();
  });
});

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“@angular/router/testing”导入{RouterTestingModule}；
从“./backup.component”导入{BackupComponent}；
描述（'备份组件'，（）=>{
let组件：备份组件；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[BackupComponent，BackupListComponent]，
导入：[RouterTestingModule]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（BackupComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
});

---

希望这有帮助。

谢谢@Sanket。如果“路由器出口”是一个角度组件，我仍然会得到一个错误

，然后验证它是这个模块的一部分。

，并且行

从“@Angular/router/testing”导入{RouterTestingModule}在VS代码中被标记为未使用的导入-我认为这很重要您是否在导入中包含RouterTestingModule？如果包含，它不应显示为未使用的importNo，不应显示在邮件应用程序模块中。您应该在这个组件中包含测试床导入。在导入中检查上面的代码。