Подтвердить что ты не робот

Angular 2 Http-сервис, не отображающий карту() и другие функции RxJS

Кто-нибудь знает, были ли какие-либо изменения в http между альфа-45 и альфа-48? Я искал вокруг, и ничего не нашел. Моя проблема заключается в том, что приведенный ниже код отлично работает на Alpha 45. Но теперь, когда я обновился до Alpha 48, я получаю сообщение об ошибке _this.http.post(...).map is not a function при попытке запустить приложение. Странно то, что IntelliSense показывает, что http.post возвращает наблюдаемое. Это означает, что функция карты должна быть доступна. Любая помощь будет оценена по достоинству. Спасибо!

public Authenticate(username: string, password: string): Observable<boolean> {

    this.ResetAuthenticationValues();

    return Observable.create((subscriber: EventEmitter<string>) => { 

        let body: string = 'grant_type=password&username=' + username + '&password=' + password;
        let headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');

        this.http.post('http://example.com', body, {headers: headers})
            .map(res => res.json())
            .subscribe(
                (data: DataResponse) => {
                    if (!data.error) {
                        this.accessToken = {access_token: data.access_token, token_type: data.token_type};
                        subscriber.next(this.isAuthenticated = true);                       
                    }
                    else
                        subscriber.error(this.isAuthenticated = false);
                },
                (err) => subscriber.error(err),
                () => subscriber.complete()
            );

        return () => { };
    });
}
4b9b3361

ОТВЕТЫ

Ответ 1

Другое обновление (кашель, извините, что забыл эту опцию)

Если вы хотите не добавлять отдельно операторов, вы можете импортировать полный Rx, выполнив

import {Observable, Subject, ReplaySubject, etc...} from 'rxjs/Rx';

У вас будут все операторы:)

Обновить альфа 50 (08/12/2015)

Вскоре после того, как альфа-49 была выпущена, они выпустили альфа-версию 50. Эта версия обновила rxjs до альфа-14. Итак, вы поймете, что делаете

npm install [email protected]
npm install [email protected]

Обновить альфа-49 (08/12/2015)

На данный момент alpha 49 был выпущен, и это не изменилось, а это значит, что это останется во времени. Исходный ответ по-прежнему действителен с несколькими изменениями, изменения пути для rjxs, поэтому он должен быть следующим:

System.config({
    paths: {
        'rxjs/add/observable/*' : 'node_modules/rxjs/add/observable/*.js',
        'rxjs/add/operator/*' : 'node_modules/rxjs/add/operator/*.js',
        'rxjs/*' : 'node_modules/rxjs/*.js'
    }
});

import 'rxjs/add/operator/map';

Примечание

Эта версия требует именно версии alpha 13, поэтому, если в вашем package.json у вас уже есть другая версия, вам придется удалить ее, установить angular2, а затем установить rjxs.

Обновление

CHANGELOG обновлен, чтобы показать это нарушение. Там комментарий от @jeffbcross в вопрос № 5642, который разъясняет LOT в этом вопросе.

Цитирование части этого комментария

Модульность была целью нового проекта RxJS с самого начала, и до недавнего времени мы начали действительно серьезно относиться к составлению операторов вместо того, чтобы полагаться на многоуровневые распределения Rx.

Оригинальный ответ

На самом деле произошло нарушение в отношении RxJS и Angular2. Итак, теперь для использования таких операторов, как map, вы должны импортировать их отдельно. Вы можете увидеть изменение этого запроса на перенос. И уже есть issue о вашем вопросе.

Я рекомендую вам придерживаться альфы 47. Но всем, кто нуждается и хочет знать, что такое решение, например, в запросе на растяжение, указано, добавить оператор отдельно.

У вас должно быть что-то вроде этого

import {Http, ...} ...;

// Component
constructor(http: Http) {
    http.get(...).map() // 'map' doesn't exist! Ouch!
}

Чтобы исправить это, добавьте оператор (извините за повторение его столько раз) и настройте пути к rxjs

Примечание

Это должно быть сделано с помощью RxJS alpha 11 или alpha 12 (не путайте его с @reactivex/rxjs, теперь это просто rxjs). Поэтому установите его с помощью

npm install [email protected]

Или просто npm install rxjs, если вы хотите использовать последнюю версию, но заблокировать ее как альфа-11.

Настройте пути в System.config(обратите внимание, что это моя конфигурация, не обязательно лучшая, и я предполагаю, что вы установили alpha 11)

System.config({
    paths: {
        'rxjs/observable/*' : 'node_modules/rxjs/observable/*.js',
        'rxjs/operators/*' : 'node_modules/rxjs/operators/*.js',
        'rxjs/*' : 'node_modules/rxjs/*.js'
    }
});

После того, как вы закончите настройку, вы можете импортировать оператор следующим образом

 import 'rxjs/operators/map';

И это все. Вам придется делать это с каждым оператором. Поэтому я повторяю, я рекомендую вам придерживаться альфы 47, как я уже говорил вам в комментарии. Я попытаюсь обновить ответ позже с помощью plnkr.

Ответ 2

Если вы хотите использовать бета-версии Angular 2 или будущих релизов для реального производства, вам нужно сделать две вещи, чтобы заставить это работать.

1) Сначала вам нужно обновить конфигурацию System.config() в index.html, чтобы включить ссылки на RxJS:

System.config({
    map: {
        'rxjs': 'node_modules/rxjs'
    },
    packages: {
        'app': {defaultExtension: 'js'}, // assumes your code sites in `src/app`
        'rxjs': {defaultExtension: 'js'}
    }
});
System.import('app/app'); // this assumes your main file is `app.ts` and it sits in the `app` folder.

2) Затем вы можете импортировать map() и другие (или все) операторы RxJS в ваше приложение с import строками в вашем основном файле (app.ts в моем случае):

import 'rxjs/Rx'; // this would import all RxJS operators

Если вы скорее импортируете только map(), чтобы сохранить размер вниз, вы сделаете это вместо этого:

import 'rxjs/add/operator/map';

Вам не нужно импортировать их в каждый файл класса. Просто импортируйте их в свой основной файл, чтобы сделать их доступными для всех ваших других компонентов/служб/директив.

Ответ 3

Вам нужно импортировать оператор Rx map в свой компонент, например

import 'rxjs/add/operator/map';

Ура!

Ответ 4

В отличие от того, что написано выше, я обнаружил, что мне нужно использовать

    System.config({
        packages: {
            'app': {defaultExtension: 'js'},
            'node_modules': {defaultExtension: 'js'}
        },
        paths: {
            'rxjs/*' : 'node_modules/rxjs/*.js'
        }
    });

node_modules defaultExtension был критическим для меня (я не знаю, почему путь rxjs/* не добавляет .js, но hey ho.)

Это работает от 48 до последних 52.

Ответ 5

У меня была эта проблема, и оказалось, что проблема с версией rxjs - angular 2.0.0-rc4 требует rxjs-5.0.0-beta.6, у меня была бета-версия 10 в моей конфигурации jspm!