ngx-restangular installed in node_modules folder -

Question

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:

npm install --save ngx-restangular@1.0.13

This is the correct way to install ngx-restangular for Angular 4 (see https://www.npmjs.com/package/ngx-restangular#how-do-i-add-this-to-my-project-in-angular-4)

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:

MyService.ts

import { Injectable } from '@angular/core';
import { RestangularModule, Restangular } from 'ngx-restangular';

@Injectable()
export class MyService {
   ... service code

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 Angular2 & TypeScript importing of node_modules for an excellent explanation of how this works.

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:

    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

So, looking at the following line it seems that SystemJS may be looking for ngx-restangular in the root of my app:

(SystemJS) XHR error (404 Not Found) loading http://localhost/ngx-restangular

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:

<script src="/node_modules/ngx-restangular/dist/umd/ngx-restangular.js"></script>