Как заставить угловое приложение читать переменные среды из литейного частного облака (время выполнения)

Я работаю с приложением angular 5 и внедряю его в частную облачную среду. В общем, при сборке приложения мы предоставляем конечную точку API в файле "environment.{*}. Ts" и запускаем команду npm run build --prod.

моё требование - читать предоставленные пользователем переменные среды после развертывания. Я новичок в PCF.

Заранее спасибо.

Ссылки, которые я пробовал до сих пор, Link1, Link2, Link3

Источник

1 ответ

Я написал блог об этом. Короче говоря:

  • Форк статический файл-buildpack
  • Изменить data.go включать:
location /inject {
    default_type application/json;
    return 200 '<%= ENV["INJECT"] %>';
    }
  • Установите переменную окружения "INJECT" с помощью json в CF
  • cf push с участием -b [your forked repo]
  • включить SSI в buildpack, включив Staticfile
  • Добавьте SSI к вашему углу index.html включить это:
<html>
    <head>
        <script type="text/javascript">window["INJECT"] = 
            <!--#include virtual="/inject" -->
        </script>
Источник

Один из способов сделать это - использовать Angular Universal для выполнения первоначального рендеринга на стороне сервера через Node.

Как часть вашей установки Angular Universal, у вас будет файл server.ts, который может читать любые переменные среды, которые вам нужны. В этом примере я выбрал Nunjucks для рендеринга index.html из приложения Angular (я уверен, что вы можете использовать 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

Источник
Другие вопросы по тегам