如何使用Kestrel托管Angular应用程序 [英] How to host Angular application with Kestrel
问题描述
我正在尝试使用FileProvider扩展名和Kestrel来部署具有.NET Core的Angular 7应用程序.
I am trying to deploy an Angular 7 application with .NET Core using Kestrel using the FileProvider extension.
我已经创建了角度应用程序，我已经ng build它，并在dist .NET Porject中复制了文件.
I have created the angular app , i have ng build it and i copied the files inside dist .NET Porject.
启动
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();
}
PS 我的myroot文件夹位于项目的根目录中.
我不知道如何为index.html应用程序的angular应用程序的第一页(入口点)提供数据.
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.
推荐答案
如评论中@ Simonare 所建议，最好的方法是使用正式的Angular模板.
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 :
- 使用
FileProvider和RequestPath配置DefaultFilesOptions.
- Configure the
DefaultFilesOptionswithFileProviderandRequestPath.
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,
});
-
由于应用的路径为
https://yourhost:port/app，因此您还需要更改index.html中的基本路径，以便浏览器将加载所有资产(例如js，css， img文件)相对于当前路径./src/index.html的原始库是/:
Because the path of app is
https://yourhost:port/app, you also need to change the base path within theindex.html, so that browser will load all assets (e.g. js, css, img files) relative to current path. The original base of/src/index.htmlis/:
<!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=""> - 或删除该行
- change the
<base href="/">to<base href="/app"> - or change the base to an empty string :
<base href=""> - or remove that line
这篇关于如何使用Kestrel托管Angular应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
