0

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>
Chris Halcrow
  • 28,994
  • 18
  • 176
  • 206
  • 1
    You definitely can't add it as a script tag because it needs the module loader to work because you import it later. Is it registered in the system JS configuration file? You can put it under map or packages – Aluan Haddad Feb 07 '18 at 23:32
  • 1
    That was it! I added it under map. Please add this as an answer Aluan so I can award it. – Chris Halcrow Feb 07 '18 at 23:38
  • Aluan sorry to bug you again but I have a different, related issue now with another question. If you're able to advise that would again be greatly appreciated! https://stackoverflow.com/questions/48676950/error-when-loading-ngx-restangular-systemjs-module-not-already-loaded-loading – Chris Halcrow Feb 08 '18 at 03:15

0 Answers0