如何使用 Kestrel 托管 Angular 应用程序

Question

我正在尝试使用 FileProvider 扩展，使用 Kestrel 通过 .NET Core 部署 Angular 7 应用程序。

我已经创建了 angular 应用程序，我有 ng build 它并且我复制了 dist .NET 项目中的文件。

启动

 public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
        string jsFolderName = "myroot";
        string prodRoot =Path.Combine(AppDomain.CurrentDomain.BaseDirectory,jsFolderName);
        string debugRoot =Path.Combine(Directory.GetCurrentDirectory(),jsFolderName);

        var isDev=env.IsDevelopment();


        DefaultFilesOptions options = new DefaultFilesOptions();
        options.DefaultFileNames.Clear();
        options.DefaultFileNames.Add("/myroot/index.html");
        app.UseDefaultFiles(options);
        app.UseStaticFiles();
        app.UseStaticFiles(new StaticFileOptions() {
            FileProvider = new PhysicalFileProvider(isDev?debugRoot:prodRoot),
            RequestPath = "/app"
        });
        if (env.IsDevelopment()) {
            app.UseDeveloperExceptionPage();
        } else {
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseMvc();
    }

P.S 我的 myroot 文件夹就在项目的根目录中。我不知道如何提供 angular 应用程序的第一页（入口点），即 index.html。

Answer 1

正如评论中@Simonare所建议的，最好的方法是使用官方Angular模板。

但是如果你只想提供静态文件，你可以这样做：

将 DefaultFilesOptions 配置为 FileProvider 和 RequestPath。

 
    var fileProvider = new PhysicalFileProvider(isDev?debugRoot:prodRoot);

    DefaultFilesOptions options = new DefaultFilesOptions(){
        RequestPath = "/app",           // to process request to `/app`
        FileProvider = fileProvider,    // to check files under `myroot/**/**`
        DefaultFileNames = new List { "index.html" },
    };
    options.DefaultFileNames.Clear();
    options.DefaultFileNames.Add("/myroot/index.html");
    app.UseDefaultFiles(options);

    // serve static files 
    app.UseStaticFiles();
    app.UseStaticFiles(new StaticFileOptions() {
        RequestPath = "/app",
        FileProvider = fileProvider,
    });

因为app的路径是https://yourhost:port/app，你还需要改变index.html内的基本路径，这样浏览器将加载相对于当前路径的所有资源（例如 js、css、img 文件）。 /src/index.html 的原始基数是 /:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>App</title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    <body>
        <app-root>Loading...</app-root>
    </body>
</html>

注意我们需要：

将 <base href="/"> 更改为 <base href="/app">
或将基数更改为空字符串：<base href="">
或删除该行

如何使用 Kestrel 托管 Angular 应用程序

How to host Angular application with Kestrel

asp.net-core

ng-build

fileprovider-extension