如何触发"ng build"从与msbuild的dotnetcore Web-api项目中，但是将有角项目保留在单独的文件夹中?

问题描述

我有一个带有角度cli的角度应用程序构建.我希望我的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文件夹中输出该构建. /p>

因此，我将.angular-cli.json中的"outDir"参数修改为:"../web-api-app/wwwroot"，以便当我从angular-app中调用"ng build"时，使用webpack将结果输出到wwwroot文件夹中.

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

解决方案

我找到了一种方法，可以从我的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>

我创建了一个示例应用程序，您可以在我的github项目core-angular中找到完整的源代码-example 和此博客帖子也详细描述了每个步骤.

I’ve an angular app build with angular cli. I want my web-api to serve the static files from the wwwroot folder. I want also to keep both project nicely separated inside their own folders. This is the structure of my soltution:

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

Given this structure of my app, what I want is to configure my msbuild script web-api-app.csproj to somehow trigger a "ng build" from within the angular-app and output the build inside the wwwroot folder.

Thus I modified the "outDir" parameter inside .angular-cli.json to: "../web-api-app/wwwroot" so that when I call "ng build", from within the angular-app, webpack outputs the result in the wwwroot folder.

How do I setup my MsBuild script so that when I invoke "dotnet build -c Release" the angular is packaged nicely inside the wwwroot 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.

这篇关于如何触发"ng build"从与msbuild的dotnetcore Web-api项目中，但是将有角项目保留在单独的文件夹中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！