根据.Net Core构建选择正确的角度环境

Question

我使用Angular ClientApp创建了一个带有Visual Studio模板的.Net Core Web Api。

构建项目时，还会使用.csproj <Target>部分中设置的参数构建包含的Angular App，例如

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

（创建新项目时自动生成此部分）

然而，这使我无法选择在构建期间使用哪个来自Angular的environment.ts文件，这使得为不同的部署目标构建有点复杂。

有没有办法在构建期间动态设置此文件？例如

appsettings.json应该用environment.ts构建
appsettings.Development.json应该用environment.dev.ts构建
appsettings.Production.json应该用environment.prod.ts构建
等等

这将确保每个dotnet构建及其相应的Angular构建都具有api-url，version等的正确环境值。

或者是否有另一个（更干净？）方法来为Angular App使用/覆盖环境变量？

这些是在构建期间应该交换的值

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

作为localhost：例如，5001在prod中不可行

Answer 1

我毕竟通过操纵* .csproj找到了一个解决方案。

提示：要明确这个问题仅适用于使用Visual Studio .Net Core Web Api with Angular Template创建项目时，该项目使用clientapp项目创建组合的web api

在我发现我可以为dotnet build添加自定义构建配置后，我将以下行添加到<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">块：

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

并在package.json中添加脚本：

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

它的作用是在Condition属性设置的不同构建配置上，npm run build被调用相应/适当的环境。

另一种可能更简单的方法是使用两个构建管道，一个用于npm，另一个用于角度app，一个用于dotnet web api。这样做时，您可能希望从* .csproj中删除整个构建SPA内容，否则它将构建应用程序两次。

或者首先只有两个独立的项目，让你自己麻烦:)

编辑：

正如指出的那样，CI / CD没有提到qazxsw poi（例如用多个参数构建）。所以使用package.json中的预定义脚本是正确的方法:)

Answer 2

我只想在pjominet的答案中添加一些内容。这是我使用多个环境工作的漫长搜索路径中的最后一个关键，但这是一个完整的解决方案，试图解决同样的问题。

我的目标是为不同的公司提供不同的环境配置，因为Web应用程序将由不同公司使用，只需稍加改动（启用/禁用模块，更改徽标，更改主题颜色等）。

配置Command="npm run build --configuration=production"（在属性下的Web项目中）。在launchSettings.json下添加以下代码：

profiles

如果你想要的环境名称，"Staging": { "commandName": "IISExpress", "launchBrowser": true, "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Staging" }, "applicationUrl": "https://localhost:5001;http://localhost:5000" }的名称。这将确保您能够在Visual Studio中的Staging下选择此配置。

欲了解更多信息：Start

在解决方案的根目录中添加您自己的read this文件以进行自定义应用程序设置。虽然这对于本地测试非常重要，因为在您的CI / CD中，您可能需要配置appsettings.Staging.json。
在你的substitutions中，添加以下Startup.cs块。

else if

请注意app.UseSpa(spa => { // To learn more about options for serving an Angular SPA from ASP.NET Core, // see https://go.microsoft.com/fwlink/?linkid=864501 spa.Options.SourcePath = "ClientApp"; if (env.IsDevelopment()) { spa.UseAngularCliServer(npmScript: "start"); } else if (env.EnvironmentName == "Staging") { #if DEBUG spa.UseAngularCliServer(npmScript: "start-stagingdebug"); #endif } });，这是必需的，因为您不希望在已部署的环境中执行此操作，但是对于本地运行的角度，您必须调用此方法，否则您将最终得到错误页面。您可能还会注意到，我将#if DEBUG附加到环境名称，稍后我会解释。现在你必须意识到debug将是假的，因此你必须努力确保在本地运行你的应用程序时仍然可以构建和提供你的角度应用程序。

在env.IsDevelopment()下修改你的angular.json，添加2个新配置：

architect => build => configurations

如果你对"staging": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.toptechneut.ts" }, { "replace": "src/assets/img/logo-icon.png", "with": "src/assets/img/staging/logo-icon.png" }, ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ] }, "stagingdebug": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.toptechneut.ts" }, { "replace": "src/assets/img/logo-icon.png", "with": "src/assets/img/staging/logo-icon.png" }, ] }有点了解，你会注意到在angular.json我为生产环境做了一个配置，我会确保我的CI / CD会调用它（或者当我通过VS2017发布我的应用程序时）。对于本地测试，我持有不同的配置staging，因此它仍然保留源映射，并且我能够在本地运行时调试我的代码。

在stagingdebug文件夹中添加environment.staging.ts文件，以获取特定于环境的选项。更多关于那，environments
修改你的read this，在package.json下，我添加了这些脚本：

scripts

同样在这里：对于本地开发，我将配置与"start-staging": "ng serve --configuration staging", "start-stagingdebug": "ng serve --configuration stagingdebug", "build-staging": "ng build --configuration staging", "build-stagingdebug": "ng build --configuration stagingdebug",相关联。

截至目前，您应该能够在Visual Studio中更改为新配置，并根据您的新环境配置运行！

debug

修改你的，谢谢你的pjominet。请注意，这仅用于发布您的Web应用程序，而不是用于本地调试。

.csproj

我修改了我的调用我在<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">  <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" /> <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-core" /> <Exec WorkingDirectory="$(SpaRoot)" Command="npm run buildprod" Condition="'$(Configuration)' == 'Release'" /> <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build-staging" Condition="'$(Configuration)' == 'Staging'" /> <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " /> 中定义的正确的script，因为出于某种原因，当我使用pjominet的答案时，我的CI没有拾取它背后的额外命令。

如果您使用的是Azure DevOps，则只需将package.json变量设置为BuildConfiguration即可。如果您遵循了所有步骤，那么这应该成功构建。

Staging

根据.Net Core构建选择正确的角度环境

问题描述投票：2回答：2

2个回答

最新问题

根据.Net Core构建选择正确的角度环境

问题描述 投票：2回答：2

2个回答

最新问题

问题描述投票：2回答：2