Angular2和MVC路由

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

    }

里面 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：未捕获（承诺）：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() { ... }
}

由于路由中间件没有找到名为 "api" 的控制器，它将回退到 SpaServices 回退路由，该路由加载 angular 应用程序。

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

[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 冲突，因为它将所有控制器视为 "Api" 控制器（阅读：即使 /api/home 也会路由到 HomeController） .

Answer 2

您的错误表明您的应用程序运行在 Node.js 上。例如，如果您有服务器端预渲染，可能会发生这种情况，例如 Visual Studio.

附带的 Angular 模板。

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

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

Angular2和MVC路由

Angular 2 and MVC routing

c#

asp.net-mvc-routing

angular2-routing

asp.net-core

angular