Question

我尝试使用角度2作为前端连接我的弹簧启动项目作为我的后端。基于Web服务，我的后端提供了一个存在于JSON上的API，然后从这里建立我的前端，然后尝试使用Restful服务。最终，没有组件在运行，在我的网络浏览器上显示三个错误的空白页面说：

错误1：

ERROR Error: No provider for ConnectionBackend!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
at ReflectiveInjector_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
at ReflectiveInjector_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
at resolveNgModuleDep (core.es5.js:9475)
at NgModuleRef_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10557)
at resolveDep (core.es5.js:11060)
at createClass (core.es5.js:10916)

错误2：

AppComponent_Host.html:1 ERROR CONTEXT  DebugContext_ {view: Object, nodeIndex: 1, nodeDef: Object, elDef: Object, elView: Object}

错误3：

Unhandled Promise rejection: No provider for ConnectionBackend! ; Zone: <root> ; Task: Promise.then ; Value: Error: No provider for ConnectionBackend!
at injectionError (core.es5.js:1169)
at noProviderError (core.es5.js:1207)
at ReflectiveInjector_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (core.es5.js:2649)
at ReflectiveInjector_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
at ReflectiveInjector_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_._getByKey (core.es5.js:2620)
at ReflectiveInjector_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_.get (core.es5.js:2489)
at resolveNgModuleDep (core.es5.js:9475)
at NgModuleRef_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.NgModuleRef_.get (core.es5.js:10557)
at resolveDep (core.es5.js:11060)
at createClass (core.es5.js:10916) Error: No provider for ConnectionBackend!
at injectionError (http://localhost:4200/vendor.bundle.js:33285:90)
at noProviderError (http://localhost:4200/vendor.bundle.js:33323:12)
at ReflectiveInjector_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor.bundle.js:34765:19)
at ReflectiveInjector_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:34804:25)
at ReflectiveInjector_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_._getByKey (http://localhost:4200/vendor.bundle.js:34736:25)
at ReflectiveInjector_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ReflectiveInjector_.get (http://localhost:4200/vendor.bundle.js:34605:21)
at resolveNgModuleDep (http://localhost:4200/vendor.bundle.js:41591:25)
at NgModuleRef_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.NgModuleRef_.get (http://localhost:4200/vendor.bundle.js:42673:16)
at resolveDep (http://localhost:4200/vendor.bundle.js:43176:45)
at createClass (http://localhost:4200/vendor.bundle.js:43032:35)

无论如何猜测我的后端只会给出一个列表，另一方面angular2项目只列出spring boot提供的列表中的所有att名称。这里是我的Angular代码： app.component.ts

import { NgFor } from '@angular/common';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Consumming a restful Webservice using angular 2</h1>
  <ul>
    <li #ngFor="item of personsLst">
      {{item.id}}
    </li>
  </ul>`,
  providers: [Http]
})
export class AppComponent {
   personsLst: Array<string> = [];
  theDataSource: Observable<string>;
  constructor(private http: Http) {
    this.theDataSource = this.http.get('/persons/dolist')
    .map(res => res.json());
  }
 ngOnInit() {
    // get the data from the rest service
    this.theDataSource.subscribe(
      data => {
      if (Array.isArray(data)) {
        this.personsLst = data;
      }else {
      this.personsLst.push(data);
      }
      },
      err =>
        console.log('can not get the persons list. Error code: %s, URL: %s', err.status, err.url),
      () => console.log('Person(s) retrieved')
    );
  }
}

注意：我在这个项目中使用了角度命令行界面!!

没有ConnectionBackend的提供者 - （angular2和springBoot）

0 个答案: