带有 .NET Core 的 Angular-CLI答案

【问题标题】：Angular-CLI with .NET Core带有 .NET Core 的 Angular-CLI
【发布时间】：2018-04-18 16:11:14
【问题描述】：

我在 Visual Studio 2017 中创建了一个 SPA Angular-CLI .NET Core 项目：

dotnet new angular -o testApp

我可以通过Ctrl-F5正常构建和运行它。在这种情况下：

webpack-dev-server 是否为应用提供服务？在我看来，webpack-dev-server 在这里没有使用，因为 Kestrel 开始发挥作用。但是，由于 webpack 是在后台运行的，因此正在创建一些包。这是 HTTP 响应：

 <!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，我的假设是它没有启动！那么，究竟发生了什么？

通过尝试
```
ng serve
```
这使得应用程序可以由webpack-dev-server 提供服务，我不能与 .NET 服务器部分通信。那么，使用 ng serve 有什么意义 if 无法全面测试应用程序，包括后端部分？

【问题讨论】：

标签： asp.net angular webpack asp.net-core angular-cli

【解决方案1】：

只是为了对此进行更新。

对于带有新模板包的 ASP.NET Core 2.1 或 2.0

ASP.NET Core 2.1（在撰写本文时为预览版）附带更新的 Angular 模板，这些模板在 2.1 中可用并位于 Microsoft.DotNet.Web.Spa.ProjectTemplates 包中。

在 ASP.NET Core 2.1 上，它与 .NET Core SDK 一起安装。见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。

对于 ASP.NET Core 2.0

旧的 Angular SPA 模板基于 JavaScriptServices，它随 ASP.NET Core 2.0 版或运行 dotnet new -i "Microsoft.AspNetCore.SpaTemplates::*" 一起提供。见Available templates for dotnet new。

对于 ASP.NET Core 2.0，这是由 WebpackDev 中间件完成的（请参阅 Startup.cs 中的 app.UseWebpackDevMiddleware(...) 调用。

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 在启动或更改时构建文件。

【讨论】：

没有WebpackDevMiddleWare...app.UseSpa(spa => { spa.Options.SourcePath = "ClientApp"; if (env.IsDevelopment()) { spa.UseAngularCliServer(npmScript: "start"); } });
除非他们改变它，否则曾经有过。必须看看 UseSpa 是什么，但有 hints that they changed it 所以它可能已经有了，但我还没有更新我现有的项目。 4-5 个月前生成的模板UseWebpackDevMiddleware
您是否偶然使用了 ASP.NET Core 2.1 预览版？我刚刚更新了我的模板并使用dotnet new angular -o testApp 创建了一个新项目，它仍然使用UseWebpackDevMiddleware 创建了一个模板
我确实安装了.NET Core SDK 2.1.4。那么，您对此案有什么解释吗？
SDK 版本并不重要，因为它与 .NET Core 版本无关。运行时的版本以及它的 ASP.NET Core 2.1 是否会更有趣（即，是否附带 VS 的预览版）。不管怎样，UseSpa 来自 SpaServices，它也用于 UseWebpackDevMiddleware，参见 github.com/aspnet/JavaScriptServices/blob/2.1.0-preview2-final/…，因此它捆绑和提供文件并进行热模块替换，如问题中所述