7

我正在使用 Angular 5 应用程序并部署到私有云代工厂。一般来说，在构建应用程序时，我们会在“environment.{*}.ts”文件中提供 API 端点并运行npm run build --prod命令。

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

提前致谢。

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

4

2 回答 2

2

我为此写了一篇博文。简而言之：

  • fork 静态文件构建包
  • 更改data.go为包括：
location /inject {
    default_type application/json;
    return 200 '<%= ENV["INJECT"] %>';
    }
  • 在 CF 中使用 json 设置环境变量“INJECT”
  • cf push和-b [your forked repo]
  • 通过包含一个在 buildpack 中启用 SSIStaticfile
  • 将 SSI 添加到您的角度index.html以包含以下内容：
<html>
    <head>
        <script type="text/javascript">window["INJECT"] = 
            <!--#include virtual="/inject" -->
        </script>
于 2019-08-01T13:11:41.883 回答
2

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

作为 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这里称为environment.

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="/" />
    ...
  </head>
  <body>
    <app-root></app-root>
    <script>
      window['environment'] = {
        someValue: '{{ someValue }}',
      };
    </script>
  </body>
</html>

随后在 Angular 组件、服务等中，您可以通过以下方式访问该值window['environment'].someValue

于 2018-04-10T13:19:25.260 回答