How to trigger a "ng build" from within a dotnetcore web-api project with msbuild but keep the angular project in a separate folder?
I found a way to be able to call the « ng build » from within my msbuild. The trick is to use an npm script inside the root of the DotNetCore app that “cd” into the angular app and then call “ng build” . These are the steps I took: 1) To be able to use npm script commands edit the script section of the package.json of the angular-app: (here I also define a start script to easily start my local dev environment & build to be able to build my scripts in debug mode)
"scripts": {
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"build-prd": "ng build --prod --env=prod",
}
2) From with the Web-Api app, add a package.json inside the root of the web-api app containing:
"scripts": {
"install": "cd ../angular-app & npm install",
"start": "cd ../angular-app & npm start",
"build": "cd ../angular-app & npm run-script build",
"build-prd": "cd ../angular-app & npm run-script build-prd"
}
3) Finally, configure your web-api MsBuild script to invoke the ng build script when running a release build. Therefore, add following targets into the csproj file:
<Target Name="EnsureNode">
<Exec Command="node --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
</Exec>
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
</Target>
<Target Name="ReleaseRunNgBuild" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Release' ">
<CallTarget Targets="EnsureNode" />
<Message Importance="high" Text="Install packages..." />
<Exec Command="npm install" />
<Message Importance="high" Text="Performing ng build for prd build..." />
<Exec Command="npm run-script build-prd" />
</Target>
I created an example app where you can find the entire source code on my github project core-angular-example and this blog post also describe every step in detail.
A simple solution that works for me with .NET Core
<Target Name="Build Angular" BeforeTargets="Build">
<Message Text="Build in process" Importance="high" />
<Exec Command="cd angular-app && ng build --prod --aot" />
</Target>