title: Unit Testing Error: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https
body: <p>I am getting the following error message when writing my Angular unit tests: </p>
  
  <pre><code>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.
  </code></pre>
  
  <p>I believe the source of the problem is coming from the async calls made in the ngOnInit(). I have looked through the similar answers but I cannot seem to debug this cryptic error. Here is the component with the async calls:</p>
  
  <pre><code>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&lt;IBlogPost[]&gt; = this.store.select("posts", "blogs");
    blogPost: IBlogPost;
    paramId: string;
  
    constructor(
      private router: Router,
      private route: ActivatedRoute,
      private store: Store&lt;IAppState&gt;,
      private postsService: PostsService
    ) {}
  
    ngOnInit() {
      this.paramId = this.route.snapshot.params.id;
  
      this.mode$ = this.store.select("mode").subscribe(mode =&gt; {
        (this.editMode = mode.edit), (this.createMode = mode.create);
      });
  
      if (this.createMode) this.setDefaultValues();
      else {
        this.blog$
          .pipe(
            map(posts =&gt; {
              return posts.find(post =&gt; post.id == this.paramId);
            })
          )
          .subscribe(post =&gt; (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 &amp;&amp; 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();
    }
  }
  </code></pre>
  
  <p>And here is the following Template:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;h1 *ngIf="createMode; else editPostTitle"&gt;Create a New Blog Post&lt;/h1&gt;
      &lt;ng-template #editPostTitle&gt;
        &lt;h1&gt;Edit Blog Post&lt;/h1&gt;
      &lt;/ng-template&gt;
      &lt;br&gt;
      &lt;form #f="ngForm" (ngSubmit)="onSubmitForm(f)"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-7"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="Title"&gt;Title&lt;/label&gt;
              &lt;input #formTitle="ngModel" type="text" name="title" maxlength="34" [(ngModel)]="blogPost.title" class="form-control" id="post-title"
                placeholder="Enter title" required&gt;
              &lt;div *ngIf="formTitle?.invalid &amp;&amp; formTitle.touched" maxlength="102" class="alert alert-danger"&gt;
                Title field is required
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="Descripion"&gt;Description&lt;/label&gt;
              &lt;input #desc="ngModel" type="text" name="description" [(ngModel)]="blogPost.description" class="form-control" id="post-desc"
                [value]="blogPost.description" required&gt;
              &lt;div *ngIf="desc?.invalid &amp;&amp; desc.touched" class="alert alert-danger"&gt;
                A description/summary of this post is required
              &lt;/div&gt;
              &lt;small id="emailHelp" class="form-text text-muted"&gt;A brief description of this post.&lt;/small&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="Image Url"&gt;Image Url&lt;/label&gt;
              &lt;input #image="ngModel" type="url" name="imageUrl" [(ngModel)]="blogPost.imageUrl" class="form-control" id="post-imageURL"
                [value]="blogPost.imageUrl" required&gt;
              &lt;div *ngIf="image?.invalid &amp;&amp; image?.touched" class="alert alert-danger"&gt;
                Image is required
              &lt;/div&gt;
              &lt;small id="emailHelp" class="form-text text-muted"&gt;Cover image for blog entry&lt;/small&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-5"&gt;
            &lt;preview-card [previewPost]="blogPost"&gt;&lt;/preview-card&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group" style="margin-top: 20px"&gt;
          &lt;quill-editor #quill="ngModel" [style]="{height: '420px'}" [(ngModel)]="blogPost.content" name="content"&gt;&lt;/quill-editor&gt;
        &lt;/div&gt;
        &lt;div style="float: right; margin-bottom: 20px"&gt;
          &lt;button type="submit" class="btn btn-primary" style="margin-right: 5px"&gt;Submit&lt;/button&gt;
          &lt;button type="button" *ngIf="paramId" (click)="onDeletePost()" class="btn btn-danger" style="margin-right: 5px"&gt;Delete&lt;/button&gt;
          &lt;button type="button" pull-right class="btn btn-default" (click)="onCancel()"&gt;Cancel&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas on how to resolve this? I have tried adding safe navigation operators, but I still get this error.</p>