本文介绍了基于.Net Core构建选择正确的Angular环境的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用Angular ClientApp和Visual Studio中的模板创建了.Net Core Web Api。

I created an .Net Core Web Api with an Angular ClientApp with the templates from Visual Studio.

在构建项目时,还会使用 .csproj < Target>中设置的参数来构建包含的Angular App。例如

When building the project also builds the contained Angular App with the params set in the .csproj <Target> section e.g.

<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" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" 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>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

(此部分在创建新项目时自动生成)

(This section was auto-generated when creating a new project)

但是,这让我别无选择,应该在构建过程中使用Angular的哪个environment.ts文件,这使得为不同的部署目标进行构建变得有些复杂。

Yet this leaves me no choice which environment.ts file from Angular should be used during a build, which makes building for different deployment targets a bit complicated.

在构建过程中是否可以动态设置此文件?例如

Is there any way to set this file dynamically during build? e.g.


  • appsettings.json 应该使用 environment.ts
  • $构建b $ b
  • appsettings.Development.json 应使用 environment.dev.ts

  • appsettings.Production构建.json 应该使用 environment.prod.ts

  • 等构建。

  • appsettings.json should build with environment.ts
  • appsettings.Development.json should build with environment.dev.ts
  • appsettings.Production.json should build with environment.prod.ts
  • etc.

这将确保每个dotnet构建及其对应的Angular构建对于api-url,版本等具有正确的环境值...

This would ensure that every dotnet build and its corresponding Angular build would have the correct environment values for the api-url, version, etc...

还是有另一种(更清洁的方法)为Angular App使用/覆盖环境变量?

Or is there another (cleaner?) method to use/override environment variables for the Angular App?

这些是在构建过程中应该交换的值

These are the values that should be exchanged during build

export const environment = {
    production: false,
    dataServiceURI: 'https://localhost:5001/data',
    version: 'localhost'
};

例如,由于localhost:5001在生产中不可行

As localhost:5001 is no viable option in prod for example

推荐答案

我毕竟是通过操纵* .csproj来找到解决方案的。

I kind of found a solution by manipulating the *.csproj after all.

提示:为清楚起见,此问题仅在使用 Visual Studio .Net Core Web Api和Angular模板创建项目时才适用,该项目会使用clientapp创建组合的Web api项目

HINT: To be clear this problem only applies when you created your project with the Visual Studio .Net Core Web Api with Angular Template which creates a combined web api with clientapp project

我发现可以为 dotnet构建添加自定义构建配置后,我向<目标名称= PublishRunWebpack AfterTargets = ComputeFilesToPublish> 块:

After I found out that I could add custom Build Configurations for dotnet build I added the following lines to the <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish"> block:

<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-prod" Condition="'$(Configuration)' == 'Release'" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-staging" Condition="'$(Configuration)' == 'Staging'" />

并在package.json中添加到脚本中:

and in package.json add to scripts:

"scripts": {
        "build-staging": "ng build --configuration=staging",
        "build-prod": "ng build --configuration=production",
    },

它的作用是在不同的版本上由条件属性设置的配置, npm run build 是在相应/适当的环境下调用的。

What it does, is on different build configs set by the Condition attribute, npm run build is called with a corresponding/appropriate environment.

另一种也许更简单的方法是拥有两个构建管道,一个用于npm和angular app,另一个用于dotnet Web api。这样做时,您可能需要从* .csproj中删除整个build SPA内容,否则它将两次构建应用程序。

Another, perhaps more easy approach, would be to have two build pipelines, one for npm and the angular app and one for the dotnet web api. While doing so, you may want to remove the whole build SPA stuff from the *.csproj otherwise it will build the app twice.

或者首先只是拥有2个独立的项目,省去麻烦:)

Or just have 2 separate projects in the first place and spare yourself the hassle :)

编辑:

如指出的那样, Command = npm run build --configuration = production (例如,使用多参数构建)未由CI / CD接收。因此,使用package.json中的预定义脚本是正确的方法:)

As pointed out Command="npm run build --configuration=production" (e.g. build with mutliple params) is not picked up by the CI/CD. So using predefined scripts from package.json is the correct way to go :)

这篇关于基于.Net Core构建选择正确的Angular环境的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-29 06:24
查看更多