Loader for ngx-config that provides application settings to browser/server platforms


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
1346Jun 10, 2021Nov 23, 2016Minified + gzip package size for @ngx-universal/config-loader in KB


@ngx-universal/config-loader npm version npm downloads

Loader for ngx-config that provides application settings to browser/server platforms

CircleCI coverage tested with jest Conventional Commits Angular Style Guide

Please support this project by simply putting a Github star. Share this library with friends on Twitter and everywhere else you can.


This 5.x.x branch is intented to work with @angular v5.x.x. If you're developing on a later release of Angular than v5.x.x, then you should probably choose the appropriate version of this library by visiting the master branch.

Table of contents:


This library depends on Angular v4.0.0. Older versions contain outdated dependencies, might produce errors.

Also, please ensure that you are using Typescript v2.5.3 or higher.

Getting started


You can install @ngx-universal/config-loader using npm

npm install @ngx-universal/config-loader --save

Note: You should have already installed @ngx-config/core.


  • ng-seed/universal is an officially maintained seed project, showcasing common patterns and best practices for @ngx-universal/config-loader.

Related packages

The following packages may be used in conjunction with @ngx-universal/config-loader:

Adding @ngx-universal/config-loader to your project (SystemJS)

Add map for @ngx-universal/config-loader in your systemjs.config

'@ngx-universal/config-loader': 'node_modules/@ngx-universal/config-loader/bundles/config-loader.umd.min.js'


Setting up ConfigModule to use UniversalConfigLoader

UniversalConfigLoader requires a browserLoader and a serverLoader to load application settings on both platforms.

  • Import ConfigModule using the mapping '@ngx-config/core' and append ConfigModule.forRoot({...}) within the imports property of app.module.
  • Import UniversalConfigLoader using the mapping '@ngx-universal/config-loader'.

Note: Considering the app.module is the core module in Angular application.


  "system": {
    "applicationName": "Mighty Mouse",
    "applicationUrl": "http://localhost:8000"
  "seo": {
    "pageTitle": "Tweeting bird"
    "locale": "en"


import { ConfigModule, ConfigLoader, ConfigStaticLoader } from '@ngx-config/core';
import { ConfigFsLoader } from '@ngx-config/fs-loader';
import { ConfigHttpLoader } from '@ngx-config/http-loader';
import { UniversalConfigLoader } from '@ngx-universal/config-loader';

export function configFactory(platformId: any, http: HttpClient): ConfigLoader {
  const serverLoader = new ConfigFsLoader('./public/assets/config.json'); // FILE PATH
  const browserLoader = new ConfigHttpLoader(http, './assets/config.json'); // API ENDPOINT

  return new UniversalConfigLoader(platformId, serverLoader, browserLoader);

  declarations: [
  imports: [
      provide: ConfigLoader,
      useFactory: (configFactory),
      deps: [PLATFORM_ID, Http]
  bootstrap: [AppComponent]
export class AppModule {
  constructor(@Inject(PLATFORM_ID) private readonly platformId: any) {

UniversalConfigLoader has two parameters:

  • serverLoader: ConfigLoader : the loader which will run on the server platform (ex: ConfigFsLoader, or ConfigStaticLoader)
  • browserLoader: ConfigLoader : the loader which will run on the browser platform (ex: ConfigHttpLoader, or ConfigStaticLoader)

:+1: Well! @ngx-universal/config-loader will now provide application settings to browser/server platforms.


The MIT License (MIT)

Copyright (c) 2018 Burak Tasci

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.