title: better way for angular to mock the server response data?
body: <p>I am currently working on a <em>component library</em> which will depend on different servers out there. </p>
  
  <p>I am creating a demo application to use the component library, so all the requests can be caught easily with <a href="https://angular.io/api/common/http/HttpInterceptor" rel="nofollow noreferrer"><code>interceptors</code></a> to mock the server response as this <a href="https://stackblitz.com/edit/httpclient-interceptor-demo?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">demo</a> I created.</p>
  
  <h3>Restrictions</h3>
  
  <ul>
  <li>components themselves will handle the request (components user will just pass in critical arguments);</li>
  <li>no modifications allowed to the components library;</li>
  </ul>
  
  <h3>Reality</h3>
  
  <ul>
  <li>servers sometimes can be unreachable;</li>
  <li>making a demo application to present how to use the components actually doesn't require the actual interaction with servers most of the time;</li>
  </ul>
  
  <p>But still I am curious about: are there other ways to handle this kind of cases? </p>
  
  <p><em>Most of the time, I heard it that interceptors used to <strong>modify</strong> request/response(or cache sometimes) instead of mocking</em>. </p>
  
  <p>Thank you :)</p>