How to host Angular application with Kestrel

我的梦境 提交于 2019-12-20 04:46:07

问题


I am trying to deploy an Angular 7 application with .NET Core using Kestrel using the FileProvider extension.

I have created the angular app , i have ng build it and i copied the files inside dist .NET Porject.

Startup

 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 My myroot folder is right in the root of the project. I do not know how to feed the first page (entrypoint) of the angular app which is index.html.


回答1:


As suggested by @Simonare in the comment, the best way is to use official Angular template.

But if you want to serve the static files only, you could do as below :

  1. Configure the DefaultFilesOptions with FileProvider and 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,
    });
  1. Because the path of app is https://yourhost:port/app, you also need to change the base path within the index.html, so that browser will load all assets (e.g. js, css, img files) relative to current path. The original base of /src/index.html is /:

    <!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>

Note we need :

  • change the <base href="/"> to <base href="/app">
  • or change the base to an empty string : <base href="">
  • or remove that line


来源:https://stackoverflow.com/questions/53833968/how-to-host-angular-application-with-kestrel

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!