ASP.NET Core 3.1 添加 angular 到 MVC 应用程序

Question

我想将 angular 应用程序添加到 .Net Core 3.1 中的 MVC 应用程序。所以我可以向控制器添加授权属性并使用

 <base href="~/" />

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

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

  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");
     }
   });

Answer 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>

ASP.NET Core 3.1 添加 angular 到 MVC 应用程序

ASP.NET Core 3.1 add angular to MVC application

model-view-controller

angular

asp.net-core-3.1