Get NPM variable inside Angular 4

Question

Get NPM variable inside Angular 4

Question:

If I go through:

npm run build -- brl

How do I (or maybe) get the brl value inside the main Angular TS file?

For example, Suppose I want to replace [npm_variable] inside my main.ts and code 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);

Run code Hide result

Overview:

I know Angular CLI now supports multiple application entry points with the following parameters:

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

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

I am using the following folder structure to achieve multi-site architecture. As you can see, I have a shared folder where all common components, config, modules, services are located. Along with this, I have different sites like brl, chn, etc. (About 13 different sites that use the same codebase)

Below 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": {}
  }
}

Run code Hide result

And then I find the following command:

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

OR

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

This works well until I realize I need a more complex and object oriented approach. For. for example here only my app.component.ts will have different site based code.

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

+3

angular angular-cli

Sahil purav May 28 '17 at 12:21

source to share