Passing Environment Variables to #797

New Issue

fergalmoran · 2025-08-09T17:17:42Z

fergalmoran commented

2025-08-09 17:17:42 +00:00

Originally created by @levarcooper on 4/27/2017

I'm having issues trying to pass environment variables (API Keys, etc) into angular. I've followed the recommendations in the documentation but Zone.current.get("PROPERTY"); is undefined both on the server and client-side. Here's my code:

Index.cshtml
... <app asp-prerender-module="ClientApp/dist/main-server" asp-prerender-data="new { secretURL = @Environment.GetEnvironmentVariable("secretURL "), secretKey = @Environment.GetEnvironmentVariable("secretKey ") }">Preparing your content...</app> ...

boot-server.ts
... export default function (params: any) : Promise<{ html: string, globals?: any }> { return new Promise((resolve, reject) => { const requestZone = Zone.current.fork({ name: 'angular-universal request', properties: { baseUrl: '/', requestUrl: params.url, originUrl: params.origin, preboot: false, specialKey: params.data.specialKey, specialURL: params.data.specialURL, document: '<!DOCTYPE html><html><head></head><body><app></app></body></html>' }, onHandleError: (parentZone, currentZone, targetZone, error) => { reject(error); return true; } }); return requestZone.run<Promise<string>>(() => platform.serializeModule(AppModule)).then(html => { resolve({ html: html }); }, reject); }); } ...

app.module
... export class AppModule { constructor() { console.log(Zone.current.get("specialURL")); // undefined } } ...

Alternatively, I've tried using webpack's DefinePlugin but was still unsuccessful in passing the properties to my application. The webpack code is below.

webpack.config.js
... var DefinePlugin = require('webpack/lib/DefinePlugin'); ... var clientBundleConfig = merge(sharedConfig, { entry: { 'main-client': './ClientApp/boot-client.ts' }, output: { path: path.join(__dirname, clientBundleOutputDir) }, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./wwwroot/dist/vendor-manifest.json') }), new webpack.DefinePlugin({ 'process.env': { 'SECRET_KEY': JSON.stringify('SecretKey') } }) ].concat(isDevBuild ? [ ...

*Originally created by @levarcooper on 4/27/2017* I'm having issues trying to pass environment variables (API Keys, etc) into angular. I've followed the recommendations in the documentation but `Zone.current.get("PROPERTY");` is undefined both on the server and client-side. Here's my code: **Index.cshtml** `... <app asp-prerender-module="ClientApp/dist/main-server" asp-prerender-data="new { secretURL = @Environment.GetEnvironmentVariable("secretURL "), secretKey = @Environment.GetEnvironmentVariable("secretKey ") }">Preparing your content...</app> ...` **boot-server.ts** `... export default function (params: any) : Promise<{ html: string, globals?: any }> { return new Promise((resolve, reject) => { const requestZone = Zone.current.fork({ name: 'angular-universal request', properties: { baseUrl: '/', requestUrl: params.url, originUrl: params.origin, preboot: false, specialKey: params.data.specialKey, specialURL: params.data.specialURL, document: '<!DOCTYPE html><html><head></head><body><app></app></body></html>' }, onHandleError: (parentZone, currentZone, targetZone, error) => { reject(error); return true; } }); return requestZone.run<Promise<string>>(() => platform.serializeModule(AppModule)).then(html => { resolve({ html: html }); }, reject); }); } ...` **app.module** `... export class AppModule { constructor() { console.log(Zone.current.get("specialURL")); // undefined } } ...` Alternatively, I've tried using webpack's DefinePlugin but was still unsuccessful in passing the properties to my application. The webpack code is below. **webpack.config.js** `... var DefinePlugin = require('webpack/lib/DefinePlugin'); ... var clientBundleConfig = merge(sharedConfig, { entry: { 'main-client': './ClientApp/boot-client.ts' }, output: { path: path.join(__dirname, clientBundleOutputDir) }, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./wwwroot/dist/vendor-manifest.json') }), new webpack.DefinePlugin({ 'process.env': { 'SECRET_KEY': JSON.stringify('SecretKey') } }) ].concat(isDevBuild ? [ ...`

fergalmoran closed this issue

2025-08-09 17:17:42 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#797