使用 angular 4 配置根

Question

我使用了 webStorm 2017.1.4，我想构建我的应用程序 J2EE 的前端。我在最后一个组件中有 2 个组件 about 和 contacts 我想在数据库中添加所有联系人我的 Sql 但我有当我想在构造函数中添加 Http 的类型时，问题 ContactsComponent.ts 是在 Http 中使用 bar 但导入库是 import { Http }来自 '@angular/http';

这里是图片

import { Component, OnInit } from '@angular/core';
   import { Http } from '@angular/http';
   import 'rxjs/add/operator/map';


   @Component({
   selector: 'app-contacts',
   templateUrl: './contacts.component.html',
   styleUrls: ['./contacts.component.css']
   })
   export class ContactsComponent implements OnInit {

   pageConstants: any;


   constructor(public http: Http ) {}


   ngOnInit() {
    this.http.get('http://localhost:8080/chercherContacts?mc=sa&page=2&size=6')
      .map( resp => resp.json())
      .subscribe( data => {
          this.pageConstants = data;
      }, err => {
        console.log('Erreur : ' + err);
      });
   }
  }

我认为这段代码是正确的，但在我的 google Chrome 的控制台中，错误是

Failed to load http://localhost:8080/chercherContacts?mc=sa&page=2&size=6: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:4225' is therefore not allowed access.

红色，另一个错误是

Erreur : Response with status: 0  for URL: null        
contacts.component.ts:25 
zone.js:2969 Cross-Origin Read Blocking (CORB) blocked cross-origin response 
http://localhost:8080/chercherContacts?mc=sa&page=2&size=6 with MIME type 
application/json. See https://www.chromestatus.com/feature/5629709824032768 
for more details.

这里是googlechrome

中错误的图片

你能帮我看看 angular 4 我的项目哪里出了问题吗？并且想到所有

Answer 1

Http 在 angular 的较新版本中已弃用。它被 Httpclient 取代。

import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient){}

休息你可以从这里阅读HttpClient

Answer 2

最大的问题是 J2EE 中服务器的 servlet 中的表示法。有必要添加 @CrossOrigin("*") 当解决问题时，此符号对于外部服务器的安全性是必要的

偶尔会更改库 appModule.ts 的 **HttpClientModule** import { HttpClientModule} from '@angular/common/http'; 并且

import { HttpClient } from '@angular/http';
constructor(private http: HttpClient){}

问题已解决谢谢所有的朋友:)

使用 angular 4 配置根

configuration the roots with angular 4

angular

jakarta-ee

angular-ui-router