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.
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 :
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,
});
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 :
<base href="/"> to <base href="/app"> <base href="">