title: Error: No provider for ShopService! Using a service in another service
body: <p>EDIT: a lot of this question was deleted as it became less relevant as I found out more about the problem.</p>
  
  <p>I get this error in the console:</p>
  
  <blockquote>
    <p>Error in app/find-page/find-page.component.html:1:3 caused by: No
    provider for ShopService!</p>
  </blockquote>
  
  <p>The place where I use ShopService is in another Service called ResultService. How do I declare a provider for ShopService in ResultService? Because when I add ShopService to the providers of the only module in the app (appModule), it says no provider for ShopService.</p>
  
  <p>Is this because ResultService is not declared in appModule, causing the provider in appModule not to work for ResultService? Where would I declare it in AppModule? Because I added it to the declarations of appModule I got:</p>
  
  <blockquote>
    <p>find:21 Error: (SystemJS) Unexpected value 'ResultService' declared by
    the module 'AppModule'(…)</p>
  </blockquote>
  
  <p>code:</p>
  
  <p>ResultService:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Result } from '../result';
  import { RESULTS } from '../mock-results';
  import { ShopService } from './shop.service';
  
  @Injectable()
  export class ResultService {
  
  constructor(private shopService: ShopService) {}
  
    getResults(): Result[] {
      RESULTS.forEach(result =&gt; {
        result.nearbyShops = this.shopService.getShops();
      });
      return RESULTS;
    }
  }
  </code></pre>
  
  <p>ShopService:</p>
  
  <pre><code>import { Shop } from '../result';
  import { SHOPS } from '../mock-shops';
  import { Injectable } from '@angular/core';
  
  @Injectable()
  export class ShopService {
    getShops(): Shop[] {
      return SHOPS;
    }
  }
  </code></pre>