使用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中运行它，该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，有许多文章说明如何在Startup.cs中使用Microsoft.AspNetCore.StaticFiles(或Microsoft.AspNet.StaticFiles).基本上，将以下两行添加到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程序集的方法.

1. A way to create a route so a reference to /index.html serves /dist/index.html, or
2. A way to use the StaticFiles assembly mentioned before.

那我该怎么做?

推荐答案

我只是无法获得 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屋！