angular-server-side-configuration
Advanced tools
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 a CLI command
to search for usages at build time and a CLI command for inserting 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.
npm install --save angular-server-side-configuration
Wrap the ng build command with ngssc (e.g. ngssc ng build or ngssc --wrap-aot ng build
if AoT retention is needed). This will generate a ngssc.json file in dist (or configurable via --dist),
which contains the configurations needed for ngssc insert. (See ngssc and ngssc.json)
package.json
...
"scripts": {
...
"build": "ngssc ng build --prod",
...
}
...
If you need to build multiple angular bundles with the same environment file (e.g. to build i18n bundles),
wrap the different ng build scripts.
package.json
...
"scripts": {
...
"build": "ngssc ng npm run build:ng",
"build:ng": "ng build -c en && ng build -c de && ng build -c fr",
...
}
...
This will create an ngssc.json in you dist directory (configurable via --dist, e.g. ngssc --dist ng build --prod)
or embed the configuration in the html files in the dist directory. You can pass an existing ngssc.json file
to the command via --config (e.g. ngssc --config ngssc.json).
If you use environment variables in Module.forRoot or Module.forChild (or other AoT code sections)
the --wrap-aot flag must be used with the ngssc command (e.g. ngssc --wrap-aot ng build --prod).
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
(or angular-server-side-configuration/ng4-env for Angular 4 or 5)
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>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--CONFIG-->
</head>
<body>
<app-root></app-root>
</body>
</html>
npm install -g angular-server-side-configuration
ngssc insert /path/to/ngssc.json/file
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.
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;'
angular-server-side-configuration provides a CLI.
npm install angular-server-side-configuration -g
ngssc --help
Usage: ngssc [options] [ng...]
Detect used environment variables and either generates ngssc.json in given dist or embeds the information in the html files in dist
| Options | Description |
|---|---|
-ef, --environment-file | The environment file in which to detect environment variables and optionally tokenize when using --wrap-aot. Defaults to src/environments/environment.prod.ts |
-a, --wrap-aot | Tokenize variables to to retain during AoT compilation |
--dist | The output path of the ng build. Defaults to dist/ |
--html-file-pattern | The file pattern where the environment variables should be inserted. Defaults to **/index.html |
-h, --insert-in-head | Whether to configure to try to insert the environment variables in the head tag. Defaults to configuring replacing |
-e, --embed-in-html | Whether to embed the ngssc information into the html file found by --html-file-pattern in --dist instead of generating ngssc.json in --dist |
-c, --config <ngssc.json> | Use an existing ngssc.json file as base configuration |
-h, --help | output usage information |
Usage: ngssc insert [options] [directory]
Insert environment variables. Looks for an ngssc.json file inside the current or given directory. Alternatively use the --config-in-html flag. Directory defaults to current working directory
| Options | Description |
|---|---|
-i, --config-in-html | Recursively searches for html files and applies the configuration found inside |
--dry | Perform the insert without actually inserting the variables |
-h, --help | output usage information |
Usage: ngssc init [options] [directory]
Initialize an angular project with angular-server-side-configuration (Directory defaults to current working directory)
| Options | Description |
|---|---|
-ef, --environment-file | The environment file to initialize. environmentFile defaults to src/environments/environment.prod.ts |
--npm | Install angular-service-side-configuration via npm. Default |
--yarn | Install angular-service-side-configuration via yarn |
--process-env | Initialize with process.env variant. Default |
--ng-env | Initialize with NG_ENV variant |
-h, --help | output usage information |
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.
// Will be merged if used with an existing ngssc.json.
"filePattern": "**/index.html", // File pattern in which environment variables should be inserted.
// Can be configured via --html-file-pattern. Also used if
// --embed-in-html is used.
"insertInHead": false // By default the CLI replaces <!--CONFIG--> in your html files during
// the insert command. If insertInHead is set to true, the insert
// command tries to insert the environment variables in the head tag,
// by looking for </title> or </head>.
}
Apache License, Version 2.0
FAQs
Configure an angular application on the server
The npm package angular-server-side-configuration receives a total of 1,832 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.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.