title: TypeError: Cannot read property '0' of undefined when reading params of ActivatedRoute - Angular 6 testing in Jasmine/Karma
body: <p>I'm trying to test a component that reads the Id param from the Activated route, currently my goal is to get the component to render correctly but I can't figure out why the test fails.</p>
  
  <p>I have passed the ActivatedRoute in the same way for a similar component and there it worked without any problem.</p>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>@Component({
    selector: 'app-recipe-detail',
    templateUrl: './recipe-detail.component.html',
    styleUrls: ['./recipe-detail.component.css']
  })
  export class RecipeDetailComponent implements OnInit {
     recipeState: Observable&lt;fromRecipe.State&gt;;
     id: number;
    constructor(
      private route: ActivatedRoute,
      private router: Router,
      private store: Store&lt;fromRecipe.FeatureState&gt;
      ) { }
  
     // pass the "id" to return the index of the array
    ngOnInit() {
      this.route.params
        .subscribe((params: Params) =&gt; {
        this.id = +params['id'];
        this.recipeState = this.store.select('recipes');
      });
    }
  
    onAddToShopping() {
      this.store.select('recipes').pipe(take(1)).subscribe((recipeState: fromRecipe.State) =&gt; {
        this.store.dispatch(new ShoppingListAction.AddIngredients(recipeState.recipes[this.id].ingredients));
      });
    }
  
    onEditRecipe() {
      this.router.navigate(['edit'], {relativeTo: this.route});
    }
  
    onDeleteRecipe() {
      this.store.dispatch(new RecipeActions.DeleteRecipe(this.id));
      this.router.navigate(['./recipes']);
    }
  }
  </code></pre>
  
  <p><strong>Spec File</strong></p>
  
  <pre><code>describe('Recipe Detail Component should', () =&gt; {
    let fixture: ComponentFixture&lt;RecipeDetailComponent&gt;;
    let component: RecipeDetailComponent;
    let store: TestStore&lt;any&gt;;
    const router = {
      navigate: jasmine.createSpy('navigate')
    };
    let dispatchSpy;
  
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [ RecipeDetailComponent ],
        imports: [RouterTestingModule],
        providers: [
          {provide: Store, useClass: TestStore},
          { provide: Router, useValue: router },
          {
            provide: ActivatedRoute,
            useValue: {
              params: of({ id: 0 })
            }
          }],
      }).compileComponents();
    });
  
    beforeEach(async(inject([Store], (testStore: TestStore&lt;any&gt;) =&gt; {
      store = testStore;
      testStore.setState({initialState});
      fixture = TestBed.createComponent(RecipeDetailComponent);
      component = fixture.debugElement.componentInstance;
      fixture.detectChanges();
    })));
  
    it('render correctly', () =&gt; {
      console.log(component);
      expect(component).toBeTruthy();
    });
  });
  </code></pre>