尝试将HttpClient与Observable一起使用时抛出Angular 4错误

Question

我是此版本的angular的新手，我正在尝试使用在线购买的angular模板来实现简单的登录。我遵循了教程，但是当我尝试运行代码时，页面甚至没有加载，并且在Web控制台中看到以下错误：

现在这个错误对我基本上没有意义，所以我不知道如何解决。

这是我的 login.ts 文件：

import { Component } from '@angular/core';
import {AuthService} from "../services/auth/auth.service";

@Component({
  selector: 'login',
  templateUrl: '../pages/login.html'
})

export class LoginComponent {

  public credentials: {};
  public isLoading: boolean;

  constructor(public authService: AuthService) {
    this.credentials = {
      email: "",
      password: ""
    };

    this.isLoading = false;
  }


  login() {
    // set loading
    this.isLoading = true;

    this.authService.login(this.credentials)
      .subscribe((data) => {
        console.log(data);
      }, (error) => {
        console.log(error);
      });
  }
}

这是我的 auth.service.ts 文件：

import {Injectable} from '@angular/core';
import {Observable} from "rxjs/Observable";
import {HttpClient} from "@angular/common/http";
import {Config} from "../../app.config";

@Injectable()
export class AuthService {

  constructor(public config: Config, public http: HttpClient) {

  }

  login(data): Observable<any> {
    return this.http.post(this.config.loginUrl.toString(), data);
  }


}

我无法分辨出这里出了什么问题，因为一切似乎都对我有利，从错误中我感觉到它可能与应许有关，或者我将如何返回或处理可观察对象。

这是我的 login.html ：

<!-- pages/login -->
<div class="sample-form-2 login">
  <div class="side-bg-1"></div>
  <div class="side-bg-2 bg-danger"></div>
  <div class="side-description">
    <div class="logo">
      <img src="./assets/images/logo-inverse.png" class="img-fluid" />
    </div>
    <p class="text-uppercase text-bold text-center underlined">Warning</p>
    <p>This is a secured system, unauthorized access is not allowed.</p>
    <p>If you landed here by mistake please navigate back to <a class="text-white text-bold" href="https://example.com">example.com</a></p>
  </div>
  <form>
    <div class="form-description">
      <h3>Login</h3>
      <p>Please enter your name and email to login.</p>
    </div>
    <div class="form-group">
      <label>Your email</label>
      <div class="input-group">
                <span class="input-group-addon">
            <i class="sli-envelope"></i>
        </span>
        <input type="email" class="form-control" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label>Your password</label>
      <div class="input-group">
                <span class="input-group-addon">
            <i class="sli-lock"></i>
        </span>
        <input type="password" class="form-control" placeholder="Password">
      </div>
    </div>
    <div class="form-group">
      <button class="btn btn-primary btn-rounded" type="submit">Submit</button>
    </div>
    <div class="links">
      <p>Forgot your password?
        <a>Click here</a>
      </p>
    </div>
  </form>
</div>
<!-- end pages/login -->

Answer 1

请检查您的路由是否配置正确。我可以确定是由于路由配置错误所致。

例如：在employee /：id路由中，只能在路径中分配“雇员”