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

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

мое требование состоит в том, чтобы читать предоставленные пользователем переменные среды после развертывания. Я новичок в ПКФ.

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

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


angular pcf private-cloud
person Gowtham.K.Reddy    schedule 09.04.2018    source источник
comment
Чтобы уточнить, вы хотите получить доступ к переменным среды во время сборки? или время работы?   -  person Brandon    schedule 09.04.2018
comment
Спасибо за ответ, мне нужен доступ во время выполнения   -  person Gowtham.K.Reddy    schedule 09.04.2018
comment
Можете ли вы использовать Node для первоначального рендеринга с помощью Angular Universal?   -  person Brandon    schedule 09.04.2018
comment
Я не знаком с Angular Universal, я посмотрю на него. Любая помощь заранее приветствуется :)   -  person Gowtham.K.Reddy    schedule 10.04.2018

Ответы (2)


arrow_upward
2
arrow_downward

Один из способов добиться этого — использовать 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

person Brandon    schedule 10.04.2018
comment
Спасибо за ваш пример. Я импортирую и дам вам знать наверняка. на данный момент я столкнулся с другим подходом и развернул его. Этот кажется интересным :) - person Gowtham.K.Reddy; 11.04.2018
comment
Другим способом сделать это было бы создать файл environment.[whatever].ts на основе переменной среды во время сборки и использовать перекрестную переменную: npmjs.com/package/cross-var, чтобы выбрать переменную среды Node в скрипте сборки npm. - person Brandon; 11.04.2018
comment
Спасибо, я создал файл environmentconfig.ts с помощью команды ng build --prod, а затем при загрузке в PCF нам нужно использовать файл package.json. в этом файле Package.json в команде запуска я дал команду ts-node для создания файла environmentconfig.ts. Этот файл создается на сервере PCF, поэтому он считывает предоставленные пользователем переменные среды и создает файл environmentconfig.js, в файле index.html я даю ссылку на вновь созданный файл environmentconfig.ts. наконец, читая window.environment.{KEY}, он работает, как и ожидалось. - person Gowtham.K.Reddy; 16.04.2018
comment
Прохладный. Рад, что вы смогли найти решение. - person Brandon; 16.04.2018

arrow_upward
2
arrow_downward

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

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