加载 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:
main.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屋!