OZG-130 make environment injectable

goofy-client/apps/goofy/src/app/app.component.html

 <ng-container *ngIf="apiRoot$ | async as apiRoot">
 	<goofy-client-header
-		[darkMode]="darkMode$ | async" [navigationCollapse]="navigationCollapse$ | async"
-		(toggleMenuEvent)="toggleNavigation($event)" (darkModeEmitter)="changeColorMode($event)">
+		[darkMode]="darkMode$ | async"
+		[navigationCollapse]="navigationCollapse$ | async"
+		(toggleMenuEvent)="toggleNavigation($event)"
+		(darkModeEmitter)="changeColorMode($event)"
+	>
 	</goofy-client-header>
 
 	<div class="container">
@@ -12,7 +15,9 @@
 		</section>
 	</div>
 </ng-container>
-
+<!--
 <ng-container *ngIf="apiRootStateless$ | async as apiRootStateless">
 	{{apiRootStateless | json}}
 </ng-container>
+
+-->

goofy-client/apps/goofy/src/app/app.module.ts

+import { registerLocaleData } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
-import { LOCALE_ID, NgModule } from '@angular/core';
 import localeDe from '@angular/common/locales/de';
+import { LOCALE_ID, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { ApiRootSharedModule } from '@goofy-client/api-root-shared';
-import { EnvironmentSharedModule } from '@goofy-client/environment-shared';
-import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
-import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
-import { NgxsModule } from '@ngxs/store';
-import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
+import { ApiRootSharedModule } from '@goofy-client/api-root-shared';
+import { EnvironmentModule } from '@goofy-client/environment-shared';
+import { NavigationModule } from '@goofy-client/navigation';
 import { UiModule } from '@goofy-client/ui';
 import { VorgangModule } from '@goofy-client/vorgang';
-import { registerLocaleData } from '@angular/common';
-import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
 import { NgxsActionsExecutingModule } from '@ngxs-labs/actions-executing';
-import { NavigationModule } from '@goofy-client/navigation';
+import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
+import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
+import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
+import { NgxsModule } from '@ngxs/store';
+import { AppComponent } from './app.component';
 import { AppState } from './shared/app.state';
 
 registerLocaleData(localeDe);
@@ -32,7 +32,7 @@ registerLocaleData(localeDe);
 		NgxsRouterPluginModule.forRoot(),
 		NgxsActionsExecutingModule.forRoot(),
 		HttpClientModule,
-		EnvironmentSharedModule,
+		EnvironmentModule,
 		ApiRootSharedModule,
 		BrowserAnimationsModule,
 		RouterModule,

goofy-client/libs/api-root-shared/src/lib/api-root-shared.actions.ts

 import { ResourceUri } from '@ngxp/rest';
+import { Environment } from 'libs/environment-shared/src/lib/environment.model';
 
 export class LoadApiRootAction {
 	static readonly type = '[System ApiRoot] Load';
 
-	constructor(public remoteHost: ResourceUri){}
+	constructor() { }
 }
\ No newline at end of file

goofy-client/libs/api-root-shared/src/lib/api-root-shared.state.ts

 import { Injectable } from '@angular/core';
 import { Action, NgxsOnInit, Selector, State, StateContext } from '@ngxs/store';
-import { Environment } from 'libs/environment-shared/src/lib/environment-shared.model';
-import { getEnvironmentFactory } from 'libs/environment-shared/src/lib/environment-shared.util';
 import { tap } from 'rxjs/operators';
 import { LoadApiRootAction } from './api-root-shared.actions';
 import { ApiRootResource } from './api-root-shared.model';
 import { ApiRootService } from './api-root-shared.service';
+import { ApiRootRepository } from './api-root.repository';
 
 const defaults: ApiRootStateModel = {
 	apiRoot: null,
@@ -23,15 +22,19 @@ export class ApiRootState implements NgxsOnInit{
 		return state.apiRoot;
 	}
 
-	constructor(private service: ApiRootService) {}
+	constructor(private service: ApiRootService, private repository: ApiRootRepository) { }
 
 	ngxsOnInit(context: StateContext<any>): void {
-		getEnvironmentFactory().then((environment: Environment) => context.dispatch(new LoadApiRootAction(environment.remoteHost)));
+		// context.dispatch(new LoadApiRootAction(env))
+
+		// getEnvironmentFactory().then((environment: Environment) => context.dispatch(new LoadApiRootAction(environment.remoteHost)));
+		context.dispatch(new LoadApiRootAction());
 	}
 
 	@Action(LoadApiRootAction)
 	loadApiRoot(context: StateContext<ApiRootStateModel>, action: LoadApiRootAction) {
-		return this.service.get(action.remoteHost).pipe(
+		return this.repository.loadApiRoot().pipe(
+			// return this.service.get(action.remoteHost).pipe(
 			tap((apiRoot) => {
 				context.patchState({ apiRoot });
 			})

goofy-client/libs/api-root-shared/src/lib/api-root.repository.spec.ts

+import { Mock, mock, useFromMock } from '@goofy-client/test-utils';
+import { HttpService } from '@ngxp/rest';
+import { Environment } from 'libs/environment-shared/src/lib/environment.model';
+import { ApiRootRepository } from "./api-root.repository"
+import { createEnvironment } from "../../../environment-shared/test/environment";
+
+var repository: ApiRootRepository;
+var httpService: Mock<HttpService>;
+
+const environment: Environment = createEnvironment();
+
+beforeEach(() => {
+	httpService = mock(HttpService);
+	repository = new ApiRootRepository(useFromMock(httpService), environment);
+})
+
+describe('api root repository', () => {
+	describe('loadApiRoot', () => {
+		it('should call httpService', () => {
+			repository.loadApiRoot();
+
+			expect(httpService.get).toHaveBeenCalledWith(environment.remoteHost);
+		})
+	})
+})
\ No newline at end of file

goofy-client/libs/api-root-shared/src/lib/api-root.repository.ts

-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { HttpService } from '@ngxp/rest';
 import { Observable } from 'rxjs';
 import { ApiRootResource } from './api-root-shared.model';
+import { ENVIRONMENT_CONFIG } from '@goofy-client/environment-shared';
+import { Environment } from 'libs/environment-shared/src/lib/environment.model';
 
 @Injectable()
 export class ApiRootRepository {
 
 	constructor(
 		private httpService: HttpService,
-		//@Inject(ENVIRONMENT_CONFIG) private environmentConfig
+		@Inject(ENVIRONMENT_CONFIG) private environmentConfig: Environment
 	) { }
 
 	public loadApiRoot(): Observable<ApiRootResource> {
-		return this.httpService.get('http://localhost:4300/api');
+		return this.httpService.get(this.environmentConfig.remoteHost);
 	}
 }
\ No newline at end of file

goofy-client/libs/environment-shared/src/index.ts

-export * from './lib/environment-shared.module';
-export * from './lib/environment-shared.service';
+export * from './lib/environment.module';
+export * from './lib/environment.service';

goofy-client/libs/environment-shared/src/lib/environment-shared.state.ts

 import { Injectable } from '@angular/core';
 import { Action, NgxsOnInit, State, StateContext } from '@ngxs/store';
 import { SetEnvironmentAction } from './environment-shared.actions';
-import { Environment } from './environment-shared.model';
-import { getEnvironmentFactory } from './environment-shared.util';
+import { Environment } from './environment.model';
+import { getEnvironmentFactory } from './environment.service';
 
 const defaults: EnvironmentStateModel = {
 	environment: null
@@ -24,8 +24,7 @@ export class EnvironmentState implements NgxsOnInit {
 
 	@Action(SetEnvironmentAction)
 	loadEnvironment(context: StateContext<EnvironmentStateModel>) {
-		return getEnvironmentFactory().then((environment: Environment) => {
+		const environment = getEnvironmentFactory();
 		context.patchState({ environment });
-		})
 	}
 }
\ No newline at end of file

goofy-client/libs/environment-shared/src/lib/environment-shared.util.ts

-export function getEnvironmentFactory(): any {
-  return window['__env__'];
-}
\ No newline at end of file

goofy-client/libs/environment-shared/src/lib/environment-shared.module.ts → goofy-client/libs/environment-shared/src/lib/environment.module.ts

@@ -3,12 +3,19 @@ import { NgModule } from '@angular/core';
 import { RestModule } from '@ngxp/rest';
 import { NgxsModule } from '@ngxs/store';
 import { EnvironmentState } from './environment-shared.state';
+import { ENVIRONMENT_CONFIG, getEnvironmentFactory } from './environment.service';
 
 @NgModule({
 	imports: [
 		CommonModule,
 		NgxsModule.forFeature([EnvironmentState]),
 		RestModule
+	],
+	providers: [
+		{
+			provide: ENVIRONMENT_CONFIG,
+			useFactory: getEnvironmentFactory
+		}
 	]
 })
-export class EnvironmentSharedModule {}
+export class EnvironmentModule { }

goofy-client/libs/environment-shared/src/lib/environment-shared.service.ts → goofy-client/libs/environment-shared/src/lib/environment.service.ts

 import { InjectionToken } from '@angular/core';
 import { getBaseUrl } from '@goofy-client/tech-shared';
+import { Environment } from './environment.model';
 
 export const ENVIRONMENT_CONFIG = new InjectionToken('environmentConfig');
 
+export function getEnvironmentFactory(): Environment {
+	return window['__env__'];
+}
+
 export async function loadEnvironment(url?: string): Promise<any> {
 	const envUrl = url ? url : `${getBaseUrl()}api/environment`;
 	const headers = new Headers({ 'X-Client': 'web' });
 
-	return window.fetch(envUrl, { headers }).then(response => {
-		const env = response.json();
+	return window.fetch(envUrl, { headers })
+		.then(response => response.json())
+		.then(env => {
 			window['__env__'] = env;
 			return env;
-	})
+		});
 }
\ No newline at end of file

goofy-client/libs/environment-shared/test/environment.ts

+import * as faker from 'faker';
+import { cloneDeep } from 'lodash-es';
+import { Environment } from '../src/lib/environment.model';
+
+const baseUrl = faker.internet.url();
+
+const environment: Environment = {
+	production: false,
+	remoteHost: baseUrl
+};
+
+export function createEnvironment(): Environment {
+	return cloneDeep(environment);
+}

goofy-client/package.json

@@ -7,6 +7,7 @@
 		"ng": "nx",
 		"postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
 		"start": "run-s \"nx -- serve --port 4300 --disable-host-check --proxy-config proxy.conf.json\" --",
+		"start:devbe": "run-s \"nx -- serve --port 4300 --disable-host-check --proxy-config proxy.dev.conf.json\" --",
 		"build": "ng build",
 		"test": "jest test a",
 		"test:cov": "jest --coverage",

goofy-client/proxy.dev.conf.json

+{
+	"/api": {
+	  "target": {
+		"host": "kiel.dev.ozg-sh.de",
+
+		"protocol": "https:"
+	  },
+	  "secure": false,
+	  "logLevel": "debug"
+	}
+  }
+  
\ No newline at end of file