Ошибка модульного тестирования: запросы на разные источники поддерживаются только для схем протоколов: http, data, chrome, chrome-extension, https

Question

Я получаю следующее сообщение об ошибке при написании моих модульных тестов Angular:

zone.js:2990 Failed to load 
ng:///DynamicTestModule/MainNavComponent.ngfactory.js: Cross origin 
requests are only supported for protocol schemes: http, data, chrome, 
chrome-extension, https.

Я считаю, что источником проблемы являются асинхронные вызовы, сделанные в ngOnInit (). Я просмотрел похожие ответы, но не могу отладить эту загадочную ошибку. Вот компонент с асинхронными вызовами:

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";
import { NgForm } from "@angular/forms";

import { Store } from "@ngrx/store";
import { IAppState } from "../store/store";
import { PostsService } from "../posts/posts.service";
import { Subscription, Observable } from "rxjs";
import { map } from "rxjs/operators";
import { IBlogPost } from "../model/blogPost.model";

@Component({
  selector: "app-post-form",
  templateUrl: "./post-form.component.html",
  styleUrls: ["./post-form.component.css"]
})
export class PostFormComponent implements OnInit, OnDestroy {
  mode$: Subscription;
  editMode: boolean;
  createMode: boolean;
  blog$: Observable<IBlogPost[]> = this.store.select("posts", "blogs");
  blogPost: IBlogPost;
  paramId: string;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private store: Store<IAppState>,
    private postsService: PostsService
  ) {}

  ngOnInit() {
    this.paramId = this.route.snapshot.params.id;

    this.mode$ = this.store.select("mode").subscribe(mode => {
      (this.editMode = mode.edit), (this.createMode = mode.create);
    });

    if (this.createMode) this.setDefaultValues();
    else {
      this.blog$
        .pipe(
          map(posts => {
            return posts.find(post => post.id == this.paramId);
          })
        )
        .subscribe(post => (this.blogPost = post));
    }
  }

  private setDefaultValues() {
    return (this.blogPost = {
      title: "Title of Blog Post",
      description: "A brief description of the blog post entry",
      imageUrl:
        "http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/w3css/img_mountains_wide.jpg"
    });
  }

  onSubmitForm(entry: NgForm) {
    if (!!this.paramId && confirm("Update this Blog Post?"))
      this.postsService.updatePost(this.blogPost.id, entry.value);
    else if (this.createMode) this.postsService.createPost(entry);

    this.router.navigate(["/main"]);
  }

  onDeletePost() {
    //if user cancels prompt, function finishes without calling delete function
    if (!confirm("Are you sure you want to delete this Post?")) return;

    this.postsService.deletePost(this.blogPost.id);
    this.router.navigate(["/main"]);
  }

  onCancel() {
    this.router.navigate(["/main"]);
  }

  ngOnDestroy() {
    this.mode$.unsubscribe();
  }
}

А вот следующий шаблон:

<div class="container">
  <div class="row">
    <h1 *ngIf="createMode; else editPostTitle">Create a New Blog Post</h1>
    <ng-template #editPostTitle>
      <h1>Edit Blog Post</h1>
    </ng-template>
    <br>
    <form #f="ngForm" (ngSubmit)="onSubmitForm(f)">
      <div class="row">
        <div class="col-md-7">
          <div class="form-group">
            <label for="Title">Title</label>
            <input #formTitle="ngModel" type="text" name="title" maxlength="34" [(ngModel)]="blogPost.title" class="form-control" id="post-title"
              placeholder="Enter title" required>
            <div *ngIf="formTitle?.invalid && formTitle.touched" maxlength="102" class="alert alert-danger">
              Title field is required
            </div>
          </div>
          <div class="form-group">
            <label for="Descripion">Description</label>
            <input #desc="ngModel" type="text" name="description" [(ngModel)]="blogPost.description" class="form-control" id="post-desc"
              [value]="blogPost.description" required>
            <div *ngIf="desc?.invalid && desc.touched" class="alert alert-danger">
              A description/summary of this post is required
            </div>
            <small id="emailHelp" class="form-text text-muted">A brief description of this post.</small>
          </div>
          <div class="form-group">
            <label for="Image Url">Image Url</label>
            <input #image="ngModel" type="url" name="imageUrl" [(ngModel)]="blogPost.imageUrl" class="form-control" id="post-imageURL"
              [value]="blogPost.imageUrl" required>
            <div *ngIf="image?.invalid && image?.touched" class="alert alert-danger">
              Image is required
            </div>
            <small id="emailHelp" class="form-text text-muted">Cover image for blog entry</small>
          </div>
        </div>
        <div class="col-md-5">
          <preview-card [previewPost]="blogPost"></preview-card>
        </div>
      </div>
      <div class="form-group" style="margin-top: 20px">
        <quill-editor #quill="ngModel" [style]="{height: '420px'}" [(ngModel)]="blogPost.content" name="content"></quill-editor>
      </div>
      <div style="float: right; margin-bottom: 20px">
        <button type="submit" class="btn btn-primary" style="margin-right: 5px">Submit</button>
        <button type="button" *ngIf="paramId" (click)="onDeletePost()" class="btn btn-danger" style="margin-right: 5px">Delete</button>
        <button type="button" pull-right class="btn btn-default" (click)="onCancel()">Cancel</button>
      </div>
    </form>
  </div>
</div>

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