使用 Web API 路由 Angular 2 应用程序 [英] Routing an Angular 2 app with Web API

问题描述

我有一个使用 Angular CLI 创建的 Angular 2 应用程序.这必须调用 .NET 4.6 Web API.这条路线的设置让我抓狂.

I have an Angular 2 application created with Angular CLI. This has to call a .NET 4.6 Web API. The route setup of this is driving me nuts.

对于 Angular，输出的默认文件夹是 /dist.Angular CLI 会执行您梦寐以求的所有缩小和摇树操作，然后将其 JavaScript 文件和 index.html 输出到该文件夹​​.

For Angular, the default folder for output is /dist. Angular CLI does all the minification and tree-shaking you can dream of and then outputs both its JavaScript files and index.html to that folder.

因此，如果我运行 index.html，将从同一文件夹中检索这些文件.一切正常，因为 index.html 包含这样一个标签:

So if I run index.html, those files are retrieved from the same folder. Everything works well, because index.html contains a tag like this one:

<base href="/">

Web API 项目具有预期的结构，而 Angular 应用程序的根是寄生虫.

The Web API project has the expected structure, with the Angular app a parasite in its root.

所以它看起来像这样:

WebAPI_Project
|- App_Start
|    |
|    |-WebApiConfig.cs
|- Controllers
|- Models
|- src /* This is the root of the Angular app */
|    |- app
|    |    |- core           /* These three folders */
|    |    |- shared         /* are for the modules */
|    |    |- another_module /* used in the app     */
|    |    |- app.component.ts
|    |    |- app.module.ts
|    |- index.html
|- dist /* This is the Angular output folder */
     |- index.html
     |- main.bundle.js

WebApiConfig.cs 有默认设置:

public static void Register(HttpConfiguration config)
{
    // Web API routes
    config.MapHttpAttributeRoutes();

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

为了运行 Angular 应用程序，我使用普通的 ng serve，它在 http://localhost:4200 创建一个 web 服务器.该 Web 服务器对 Web API 项目一无所知，因此我还需要在 Visual Studio 中运行该项目，它会在 http://localhost:5200 处启动 IIS Express.

To run the Angular app, I use normal ng serve, which create a web server at http://localhost:4200. This web server knows nothing about the Web API project, so I need to run that as well from within Visual Studio, which starts up IIS Express at http://localhost:5200.

此设置运行良好，并允许我利用 Angular CLI 的实时重新加载支持.

This setup works reasonably well and allows me to take advantage of Angular CLI's live reload support.

对我来说最大的缺点是这种配置与我们对生产的期望不同.在那里，我希望有一个 Web 服务器 (IIS)，为 Web API 项目(目前位于 /api/)和 Angular 应用程序(位于 /，最好).此外，在开发中，我不得不考虑 CORS，而生产设置不会.

The biggest drawback for me is that this configuration is different from what we expect for production. There, I would expect to have one web server (IIS), serving both the Web API project (at /api/ as presently) and the Angular app (at /, preferably). Also, in dev, I'm having to think of CORS, which the production setup wouldn't.

为此，我需要更改 WebApiConfig 路由以提供我的静态文件，该文件将位于 /dist/ 下.

To do this, I need to change the WebApiConfig routing to serve my static files, which will be under /dist/.

对于 ASP.NET Core 和 MVC 4，有很多文章展示了我应该如何使用 Microsoft.AspNetCore.StaticFiles(或 Microsoft.AspNet.StaticFiles)Startup.cs.基本上，将以下两行添加到 Configure 函数中:

For ASP.NET Core and for MVC 4, there are numerous articles showing how I should use Microsoft.AspNetCore.StaticFiles (or Microsoft.AspNet.StaticFiles) in Startup.cs. Basically, add the following two lines to the Configure function:

public void Configure(IApplicationBuilder app, IHostingEnvironment env,
    ILoggerFactory loggerFactory)
{
    // Other stuff

    // Two new lines
    app.UseStaticFiles();
    app.UseDefaultFiles();

    app.UseMvc(m =>
    {
        // Other routes specified here
    });
}

问题是我不使用 ASP.NET Core 或 MVC.

The problem is that I don't use either ASP.NET Core or MVC.

尽管 Web API 显然是没有视图的 MVC，但 Web API 项目仅带有 WebApiConfig.cs 文件，没有 Startup.cs 和 `IApplicationBuilder'.

Despite Web API apparently being MVC without the views, a Web API project comes with only the WebApiConfig.cs file, no Startup.cs and no `IApplicationBuilder'.

我尝试将这一行添加到我的 Register 函数中:

I tried adding this line to my Register function:

config.Routes.IgnoreRoute("StaticFiles", "*.html");

这服务于 index.html(但在 localhost:5200/dist/index.html)，但它找不到任何资产，因为 base href="/".我可以在 index.html 中更改它，但是 ng serve 会中断.

This serves the index.html (but at localhost:5200/dist/index.html), but it cannot find any of its assets, because base href="/". I can change that in index.html, but then ng serve breaks.

我想我需要两件事之一:

I think I need one of two things:

1. 一种创建路由的方法，以便对 /index.html 的引用服务于 /dist/index.html，或
2. 一种使用前面提到的 StaticFiles 程序集的方法.

那么我将如何做到这一点?

So how would I accomplish that?

推荐答案

我只是无法得到 Dmitriy 的回答为我工作，但他确实让我走上了正轨.

I just couldn't get Dmitriy's answer to work for me, but he did put me on the right track.

我需要两条规则:一条从根提供 Angular 应用，同时维护 Web API /api/ 路由，另一条为默认文档提供服务.

I needed two rules: One to serve the Angular app from the root while maintaining the Web API /api/ routing, and another to serve the default document.

他们在这里:

<rewrite>
  <rules>
      <rule name="Serve Angular app from root" stopProcessing="true">
        <match url="([\w\.]+)" />
        <conditions>
          <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
        </conditions>
        <action type="Rewrite" url="/dist/{R:1}" />
      </rule>
      <rule name="Default document" stopProcessing="true">
        <match url="^$" />
        <action type="Rewrite" url="/dist/index.html" />
      </rule>
    </rules>
</rewrite>

这篇关于使用 Web API 路由 Angular 2 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！