使用 .NET Core JavaScriptServices 构建的 Angular 应用程序中的环境变量答案

【问题标题】：Environment variables in Angular app built using .NET Core JavaScriptServices使用 .NET Core JavaScriptServices 构建的 Angular 应用程序中的环境变量
【发布时间】：2018-02-04 02:19:12
【问题描述】：

我发现，与大多数 SPA 框架一样，Angular 提供了一种将特定于环境的配置传递给应用程序的简单方法。我正在使用由 .NET Core 2.0 项目搭建的 Angular 应用程序。我尝试使用 Angular CLI 环境文件和 webpack DefinePlugin 为我的应用程序提供环境变量。我错过了什么？

这就是我想要的：

import { environment } from './environment';

export class MyComponent {
    constructor() {
        // Logs localhost:5001 in dev and www.myapi.com in prod
        console.log(process.env.API_URL);
    }
}

但使用 .NET Core JavaScriptServices。这可能吗？

【问题讨论】：

您的问题解决了吗？如果是这样，您能启发我们吗？
我的解决方案并不理想。我不得不使用全局 JavaScript 变量。我使用定义插件使用 webpack 进行了尝试，但随后更改为仅使用 .NET 将变量写入服务器上的布局。

标签： angular webpack asp.net-core

【解决方案1】：

环境的想法是，您为每个可能使用的环境都有一个environment.{ENV}.ts，然后在您的.angular-cli.json 中定义它们的名称：

...
"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}
...

你必须手动设置这个环境文件：

在你的环境中.ts

export const environment = {
  production: false,
  API_URL: 'http://localhost:5001'
}

在您的环境中.prod.ts

export const environment = {
  production: true,
  API_URL: 'http://www.myapi.com'
}

然后，当您需要某些环境属性时，您可以将环境对象导入您的 .ts 文件并调用它。

您调用的这个process.env 指的是节点的环境。

【讨论】：

如何将 Angular CLI 与 .NET Core JavaScriptServices 一起使用？
不知道。我单独使用 angular-cli。
Angular 的“环境”概念是完全错误的。这些是真正的“配置”（即：调试 VS 版本），在所有其他生态系统（iOS/Android/.NET）中，您可以在任何配置（调试或发布）中运行任意数量的环境。由于 Angular 将这两个概念混为一谈，因此您不得不破解解决方法来支持环境，而无需对“配置”之外的任何东西提供任何开箱即用的支持:(这是一种方法：docs.microsoft.com/en-us/aspnet/core/client-side/spa/…