Merge branch 'master' of https://github.com/4Science/dspace-angular into Environments

# Conflicts:
#	README.md

README.md

@@ -120,7 +120,7 @@ The default browser is Google Chrome.
 Place your tests in the same location of the application source code files that they test.
 
 and run:
-`npn run test`
+`npm run test`
 
 ### E2E test
 E2E tests use Protractor + Selenium server + browsers. You can find the configuration file at the same level of this README file:
@@ -177,6 +177,7 @@ dspace-angular
 ├── 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
@@ -210,7 +211,7 @@ dspace-angular
 
 ## 3rd Party Library Installation
 
-Install your library via `npm install lib-name --save` and import it in your code. `--save` will add it to `package.json`. 
+Install your library via `npm install lib-name --save` and import it in your code. `--save` will add it to `package.json`.
 
 If the library does not include typings, you can install them using npm:
 
@@ -246,7 +247,7 @@ import * as _ from 'lodash';
 
 ## 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 
+  * Please use `@Injectable()` for your service for typescript to correctly attach the metadata
 * Where do I write my tests?
   * You can write your tests next to your component files. e.g. for `src/app/home/home.component.ts` call it `src/app/home/home.component.spec.ts`
 * How do I start the app when I get `EACCES` and `EADDRINUSE` errors?

package.json

@@ -21,14 +21,16 @@
     "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",
-    "sass:watch": "node-sass -w src -o src --include-path node_modules --output-style compressed -q",
+    "postcss": "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",
-    "prebuild": "npm run clean:dist && npm run sass",
+    "prebuild": "npm run clean:dist && npm run style",
     "build": "webpack --progress",
     "build:prod": "webpack --config webpack.prod.config.ts",
     "build:prod:rollup": "npm run build:prod && npm run rollup",
-    "build:prod:ngc": "npm run clean:prod && npm run sass && npm run ngc && npm run build:prod:rollup",
-    "build:prod:ngc:json": "npm run clean:prod && npm run sass && npm run ngc && npm run build:prod:json:rollup",
+    "build:prod:ngc": "npm run clean:prod && npm run style && npm run ngc && npm run build:prod:rollup",
+    "build:prod:ngc:json": "npm run clean:prod && npm run style && npm run ngc && npm run build:prod:json:rollup",
     "build:prod:json": "webpack --config webpack.prod.config.ts --json | webpack-bundle-size-analyzer",
     "build:prod:json:rollup": "npm run build:prod:json && npm run rollup",
     "ngc": "ngc -p tsconfig.aot.json",
@@ -37,7 +39,7 @@
     "server:dev": "nodemon --debug dist/server/index.js",
     "start": "npm run server",
     "start:dev": "npm run clean:prod && npm run build && npm run server",
-    "watch": "webpack -w & npm run sass:watch",
+    "watch": "webpack -w & npm run style:watch",
     "watch:dev:server": "concurrently \"npm run server:dev\" \"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\"",
@@ -83,6 +85,7 @@
     "angular2-platform-node": "2.1.0-rc.1",
     "angular2-universal": "2.1.0-rc.1",
     "angular2-universal-polyfills": "2.1.0-rc.1",
+    "autoprefixer": "^6.5.4",
     "body-parser": "1.15.2",
     "bootstrap": "4.0.0-alpha.5",
     "compression": "1.6.2",
@@ -113,10 +116,10 @@
     "@types/node": "6.0.52",
     "@types/serve-static": "1.7.31",
     "@types/webfontloader": "1.6.27",
-    "angular2-template-loader": "0.6.0",
-    "autoprefixer": "6.5.4",
     "ajv": "4.2.0",
     "ajv-keywords": "1.1.1",
+    "angular2-template-loader": "0.6.0",
+    "autoprefixer": "6.5.4",
     "awesome-typescript-loader": "2.2.4",
     "codelyzer": "2.0.0-beta.3",
     "concurrently": "3.1.0",
@@ -142,6 +145,7 @@
     "karma-webpack": "1.8.0",
     "node-sass": "4.0.0",
     "nodemon": "1.11.0",
+    "postcss-cli": "^2.6.0",
     "protractor": "~4.0.14",
     "protractor-istanbul-plugin": "~2.0.0",
     "raw-loader": "0.5.1",

postcss.config.json

@@ -0,0 +1,9 @@
+{
+  "use": ["autoprefixer"],
+  "input": "src/**/*.css",
+  "replace": true,
+  "local-plugins": true,
+  "autoprefixer": {
+    "browsers": "last 2 versions"
+  }
+}

src/app/app.component.spec.ts

@@ -9,11 +9,11 @@ import {
   CUSTOM_ELEMENTS_SCHEMA,
   DebugElement
 } from "@angular/core";
+import { By } from '@angular/platform-browser';
 import { TranslateModule } from "ng2-translate";
 import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
 import { Store } from "@ngrx/store";
 
-
 // Load the implementations that should be tested
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
@@ -25,10 +25,10 @@ let fixture: ComponentFixture<AppComponent>;
 let de:      DebugElement;
 let el:      HTMLElement;
 
-
 describe('App component', () => {
 
-  beforeEach(() => {
+  // async beforeEach
+  beforeEach(async(() => {
     return TestBed.configureTestingModule({
       imports: [ CommonModule, TranslateModule.forRoot(), NgbCollapseModule.forRoot()],
       declarations: [ AppComponent, HeaderComponent ], // declare the test component
@@ -40,10 +40,18 @@ describe('App component', () => {
         }
       ],
       schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
-    }).compileComponents().then(() => {
-      fixture = TestBed.createComponent(AppComponent);
-      fixture.detectChanges();
-    });
+    })
+  }));
+
+  // synchronous beforeEach
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppComponent);
+
+    comp = fixture.componentInstance; // BannerComponent test instance
+
+    // query for the title <p> by CSS element selector
+    de = fixture.debugElement.query(By.css('p'));
+    el = de.nativeElement;
   });
 
   it('should create component', inject([AppComponent], (app: AppComponent) => {