加载 ngx-restangular 时出错：（SystemJS）模块尚未加载加载“@angular/core”为

Question

作为从 AngularJS 升级到 Angular 的一部分，我已经从 AngularJS 的“restangular”库升级到了 Angular 的“ngx-restangular”库。

我现在收到以下错误和堆栈跟踪，我不知道为什么会这样：

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

好像和加载ngx-restangular有关。这是我的 main.ts：

ma​​in.ts

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

platformBrowserDynamic().bootstrapModule(AppModule);

我最初为我的 AngularJS 应用程序导入根文件 (app.js)，然后我导入主 Angular AppModule 并引导它：

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]);
    }
}

...和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);

在我通过在 System.config 的“map”部分中使用此行成功地将 ngx-restangular 作为模块包含后，发生错误：

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

我尝试更改 main.ts 中的导入顺序，以在加载主 Angular 模块后加载 AngularJS 应用程序，即将其放在最后：

import '../app.js';

我的应用程序的 Angular 端有一项服务，我认为这可能是问题的一部分，因为它是在我的 main.ts 中引导主 Angular 模型时加载的。服务如下所示：

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)
    }
}

这里实际发生了什么以及如何解决错误？

---

更新

我已经意识到这个问题肯定是因为 MyService.ts 中的 restangular 导入。如果我注释掉这一行以及对导入类的任何引用，那么错误就会消失：

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

我需要如何将它导入到我的服务中？

Answer 1

我在加载 ngx-restangular 时遇到了同样的问题。经过漫长的互联网之旅，我找到了解决方案！

在您的 system.config.js 文件中为软件包添加以下选项：

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

这告诉 SystemJS 模块具有 cjs 格式并且它应该可以工作。