Get NPM variable inside Angular 4

Question

Question:

If I'm passing:

npm run build -- brl

How do I (or is it possible to) get the brl value inside Angular main TS file?

For e.g. Let's assume that I want to replace [npm_variable] inside my main.ts and code is below:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './[npm_variable]/app/app.module';
import { environment } from '../../environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Overview:

I know Angular CLI now supports multiple app entry points with following:

ng build --prod --aot --app myAppName

I'm creating a multi-site application where I want code base to be same with multiple entry points.

I use following folder structure in order to achieve multi-site architecture. As you can see, I've common folder where all common components, config, modules, services resides. Along with it, I've different sites such as brl, chn and so on.. (around 13 different sites which share same code base)

Following is my .angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular"
  },
  "apps": [
    {
      "name": "brl",
      "root": "resources/angular/sites/brl",
      "outDir": "public/dist/brl",
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "../../polyfills.ts",
      "test": "../../test.ts",
      "tsconfig": "../../tsconfig.app.json",
      "testTsconfig": "../../tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../../styles.scss"
      ],
      "scripts": [],
      "environmentSource": "../../environments/environment.ts",
      "environments": {
        "dev": "../../environments/environment.ts",
        "prod": "../../environments/environment.prod.ts"
      }
    },
    {
      "name": "chn",
      "root": "resources/angular/sites/chn",
      "outDir": "public/dist/chn",
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "../../polyfills.ts",
      "test": "../../test.ts",
      "tsconfig": "../../tsconfig.app.json",
      "testTsconfig": "../../tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../../styles.scss"
      ],
      "scripts": [],
      "environmentSource": "../../environments/environment.ts",
      "environments": {
        "dev": "../../environments/environment.ts",
        "prod": "../../environments/environment.prod.ts"
      }
    },
    "lint": [
        {
        "project": "resources/angular/tsconfig.app.json"
        },
        {
        "project": "resources/angular/tsconfig.spec.json"
        }
    ],
    "test": {
        "karma": {
        "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "scss",
        "component": {}
  }
}

And then I hit following command:

ng build --prod --aot --app brl

OR

ng build --prod --aot --app chn

This works well, until I realise, I need more sophisticated and Object Oriented approach. For. e.g. here, only my app.component.ts would have different code based on sites.

However, my main.ts (which is entry point of my application) is getting duplicated for all sites.

Get NPM variable inside Angular 4

0 Answers