Angular - http post nie działa

Od kilku miesięcy rozwijam swój projekt i aplikację webową postanowiłem stworzyć w Angularze. Obecne rozwiązanie stoi na jedynce i zaczynam przepisywać to na 4. Mowa o: http://test.dodgewars.net/index.html#!/

Mam nad tym zagwózdkę i googlowałem już godzinami. I nic.
Cały kod wrzuciłem tutaj: https://4programmers.net/Pastebin/7669

Problem jest w tym, że wg mnie to wygląda wszystko dobrze, a request nawet nie opuszcza przeglądarki i nie dociera do api. Wprowadzone email i hasło docierają do serwisu. Api stoi na localhost pod podanym adresem. Za równo api jak i aplikacja webowa działają z Visual Studio. I wątpię, żeby to był problem techniczny z .netem, bo Angular1 z tym api gada..

Z góry dziękuję za pomoc.

W sumie ciekawe?

let options = new RequestOptions({ headers: headers });

options na pewno powinno być typu RequestOptionsArgs. Popatrz na sygnaturę metody post.

Młodszy Programista napisał(a):

W sumie ciekawe?

let options = new RequestOptions({ headers: headers });

options na pewno powinno być typu RequestOptionsArgs. Popatrz na sygnaturę metody post.

Dzięki za odpowiedź. Jeżeli tak, to czemu kompliator na to pozwala?
Jedyna dokumentacja jaką znalazłem to ta https://angular.io/guide/http i nic nie mówi o sygnaturze metody post. Albo jakoś słabo szukam.

poza tym, gdy użyłem ich przykładu dostosowując do swoich potrzeb

.post('/api/items/add', body, {
headers: new HttpHeaders().set('Authorization', 'my-auth-token'),
})

to również sypie błędem.

edit: znalazłem później. szkoda, że nie w oficjalnej dokumentacji https://medium.com/google-developer-experts/angular-2-introduction-to-new-http-module-1278499db2a0

Tak przy okazji. W wersji 4.3 został wprowadzony nowy "HttpClient". Od kilku dni mamy Angulara 5 w którym "@Angular/http" jest przestarzałe i zalecane jest korzystanie z "HttpClient" (@Angular/common/http).
Można się spodziewać, że "@Angular/http" zostanie całkowicie usunięte z wersją 6.

No ale jezeli chce na razie ta stronke napisac w 4, to nie moge tego uzyc? Tj. dziwne, ze nie dziala. Mega proste zadanie.

Naturalnie możesz pozostać przy 4 i przy "angular/http".

Co masz na myśli pisząc "a request nawet nie opuszcza przeglądarki"?
Ja widzę, że Request wyszedł i w odpowiedzi dostaję:

{"Message":"The user has been successfully registered.","Data":null}

Mr.Smith napisał(a):

Naturalnie możesz pozostać przy 4 i przy "angular/http".

Co masz na myśli pisząc "a request nawet nie opuszcza przeglądarki"?
Ja widzę, że Request wyszedł i w odpowiedzi dostaję:

Kopiuj

{"Message":"The user has been successfully registered.","Data":null}

ale to chyba użyłeś apki, która zahostowałem pod tym URL? Jeśli tak, to mówiłem, że tj. na AngularzeJS i to działa. Problem mam na środowisku developerskim z Ang4 :/
Mógłbym się zdzwonić na skypie i pokazać. No ale po prostu - dane docierają do serwisu, robię subscribe, wykonuje się blok error, a sam error jest udnefined. Żadnego info. A breakpoint w API się nie łapie. To mam na myśli.

Tak, użyłem apki z URLa. Teraz rozumien.

Możesz sprawdzić co daje "console.log(response)" w serwisie w funkcji "create"?
Napisałeś też "dane docierają do serwisu". Tzn. jak robisz console.log(user) w serwisie w funkcji "create" to widzisz wpisany email i password?

Podając mail poop@hotmail.com i haslo123 dostaję z serwisu do konsoli: "poop@hotmail.com____haslo123". Żadnej wzmianki nt. response, nic. Kod: http://wklej.org/id/3287586/

Możesz wkleić następujący "import" w UserService:

import 'rxjs/add/operator/map';

i przetestować, czy z tym działa?

Spróbowałem i nadal nic:

http://wklej.org/id/3287626/

Może chcesz się zdzwonić kiedyś i zrobić share ekranu?

Możesz sprawdzić jeszcze ten kod:

import { Injectable } from '@angular/core';
import { Headers, Http, RequestOptions, Response } from '@angular/http';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { User, RegisterUserViewModel } from '../_models/index';


@Injectable()
export class UserService {

  constructor(private http: Http) {
  }

  create(user: RegisterUserViewModel): Observable<Response> {

    const headers = new Headers({'Content-Type': 'application/json'});
    const options = new RequestOptions({headers: headers});
    const url = 'http://localhost:49688/api/Account/RegisterUser/';

    console.log(user.email + '___' + user.password);

    return this.http.post(url, user, options)
      .map((response: Response) => {
        return response.json();
      })
      .catch(error => {
        console.log(error);
        return error;
      });
  }

}

Spróbowałem Twojego kodu i nic się nie dzieje. Nadal to samo.

Krzywy Ogrodnik napisał(a):

Spróbowałem Twojego kodu i nic się nie dzieje. Nadal to samo.

Nie zauważyłem, że nie byłem zalogowany. Podpisuję się pod postem ^^

Siemanko, w angularze 4 jest to troche smieszne poniewaz tworzysz requesta ale tak naprawde jest to zmienna "Observable" jezeli nie masz zadnego bledu moze nie subskrybujesz jej ?

tutaj moja usluga

import { Injectable } from "@angular/core";
import { Headers, Http, Response } from "@angular/http";
import 'rxjs/Rx'
import {Observable} from "rxjs/Observable";

@Injectable()
export class ServersService {
  constructor(private http: Http) {}

  object: object = {
    'query': 'sejf',
    'properties': {
      'type': 'lock',
      'column': 'capacity',
      'min': 10,
      'max': 25
    }
  };



  storeServers() {
    const headers = new Headers({
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': '*',
      'Access-Control-Allow-Headers': 'Content-Type',
    });
    return this.http.post('twoj link', this.object, headers);
    // return this.http.put('twoj link', servers);

  }

  getServers() {
    return this.http.get('twojlink')
      .map(
        (response: Response) => {
          //tutaj wiadomo
        }
      ).catch(
        (error: Response) => {
          return Observable.throw(error)
        }
      )
  }
}

i w komponencie musisz go nasluchiwac

this.serverService.storeServers(this.servers)
      .subscribe(
        (response) => console.log(response)
      )