title: ngx-restangular installed in node_modules folder - 404 when importing from Angular service
body: <p>I'm upgrading an AngularJS solution to Angular 4 and I need to upgrade the 'restangular' library to use ngx-restangular instead, because I have an existing AngularJS service that uses restangular, and I need to convert it to Angular 4. I've installed ngx-restangular using:</p>
  
  <pre><code>npm install --save ngx-restangular@1.0.13
  </code></pre>
  
  <p>This is the correct way to install ngx-restangular for Angular 4 (see <a href="https://www.npmjs.com/package/ngx-restangular#how-do-i-add-this-to-my-project-in-angular-4" rel="nofollow noreferrer">https://www.npmjs.com/package/ngx-restangular#how-do-i-add-this-to-my-project-in-angular-4</a>)</p>
  
  <p>I now have ngx-restangular successfully installed under node_modules/ngx-restangular. I'm trying to import this at the top of my new Angular 4 service, which is using TypeScript like this:</p>
  
  <p><strong>MyService.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { RestangularModule, Restangular } from 'ngx-restangular';
  
  @Injectable()
  export class MyService {
     ... service code
  </code></pre>
  
  <p>Now this should work correctly, since the way that imports work is that when referencing a module by using an absolute path, like I'm doing here with ngx-restangular, TypeScript will look for an external module. See <a href="https://stackoverflow.com/questions/35159872/angular2-typescript-importing-of-node-modules">Angular2 &amp; TypeScript importing of node_modules</a> for an excellent explanation of how this works.</p>
  
  <p>My app is loading @angular/core fine and this is referenced in the same way as ngx-restangular, from the same file. With ngx-restangular though, I'm getting the following stack trace in the console though when I run the app:</p>
  
  <pre><code>    Failed to load resource: the server responded with a status of 404 (Not Found)
  sign-in-redirect:420 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost/ngx-restangular
      Error: XHR error (404 Not Found) loading http://localhost/ngx-restangular
          at XMLHttpRequest.wrapFn (http://localhost/node_modules/zone.js/dist/zone.js:1166:39)
          at ZoneDelegate.invokeTask (http://localhost/node_modules/zone.js/dist/zone.js:421:31)
          at Zone.runTask (http://localhost/node_modules/zone.js/dist/zone.js:188:47)
          at ZoneTask.invokeTask [as invoke] (http://localhost/node_modules/zone.js/dist/zone.js:496:34)
          at invokeTask (http://localhost/node_modules/zone.js/dist/zone.js:1517:14)
          at XMLHttpRequest.globalZoneAwareCallback (http://localhost/node_modules/zone.js/dist/zone.js:1543:17)
      Error loading http://localhost/ngx-restangular as "ngx-restangular" from http://localhost/assets/js/app/MyService.js
          at XMLHttpRequest.wrapFn (http://localhost/node_modules/zone.js/dist/zone.js:1166:39)
          at ZoneDelegate.invokeTask (http://localhost/node_modules/zone.js/dist/zone.js:421:31)
          at Zone.runTask (http://localhost/node_modules/zone.js/dist/zone.js:188:47)
          at ZoneTask.invokeTask [as invoke] (http://localhost/node_modules/zone.js/dist/zone.js:496:34)
          at invokeTask (http://localhost/node_modules/zone.js/dist/zone.js:1517:14)
          at XMLHttpRequest.globalZoneAwareCallback (http://localhost/node_modules/zone.js/dist/zone.js:1543:17)
      Error loading http://localhost/ngx-restangular as "ngx-restangular" from http://localhost/assets/js/app/MyService.js
  </code></pre>
  
  <p>So, looking at the following line it seems that SystemJS may be looking for ngx-restangular in the root of my app:</p>
  
  <pre><code>(SystemJS) XHR error (404 Not Found) loading http://localhost/ngx-restangular
  </code></pre>
  
  <p>Why is this happening, and how do I need to import ngx-restangular? I tried adding this as a script tag, but it doesn't help:</p>
  
  <pre><code>&lt;script src="/node_modules/ngx-restangular/dist/umd/ngx-restangular.js"&gt;&lt;/script&gt;
  </code></pre>