feat(stark-demo): integrate "angular-in-memory-web-api" to mock backe…

…nd (needed for GitHub pages)

showcase/config/json-server/data.json

@@ -3,5 +3,20 @@
     { "uuid": "1", "username": "janedoe", "firstName": "Jane", "lastName": "Doe", "language": "en", "roles": ["admin"] },
     { "uuid": "2", "username": "johndoe", "firstName": "John", "lastName": "Doe", "language": "fr", "roles": ["manager"] },
     { "uuid": "3", "username": "chucknorris", "firstName": "Chuck", "lastName": "Norris", "language": "nl", "roles": ["developer"] }
-  ]
+  ],
+  "userprofile": [
+    {
+      "uuid": "4cc28d14-16d3-46e7-a05a-487533c4cc26",
+      "username": "johndoe",
+      "roles": ["manager"],
+      "details": {
+        "firstName": "John",
+        "lastName": "Doe",
+        "language": "en",
+        "referenceNumber": "54321",
+        "mail": "john.doe@nbb.be"
+      }
+    }
+  ],
+  "keepalive": []
 }

showcase/karma.conf.ci.js

@@ -2,10 +2,15 @@
  * Load karma config from Stark
  */
 const defaultKarmaCIConfig = require("./node_modules/@nationalbankbelgium/stark-testing/karma.conf.ci.js").rawKarmaConfig;
+const karmaTypescriptBundlerAliasResolution = require("./karma.conf").karmaTypescriptBundlerAliasResolution;
 const karmaTypescriptExclusions = require("./karma.conf").karmaTypescriptExclusions;
 
 // start customizing the KarmaCI configuration from stark-testing
 const starkShowcaseSpecificConfiguration = Object.assign({}, defaultKarmaCIConfig, {
+	// change the module resolution for the KarmaTypescript bundler
+	karmaTypescriptConfig: Object.assign(defaultKarmaCIConfig.karmaTypescriptConfig, {
+		bundlerOptions: Object.assign(defaultKarmaCIConfig.karmaTypescriptConfig.bundlerOptions, karmaTypescriptBundlerAliasResolution)
+	}),
 	exclude: [...defaultKarmaCIConfig.exclude, ...karmaTypescriptExclusions]
 });
 

showcase/karma.conf.js

