使用HTTP服务的Angular2 Lazy Load

时间:2017-06-18 15:26:25

标签: angular lazy-loading angular-http

我有一个加载文件的延迟加载的Auth模块(实验)。此Auth模块引用了一个AuthService,它也可以正常加载。但是,@angular/http引用并不正确。

如果我在开发模式下加载应用程序,那么延迟加载就是急切加载,我可以输出http注入引用并获取

Http {_backend: XHRBackend, _defaultOptions: BaseRequestOptions}

然后,当在prod模式下运行时,使用实际的延迟加载,相同的引用读取

t {_backend: t, _defaultOptions: e}

所以,我知道它正在加载,但是被混淆了。没关系。服务模块如下所示:

```

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'));
    }
}

```

现在,在dev中调用login工作正常。然而,在prod中,帖子永远不会发生,而且会调用catch,而不会传递任何参数。所以,我只是看到了“服务器错误”。作为输出。

虽然catch永远不会传递任何东西,但如果我删除了catch,我会进入控制台:

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)

有没有人知道我错过了什么?为什么没有@angular/http在prod模式下工作?

由于

1 个答案:

答案 0 :(得分:0)

所以,问题在于Zone.js,因为我使用了Raven.js,如此处所记录on Github