Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Module not found

See original GitHub issue

After running ‘npm install ng2-restangular’

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { RestangularModule } from 'ng2-restangular';
@NgModule({
  imports:      [ BrowserModule,     
                    RestangularModule.forRoot((RestangularProvider) => {
                        RestangularProvider.setBaseUrl('http://localhost:3011/api');
                        RestangularProvider.setDefaultHeaders({'Authorization': 'Bearer UDXPx-Xko0w4BRKajozCVy20X11MRZs1'});
                      }
                    )  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

and adding it in the app.module.ts, I got:

localhost/:23 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng2-restangular(…)

I’m new to Angular2 and can’t find why. Any clue?

Issue Analytics

State:
Created 7 years ago
Comments:13

Top GitHub Comments

1reaction

rshchpkncommented, Nov 23, 2016

You need to add transpiler: 'typescript' to config obj, and 'typescript': 'npm:typescript/lib/typescript.js' to ‘map’. Also install typescript if it not installed. Here the system.config.js file.

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'node_modules/',
    'ng2-restangular': 'node_modules/ng2-restangular/dist/esm/src'
  },
  //map tells the System loader where to look for things
  map: {

    'app': 'app',

    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',

    'typescript': 'npm:typescript/lib/typescript.js',
    'ng2-restangular':                      'ng2-restangular',
    'rxjs':                      'npm:rxjs',
    'lodash':                    'npm:lodash'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      main: "./Rx.js",
      defaultExtension: 'js'
    },
    lodash: {
      main: './lodash.js',
      defaultExtension: 'js'
    },
    "ng2-restangular": {
      main: './index',
      defaultExtension: 'js'
    }
  }
});

1reaction

logvinoleg89commented, Nov 22, 2016

We have live demo on plunker with SystemJS. Here you can check how it works Demo

Most likely you have problems in your SystemJS configs.