@@ -8,11 +8,28 @@ const helpers = require("./node_modules/@nationalbankbelgium/stark-testing/helpe
  */
 const defaultKarmaConfig = require("./node_modules/@nationalbankbelgium/stark-testing/karma.conf.js").rawKarmaConfig;
 
-// entry files of the "@nationalbankbelgium/stark-ui" module imported in mock files
+// exclude all code example files imported in the demo pages
 const karmaTypescriptExclusions = [...defaultKarmaConfig.exclude, "src/assets/examples/**"];
 
+const karmaTypescriptBundlerAliasResolution = {
+	resolve: {
+		alias: {
+			// adapt the resolution of "angular-in-memory-web-api" modules because we don't want to add "@angular/http" to the Showcase npm dependencies!
+			// see https://github.com/angular/in-memory-web-api/issues/215
+			"angular-in-memory-web-api/http-client-in-memory-web-api.module":
+				"./node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js",
+			"angular-in-memory-web-api/interfaces": "./node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js",
+			"@angular/http": "./node_modules/@angular/common/bundles/common-http.umd.js"
+		}
+	}
+};
+
 // start customizing the KarmaCI configuration from stark-testing
 const starkShowcaseSpecificConfiguration = Object.assign({}, defaultKarmaConfig, {
+	// change the module resolution for the KarmaTypescript bundler
+	karmaTypescriptConfig: Object.assign(defaultKarmaConfig.karmaTypescriptConfig, {
+		bundlerOptions: Object.assign(defaultKarmaConfig.karmaTypescriptConfig.bundlerOptions, karmaTypescriptBundlerAliasResolution)
+	}),
 	// list of files to exclude
 	exclude: karmaTypescriptExclusions
 });
@@ -22,5 +39,6 @@ module.exports = {
 	default: function(config) {
 		return config.set(starkShowcaseSpecificConfiguration);
 	},
+	karmaTypescriptBundlerAliasResolution: karmaTypescriptBundlerAliasResolution,
 	karmaTypescriptExclusions: karmaTypescriptExclusions
 };

showcase/package.json

@@ -127,6 +127,7 @@
     "@nationalbankbelgium/stark-core": "file:../dist/packages-dist/stark-core/nationalbankbelgium-stark-core-10.0.0-beta.0-8d56253.tgz",
     "@nationalbankbelgium/stark-ui": "file:../dist/packages-dist/stark-ui/nationalbankbelgium-stark-ui-10.0.0-beta.0-8d56253.tgz",
     "@uirouter/visualizer": "6.0.2",
+    "angular-in-memory-web-api": "0.6.1",
     "basscss": "8.0.10",
     "core-js": "2.5.7",
     "eligrey-classlist-js-polyfill": "1.2.20180112",

showcase/src/app/app.module.ts

@@ -20,7 +20,8 @@ import { MatListModule } from "@angular/material/list";
 import { MatSidenavModule } from "@angular/material/sidenav";
 import { MatTooltipModule } from "@angular/material/tooltip";
 import { DateAdapter } from "@angular/material/core";
-import { SharedModule } from "./shared";
+import { SharedModule } from "./shared/shared.module";
+import { InMemoryDataModule } from "./in-memory-data/in-memory-data.module";
 import { Observable, of } from "rxjs";
 import { filter, map } from "rxjs/operators";
 
@@ -39,6 +40,7 @@ import {
 	StarkLoggingActionTypes,
 	StarkLoggingModule,
 	StarkMockData,
+	starkPreloadingStateName,
 	StarkRoutingModule,
 	StarkSessionModule,
 	StarkSessionService,
@@ -206,10 +208,12 @@ export const metaReducers: MetaReducer<State>[] = ENV !== "production" ? [logger
 		}),
 		TranslateModule.forRoot(),
 		NgIdleModule.forRoot(),
-		NgIdleKeepaliveModule.forRoot(), // FIXME: disabled in stark-app-config.json for now until json-server is integrated
+		NgIdleKeepaliveModule.forRoot(),
 		StarkHttpModule.forRoot(),
 		StarkLoggingModule.forRoot(),
-		StarkSessionModule.forRoot(),
+		StarkSessionModule.forRoot({
+			loginStateName: starkPreloadingStateName // get rid of the Login page in the Showcase :-)
+		}),
 		StarkErrorHandlingModule.forRoot(),
 		StarkSettingsModule.forRoot(),
 		StarkRoutingModule.forRoot(),
@@ -237,7 +241,8 @@ export const metaReducers: MetaReducer<State>[] = ENV !== "production" ? [logger
 			position: "top right",
 			actionClasses: []
 		}),
