title: Intermittent error cannot match any routes unit testing Angular
body: <p>I've read many posts on the subject about using the router testing module and trying to spy on the router.navigate method but none have resolved the issue I have. Every 2nd run of my tests or so I will see the error, here's the first line in full </p>
  
  <pre><code>Uncaught Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'post/view'
  </code></pre>
  
  <p>To reiterate the error has not been seen when I run my app only when testing</p>
  
  <p>It only appears once no matter how many tests are in the component and it's always the first test that it happens for, if I switch the order then it's the new first test that fails with this error</p>
  
  <p>My component is as follows ( unrelated code removed for brevity ) </p>
  
  <pre class="lang-js prettyprint-override"><code>export class CreatePostComponent implements OnInit {
  
    constructor(private postService: PostService,
                private router: Router,
                private location: Location) {
    }
  
    submitPost() {
      this.validMessage = '';
      if (!this.createPostForm.valid) {
        this.validMessage = 'Please fill out the form before submitting!';
        return;
      }
      const post = this.createPostForm.value as IPost;
      this.postService.createPost(post)
        .pipe(first())
        .subscribe(
          data =&gt; {
            this.createPostForm.reset();
  
            //Here's the call that I believe causes the issues
            this.router.navigate(['post/view']);
          },
          error =&gt; {
            return throwError(error);
          }
        );
    }
  }
  </code></pre>
  
  <p>Here's the spec, again unrelated tests removed </p>
  
  <pre class="lang-js prettyprint-override"><code>describe('CreatePostComponent', () =&gt; {
    let component: CreatePostComponent;
    let fixture: ComponentFixture&lt;CreatePostComponent&gt;;
    let http: HttpTestingController;
    let mockPostService;
    let mockLocationService;
  
  
    beforeEach(async(() =&gt; {
      mockPostService = jasmine.createSpyObj(['createPost']);
      mockLocationService = jasmine.createSpyObj(['back']);
      TestBed.configureTestingModule({
        declarations: [CreatePostComponent],
        imports: [ReactiveFormsModule,
          HttpClientTestingModule,
          RouterTestingModule],
        providers: [
          {provide: PostService, useValue: mockPostService},
          {provide: Location, useValue: mockLocationService}]
      })
        .compileComponents();
    }));
  
    beforeEach(() =&gt; {
      http = TestBed.get(HttpTestingController);
      fixture = TestBed.createComponent(CreatePostComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create', () =&gt; {
      expect(component).toBeTruthy();
    });
  </code></pre>
  
  <p>I have also tried spying on the router as below (rest of code unchanged)</p>
  
  <pre class="lang-js prettyprint-override"><code>  beforeEach(async(() =&gt; {
      mockPostService = jasmine.createSpyObj(['createPost']);
      mockLocationService = jasmine.createSpyObj(['back']);
      TestBed.configureTestingModule({
        declarations: [CreatePostComponent],
        imports: [ReactiveFormsModule,
          HttpClientTestingModule,
          RouterTestingModule],
        providers: [
          {provide: PostService, useValue: mockPostService},
          {provide: Location, useValue: mockLocationService}]
      })
        .compileComponents();
  
      spyOn&lt;any&gt;(component['router'], 'navigate').and.returnValue(true);
    }));
  </code></pre>
  
  <p>and I have tried injecting my own mock for navigate as below</p>
  
  <pre class="lang-js prettyprint-override"><code>  beforeEach(async(() =&gt; {
      mockPostService = jasmine.createSpyObj(['createPost']);
      mockLocationService = jasmine.createSpyObj(['back']);
      TestBed.configureTestingModule({
        declarations: [CreatePostComponent],
        imports: [ReactiveFormsModule,
          HttpClientTestingModule],
        providers: [
          {provide: PostService, useValue: mockPostService},
          {provide: Location, useValue: mockLocationService},
          {provide: Router, useValue: {navigate: () =&gt; true}}]
      })
        .compileComponents();
    }));
  </code></pre>