Merge branch 'master' into w2p-38248_PageNotFound-component

.gitignore

@@ -5,6 +5,11 @@
 /tsd_typings/
 npm-debug.log
 
+/config/environment.dev.js
+/config/environment.prod.js
+
+/coverage
+
 /dist/
 /coverage/
 

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,17 @@ 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
+Default configuration file is located in `config/` folder.
+
+To change the default configuration values, create local files that override the parameters you need to change:
+* Create a new `environment.dev.js` file in `config/` for `devel` environment;
+* Create a new `environment.prod.js` file in `config/` for `production` environment;
+ 
+To use the configuration 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`.
@@ -131,6 +143,7 @@ and run:
 
 ## Other commands
 There are many more commands in the `scripts` section of `package.json`. Most of these are executed by one of the commands mentioned above.
+
 A command with a name that starts with `pre` or `post` will be executed automatically before or after the script with the matching name. e.g. if you type `npm run start` the `prestart` script will run first, then the `start` script will trigger.
 
 
@@ -153,41 +166,45 @@ See [the guide on the wiki](https://wiki.duraspace.org/display/DSPACE/DSpace+7+-
 ## File Structure
 ```
 dspace-angular
-├── README.md               * This document
-├── app.json                * Application manifest file
-├── e2e                     * Folder for e2e test files
-├── karma.conf.js           * Unit Test configuration file
-├── nodemon.json            * Nodemon (https://nodemon.io/) configuration
-├── package.json            * This file describes the npm package for this project, its dependencies, scripts, etc.
-├── postcss.config.json     * PostCSS (http://postcss.org/) configuration file
-├── protractor.conf.js      * E2E tests configuration file
-├── resources               * Folder for static resources
-│   ├── i18n                * Folder for i18n translations
-│   └── images              * Folder for images
-├── rollup-client.js        * Rollup (http://rollupjs.org/) configuration for the client
-├── rollup-server.js        * Rollup (http://rollupjs.org/) configuration for the server
-├── src                     * The source of the application
-│   ├── app                 * The location of the app module, and root of the application shared by client and server
-│   ├── backend             * Folder containing a mock of the REST API, hosted by the express server
-│   ├── 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
-│   ├── 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
-│   ├── server.aot.ts       * The express (http://expressjs.com/) config and bootstrap file for the server, in production
-│   ├── server.routes.ts    * The routes file for the server
-│   ├── server.ts           * The express (http://expressjs.com/) config and bootstrap file for the server, during development
-│   ├── styles              * Folder containing global styles.
-│   │   ├── main.scss       * Global scss file
-│   │   └── variables.scss  * Global sass variables file
-│   └── typings.d.ts        * File that allows you to add custom typings for libraries without TypeScript support
-├── tsconfig.aot.json       * TypeScript config for production builds
-├── tsconfig.json           * TypeScript config for development build
-├── tslint.json             * TSLint (https://palantir.github.io/tslint/) configuration
-├── webpack.config.ts       * Webpack (https://webpack.github.io/) config for development builds
-├── webpack.test.config.ts  * Webpack (https://webpack.github.io/) config for testing
-└── webpack.prod.config.ts  * Webpack (https://webpack.github.io/) config for production builds
+├── README.md                   * This document
+├── app.json                    * Application manifest file
+├── config                      * Folder for configuration files
+│   └── environment.default.js  * Default configuration files
+├── e2e                         * Folder for e2e test files
+├── karma.conf.js               * Unit Test configuration file
+├── nodemon.json                * Nodemon (https://nodemon.io/) configuration
+├── npm-shrinkwrap.json         * Npm dependency lockfile (https://docs.npmjs.com/cli/shrinkwrap)
+├── package.json                * This file describes the npm package for this project, its dependencies, scripts, etc.
+├── postcss.config.json         * PostCSS (http://postcss.org/) configuration file
+├── protractor.conf.js          * E2E tests configuration file
+├── resources                   * Folder for static resources
+│   ├── i18n                    * Folder for i18n translations
+│   └── images                  * Folder for images
+├── rollup-client.js            * Rollup (http://rollupjs.org/) configuration for the client
+├── rollup-server.js            * Rollup (http://rollupjs.org/) configuration for the server
+├── src                         * The source of the application
+│   ├── app                     * The location of the app module, and root of the application shared by client and server
+│   ├── backend                 * Folder containing a mock of the REST API, hosted by the express server
+│   ├── 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 environmental and shareable settings and makes them 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
+│   ├── server.aot.ts           * The express (http://expressjs.com/) config and bootstrap file for the server, in production
+│   ├── server.routes.ts        * The routes file for the server
+│   ├── server.ts               * The express (http://expressjs.com/) config and bootstrap file for the server, during development
+│   ├── styles                  * Folder containing global styles.
+│   │   ├── main.scss           * Global scss file
+│   │   └── variables.scss      * Global sass variables file
+│   └── typings.d.ts            * File that allows you to add custom typings for libraries without TypeScript support
+├── tsconfig.aot.json           * TypeScript config for production builds
+├── tsconfig.json               * TypeScript config for development build
+├── tslint.json                 * TSLint (https://palantir.github.io/tslint/) configuration
+├── webpack.config.ts           * Webpack (https://webpack.github.io/) config for development builds
+├── webpack.test.config.ts      * Webpack (https://webpack.github.io/) config for testing
+└── webpack.prod.config.ts      * Webpack (https://webpack.github.io/) config for production builds
 ```
 
 ## 3rd Party Library Installation
@@ -226,6 +243,13 @@ If you're importing a module that uses CommonJS you need to import as
 import * as _ from 'lodash';
 ```
 
+## npm-shrinkwrap
+This project makes use of [npm-shrinkwrap](https://docs.npmjs.com/cli/shrinkwrap) to ensure that the exact same dependency versions are used every time you install it.
+
+npm-shrinkwrap creates the file `npm-shrinkwrap.json` to track those versions. That file is updated automatically every time you install a new dependency from the commandline (by using `npm install some-lib --save` or `npm install some-lib --save-dev`). 
+
+If you manually add a package or change a version in `package.json` you'll have to update npm-shrinkwrap's lock file as well. You can do so by running `npm run rewrap` 
+
 ## Frequently asked questions
 * Why is my service, aka provider, is not injecting a parameter correctly?
   * Please use `@Injectable()` for your service for typescript to correctly attach the metadata

config/environment.default.js

+module.exports = {
+  "production": false,
+  // The REST API Location.
+  "rest": {
+    // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
+    "nameSpace": "/api",
+    "baseURL": "http://localhost:3000"
+  },
+  // Path and Port in use for this Angular2 UI
+  "ui": {
+    "nameSpace": "/",
+    "baseURL": "http://localhost:3000"
+  }
+}

package.json

@@ -21,7 +21,7 @@
     "clean:prod": "npm run clean:ngc && npm run clean:json && npm run clean:css && npm run clean:css:ts && npm run clean:scss:ts && npm run clean:css:shim:ts && npm run clean:scss:shim:ts && npm run clean:dist",
     "clean": "npm run clean:log && npm run clean:prod && npm run clean:coverage && npm run clean:node",
     "sass": "node-sass src -o src --include-path node_modules --output-style compressed -q",
-    "postcss": "node_modules/postcss-cli/bin/postcss -c postcss.config.json",
+    "postcss": "node node_modules/postcss-cli/bin/postcss -c postcss.config.json",
     "style": "npm run sass && npm run postcss",
     "style:watch": "nodemon -e scss -w src -x \"npm run style\"",
     "rollup": "rollup -c rollup-server.js && rollup -c rollup-client.js",
@@ -36,11 +36,12 @@
     "ngc": "ngc -p tsconfig.aot.json",
     "prestart": "npm run build:prod:ngc:json",
     "server": "node dist/server/build.js",
-    "server:dev": "nodemon --debug dist/server/index.js",
+    "server:dev": "node dist/server/index.js",
+    "server:dev:watch": "nodemon --debug dist/server/index.js",
     "start": "npm run server",
-    "start:dev": "npm run clean:prod && npm run build && npm run server",
+    "start:dev": "npm run clean:prod && npm run build && npm run server:dev",
     "watch": "webpack -w & npm run style:watch",
-    "watch:dev:server": "concurrently \"npm run server:dev\" \"npm run watch\"",
+    "watch:dev:server": "concurrently \"npm run server:dev:watch\" \"npm run watch\"",
     "watch:dev": "npm run clean:prod && npm run build && npm run watch:dev:server",
     "watch:prod:server": "concurrently \"npm run server\" \"npm run watch\"",
     "watch:prod": "npm run build:prod:ngc:json && npm run watch:prod:server",
@@ -59,7 +60,8 @@
     "test:watch": "karma start --no-single-run --auto-watch",
     "coverage": "http-server -c-1 -o -p 9875 ./coverage",
     "webdriver:start": "node node_modules/protractor/bin/webdriver-manager start --seleniumPort 4444",
-    "webdriver:update": "node node_modules/protractor/bin/webdriver-manager update --standalone"
+    "webdriver:update": "node node_modules/protractor/bin/webdriver-manager update --standalone",
+    "rewrap": "npm run clean && npm install --no-optional && npm shrinkwrap --dev"
   },
   "dependencies": {
     "@angular/common": "2.2.3",

src/app/app.component.html

@@ -4,6 +4,8 @@
   <main>
     <p>{{ 'example.with.data' | translate:data }}</p>
     <p>{{ example }}</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 { HostWindowResizeAction } from "./shared/host-window.actions";
+import { GlobalConfig } from "../config";
 
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
@@ -27,6 +28,12 @@ export class AppComponent implements OnDestroy, OnInit {
     recipient: 'World'
   };
 
+  env: string = GlobalConfig.production;
+
+  styles = {
+    color: 'red'
+  };
+
   constructor(
     private translate: TranslateService,
     private store: Store<HostWindowState>

src/config.ts

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