加载 ngx-restangular 时出错:(SystemJS)模块尚未加载加载“@angular/core"作为 [英] Error when loading ngx-restangular: (SystemJS) Module not already loaded loading "@angular/core" as

问题描述

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

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

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

It seems to be related to loading ngx-restangular. Here is my 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 并引导它:

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

... 和 systemjs.config.js:

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

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

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'

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

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';

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

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?

更新

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

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?

推荐答案

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

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

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

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

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

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

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

这篇关于加载 ngx-restangular 时出错:(SystemJS)模块尚未加载加载“@angular/core"作为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！