ASP.NET Core 3.1 向 MVC 应用程序添加角度答案

【问题标题】：ASP.NET Core 3.1 add angular to MVC applicationASP.NET Core 3.1 向 MVC 应用程序添加角度
【发布时间】：2020-11-12 23:50:42
【问题描述】：

我想将 Angular 应用程序添加到 .Net Core 3.1 中的 MVC 应用程序。所以我可以将授权属性添加到Controller并使用

 <base href="~/" />

在 Index.cshtml 中用于虚拟目录中的应用程序。但是你怎么知道将哪些必要的 webpack 输出脚本标签添加到 Index.cshtml 中？或者有没有办法自动完成？

如果我将 UseSpa 内容添加到 StartUp.cs，我可以在构建输出中看到 webpack 启动并构建 angular 应用程序的效率高达 93%，但随后一切都以超时结束。我可能必须配置 agular.json 文件不向 index.html 添加东西？（我使用 Angular SPA 模板从 ASP.Net Core 3.1 应用程序中复制了所有有角度的东西）

  app.UseSpa(spa =>
   {
     // To learn more about options for serving an Angular SPA from ASP.NET Core,
     // see https://go.microsoft.com/fwlink/?linkid=864501
     spa.Options.SourcePath = "ClientApp";
     if (env.IsDevelopment())
     {
       spa.UseAngularCliServer(npmScript: "start");
     }
   });

【问题讨论】：

标签： angular model-view-controller asp.net-core-3.1

【解决方案1】：

最终将这些部分添加到 mvc 视图中：

    <environment include="Development">
//this is output of ng serve:
    <script src="~/runtime.js" type="module" asp-append-version="true"></script>
    <script src="~/polyfills.js" type="module" asp-append-version="true"></script>
    <script src="~/scripts.js" defer asp-append-version="true"></script>
    <script src="~/vendor.js" type="module" asp-append-version="true"></script>
    <script src="~/main.js" type="module" asp-append-version="true"></script>
    </environment>

   <environment exclude="Development">
//this is output of ng build:
   <script src="~/runtime-es2015.js" type="module" asp-append-version="true"></script>
   <script src="~/runtime-es5.js" nomodule defer asp-append-version="true"></script>
   <script src="~/polyfills-es5.js" nomodule defer asp-append-version="true"></script>
   <script src="~/polyfills-es2015.js" type="module" asp-append-version="true"></script>
  <script src="~/scripts.js" defer asp-append-version="true"></script>
  <script src="~/main-es2015.js" type="module" asp-append-version="true"></script>
  <script src="~/main-es5.js" nomodule defer asp-append-version="true"></script>
  </environment>

然后在 csproj 文件中确保 webpack 不会将哈希添加到构建文件名中：

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod --output-hashing none" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod --output-hashing none" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

<!-- Include the newly-built files in the publish output -->
<ItemGroup>
  <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
  <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
  <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
    <RelativePath>%(DistFiles.Identity)</RelativePath>
    <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
    <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
  </ResolvedFileToPublish>
</ItemGroup>

【讨论】：