带有 .NET Core 的 Angular-CLI [英] Angular-CLI with .NET Core
问题描述
我通过以下方式在 Visual Studio 2017 中创建了一个 SPA Angular-CLI .NET Core 项目:
I've created an SPA Angular-CLI .NET Core project in Visual Studio 2017 by:
dotnet new angular -o testApp
我可以通过Ctrl-F5正常构建和运行它.在这种情况下:
I can build and run it normally by Ctrl-F5. In that case:
webpack-dev-server是否为应用提供服务?在我看来webpack-dev-server在这里没有使用，因为 Kestrel 开始发挥作用.但是，由于 webpack 在后台运行，因此正在创建一些包.这是 HTTP 响应:
Does
webpack-dev-serverserves the app? In my opinionwebpack-dev-serveris not used here since Kestrel comes into play. However, since webpack is running under the hood there are some bundles that are being created. Here is the HTTP response:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>angular_cli</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="styles.bundle.css" rel="stylesheet"/>
</head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
问题是我在应用程序中找不到任何这些包.他们在哪里?一种解释是内存中存在，但是这需要 webpack-dev-server 并且我的假设是它没有启动！那么，究竟发生了什么?
The problem is I cannot find any of these bundles inside the application. Where are they? An explanation would be to exist in the memory, however that requires webpack-dev-server and my assumption is it is not launched! So, what exactly does it happen?
通过尝试
ng serve
使应用程序能够由 webpack-dev-server 提供服务，我不能与 .NET 服务器部分通信.那么，使用 ng serve 有什么意义，如果无法全面测试包括后端部分在内的应用程序?
which enables the app to be served by webpack-dev-server, I cannot
communicate with .NET server part. So, what's the point of using ng serve if
not being able to fully test the application including the back end part?
推荐答案
只是为了提供更新.
ASP.NET Core 2.1(撰写时预览)随附更新的 Angular 模板，这些模板在 2.1 中可用，并位于 Microsoft.DotNet.Web.Spa.ProjectTemplates 包中.
ASP.NET Core 2.1 (preview as the moment of writing) ships with updated angular templates which are available in 2.1 and resides in Microsoft.DotNet.Web.Spa.ProjectTemplates package.
在 ASP.NET Core 2.1 上，它与 .NET Core SDK 一起安装.请参阅文档.
On ASP.NET Core 2.1 its installed with the .NET Core SDK. See docs.
也可以手动安装
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0
或
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::*
获取最新版本.更新的模板基于 Angular Cli 并使用 app.UseSpa(..:) 调用，而旧的中间件使用 Webpack.
to grab the latest version. The updated templates are based on Angular Cli and use the app.UseSpa(..:) call whereas the old middleware used Webpack.
旧的 Angular SPA 模板基于 JavaScriptServices，它随 ASP.NET Core 一起提供2.0 版或通过运行 dotnet new -i "Microsoft.AspNetCore.SpaTemplates::*".请参阅适用于 dotnet new 的模板.
The old Angular SPA Template was based on JavaScriptServices which were shipped with ASP.NET Core up to version 2.0 or by running dotnet new -i "Microsoft.AspNetCore.SpaTemplates::*". See Available templates for dotnet new.
对于 ASP.NET Core 2.0，这是由 WebpackDev 中间件完成的(请参阅 Startup.cs 中的 app.UseWebpackDevMiddleware(...) 调用.
For ASP.NET Core 2.0 this is done by the WebpackDev middleware (see the app.UseWebpackDevMiddleware(...) call in your Startup.cs.
if (env.IsDevelopment())
{
//app.UseBrowserLink();
app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true
});
}
else
{
app.UseExceptionHandler("/Home/Error");
}
它将使用 webpack.config.js/webpack.config.vendor.js 在启动时或更改时构建文件.
it will use the webpack.config.js / webpack.config.vendor.js to build the files on startup or when it changes.
这篇关于带有 .NET Core 的 Angular-CLI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
