Add a mechanism to configure environment variables.

.gitignore

@@ -5,6 +5,12 @@
 /tsd_typings/
 npm-debug.log
 
+/config/environment.common.json
+/config/environment.prod.json
+/config/environment.dev.json
+
+/coverage
+
 /dist/
 
 .idea

README.md

@@ -32,6 +32,7 @@ Then go to [http://localhost:3000](http://localhost:3000) in your browser
 * [Introduction to the technology](#introduction-to-the-technology)
 * [Requirements](#requirements)
 * [Installing](#installing)
+* [Configuring](#Configuring)
 * [Running the app](#running-the-app)
 * [Running in production mode](#running-in-production-mode)
 * [Cleaning](#cleaning)
@@ -57,6 +58,20 @@ If you have [`nvm`](https://github.com/creationix/nvm#install-script) or [`nvm-w
 * `npm run global` to install the required global dependencies
 * `npm install` to install the local dependencies
 
+## Configuring
+Templates for environmental and shareable configuration files are located in `config/` folder in json format.
+
+To configure application settings:
+* Create a new `environment.common.json` file in `config/` folder using `environment.common.default.json` as template;
+* Create a new `environment.dev.json` file in `config/` folder using `environment.default.json` as template;
+* Create a new `environment.prod.json` file in `config/` folder using `environment.default.json` as template;
+
+Note: JSON standard does not allow comments so remove them whether you are copying from templates.
+ 
+To use setting parameters in your component:
+```bash
+import { GlobalConfig } from "../config";
+```
 
 ## Running the app
 After you have installed all dependencies you can now run the app. Run `npm run watch:dev` to start a local server which will watch for changes, rebuild the code, and reload the server for you. You can visit it at `http://localhost:3000`.
@@ -155,6 +170,9 @@ See [the guide on the wiki](https://wiki.duraspace.org/display/DSPACE/DSpace+7+-
 dspace-angular
 ├── README.md                            * This document
 ├── app.json                             * Application manifest file
+├── config                               * Folder for configuration files
+│   ├── environment.common.default.json  * Template for general configuration file
+│   └── environment.default.json         * Template for the dev and prod configuration files
 ├── e2e                                  * Folder for e2e test files
 ├── karma.conf.js                        * Unit Test configuration file
 ├── nodemon.json                         * Nodemon (https://nodemon.io/) configuration
@@ -171,6 +189,7 @@ dspace-angular
 │   ├── browser.module.ts                * The root module for the client
 │   ├── client.aot.ts                    * The bootstrap file for the client, in production
 │   ├── client.ts                        * The bootstrap file for the client, during development
+│   ├── config.ts                        * File that loads common and environment settings and makes available to app components 
 │   ├── index-aot.html                   * The index.html file, for production
 │   ├── index.html                       * The index.html file, for development
 │   ├── node.module.ts                   * The root module for the server

config/environment.common.default.json

@@ -0,0 +1,3 @@
+{
+  "title": ""
+}

config/environment.default.json

@@ -0,0 +1,26 @@
+{
+  "production": false,
+  // Location of REST API
+  "rest": {
+    // By default, we are currently using a local proxy running on port 5050.
+    // This is necessary because our actual REST API doesn't provide CORS headers yet!
+    // The actual REST API path is in the 'proxy' settings below.
+    // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
+    "nameSpace": "",
+    "baseURL": ""
+  },
+  // REST Location that we are proxying (see src/proxy.ts)
+  // (Since we are using a proxy at this time, the actual REST API goes here)
+  "proxy": {
+    "nameSpace": "",
+    "baseURL": ""
+    // E.g. to use demo.dspace.org REST API, use the below values *instead*
+    //nameSpace: '/rest',
+    //baseURL: 'https://demo.dspace.org'
+  },
+  // Path and Port in use for this Angular2 UI
+  "ui": {
+    "nameSpace": "",
+    "baseURL": ""
+  }
+}

src/app/app.component.html

@@ -4,6 +4,9 @@
   <main>
     <p>{{ 'example.with.data' | translate:data }}</p>
     <p>{{ example }}</p>
+    <p><b>{{ title }}</b></p>
+    <h2 *ngIf="!env" style="color:green">development</h2>
+    <h2 *ngIf="env" style="color:red">production</h2>
     <router-outlet></router-outlet>
   </main>
 </div>

src/app/app.component.ts

@@ -9,6 +9,7 @@ import { TranslateService } from "ng2-translate";
 import { HostWindowState } from "./shared/host-window.reducer";
 import { Store } from "@ngrx/store";
 import { HostWindowActions } from "./shared/host-window.actions";
+import { GlobalConfig } from "../config";
 
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
@@ -27,6 +28,13 @@ export class AppComponent implements OnDestroy, OnInit {
     recipient: 'World'
   };
 
+  title: string = GlobalConfig.title;
+  env: string = GlobalConfig.production;
+
+  styles = {
+    color: 'red'
+  };
+
   constructor(
     private translate: TranslateService,
     private store: Store<HostWindowState>
@@ -51,6 +59,7 @@ export class AppComponent implements OnDestroy, OnInit {
 
   @HostListener('window:resize', ['$event'])
   private onResize(event): void {
+    console.log(GlobalConfig.rest.baseURL);
     this.store.dispatch(
       HostWindowActions.resize(event.target.innerWidth, event.target.innerHeight)
     );

src/config.ts

@@ -0,0 +1,34 @@
+// Look in ./config folder for config
+
+const path = require('path');
+
+let configContext = require.context("../config", false, /json$/);
+let EnvConfig : any = {};
+let EnvConfigFile : string;
+let CommonConfig : any = {};
+
+try {
+    CommonConfig = configContext('./environment.common.json');
+} catch (e) {
+    throw new Error(`Cannot find file "${path.resolve('config', './environment.common.json')}"`);
+}
+
+switch (process.env.NODE_ENV) {
+    case 'prod':
+    case 'production':
+        EnvConfigFile = './environment.prod.json';
+        break;
+    case 'dev':
+    case 'development':
+    default:
+        EnvConfigFile = './environment.dev.json';
+}
+try {
+    EnvConfig = configContext(EnvConfigFile);
+} catch (e) {
+    throw new Error(`Cannot find file "${path.resolve('config', EnvConfigFile)}"`);
+}
+
+const GlobalConfig = Object.assign(CommonConfig, EnvConfig);
+
+export {GlobalConfig}