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（typescript），因为生成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中，您可以更改为：

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

在你的打字稿模块/组件/类（.ts文件）里面，你可以用这种方式使用变量值（我们将js导入ts）（下面的例子是setup sentry）：

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配置文件（带有环境（测试，生产）变量，也就是.env或.conf）

1 个答案: