Конфигурация корни с угловым 4

Question

Я использовал webStorm 2017.1.4 и хочу создать внешний интерфейс моего приложения J2EE.У меня есть 2 компонента о и контакты в последнем компоненте. Я хочу добавить все контакты в базу данных My Sql, но у меня возникает проблема ContactsComponent.ts , когдаЯ хочу добавить тип Http в конструкторе с бар в Http, но библиотека импорта 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.

здесь изображение ошибок в Google Chrome

Можете ли вы помочь мне, где проблема вмой проект с угловой 4?И думает обо всех

Answer 1

большая проблема заключается в записи в сервлете сервера в J2EE.необходимо добавить @ CrossOrigin ("*") эта нотация необходима для защиты внешнего сервера, когда он решает проблему

Уже иногда можно изменить ** HttpClientModule** из appModule.ts из библиотеки импортируйте {HttpClientModule} из '@ angular / common / http'; И

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

, и проблема заключается врешено Спасибо всем, мой друг :) 1012 *

Answer 2

Http устарела в новой версии Angular.Его заменяет Httpclient.

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

Остальное вы можете прочитать здесь HttpClient