Question

我需要一些帮助，因为我无法让Angular在Visual Studio 2017中正确调用API。这是我的代码的一部分（我已经导入并注入了Angular工作所需的所有内容）：

@Injectable()
export class GetCustomerInfoService {

    constructor(private http: HttpClient) { }

    getResults() {
        return this.http.get('http://localhost:65040/api/employees');
    }
}


@Component({
    selector: 'apply',
    templateUrl: './apply.component.html',
    providers: [GetCustomerInfoService]
})
export class ApplyComponent {

    constructor(private customerInfo: GetCustomerInfoService) {
        this.customerInfo.getResults().subscribe(result => {
            console.log(result);
        });

    }

Inside Startup.cs：

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
    routes.MapSpaFallbackRoute(
        name: "spa-fallback",
        defaults: new { controller = "Home", action = "Index" });
});

和test.cs控制器：

namespace Coc.Controllers
{
    public class TestController : Controller
    {
        [HttpGet("api/employees")]
        public JsonResult GetEmployees()
        {
            return new JsonResult(new List<object>()
            {
                new {employeeid = 01989, Name = "John Patrick"},
                new {employeeid = 01987, Name= "Michael"},
                new {employeeid = 01988, Name= "Akhil Mittal"}
            });
        }
    }
}

使用邮递员http://localhost:65040/api/employees我从TestController获取数据。 我还需要来获取Angular GetCustomerInfoService的数据？现在我收到以下错误：

处理请求时发生未处理的异常。 NodeInvocationException：Uncaught（在promise中）：ReferenceError：未定义XMLHttpRequest ReferenceError：未定义XMLHttpRequest

Answer 1

你的路线是完全错误的。您可以为

定义路线

routes.MapRoute(
    name: "default",
    template: "{controller=Home}/{action=Index}/{id?}");

并注册test/api/employees，但请致电/api/employees。

public class TestController : Controller
{
    // This route is relative to the /test path, because that's the name of the controller
    [HttpGet("api/employees")]
    public JsonResult GetEmployees() { ... }
}

由于路由中间件找不到名为＆＃34; api＆＃34;的控制器，它将回退到SpaServices后备路由，后者加载角度应用程序。

你可能想要制作这样的东西

[Route("api/employees")]
public class TestController : Controller
{
    [HttpGet]
    public JsonResult GetEmployees() { ... }

    // or this, but not recommended, to to harder maintenance. Notice the slash in front of the route
    [HttpGet("/api/employees")]
    public JsonResult GetEmployees() { ... }
}

或者为所有api控制器定义标准路由：

routes.MapRoute(
    name: "defaultApi",
    template: "api/{controller}/{id?}");

现在这应该足够了

public class TestController : Controller
{
    // Just the verb
    [HttpGet]
    public JsonResult GetEmployees() { ... }
}

但后者可能与您的HomeController发生冲突，因为它会将所有控制器视为＆＃34; Api＆＃34;控制器（读取：偶/api/home将路由到HomeController）。

Answer 2

您的错误表明您的应用程序正在Node上运行。例如，如果您有服务器端预呈现，则可能会发生这种情况，就像Visual Studio附带的Angular模板一样。

但是，XMLHttpRequest仅在浏览器中可用。根据{{3}}，您需要在Node上安装对XMLHttpRequest的支持。或者，您可以尝试禁用服务器端预呈现，以便您的Angular代码仅在浏览器中运行。

我认为HttpClient需要XMLHttpRequest。因此，您也可以尝试使用较旧的Http而不是HttpClient。

Angular 2和MVC路由

2 个答案: