angular2-starter 配置文件（带有环境（测试、生产）变量 aka .env 或 .conf）

Question

在许多框架中，例如 PHP Laravel，存在具有本地配置的文件（不同于开发、测试、生产环境）。如何为 angular-starter 项目提供包含所有本地环境变量值（如 Google Analytics、snetry.io 等的键）的配置文件？

Answer 1

我提出以下也适用于 AoT 的解决方案：

在主目录中的 angular-starter 项目的存储库中（package.json、docker 和其他顶级文件夹文件），我们创建文件 .env.example.js，内容如下正文：

// copy this file to './.env.js' and modify variables in EnvData

var Env = {
    // If some of below variable is NULL then that varabile feature is off
    google_analaytics : 'XX-YYYYYYYY-Z',
    sentry_clientKey_publicDSN: 'https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx@sentry.io/yyyyyy',
    // ... here you can put more variables
};

module.exports = Env;

然后我们将此文件复制到 .env.js 并将最后一个文件包含到 .gitignore 文件中。然后我们将文件 .env.example.js 和 .gitignore 提交到我们的 git 存储库。

我们使用 .js 文件而不是 .ts（打字稿），因为在生成 index.html 文件时，webpack 适用于 js 文件。好的，让我们展示如何在 webpack 配置文件中使用这个变量。让我们转到 ./config/webpack.common.js 并找到下面的代码并添加行：

  new HtmlWebpackPlugin({
    template: 'src/index.html',
    title: METADATA.title,
    chunksSortMode: 'dependency',
    metadata: METADATA,
    inject: 'head',
    env: require('../.env')    // <-- new line
  }),

然后在 ./src/index.html 的 google 分析部分，您可以更改为：

  <% if (htmlWebpackPlugin.options.env.google_analaytics) { %>
  <!-- Google Analytics: -->
  <script>
    (function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=r;A[l]=A[l]||function(){
    (A[l].q=A[l].q||[]).push(arguments)},A[l].l=1*new Date();a=n.createElement(g),
    r=n.getElementsByTagName(g)[0];a.async=1;a.src=u;r.parentNode.insertBefore(a,r)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', '<%= htmlWebpackPlugin.options.env.google_analaytics %>', 'auto');
    ga('send', 'pageview');
  </script>
  <% } %>

在你的 typescript module/component/class（.ts 文件）中，你可以这样使用变量值（我们将 js 导入 ts）（下面的例子是设置哨兵）：

import * as Raven from 'raven-js'; // http://sentry.io
import * as Env  from '../../.env.js';
...
let sentryDSN = Env['sentry_clientKey_publicDSN']
if(sentryDSN)
{
    Raven.config(sentryDSN).install();
    ...
}
...

就这些:)

angular2-starter 配置文件（带有环境（测试、生产）变量 aka .env 或 .conf）

angular2-starter config file (with environment (testing, production) variables aka .env or .conf)

javascript

config

environment-variables

typescript

angular