Bug fix/config service

src/app/app.component.spec.ts

@@ -8,7 +8,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NavigationEnd, Router } from '@angular/router';
 
-import { OSFConfigService } from '@core/services/osf-config.service';
+import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { GetCurrentUser, UserState } from '@core/store/user';
 import { UserEmailsState } from '@core/store/user-emails';
 
@@ -22,7 +22,6 @@ import { GoogleTagManagerService } from 'angular-google-tag-manager';
 describe('Component: App', () => {
   let routerEvents$: Subject<any>;
   let gtmServiceMock: jest.Mocked<GoogleTagManagerService>;
-  let osfConfigServiceMock: OSFConfigService;
   let fixture: ComponentFixture<AppComponent>;
 
   beforeEach(async () => {
@@ -48,16 +47,9 @@ describe('Component: App', () => {
             events: routerEvents$.asObservable(),
           },
         },
-        {
-          provide: OSFConfigService,
-          useValue: {
-            has: jest.fn(),
-          },
-        },
       ],
     }).compileComponents();
 
-    osfConfigServiceMock = TestBed.inject(OSFConfigService);
     fixture = TestBed.createComponent(AppComponent);
   });
 
@@ -81,7 +73,6 @@ describe('Component: App', () => {
 
   describe('Google Tag Manager', () => {
     it('should push GTM tag on NavigationEnd with google tag id', () => {
-      jest.spyOn(osfConfigServiceMock, 'has').mockReturnValue(true);
       fixture.detectChanges();
       const event = new NavigationEnd(1, '/previous', '/current');
 
@@ -93,8 +84,9 @@ describe('Component: App', () => {
       });
     });
 
-    it('should not push GTM tag on NavigationEnd with google tag id', () => {
-      jest.spyOn(osfConfigServiceMock, 'has').mockReturnValue(false);
+    it('should not push GTM tag on NavigationEnd without google tag id', () => {
+      const environment = TestBed.inject(ENVIRONMENT);
+      environment.googleTagManagerId = '';
       fixture.detectChanges();
       const event = new NavigationEnd(1, '/previous', '/current');
 

src/app/app.component.ts

@@ -10,7 +10,7 @@ import { ChangeDetectionStrategy, Component, DestroyRef, effect, inject, OnInit
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 
-import { OSFConfigService } from '@core/services/osf-config.service';
+import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { GetCurrentUser } from '@core/store/user';
 import { GetEmails, UserEmailsSelectors } from '@core/store/user-emails';
 import { ConfirmEmailComponent } from '@shared/components';
@@ -34,7 +34,7 @@ export class AppComponent implements OnInit {
   private readonly dialogService = inject(DialogService);
   private readonly router = inject(Router);
   private readonly translateService = inject(TranslateService);
-  private readonly osfConfigService = inject(OSFConfigService);
+  private readonly environment = inject(ENVIRONMENT);
 
   private readonly actions = createDispatchMap({ getCurrentUser: GetCurrentUser, getEmails: GetEmails });
 
@@ -52,7 +52,7 @@ export class AppComponent implements OnInit {
     this.actions.getCurrentUser();
     this.actions.getEmails();
 
-    if (this.osfConfigService.has('googleTagManagerId')) {
+    if (this.environment.googleTagManagerId) {
       this.router.events
         .pipe(
           filter((event) => event instanceof NavigationEnd),

src/app/app.config.ts

@@ -7,21 +7,14 @@ import { ConfirmationService, MessageService } from 'primeng/api';
 import { providePrimeNG } from 'primeng/config';
 
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
-import {
-  ApplicationConfig,
-  ErrorHandler,
-  importProvidersFrom,
-  PLATFORM_ID,
-  provideZoneChangeDetection,
-} from '@angular/core';
+import { ApplicationConfig, ErrorHandler, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, withInMemoryScrolling } from '@angular/router';
 
 import { STATES } from '@core/constants';
-import { APPLICATION_INITIALIZATION_PROVIDER } from '@core/factory/application.initialization.factory';
-import { SENTRY_PROVIDER } from '@core/factory/sentry.factory';
-import { WINDOW, windowFactory } from '@core/factory/window.factory';
 import { provideTranslation } from '@core/helpers';
+import { APPLICATION_INITIALIZATION_PROVIDER } from '@core/provider/application.initialization.provider';
+import { SENTRY_PROVIDER } from '@core/provider/sentry.provider';
 
 import { authInterceptor, errorInterceptor, viewOnlyInterceptor } from './core/interceptors';
 import CustomPreset from './core/theme/custom-preset';
@@ -53,20 +46,6 @@ export const appConfig: ApplicationConfig = {
       },
     }),
     provideHttpClient(withInterceptors([authInterceptor, viewOnlyInterceptor, errorInterceptor])),
-    importProvidersFrom(TranslateModule.forRoot(provideTranslation())),
-    ConfirmationService,
-    MessageService,
-
-    APPLICATION_INITIALIZATION_PROVIDER,
-    {
-      provide: ErrorHandler,
-      useFactory: () => Sentry.createErrorHandler({ showDialog: false }),
-    },
-    {
-      provide: WINDOW,
-      useFactory: windowFactory,
-      deps: [PLATFORM_ID],
-    },
     provideRouter(routes, withInMemoryScrolling({ scrollPositionRestoration: 'top', anchorScrolling: 'enabled' })),
     provideStore(STATES, withNgxsReduxDevtoolsPlugin({ disabled: false })),
     provideZoneChangeDetection({ eventCoalescing: true }),

src/app/core/factory/application.initialization.factory.spec.ts → src/app/core/provider/application.initialization.provider.spec.ts

@@ -4,8 +4,8 @@ import { TestBed } from '@angular/core/testing';
 
 import { OSFConfigService } from '@core/services/osf-config.service';
 
-import { initializeApplication } from './application.initialization.factory';
-import { ENVIRONMENT } from './environment.factory';
+import { initializeApplication } from './application.initialization.provider';
+import { ENVIRONMENT } from './environment.provider';
 
 import * as Sentry from '@sentry/angular';
 import { OSFTestingModule } from '@testing/osf.testing.module';
@@ -16,7 +16,7 @@ jest.mock('@sentry/angular', () => ({
   createErrorHandler: jest.fn(() => 'mockErrorHandler'),
 }));
 
-describe('factory: sentry', () => {
+describe('Provider: sentry', () => {
   let osfConfigServiceMock: OSFConfigService;
   let googleTagManagerConfigurationMock: GoogleTagManagerConfiguration;
   let httpMock: HttpTestingController;

src/app/core/factory/application.initialization.factory.ts → src/app/core/provider/application.initialization.provider.ts

@@ -2,7 +2,7 @@ import { inject, provideAppInitializer } from '@angular/core';
 
 import { OSFConfigService } from '@core/services/osf-config.service';
 
-import { ENVIRONMENT } from './environment.factory';
+import { ENVIRONMENT } from './environment.provider';
 
 import * as Sentry from '@sentry/angular';
 import { GoogleTagManagerConfiguration } from 'angular-google-tag-manager';

src/app/core/factory/environment.factory.spec.ts → src/app/core/provider/environment.provider.spec.ts

@@ -2,11 +2,11 @@ import { TestBed } from '@angular/core/testing';
 
 import { EnvironmentModel } from '@osf/shared/models/environment.model';
 
-import { ENVIRONMENT } from './environment.factory';
+import { ENVIRONMENT } from './environment.provider';
 
 import { OSFTestingModule } from '@testing/osf.testing.module';
 
-describe('Factory: Environment', () => {
+describe('Provider: Environment', () => {
   let environment: EnvironmentModel;
 
   beforeEach(async () => {

src/app/core/provider/environment.provider.ts

@@ -0,0 +1,45 @@
+import { inject, InjectionToken } from '@angular/core';
+
+import { ENVIRONMENT_DO_NO_USE } from '@core/constants/environment.token';
+import { EnvironmentModel } from '@osf/shared/models/environment.model';
+
+/**
+ * `ENVIRONMENT` is an Angular `InjectionToken` that provides a **runtime-mutable proxy**
+ * over the application's static environment configuration.
+ *
+ * This factory wraps the base environment config (`ENVIRONMENT_DO_NO_USE`) in a `Proxy`
+ * so values can be accessed and overridden at runtime while preserving type safety
+ * based on the `EnvironmentModel` interface.
+ *
+ * ## Key Features:
+ * - Provides type-safe access to environment variables (e.g. `apiDomainUrl`, `recaptchaSiteKey`)
+ * - Supports **runtime modification** of values (e.g. `environment.featureFlag = true`)
+ * - Works seamlessly with Angular dependency injection
+ *
+ * @example
+ * ```ts
+ * const env = inject(ENVIRONMENT);
+ * console.log(env.apiDomainUrl);
+ * env.apiDomainUrl = 'https://dev.example.com'; // Override at runtime
+ * ```
+ *
+ * @see EnvironmentModel for a complete list of available keys.
+ * @see ENVIRONMENT_DO_NO_USE for the static base config (not modifiable).
+ */
+export const ENVIRONMENT = new InjectionToken<EnvironmentModel>('EnvironmentProxy', {
+  providedIn: 'root',
+  factory: () => {
+    const environment = inject(ENVIRONMENT_DO_NO_USE);
+
+    return new Proxy<EnvironmentModel>(
+      { ...environment },
+      {
+        get: (target, prop: keyof EnvironmentModel) => target[prop],
+        set: <K extends keyof EnvironmentModel>(target: EnvironmentModel, prop: K, value: EnvironmentModel[K]) => {
+          target[prop] = value;
+          return true;
+        },
+      }
+    );
+  },
+});

src/app/core/factory/sentry.factory.spec.ts → src/app/core/provider/sentry.provider.spec.ts

@@ -1,10 +1,10 @@
 import { TestBed } from '@angular/core/testing';
 
-import { SENTRY_PROVIDER, SENTRY_TOKEN } from './sentry.factory';
+import { SENTRY_PROVIDER, SENTRY_TOKEN } from './sentry.provider';
 
 import * as Sentry from '@sentry/angular';
 
-describe('Factory: Sentry', () => {
+describe('Provider: Sentry', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [SENTRY_PROVIDER],

src/app/core/provider/window.provider.spec.ts

@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { PLATFORM_ID } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
+import { WINDOW } from './window.provider';
+
+describe('Provider: WINDOW', () => {
+  describe('when running in the browser', () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [CommonModule],
+        providers: [{ provide: PLATFORM_ID, useValue: 'browser' }],
+      });
+    });
+
+    it('should return the real window object', () => {
+      const result = TestBed.inject(WINDOW);
+      expect(result).toBe(window);
+    });
+  });
+
+  describe('when running on the server', () => {
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        imports: [CommonModule],
+        providers: [{ provide: PLATFORM_ID, useValue: 'server' }],
+      });
+    });
+
+    it('should return an empty object instead of window', () => {
+      const result = TestBed.inject(WINDOW);
+      expect(result).toEqual({});
+    });
+  });
+});

src/app/core/provider/window.provider.ts

@@ -0,0 +1,22 @@
+import { isPlatformBrowser } from '@angular/common';
+import { inject, InjectionToken, PLATFORM_ID } from '@angular/core';
+
+/**
+ * `WINDOW` is an Angular InjectionToken that provides access to the global `window` object,
+ * but only when running in the browser (never on the server).
+ *
+ * This makes Angular Universal (SSR) safe by returning a mock object `{}` during server-side rendering.
+ *
+ * @example
+ * ```ts
+ * const win = inject(WINDOW);
+ * win.localStorage.getItem('token');
+ * ```
+ */
+export const WINDOW = new InjectionToken<Window | object>('Global Window Object', {
+  providedIn: 'root',
+  factory: () => {
+    const platformId = inject(PLATFORM_ID);
+    return isPlatformBrowser(platformId) ? window : {};
+  },
+});

src/app/core/services/help-scout.service.spec.ts

@@ -3,7 +3,7 @@ import { Store } from '@ngxs/store';
 import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 
-import { WINDOW } from '@core/factory/window.factory';
+import { WINDOW } from '@core/provider/window.provider';
 import { UserSelectors } from '@core/store/user/user.selectors';
 
 import { HelpScoutService } from './help-scout.service';

src/app/core/services/help-scout.service.ts

@@ -2,7 +2,7 @@ import { Store } from '@ngxs/store';
 
 import { effect, inject, Injectable } from '@angular/core';
 
-import { WINDOW } from '@core/factory/window.factory';
+import { WINDOW } from '@core/provider/window.provider';
 import { UserSelectors } from '@osf/core/store/user';
 
 /**

src/app/core/services/osf-config.service.spec.ts

@@ -1,8 +1,8 @@
 import { HttpTestingController } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 
-import { ENVIRONMENT } from '@core/factory/environment.factory';
 import { ConfigModel } from '@core/models/config.model';
+import { ENVIRONMENT } from '@core/provider/environment.provider';
 import { EnvironmentModel } from '@osf/shared/models/environment.model';
 
 import { OSFConfigService } from './osf-config.service';