extend environment and use injected app config

Author: William Welling

.github/workflows/build.yml

@@ -73,7 +73,7 @@ jobs:
         run: yarn run lint
 
       - name: Run build
-        run: yarn run build:ssr:ci
+        run: yarn run build:prod
 
       - name: Run specs (unit tests)
         run: yarn run test:headless

angular.json

@@ -94,22 +94,6 @@
                   "maximumError": "300kb"
                 }
               ]
-            },
-            "ci": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.ci.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true
             }
           }
         },
@@ -222,16 +206,6 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ]
-            },
-            "ci": {
-              "sourceMap": false,
-              "optimization": true,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.ci.ts"
-                }
-              ]
             }
           }
         },

nodemon.json

@@ -0,0 +1,6 @@
+{
+  "watch": [
+    "config"
+  ],
+  "ext": "json"
+}

package.json

@@ -3,24 +3,25 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
+    "config:watch": "nodemon",
     "test:rest": "ts-node --project ./tsconfig.ts-node.json scripts/test-rest.ts",
     "start": "yarn run start:prod",
-    "serve": "ts-node --project ./tsconfig.ts-node.json scripts/serve.ts",
-    "start:dev": "yarn run serve",
+    "start:dev": "nodemon --exec \"yarn run serve\"",
     "start:prod": "yarn run build:prod && yarn run serve:ssr",
     "start:mirador:prod": "yarn run build:mirador && yarn run start:prod",
+    "serve": "ts-node --project ./tsconfig.ts-node.json scripts/serve.ts",
+    "serve:ssr": "node dist/server/main",
     "analyze": "webpack-bundle-analyzer dist/browser/stats.json",
     "build": "ng build",
     "build:stats": "ng build --stats-json",
     "build:prod": "yarn run build:ssr",
     "build:ssr": "ng build --configuration production && ng run dspace-angular:server:production",
-    "build:ssr:ci": "ng build --configuration ci && ng run dspace-angular:server:ci",
-    "test": "ng test --sourceMap=true --watch=true --configuration test",
+    "test": "ng test --sourceMap=true --watch=false --configuration test",
+    "test:watch": "nodemon --exec \"ng test --sourceMap=true --watch=true --configuration test\"",
     "test:headless": "ng test --sourceMap=true --watch=false --configuration test --browsers=ChromeHeadless --code-coverage",
     "lint": "ng lint",
     "lint-fix": "ng lint --fix=true",
     "e2e": "ng e2e",
-    "serve:ssr": "node dist/server/main",
     "clean:dev:config": "rimraf src/assets/appConfig.json",
     "clean:coverage": "rimraf coverage",
     "clean:dist": "rimraf dist",
@@ -86,8 +87,8 @@
     "file-saver": "^2.0.5",
     "filesize": "^6.1.0",
     "font-awesome": "4.7.0",
-    "https": "1.0.0",
     "http-proxy-middleware": "^1.0.5",
+    "https": "1.0.0",
     "js-cookie": "2.2.1",
     "json5": "^2.1.3",
     "jsonschema": "1.4.0",
@@ -162,6 +163,7 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "2.2.5",
+    "nodemon": "^2.0.15",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
     "postcss-apply": "0.11.0",
     "postcss-import": "^12.0.1",
@@ -186,4 +188,4 @@
     "webpack-cli": "^4.2.0",
     "webpack-dev-server": "^4.5.0"
   }
-}
+}

scripts/serve.ts

@@ -1,16 +1,14 @@
 import * as child from 'child_process';
 
-import { environment } from '../src/environments/environment';
+import { AppConfig } from '../src/config/app-config.interface';
+import { buildAppConfig } from '../src/config/config.server';
 
-// import { AppConfig } from '../src/config/app-config.interface';
-// import { buildAppConfig } from '../src/config/config.server';
-
-// const appConfig: AppConfig = buildAppConfig();
+const appConfig: AppConfig = buildAppConfig();
 
 /**
- * Calls `ng serve` with the following arguments configured for the UI in the environment: host, port, nameSpace, ssl
+ * Calls `ng serve` with the following arguments configured for the UI in the app config: host, port, nameSpace, ssl
  */
 child.spawn(
-  `ng serve --host ${environment.ui.host} --port ${environment.ui.port} --serve-path ${environment.ui.nameSpace} --ssl ${environment.ui.ssl}`,
-  { stdio:'inherit', shell: true }
+  `ng serve --host ${appConfig.ui.host} --port ${appConfig.ui.port} --serve-path ${appConfig.ui.nameSpace} --ssl ${appConfig.ui.ssl}`,
+  { stdio: 'inherit', shell: true }
 );

scripts/test-rest.ts

@@ -1,27 +1,25 @@
 import * as http from 'http';
 import * as https from 'https';
 
-import { environment } from '../src/environments/environment';
-
-// import { AppConfig } from '../src/config/app-config.interface';
-// import { buildAppConfig } from '../src/config/config.server';
+import { AppConfig } from '../src/config/app-config.interface';
+import { buildAppConfig } from '../src/config/config.server';
 
