让 ASP MVC4 和 Angular 5 HttpClient 协同工作答案

【问题标题】：Get ASP MVC4 and Angular 5 HttpClient to work together让 ASP MVC4 和 Angular 5 HttpClient 协同工作
【发布时间】：2017-12-25 10:40:41
【问题描述】：

自从我从 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);
  }

}

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

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

【问题讨论】：

标签： angular asp.net-mvc-4 http-post angular5

【解决方案1】：

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

【讨论】：