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);
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": {}
}
}
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.
source to share
No one has answered this question yet
Check out similar questions: