Настройка Angular и WebAPI

У нас есть приложение Angular 4 и приложение WebAPI (.NET Framework). У нас есть приложение Azure, в котором развернуты оба приложения (клиент и служба). Корневой путь указывает на клиент.

HTTP-запросы к нашему API (/api/{controller}/) не доходят до нашего сервиса, и похоже, что вместо этого маршрут Angular подбирает их и возвращает index.html в качестве содержимого ответа.

Как мы можем настроить Azure так, чтобы наше приложение Angular обслуживало содержимое HTML/CSS/JS, а любой вызов «/api/» направлялся в нашу службу?

Мы попытались сделать так, чтобы корневой путь указывал на службу, но затем мы получили ошибку 404 для всех запросов, не относящихся к API.


azure angular c# asp.net-web-api .net-4.6
person gt-downunder    schedule 19.07.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы ответить на мой собственный вопрос, мне нужно было обслуживать статические файлы, как описано в этой статье:

https://mirkomaggioni.com/2016/09/11/owin-middleware-for-static-files/

Короче говоря, я развернул службу (WebAPI) в корневом каталоге Azure, а клиент (Angular 4) развернул как скомпилированную папку «dist».

Я добавил следующие пакеты NuGet:

<package id="Owin" version="1.0" targetFramework="net452" />
<package id="Microsoft.Owin" version="3.1.0" targetFramework="net462" />
<package id="Microsoft.Owin.FileSystems" version="3.1.0" targetFramework="net462" />
<package id="Microsoft.Owin.Host.SystemWeb" version="3.1.0" targetFramework="net462" />
<package id="Microsoft.Owin.StaticFiles" version="3.1.0" targetFramework="net462" />

Затем создал класс запуска OWIN, который выглядит следующим образом:

public class Startup
{
    public void Configuration(IAppBuilder app)
    {
        var physicalFileSystem = new PhysicalFileSystem(@"./dist");
        var options = new FileServerOptions
        {
            EnableDefaultFiles = true,
            FileSystem = physicalFileSystem
        };
        options.StaticFileOptions.FileSystem = physicalFileSystem;
        options.StaticFileOptions.ServeUnknownFileTypes = true;
        options.DefaultFilesOptions.DefaultFileNames = new[]
        {
            "index.html"
        };

        app.UseFileServer(options);
    }
}
person gt-downunder    schedule 20.07.2017