将angular 2模块导入到我的项目中

Question

我正在尝试将angular2模块导入到我的项目中。

这个模块将帮助我使用json rpc从我们的ERP系统ODOO中获取数据。

下面是模块的链接:https://www.npmjs.com/package/angular2-odoo-jsonrpc。

到目前为止我所做的是：从“@Angular/core”导入{Component}；从“angular2-odoo-jsonrpc”导入{OdooRPCService}；

app.component.ts

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
  providers: [OdooRPCService]

})
export class AppComponent  { name = 'Angular';
constructor(odooRPC: OdooRPCService){
  odooRPC.init({
  odoo_server: "http://localhost:8069",
  http_auth: "[e-mail]:password"
  });
  odooRPC.login('duniakado', '[e-mail]', 'password').then(res => {
  console.log('login success');
  }).catch( err => {
  console.error('login failed', err);
  })
} }

我也在我的索引html中包含了这个模块

<script src="node_modules/angular2-odoo-jsonrpc/odoorpc.service.js"></script>

然后我将该模块包含在我的SystemJs.config.js中

SystemJs.Config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: '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',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'angular2-odoo-jsonrpc': 'npm:angular2-odoo-jsonrpc/odoorpc.service.js'


    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

我的控制台有很多错误

core.umd.js:3491 EXCEPTION: No provider for Http!ErrorHandler.handleError @ core.umd.js:3491(anonymous function) @ core.umd.js:8362ZoneDelegate.invoke @ zone.js:229onInvoke @ core.umd.js:4405ZoneDelegate.invoke @ zone.js:228Zone.run @ zone.js:113(anonymous function) @ zone.js:509ZoneDelegate.invokeTask @ zone.js:262onInvokeTask @ core.umd.js:4396ZoneDelegate.invokeTask @ zone.js:261Zone.runTask @ zone.js:151drainMicroTaskQueue @ zone.js:405ZoneTask.invoke @ zone.js:336
core.umd.js:3496 ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js:3496(anonymous function) @ core.umd.js:8362ZoneDelegate.invoke @ zone.js:229onInvoke @ core.umd.js:4405ZoneDelegate.invoke @ zone.js:228Zone.run @ zone.js:113(anonymous function) @ zone.js:509ZoneDelegate.invokeTask @ zone.js:262onInvokeTask @ core.umd.js:4396ZoneDelegate.invokeTask @ zone.js:261Zone.runTask @ zone.js:151drainMicroTaskQueue @ zone.js:405ZoneTask.invoke @ zone.js:336
core.umd.js:3497 Error: DI Error
    at NoProviderError.BaseError [as constructor] (core.umd.js:1225) [angular]
    at NoProviderError.AbstractProviderError [as constructor] (core.umd.js:1400) [angular]
    at new NoProviderError (core.umd.js:1439) [angular]
    at ReflectiveInjector_._throwOrNull (core.umd.js:3370) [angular]
    at ReflectiveInjector_._getByKeyDefault (core.umd.js:3407) [angular]
    at ReflectiveInjector_._getByKey (core.umd.js:3357) [angular]
    at ReflectiveInjector_.get (core.umd.js:3119) [angular]
    at AppModuleInjector.NgModuleInjector.get (core.umd.js:8914) [angular]
    at CompiledTemplate.proxyViewClass.AppView.injectorGet (core.umd.js:12314) [angular]
    at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (core.umd.js:12694) [angular]
    at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (host.ngfactory.js:19) [angular]
    at CompiledTemplate.proxyViewClass.AppView.createHostView (core.umd.js:12270) [angular]
    at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (core.umd.js:12678) [angular]
    at ComponentFactory.create (core.umd.js:7705) [angular]ErrorHandler.handleError @ core.umd.js:3497(anonymous function) @ core.umd.js:8362ZoneDelegate.invoke @ zone.js:229onInvoke @ core.umd.js:4405ZoneDelegate.invoke @ zone.js:228Zone.run @ zone.js:113(anonymous function) @ zone.js:509ZoneDelegate.invokeTask @ zone.js:262onInvokeTask @ core.umd.js:4396ZoneDelegate.invokeTask @ zone.js:261Zone.runTask @ zone.js:151drainMicroTaskQueue @ zone.js:405ZoneTask.invoke @ zone.js:336
zone.js:392 Unhandled Promise rejection: No provider for Http! ; Zone: <root> ; Task: Promise.then ; Value: NoProviderError {_nativeError: Error: No provider for Http!
    at NoProviderError.BaseError [as constructor] (http://localhost:300…, keys: Array[1], injectors: Array[1]} Error: DI Error
    at NoProviderError.BaseError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1225:31) [angular]
    at NoProviderError.AbstractProviderError [as constructor] (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1400:20) [angular]
    at new NoProviderError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:1439:20) [angular]
    at ReflectiveInjector_._throwOrNull (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3370:23) [angular]
    at ReflectiveInjector_._getByKeyDefault (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3407:29) [angular]
    at ReflectiveInjector_._getByKey (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3357:29) [angular]
    at ReflectiveInjector_.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:3119:25) [angular]
    at AppModuleInjector.NgModuleInjector.get (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:8914:56) [angular]
    at CompiledTemplate.proxyViewClass.AppView.injectorGet (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12314:49) [angular]
    at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12694:53) [angular]
    at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:19:59) [angular]
    at CompiledTemplate.proxyViewClass.AppView.createHostView (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12270:25) [angular]
    at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:12678:56) [angular]
    at ComponentFactory.create (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:7705:29) [angular]consoleError @ zone.js:392_loop_1 @ zone.js:421drainMicroTaskQueue @ zone.js:425ZoneTask.invoke @ zone.js:336
zone.js:394 Error: Uncaught (in promise): Error: No provider for Http!(…)

我应该指出的事实是，我的项目Hello angular工作良好，然后所有变得混乱与这个模块。

提前道谢。

Answer 1

您似乎忘记在@ngmodule中导入httpmodule

@NgModule({
  imports: [ ... HttpModule, ...]
  ...
})
export class SomeModule {