title: Angular Mock ActivatedRoute using Snapshot and ParamMap
body: <p>I'm using this, from <a href="https://angular.io/tutorial/toh-pt5#extract-the-id-route-parameter" rel="noreferrer">here</a>:</p>
  
  <pre><code>constructor(private heroService: HeroService,
      private activatedRoute: ActivatedRoute) {
  }
  
  ngOnInit() {
      const heroId = this.activatedRoute.snapshot.paramMap.get('id');
      this.heroService.getHeroById(heroId).subscribe((hero: Hero) =&gt; {
          ...
      });
  }
  </code></pre>
  
  <p>Now I have a unit test that needs to mock this ActivatedRoute. I've already check some answers here in stackoverflow but without luck.</p>
  
  <p><strong>Notice that I'm using snapshot.paramMap</strong> so many solutions do not work at all. For example, <a href="https://stackoverflow.com/questions/46823177/how-to-unit-test-a-angular-4-component-which-uses-router-parammap">this</a>, <a href="https://stackoverflow.com/questions/40789637/how-to-mock-an-activatedroute-parent-route-in-angular2-for-testing-purposes">this</a>, and <a href="https://gist.github.com/benjamincharity/3d25cd2c95b6ecffadb18c3d4dbbd80b" rel="noreferrer">this</a> do not work.</p>
  
  <p>I think the near valid answer could be:</p>
  
  <pre><code>{
      provide: ActivatedRoute,
      useValue: {paramMap: Observable.of(convertToParamMap({id: 1}))}
  }
  </code></pre>
  
  <p>But does not work either.</p>
  
  <p>The error showing is:</p>
  
  <pre><code>Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///HeroesModule/HeroDetailComponent_Host.ngfactory.js'.
      error properties: Object({ INDEX_SIZE_ERR: 1, DOMSTRING_SIZE_ERR: 2, HIERARCHY_REQUEST_ERR: 3, WRONG_DOCUMENT_ERR: 4, INVALID_CHARACTER_ERR: 5, NO_DATA_ALLOWED_ERR: 6, NO_MODIFICATION_ALLOWED_ERR: 7, NOT_FOUND_ERR: 8, NOT_SUPPORTED_ERR: 9, INUSE_ATTRIBUTE_ERR: 10, INVALID_STATE_ERR: 11, SYNTAX_ERR: 12, INVALID_MODIFICATION_ERR: 13, NAMESPACE_ERR: 14, INVALID_ACCESS_ERR: 15, VALIDATION_ERR: 16, TYPE_MISMATCH_ERR: 17, SECURITY_ERR: 18, NETWORK_ERR: 19, ABORT_ERR: 20, URL_MISMATCH_ERR: 21, QUOTA_EXCEEDED_ERR: 22, TIMEOUT_ERR: 23, INVALID_NODE_TYPE_ERR: 24, DATA_CLONE_ERR: 25, code: 19 })
  </code></pre>
  
  <p>This is because I'm doing a request that responses with status 500 because <strong>paramMap is undefined</strong> so there is no id on the request.</p>
  
  <p>... any ideas?</p>
  
  <p>Thanks and BR</p>