angular-server-side-configuration
Advanced tools
Configure an angular application on the server
Configure an angular application at runtime on the server or in a docker container via environment variables.
The Angular CLI provides build time configuration (via environment.ts). In a Continuous Delivery environment this is sometimes not enough.
Environment variables are used for configuration.
This package provides an Angular CLI builder to search for usages at build time.
A native CLI can be used to insert populated
environment variables into index.html file(s) into the head tag or by replacing <!--CONFIG-->
(Missing environment variables will be represented by null). This should be done
on the host serving the bundled angular files.
Version 8.x of this package is a complete rewrite with Angular schematics and builders. If you require support for older Angular versions, Version 2.x of this library can be used, as it is Angular version agnostic.
ng add angular-server-side-configuration
This will configure the appropriate files.
Alternatively, if you want to configure the files yourself:
npm install --save angular-server-side-configuration
Ensure you have an ngsscbuild entry in your project architect section.
To use the builder run ng run your-project-name:ngsscbuild:production.
You can add additional configurations in angular.json, which can be executed
by replacing production with your configuration name in the previous command.
The builder will analyze the configured ngsscConfigurationFile to detect
used environment variables and generate an ngssc.json in the defined
outputPath in the referenced browserTarget.
...
"projects": {
...
"your-project-name": {
...
"architect": {
...
"ngsscbuild": {
"builder": "angular-server-side-configuration:ngsscbuild",
"options": {
"aotSupport": true, // Set this to true, if you need to use
// environment variables inside AoT contexts
// (e.g. forRoot(...) or forChild(...))
"browserTarget": "your-project-name:build",
"ngsscConfigurationFile": "src/environments/environment.prod.ts"
},
"configurations": {
"production": {
"browserTarget": "your-project-name:build:production"
}
}
}
...
}
...
}
...
}
...
angular-server-side-configuration supports two variants for using environment variables: process.env.* or NG_ENV.*
Use process.env.NAME in your environment.prod.ts, where NAME is the environment variable that should be used.
import 'angular-server-side-configuration/process';
export const environment = {
production: process.env.PROD !== 'false',
apiAddress: process.env.API_ADDRESS || 'https://example-api.com'
};
Import NG_ENV from angular-server-side-configuration/ng-env
and use NG_ENV.NAME in your environment.prod.ts, where NAME is the
environment variable that should be used.
import { NG_ENV } from 'angular-server-side-configuration/ng-env';
export const environment = {
production: NG_ENV.PROD !== 'false',
apiAddress: NG_ENV.API_ADDRESS || 'https://example-api.com'
};
Add <!--CONFIG--> to index.html. This will be replaced by the configuration script tag.
This is optional, as the environment variables can be configured to be inserted in the head tag.
It is however the safest option.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular Example</title>
<!--CONFIG-->
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
This library provides a native implementation for the insert command of the CLI. Go to
Releases
and download the appropriate executable for your server environment.
(See build.sh for
build details of the native CLI. Please open an Issue
if you need an additional environment.)
Thanks to DanielHabenicht for the input and contribution.
Usage: ngssc insert [options] [directory]
| Options | Description |
|---|---|
-r, --recursive | Recursively searches for ngssc.json files and applies the contained configuration |
--dry | Perform the insert without actually inserting the variables |
Dockerfile
FROM nginx:alpine
ADD https://github.com/kyubisation/angular-server-side-configuration/releases/download/v2.0.0/ngssc_64bit /usr/sbin/ngssc
RUN chmod +x /usr/sbin/ngssc
COPY dist /usr/share/nginx/html
COPY start.sh start.sh
RUN chmod +x ./start.sh
CMD ["./start.sh"]
start.sh
#!/bin/sh
ngssc insert /usr/share/nginx/html
nginx -g 'daemon off;'
The package provides a JSON schema: ngssc.schema.json",
{
"$schema": "./node_modules/angular-server-side-configuration/ngssc.schema.json", // Optional
"variant": "process", // Either "process" or "NG_ENV".
"environmentVariables": [], // Detected environment variables.
"filePattern": "**/index.html" // File pattern in which environment variables should be inserted.
}
Apache License, Version 2.0
8.0.0-beta.0 (2019-06-30)
FAQs
Configure an angular application on the server
The npm package angular-server-side-configuration receives a total of 1,612 weekly downloads. As such, angular-server-side-configuration popularity was classified as popular.
We found that angular-server-side-configuration demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.