Angular2 Lazy Load with HTTP service

Question

I have a lazy loaded Auth module (an experiment) which is loading file. This Auth module references an AuthService, which also loads fine. However, the @angular/http reference just isn't right.

If I load the app in dev mode, so lazy loading is then eager loading, I can output the http injected reference and get

Http {_backend: XHRBackend, _defaultOptions: BaseRequestOptions}

Then, when running in prod mode, with real lazy loading, that same reference reads

t {_backend: t, _defaultOptions: e}

So, I know it's loading, but is obfuscated. That's fine. The service module looks like this:

```

import { Injectable, Inject } from '@angular/core';
import { Store } from '@ngrx/store';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';

import { User } from '../models/user.model';

import * as auth from '../actions/auth.action';
import * as utils from '../util';

@Injectable()
export class AuthService {
    public token: string;
    public user: User;

    constructor(
        private store: Store<User>,
        private http: Http) {
        var currentUser = JSON.parse(localStorage.getItem('currentUser'));
        if (currentUser) {
            this.token = currentUser.token;
            this.user = currentUser.user;
            this.store.dispatch(new auth.LoginAction({ user: this.user, token: this.token, isLoggedIn: true }));
        }
    }

    login(email, password) {
        let options = new RequestOptions({ headers: utils.getHeaders() });
        return this.http.post(`${utils.hostname()}auth/callback`, 
            JSON.stringify({ email, password }), options)
            .map((response: Response) => {
                // login successful if there's a jwt token in the response
                let resp = response.json();
                let token = resp && resp.jwt;
                let user = resp && resp.user;
                if (token && user && resp.success) {
                    // set token property
                    this.token = token;
                    this.user = user;
                    // store username and jwt token in local storage to keep user logged in between page refreshes
                    // localStorage.setItem('currentUser', 
                    JSON.stringify({ user, token }));
                    // return true to indicate successful login
                    this.store.dispatch(new auth.LoginAction({ token, user, isLoggedIn: true }));
                    return true;
                } else if (resp.error) {
                    return resp.error;
                } else {
                    // return false to indicate failed login
                    return false;
                }
            })
        .catch((error:any) => Observable.throw((error) ? error.json().error : 'Server error'));
    }
}

```

Now, calling login in dev works fine. In prod, however, the post never happens and catch is called, instead, and is not passed any arguments. So, I simply see 'Server error' as the output.

Although the catch is never passed anything, if I remove the catch, I get in the console:

RESULT: TypeError: this.removeAttribute is not a function at XMLHttpRequest.n.get [as onreadystatechange] (vendor.cc0ce10….bundle.js:814) at XMLHttpRequest.send (vendor.cc0ce10….bundle.js:478)

Does anyone have any idea what I'm missing? Why doesn't @angular/http work in prod mode?

Thanks

Answer 1

So, the issue was with Zone.js, due to my use of Raven.js, as documented here on Github