Angular 基于.Net核心构建选择正确的角度环境

我用VisualStudio中的模板创建了一个带有Angular客户端的.Net核心Web Api

在构建项目时，还使用.csproj部分中设置的参数构建包含的角度应用程序，例如

%（DistFiles.Identity）
保存最新

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

然而，这让我无法选择在构建过程中应该使用Angular中的哪个environment.ts文件，这使得构建不同的部署目标有点复杂

有没有办法在生成过程中动态设置此文件？e、 g

• appsettings.json应使用environment.ts构建
• appsettings.Development.json应使用环境.dev.ts构建
• appsettings.Production.json应使用environment.prod.ts构建
• 等等

这将确保每个dotnet构建及其相应的角度构建都具有api url、版本等的正确环境值

或者是否有其他（更干净的？）方法来使用/覆盖Angular应用程序的环境变量

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

导出常量环境={
制作:假,，
dataServiceURI:'https://localhost:5001/data',
版本：“本地主机”
};

---

作为localhost:5001在prod中是不可行的选项，例如

我最终还是通过操纵*.csproj找到了一种解决方案

提示：要清楚，此问题仅适用于使用

Visual Studio.Net Core Web Api和Angular Template创建项目时，该模板创建了与clientapp项目组合的Web Api

在我发现我可以为
dotnet Build
添加自定义构建配置后，我在
块中添加了以下行：



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

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

它所做的是在由
条件
属性设置的不同构建配置上，通过相应的/适当的环境调用
npm run build

另一种可能更简单的方法是有两个构建管道，一个用于npm和angular应用程序，另一个用于dotnet web api。执行此操作时，您可能希望从*.csproj中删除整个build SPA内容，否则它将生成两次应用程序

或者首先有两个独立的项目，省去麻烦：）

编辑：

正如所指出的那样，CI/CD不会拾取
Command=“npm运行构建--配置=生产”
（例如，具有多个参数的构建）。因此，使用package.json中的预定义脚本是正确的方法：）
我只想提供一个端到端的解决方案，因为我现在要花相当多的时间来保存您：）

我的目标是为不同的公司提供不同的环境配置，因为web应用程序将由不同的公司使用，只需进行一些小的更改（启用/禁用模块、更改徽标、更改主题颜色等）

配置
launchSettings.json
（在web项目的“属性”下）。在配置文件下添加以下代码：
“登台”：{
“命令名”：“IISExpress”，
“启动浏览器”：正确，
“环境变量”：{
“ASPNETCORE_环境”：“暂存”
},
“应用程序URL”：https://localhost:5001;http://localhost:5000"
}

其中，
Staging
是所需环境名称的名称。这将确保您能够在Visual Studio中的
Start
下选择此配置

有关更多信息：

在项目的根目录中添加自己的
appsettings.Staging.json
文件以进行自定义应用程序设置。尽管这对于本地测试非常重要，因为您可能需要在CI/CD中进行配置。如果您确实希望在生产中使用特定的
appsettings.Staging.json
，请在服务器上将
ASPNETCORE\u环境设置为
Staging
（对于azure应用程序服务，在配置=>应用程序设置下）

在
Startup.cs
中，添加以下
else if
块

app.UseSpa（spa=>
{
//要从ASP.NET Core了解更多有关提供角度SPA的选项，
//看https://go.microsoft.com/fwlink/?linkid=864501
spa.Options.SourcePath=“ClientApp”；
if（env.IsDevelopment（））
{
spa.UseAngularCliServer（npmScript:“启动”）；
}
else if（env.EnvironmentName==“暂存”）
{
#如果调试
UseAngularCliServer（npmScript:“启动stagingdebug”）；
#恩迪夫
}
});

注意
#如果DEBUG
，这是必需的，因为您不想在部署的环境中执行此操作，但是对于本地运行angular，您必须调用此操作，否则将出现错误页面。您可能还注意到，我在环境名称后面附加了
debug
，我将在后面解释。现在，你必须意识到
env.IsDevelopment（）
将是错误的，因此，你必须努力确保在本地运行应用程序时，angular应用程序仍将生成并提供服务

修改您的
angular.json
，在
architect=>build=>configurations
下，添加2新配置：
“登台”：{
“文件替换”：[
{
“替换”：“src/environments/environment.ts”，
“with”：“src/environments/environment.toptechneut.ts”
},
{
“替换”：“src/assets/img/logo icon.png”，
“带”：“src/assets/img/staging/logo icon.png”
},
],
“优化”：没错，
“输出授权”：“全部”，
“sourceMap”：false，
是的，
“namedChunks”：假，
“aot”：是的，
“前