让ASP MVC4和Angular 5 HttpClient协同工作

Question

自从我从Angular 2.X迁移到Angular 5.X以来，我在执行HTTP请求时遇到了一些问题。我将从头开始。

这里我有一些测试MVC控制器和一个测试操作：

public class AccountController : ApiController
{
    [HttpPost]
    public ObjResultFunc Test()
    {
        return new ObjResultFunc(() => new { Data = "Some Text" });
    }
}

和配置：

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        config.EnableCors();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
    }
}

然后，下面是Http模块的当前AngularJS 2.X实现：

import { Injectable, Inject } from '@angular/core';
import { activeUrlToken } from '../app/providers'

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


@Injectable()
export class MVCAngularDataService {



  constructor(private http: Http, @Inject(activeUrlToken) private API_URL: string) {

  }

  private handleError(error: Response | any) {
    console.error('ApiService::handleError', error);
    return Observable.throw(error);
  }

  public post(controller: string, action: string, data: any): Observable<any> {
    return this.http
      .post(this.API_URL + '/' + controller + '/' + action, data)
      .map(response => {
        return response;
      })
      .catch(this.handleError);
  }

}

另请注意，this.API_URL指向：

import { InjectionToken } from '@angular/core'
export const activeUrlToken = new InjectionToken('activeUrlToken');
export const activeUrl = 'http://localhost:3144/api';

并且调用测试函数成功了：this.mvcAngularService.post('Account', 'Test', null).subscribe(data => { console.log(data); });

然后我调整了MVCAngularDataService以使用Angular 5.X中的HttpClient模块，因为Http不再需要工作，建议现在在5.X中使用HttpClient，如下所示：

import { Injectable, Inject } from '@angular/core';
import { activeUrlToken } from '../app/providers'
import { HttpClient } from '@angular/common/http'

import { Observable } from 'rxjs/Rx';

@Injectable()
export class MVCAngularDataService {

  constructor(private http: HttpClient, @Inject(activeUrlToken) private API_URL: string) {

  }

  private handleError(error: Response | any) {
    console.error('ApiService::handleError', error);
    return Observable.throw(error);
  }

  public post(controller: string, action: string, data: any): Observable<any> {
    return this.http
      .post(this.API_URL + '/' + controller + '/' + action, data)
      .catch(this.handleError);
  }

}

现在，每当我尝试执行简单的post时，都会得到一个404 - Not Found错误：

​

​

​

​

我遗漏了什么？我强烈怀疑问题出在MVC服务器端，但不知道从哪里开始查找。

Answer 1

转到你的nodu_modules文件夹，然后检查@angular/common/http它发生在我身上我的@angular/common/http丢失了。