Error when loading ngx-restangular: (SystemJS) Module not already loaded loading “@angular/core” as

问题

I've upgraded from the AngularJS 'restangular' library to the Angular 'ngx-restangular' library, as part of an upgrade from AngularJS to Angular.

I'm now getting the following error and stack trace and I have no idea why it's happening:

sign-in-redirect Error: (SystemJS) Module not already loaded loading "@angular/core" as http://localhost/node_modules/@angular/core/bundles/core.umd.js.
    Error: Module not already loaded loading "@angular/core" as http://localhost/node_modules/@angular/core/bundles/core.umd.js.
        at Object.eval (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:125:19)
        at __webpack_require__ (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:30:30)
        at Object.eval (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:86:15)
        at __webpack_require__ (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:30:30)
        at Object.eval (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:59:33)
        at __webpack_require__ (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:30:30)
        at eval (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:50:18)
        at eval (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:53:10)
    Error loading http://localhost/assets/js/app/main.js
        at Object.eval (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:125:19)
        at __webpack_require__ (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:30:30)
        at Object.eval (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:86:15)
        at __webpack_require__ (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:30:30)
        at Object.eval (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:59:33)
        at __webpack_require__ (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:30:30)
        at eval (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:50:18)
        at eval (http://localhost/node_modules/ngx-restangular/dist/umd/ngx-restangular.js:53:10)
    Error loading http://localhost/assets/js/app/main.js

It seems to be related to loading ngx-restangular. Here is my main.ts:

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import '../app.js';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

I initially import the root file (app.js) for my AngularJS app, then I import the main Angular AppModule and bootstrap it:

AppModule.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

import { AppComponent } from './app.component';
... other imports

@NgModule({
    imports: [BrowserModule, UpgradeModule ],
    declarations: [AppComponent],
    entryComponents: [AppComponent],
    providers: [ WindowRef, MyService]
})
export class AppModule {
    constructor(private upgrade: UpgradeModule) {
    }

    ngDoBootstrap() {
        var ngApp = <HTMLInputElement>document.getElementById('ngApp');
        this.upgrade.bootstrap(document.documentElement, [ngApp.value]);
    }
}

... and the systemjs.config.js:

(function (global) {
    System.config({

    paths: {
      // paths serve as alias
      'npm:': '/node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      'ng-loader': '/assets/js/app/systemjs-angular-loader.js',
      // our app is within the app folder
      'app': '/assets/js/app',

      // angular bundles
      '@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/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'ngx-restangular': 'npm:ngx-restangular/dist/umd/ngx-restangular.js',
      'lodash': 'npm:lodash/lodash.js',
},
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
              loader: false,
          }
        }
      },
      rxjs: {
          defaultExtension: 'js',
          main: 'Rx.js'
      }
    }
  });
})(this);

The error is occurring after I'm successfully including ngx-restangular as a module by using this line in the 'map' section of the System.config:

'ngx-restangular': 'npm:ngx-restangular/dist/umd/ngx-restangular.js'

I've tried changing the order of imports in my main.ts, to load the AngularJS app after loading the main Angular module, i.e. by putting this last:

import '../app.js';

I have a service that's part of the Angular side of my app that I think may be part of the issue, as it's loaded when the main Angular model is bootstrapped in my main.ts. The service looks like this:

MyService.ts

import { Injectable } from '@angular/core';
import { myModel } from './my-model';
import { RestangularModule, Restangular } from 'ngx-restangular';
import { WindowRef } from './window-ref';

@Injectable()
export class MyService {

    constructor(private restangular: Restangular, private winRef: WindowRef) { }

    doSomething(model): MyModel {
        return this.restangular.all('api/do-something').post(model)
    }
}

What is actually happening here and how do I resolve the error?

Update

I've realised that the issue is definitely because of the restangular import in MyService.ts. If I comment out this line and any references to the imported classes then the error goes away:

import { RestangularModule, Restangular } from 'ngx-restangular';

How do I need to import this into my service?

回答1:

I had the same issue loading my ngx-restangular. After a long journey through the Internet, I found the solution!

In your system.config.js file add following options for packages:

packages: {
    ...
    'ngx-restangular': {
        format: 'cjs',
    },
    ...
}

This tells the SystemJS the module has cjs format and it should work.

来源：https://stackoverflow.com/questions/48676950/error-when-loading-ngx-restangular-systemjs-module-not-already-loaded-loading

标签

javascript

angularjs

angular

typescript

systemjs