Adding Angular 5 to ASP.Net MVC 5 application breaks build

Question

The setup:

ASP.Net MVC 5 application (v4.5.2).
Angular (v5.2.0) using angular-cli(v1.7.4) inside the MVC application.
Angular app runs on www.mydomain.com/app.
The angular application is loaded in the Index view of the AppController.
The necessary JS and CSS output files in the dist folder are referenced using BundleConfig.cs.
The build process has been modified to build the Angular application using the .csproj file.
ng build is using -extract-css(-ec) so that the Index.cshtml file does not have to change between dev and production.
Everything works correctly up to this point.

.csproj:

<Target Name="NgDebug" BeforeTargets="Build" Condition="'$(Configuration)' == 'Debug'">
    <Exec WorkingDirectory="$(ProjectDir)admin-client" Command="ng build -ec" />
  </Target>
  <Target Name="NgRelease" BeforeTargets="Build" Condition="'$(Configuration)' == 'Release'">
    <Exec WorkingDirectory="$(ProjectDir)admin-client" Command="ng build --prod" />
  </Target>

The problem:

When --watch (-w) is added to the Command="ng build -ec" the build hangs indefinitely and doesn't throw any errors.
Build output hangs: 1>------ Build started: Project: CorpNet.Admin.Web, Configuration: Debug Any CPU ------

My solution:

After the application starts I run ng build -ec -w via the command line and everything works correctly.

Question:

How do you add the --watch (-w) to ng build -ec as part of the build process instead of running it manually from the command line?

Martin Ullrich · Accepted Answer · 2018-05-04 06:04:06Z

3

You shouldn't.

A build needs the command to complete. Even if you spawn a watching process from the build, you have no way to control the lifecycle of that application.

So a single build during a csproj build is okay but after the build completes, no additional processes should be left over. Depending on which tool you use to build, a csproj file may even be built multiple times (design-time builds vs. actual builds).

You could however run angular commands from inside your application so the Angular Cli can rebuild your client side part while your application is running.

For ASP.NET Core, this is readily set up using the SPA Services that take care of integrating the Angular CLI with the ASP.NET Core pipeline (installable templates for 2.0, integrated in upcoming 2.1 tooling). See Use the Angular project template with ASP.NET Core

answered May 4, 2018 at 6:04

Martin Ullrich

102k27 gold badges271 silver badges232 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zzz Over a year ago

Can you expound on running angular commands from ins my application. Also, ASP.NET Core is not an option for this project.

Collectives™ on Stack Overflow

Adding Angular 5 to ASP.Net MVC 5 application breaks build

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related