-		StarkSessionUiModule.forRoot()
+		StarkSessionUiModule.forRoot(),
+		InMemoryDataModule
 	],
 	/**
 	 * Expose our Services and Providers into Angular's dependency injection.

showcase/src/app/home/home.component.html

@@ -1,5 +1,5 @@
 <section class="stark-section about-background">
-	<h1 class="about-title" [innerHTML]= "'SHOWCASE.HOMEPAGE.MAIN_TITLE' | translate"></h1>
+	<h1 class="about-title" [innerHTML]="'SHOWCASE.HOMEPAGE.MAIN_TITLE' | translate"></h1>
 </section>
 <p class="mat-body-2 light-font" [innerHTML]="'SHOWCASE.HOMEPAGE.DESCRIPTION_BEFORE_DETAIL' | translate">
 </p>
@@ -28,17 +28,14 @@ <h2 [innerHTML]="'SHOWCASE.HOMEPAGE.NEWS_DESCRIPTION' | translate"></h2>
 			</mat-expansion-panel-header>
 			<h2 [innerHTML]="'SHOWCASE.HOMEPAGE.DOCUMENTATION_MAIN_DESC' | translate"></h2>
 
-				<h2>Stark Core</h2>
-				<div [innerHTML]="'SHOWCASE.HOMEPAGE.DOCUMENTATION_CORE_DESC' | translate">
-				</div>
-				<br>
-				<h2>Stark UI</h2>
-				<div [innerHTML]="'SHOWCASE.HOMEPAGE.DOCUMENTATION_UI_DESC' | translate">
-				</div>
-				<br>
-				<h2>Showcase</h2>
-				<div [innerHTML]="'SHOWCASE.HOMEPAGE.DOCUMENTATION_SHOWCASE_DESC' | translate">
-				</div>
+			<h2>Stark Core</h2>
+			<div [innerHTML]="'SHOWCASE.HOMEPAGE.DOCUMENTATION_CORE_DESC' | translate"></div>
+			<br>
+			<h2>Stark UI</h2>
+			<div [innerHTML]="'SHOWCASE.HOMEPAGE.DOCUMENTATION_UI_DESC' | translate"></div>
+			<br>
+			<h2>Showcase</h2>
+			<div [innerHTML]="'SHOWCASE.HOMEPAGE.DOCUMENTATION_SHOWCASE_DESC' | translate"></div>
 		</mat-expansion-panel>
 	</mat-accordion>
 </section>

showcase/src/app/home/home.component.ts

@@ -1,8 +1,8 @@
 import { Component, Inject, OnInit } from "@angular/core";
-import { STARK_LOGGING_SERVICE, StarkErrorImpl, StarkLoggingService } from "@nationalbankbelgium/stark-core";
+import { STARK_LOGGING_SERVICE, StarkLoggingService } from "@nationalbankbelgium/stark-core";
 
 @Component({
-	selector: "home", // <home></home>
+	selector: "home",
 	templateUrl: "./home.component.html"
 })
 export class HomeComponent implements OnInit {
@@ -11,20 +11,4 @@ export class HomeComponent implements OnInit {
 	public ngOnInit(): void {
 		this.loggingService.debug("hello from `Home` component");
 	}
-
-	public logError(): void {
-		try {
-			throw new Error("Invoked error");
-		} catch (error) {
-			this.loggingService.error("Logging the Error", error);
-		}
-	}
-
-	public logStarkError(): void {
-		try {
-			throw new Error("Invoked error");
-		} catch (error) {
-			this.loggingService.error("Logging the StarkError", new StarkErrorImpl(error));
-		}
-	}
 }

showcase/src/app/in-memory-data/in-memory-data.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from "@angular/core";
+import { HTTP_INTERCEPTORS } from "@angular/common/http";
+// using the full path to import the "HttpClientInMemoryWebApiModule" to avoid adding "@angular/http" to Showcase npm dependencies!
+// see https://github.com/angular/in-memory-web-api/issues/215
+import { HttpClientInMemoryWebApiModule } from "angular-in-memory-web-api/http-client-in-memory-web-api.module";
+import { InMemoryDataService } from "./services";
+import { InMemoryDataHttpInterceptor } from "./interceptors";
+
+@NgModule({
+	imports: [
+		// advanced configuration for the HttpClientInMemoryWebApiModule (see https://github.com/angular/in-memory-web-api#advanced-features)
+		// see all possible options in InMemoryBackendConfigArgs in node_modules/angular-in-memory-web-api/interfaces.d.ts
+		HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {
+			delay: 100,
+			apiBase: "/",
+			passThruUnknownUrl: true
+		})
+	],
+	providers: [
+		// Add the InMemoryDataHttpInterceptor as an Http interceptor to adapt requests/responses according to the NBB Rest API Guide
+		{ provide: HTTP_INTERCEPTORS, useClass: InMemoryDataHttpInterceptor, multi: true }
+	]
+})
+export class InMemoryDataModule {}

showcase/src/app/in-memory-data/index.ts

@@ -0,0 +1,3 @@
+export * from "./interceptors";
+export * from "./services";
+export * from "./in-memory-data.module";