如何使用 msbuild 从 dotnetcore web-api 项目中触发“ng build”，但将 angular 项目保存在单独的文件夹中？

Posted 2023-03-09

【中文标题】如何使用 msbuild 从 dotnetcore web-api 项目中触发“ng build”，但将 angular 项目保存在单独的文件夹中？

【英文标题】：How to trigger a "ng build" from within a dotnetcore web-api project with msbuild but keep the angular project in a separate folder?

【发布时间】：2018-04-05 18:12:30

【问题描述】：

我有一个使用 Angular cli 构建的 Angular 应用程序。我希望我的 web-api 提供 wwwroot 文件夹中的静态文件。我还想将两个项目很好地分开在各自的文件夹中。这是我的解决方案的结构：

.\angular-app
.\angular-app\angular-cli.json
.\web-api-app
.\web-api-app\wwwroot

鉴于我的应用程序的这种结构，我想要配置我的 msbuild 脚本 web-api-app.csproj 以某种方式从 angular-app 中触发“ng build”并在 wwwroot 文件夹中输出构建。

因此，我将 .angular-cli.json 中的“outDir”参数修改为：“../web-api-app/wwwroot”，这样当我在 angular-app、webpack 中调用“ng build”时在 wwwroot 文件夹中输出结果。

如何设置我的 MsBuild 脚本，以便当我调用“dotnet build -c Release”时，角度很好地打包在 wwwroot 文件夹中？

【问题讨论】：

这篇文章的某一段有信息可以做你想做的事：candordeveloper.com/2017/04/12/…

【参考方案1】：

我找到了一种能够从我的 msbuild 中调用 «ng build» 的方法。诀窍是在 DotNetCore 应用程序的根目录中使用一个 npm 脚本，该脚本“cd”到 angular 应用程序中，然后调用“ng build”。这些是我采取的步骤： 1）为了能够使用 npm 脚本命令编辑 angular-app 的 package.json 的脚本部分：（这里我还定义了一个启动脚本来轻松启动我的本地开发环境并构建以便能够在其中构建我的脚本调试模式）

"scripts": 
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "build-prd": "ng build --prod --env=prod",
 

2) 从 Web-Api 应用程序中，在 web-api 应用程序的根目录中添加一个 package.json，其中包含：

"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) 最后，配置您的 web-api MsBuild 脚本以在运行发布构建时调用 ng 构建脚本。因此，将以下目标添加到 csproj 文件中：

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

我创建了一个示例应用程序，您可以在my github project core-angular-example 和this blog post 上找到整个源代码，还详细描述了每个步骤。

【讨论】：

您是否知道如何将它与 azure devops 管道结合使用？我想设置 5 种不同的环境

【参考方案2】：

适用于我的 .NET Core 的简单解决方案

  <Target Name="Build Angular" BeforeTargets="Build">
    <Message Text="Build in process" Importance="high" />
    <Exec Command="cd angular-app &amp;&amp; ng build --prod --aot"  />
  </Target>

【讨论】：

我最终使用了 ，并在发布时将其更改为 ng build --prod

另一个用于指定工作目录并使用 npm 脚本的选项：