-// const appConfig: AppConfig = buildAppConfig();
+const appConfig: AppConfig = buildAppConfig();
 
 /**
- * Script to test the connection with the configured REST API (in the 'rest' settings of your environment.*.ts)
+ * Script to test the connection with the configured REST API (in the 'rest' settings of your appConfig.*.json)
  *
  * This script is useful to test for any Node.js connection issues with your REST API.
  *
  * Usage (see package.json): yarn test:rest
  */
 
 // Get root URL of configured REST API
-const restUrl = environment.rest.baseUrl + '/api';
+const restUrl = appConfig.rest.baseUrl + '/api';
 console.log(`...Testing connection to REST API at ${restUrl}...\n`);
 
 // If SSL enabled, test via HTTPS, else via HTTP
-if (environment.rest.ssl) {
+if (appConfig.rest.ssl) {
     const req = https.request(restUrl, (res) => {
         console.log(`RESPONSE: ${res.statusCode} ${res.statusMessage} \n`);
         res.on('data', (data) => {
@@ -61,7 +59,7 @@ function checkJSONResponse(responseData: any): any {
         console.log(`\t"dspaceVersion" = ${parsedData.dspaceVersion}`);
         console.log(`\t"dspaceUI" = ${parsedData.dspaceUI}`);
         console.log(`\t"dspaceServer" = ${parsedData.dspaceServer}`);
-        console.log(`\t"dspaceServer" property matches UI's "rest" config? ${(parsedData.dspaceServer === environment.rest.baseUrl)}`);
+        console.log(`\t"dspaceServer" property matches UI's "rest" config? ${(parsedData.dspaceServer === appConfig.rest.baseUrl)}`);
         // Check for "authn" and "sites" in "_links" section as they should always exist (even if no data)!
         const linksFound: string[] = Object.keys(parsedData._links);
         console.log(`\tDoes "/api" endpoint have HAL links ("_links" section)? ${linksFound.includes('authn') && linksFound.includes('sites')}`);

server.ts

@@ -19,29 +19,33 @@ import 'zone.js/dist/zone-node';
 import 'reflect-metadata';
 import 'rxjs';
 
-import * as fs from 'fs';
 import * as pem from 'pem';
 import * as https from 'https';
 import * as morgan from 'morgan';
 import * as express from 'express';
 import * as bodyParser from 'body-parser';
 import * as compression from 'compression';
+
+import { existsSync, readFileSync } from 'fs';
 import { join } from 'path';
 
+import { APP_BASE_HREF } from '@angular/common';
 import { enableProdMode } from '@angular/core';
-import { existsSync } from 'fs';
+
 import { ngExpressEngine } from '@nguniversal/express-engine';
 import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';
+
 import { environment } from './src/environments/environment';
 import { createProxyMiddleware } from 'http-proxy-middleware';
 import { hasValue, hasNoValue } from './src/app/shared/empty.util';
-import { APP_BASE_HREF } from '@angular/common';
+
 import { UIServerConfig } from './src/config/ui-server-config.interface';
 
 import { ServerAppModule } from './src/main.server';
 
-// import { buildAppConfig } from './src/config/config.server';
-// import { AppConfig, APP_CONFIG } from './src/config/app-config.interface';
+import { buildAppConfig } from './src/config/config.server';
+import { AppConfig, APP_CONFIG } from './src/config/app-config.interface';
+import { extendEnvironmentWithAppConfig } from './src/config/config.util';
 
 /*
  * Set path for the browser application's dist folder
@@ -54,7 +58,10 @@ const indexHtml = existsSync(join(DIST_FOLDER, 'index.html')) ? 'index.html' : '
 
 const cookieParser = require('cookie-parser');
 
-// const appConfig: AppConfig = buildAppConfig(join(DIST_FOLDER, 'assets/appConfig.json'));
+const appConfig: AppConfig = buildAppConfig(join(DIST_FOLDER, 'assets/appConfig.json'));
+
+// extend environment with app config for server
+extendEnvironmentWithAppConfig(environment, appConfig);
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app() {
@@ -105,10 +112,10 @@ export function app() {
           provide: RESPONSE,
           useValue: (options as any).req.res,
         },
-        // {
-        //   provide: APP_CONFIG,
-        //   useValue: appConfig
-        // }
+        {
+          provide: APP_CONFIG,
+          useValue: environment
+        }
       ]
     })(_, (options as any), callback)
   );
@@ -246,14 +253,14 @@ function start() {
   if (environment.ui.ssl) {
     let serviceKey;
     try {
-      serviceKey = fs.readFileSync('./config/ssl/key.pem');
+      serviceKey = readFileSync('./config/ssl/key.pem');
     } catch (e) {
       console.warn('Service key not found at ./config/ssl/key.pem');
     }
 
     let certificate;
     try {
-      certificate = fs.readFileSync('./config/ssl/cert.pem');
+      certificate = readFileSync('./config/ssl/cert.pem');
     } catch (e) {
       console.warn('Certificate not found at ./config/ssl/key.pem');
     }

src/app/app.component.spec.ts

@@ -36,6 +36,8 @@ import { GoogleAnalyticsService } from './statistics/google-analytics.service';
 import { ThemeService } from './shared/theme-support/theme.service';
 import { getMockThemeService } from './shared/mocks/theme-service.mock';
 import { BreadcrumbsService } from './breadcrumbs/breadcrumbs.service';
+import { APP_CONFIG } from '../config/app-config.interface';
+import { environment } from '../environments/environment';
 
 let comp: AppComponent;
 let fixture: ComponentFixture<AppComponent>;
@@ -83,6 +85,7 @@ describe('App component', () => {
         { provide: LocaleService, useValue: getMockLocaleService() },
         { provide: ThemeService, useValue: getMockThemeService() },
         { provide: BreadcrumbsService, useValue: breadcrumbsServiceSpy },
+        { provide: APP_CONFIG, useValue: environment },
         provideMockStore({ initialState }),
         AppComponent,
         RouteService

src/app/app.component.ts

@@ -18,6 +18,7 @@ import {
   Router,
 } from '@angular/router';
 
+import { isEqual } from 'lodash';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { select, Store } from '@ngrx/store';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@@ -46,6 +47,7 @@ import { BASE_THEME_NAME } from './shared/theme-support/theme.constants';
 import { BreadcrumbsService } from './breadcrumbs/breadcrumbs.service';
 import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
 import { getDefaultThemeConfig } from '../config/config.util';
+import { AppConfig, APP_CONFIG } from 'src/config/app-config.interface';
 
 @Component({
   selector: 'ds-app',
@@ -59,7 +61,7 @@ export class AppComponent implements OnInit, AfterViewInit {
   collapsedSidebarWidth: Observable<string>;
   totalSidebarWidth: Observable<string>;
   theme: Observable<ThemeConfig> = of({} as any);
-  notificationOptions = environment.notifications;
+  notificationOptions;
   models;
 
   /**
@@ -88,6 +90,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     @Inject(NativeWindowService) private _window: NativeWindowRef,
     @Inject(DOCUMENT) private document: any,
     @Inject(PLATFORM_ID) private platformId: any,
+    @Inject(APP_CONFIG) private appConfig: AppConfig,
     private themeService: ThemeService,
     private translate: TranslateService,
     private store: Store<HostWindowState>,
@@ -106,6 +109,14 @@ export class AppComponent implements OnInit, AfterViewInit {
     @Optional() private googleAnalyticsService: GoogleAnalyticsService,
   ) {
 
+    console.log(this.appConfig);
+
+    if (!isEqual(environment, this.appConfig)) {
+      throw new Error('environment does not match app config!');
+    }
+
+    this.notificationOptions = environment.notifications;
+
     /* Use models object so all decorators are actually called */
     this.models = models;
 

src/app/app.module.ts

@@ -58,14 +58,18 @@ import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
 import { UUIDService } from './core/shared/uuid.service';
 import { CookieService } from './core/services/cookie.service';
 
-// import { AppConfig, APP_CONFIG } from '../config/app-config.interface';
+import { AppConfig, APP_CONFIG } from '../config/app-config.interface';
 
-export function getBase() {
-  return environment.ui.nameSpace;
+export function getConfig() {
+  return environment;
 }
 
-export function getMetaReducers(): MetaReducer<AppState>[] {
-  return environment.debug ? [...appMetaReducers, ...debugMetaReducers] : appMetaReducers;
+export function getBase(appConfig: AppConfig) {
+  return appConfig.ui.nameSpace;
+}
+
+export function getMetaReducers(appConfig: AppConfig): MetaReducer<AppState>[] {
+  return appConfig.debug ? [...appMetaReducers, ...debugMetaReducers] : appMetaReducers;
 }
 
 /**
@@ -100,15 +104,19 @@ IMPORTS.push(
 );
 
 const PROVIDERS = [
+  {
+    provide: APP_CONFIG,
+    useFactory: getConfig
+  },
   {
     provide: APP_BASE_HREF,
     useFactory: getBase,
-    // deps: [APP_CONFIG]
+    deps: [APP_CONFIG]
   },
   {
     provide: USER_PROVIDED_META_REDUCERS,
     useFactory: getMetaReducers,
-    // deps: [APP_CONFIG]
+    deps: [APP_CONFIG]
   },
   {
     provide: RouterStateSerializer,
@@ -199,7 +207,7 @@ const EXPORTS = [
 
 @NgModule({
   imports: [
-    BrowserModule.withServerTransition({ appId: 'serverApp' }),
+    BrowserModule.withServerTransition({ appId: 'dspace-angular' }),
     ...IMPORTS
   ],
   providers: [

src/app/item-page/simple/item-types/shared/item.component.ts

@@ -36,9 +36,10 @@ export class ItemComponent implements OnInit {
    */
   iiifQuery$: Observable<string>;
 
-  mediaViewer = environment.mediaViewer;
+  mediaViewer;
 
   constructor(protected routeService: RouteService) {
+    this.mediaViewer = environment.mediaViewer;
   }
 
   ngOnInit(): void {