feat: implement API endpoint interceptor and update app configuration #5

Web/src/app/app.config.ts

@@ -2,9 +2,10 @@ import { ApplicationConfig, inject, provideAppInitializer, provideBrowserGlobalE
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
-import { HTTP_INTERCEPTORS, provideHttpClient } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { DefaultOAuthInterceptor, provideOAuthClient } from 'angular-oauth2-oidc';
 import { AppConfigService } from './services/config.service';
+import { ApiEndpointInterceptor } from './services/http.interceptor';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -12,17 +13,22 @@ export const appConfig: ApplicationConfig = {
     provideZonelessChangeDetection(),
     provideRouter(routes),
     provideAppInitializer(() => inject(AppConfigService).loadConfig()),
-    provideHttpClient(),
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: DefaultOAuthInterceptor,
+      multi: true,
+    },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: ApiEndpointInterceptor,
+      multi: true,
+    },
+    provideHttpClient(withInterceptorsFromDi()),
     provideOAuthClient({
       resourceServer: {
         allowedUrls: ['http://localhost:5000', 'https://localhost:5001', 'https://centrum.lesko.me'],
         sendAccessToken: true,
       },
     }),
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: DefaultOAuthInterceptor,
-      multi: true,
-    }
   ]
 };

Web/src/app/app.ts

@@ -22,7 +22,6 @@ export class App implements OnInit {
       clientId: '21131567-fea1-42a2-8907-21abd874eff8',
       scope: 'openid profile email',
       responseType: 'code',
-      showDebugInformation: true,
       timeoutFactor: 0.01,
     });
   }

Web/src/app/content/content.ts

@@ -14,10 +14,9 @@ export class Content {
   data = signal({});
 
   constructor(httpClient: HttpClient, readonly as: OAuthService, readonly cs: AppConfigService) {
-    httpClient.get((isDevMode() ? cs.setting.apiEndpoint : '') + '/api/product', {
+    httpClient.get('/api/product')
-      headers: new HttpHeaders({ Authorization: `Bearer ${as.getAccessToken()}` }).append('Content-Type', 'application/json')
+      .subscribe(data => {
-    }).subscribe(data => {
+        this.data.set(data);
-      this.data.set(data);
+      });
-    });
   }
 }

Web/src/app/services/config.service.ts

@@ -1,16 +1,28 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
-import { Observable, tap } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class AppConfigService {
     private config: any;
 
-    constructor(private readonly http: HttpClient) { }
+    public loaded: boolean = false;
+
+    constructor() { }
 
     loadConfig(): Observable<any> {
-        return this.http.get('/config.json')
+        return new Observable(observer => {
-            .pipe(tap(data => this.config = data))
+            fetch('/config.json')
+                .then(async response => {
+                    if (!response.ok) {
+                        throw new Error(`Could not load config.json: ${response.statusText}`);
+                    }
+                    this.config = await response.json();
+                    this.loaded = true;
+                    observer.next(this.config);
+                    observer.complete();
+                })
+                .catch(error => observer.error(error));
+        });
     }
 
     get setting() {

Web/src/app/services/http.interceptor.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { AppConfigService } from './config.service';
+
+@Injectable({ providedIn: 'root' })
+export class ApiEndpointInterceptor implements HttpInterceptor {
+    constructor(private readonly configService: AppConfigService) { }
+
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        return this.prependUrl(req, next);
+    }
+
+    prependUrl(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        const apiEndpoint = this.configService.setting.apiEndpoint;
+        if (apiEndpoint === undefined || !this.configService.loaded)
+            throw new Error('API endpoint is not defined or config not loaded');
+        
+        const isRelative = !/^https?:\/\//i.test(req.url);
+        const url = isRelative ? `${apiEndpoint.replace(/\/$/, '')}/${req.url.replace(/^\//, '')}` : req.url;
+        const cloned = req.clone({ url });
+        console.trace('ApiEndpointInterceptor hit:', url);
+        return next.handle(cloned);
+    }
+}