ASP.NET Core 3.1 add angular to MVC application

Question

I want to add an angular application to a MVC application in .Net Core 3.1. So I can add authorization attributes to the Controller and use

 <base href="~/" />

in the Index.cshtml for apps in virtual directories. But how do u know which necessary webpack output script tags to add to the Index.cshtml? Or is there even a way to do it automatically?

if I add the UseSpa stuff to the StartUp.cs I can see in the build output that webpack starts and builds the angular application up to 93% but then it all ends in a timeout. I probably have to configure the agular.json file not to add stuff to an index.html ? (I copied all the angular stuff from a ASP.Net Core 3.1 application using the Angular SPA template)

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

Robert Pouleijn · Accepted Answer · 2020-12-23 10:08:06Z

Ended up adding these section to the mvc view:

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

then in the csproj file make sure webpack doesn't add the hashes to the build filenames:

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

Collectives™ on Stack Overflow

ASP.NET Core 3.1 add angular to MVC application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related