Question

我正在使用angular 5应用程序并部署到私有云代工厂。通常，在构建应用程序时，我们将在＆＃34; environment。{*}。ts＆＃34; 文件中提供API端点并运行 npm run build --prod 命令。

我的要求是在部署后读取用户提供的环境变量。我是PCF的新手。

提前致谢。

我到目前为止尝试过的链接， Link1，Link2，Link3

Answer 1

实现此目的的一种方法是使用Angular Universal通过Node执行初始渲染服务器端。

作为Angular Universal设置的一部分，您将拥有一个server.ts文件，该文件可以读取您需要的任何环境变量。我为此示例选择了Nunjucks来从Angular应用程序中呈现index.html（我确信您可以使用EJS或其他模板引擎）。

// server.ts
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import * as nunjucks from 'nunjucks';

import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';

import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4201;
const DIST_FOLDER = join(process.cwd(), 'dist');

// Our index.html we'll use as our template
const template = readFileSync(join(DIST_FOLDER, 'index.html')).toString();

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist-server/main.bundle');

const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');

nunjucks.configure(DIST_FOLDER, {
  autoescape: true,
  express: app,
});

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    // Our index.html
    document: template,
    url: options.req.url,
    // DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }).then(html => {
    callback(null, html);
  });
});

app.set('view engine', 'html');

// Server static files from dist folder
app.get('*.*', express.static(DIST_FOLDER));

// All regular routes use the Universal engine
// You can pass in server-side values here to have Nunjucks render them
app.get('*', (req, res) => {
  res.render('index', { req, someValue: process.env.someValue });
});

// Start up the Node server
app.listen(PORT);

在index.html中，您可以在任何需要的位置输出服务器端变量。我选择为这里名为window的{{1}}分配一个值。

environment

随后在Angular组件，服务等中，您可以通过<!DOCTYPE html> <html lang="en"> <head> <base href="/" /> ... </head> <body> <app-root></app-root> <script> window['environment'] = { someValue: '{{ someValue }}', }; </script> </body> </html>

访问该值

Answer 2

我为此写了blogpost。简而言之：

分叉staticfile-buildpack
将data.go更改为包括：

location /inject {
    default_type application/json;
    return 200 '<%= ENV["INJECT"] %>';
    }

在CF中使用json设置环境变量“ INJECT”
cf push与-b [your forked repo]

Staticfile

在构建包中启用SSI
将SSI添加到您的index.html角中以包括以下内容：

<html>
    <head>
        <script type="text/javascript">window["INJECT"] = 
            <!--#include virtual="/inject" -->
        </script>

如何使角度应用程序从私有云代工厂读取环境变量（运行时）

2 个答案: