feat: enhance app configuration and dashboard component with HTTP interceptors and improved data loading #4

Web/src/app/app.config.ts

@@ -2,8 +2,11 @@ import {
   ApplicationConfig,
   provideZoneChangeDetection,
   importProvidersFrom,
+  provideAppInitializer,
+  inject,
 } from '@angular/core';
 import {
+  HTTP_INTERCEPTORS,
   HttpClient,
   provideHttpClient,
   withInterceptorsFromDi,
@@ -38,7 +41,9 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 // code view
 import { provideHighlightOptions } from 'ngx-highlightjs';
 import 'highlight.js/styles/atom-one-dark.min.css';
-import { OAuthModule, provideOAuthClient } from 'angular-oauth2-oidc';
+import { DefaultOAuthInterceptor, OAuthModule, provideOAuthClient } from 'angular-oauth2-oidc';
+import { AppConfigService } from './services/config.service';
+import { ApiEndpointInterceptor } from './services/http.interceptor';
 
 export function HttpLoaderFactory(http: HttpClient): any {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -66,6 +71,18 @@ export const appConfig: ApplicationConfig = {
       }),
       withComponentInputBinding()
     ),
+    provideAppInitializer(() => inject(AppConfigService).loadConfig()),
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: DefaultOAuthInterceptor,
+      multi: true,
+    },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: ApiEndpointInterceptor,
+      multi: true,
+    },
+
     provideHttpClient(withInterceptorsFromDi()),
     provideOAuthClient({
       resourceServer: {

Web/src/app/pages/dashboard/main/dashboard.component.ts

@@ -1,14 +1,25 @@
-import { Component } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { Component, signal } from '@angular/core';
 
 // components
 
 @Component({
   selector: 'app-dashboard-main',
   imports: [
-
+    JsonPipe
   ],
-  template: ''
+  template: '<div>{{ data() | json }}</div>',
 })
 export class AppDashboardMainComponent {
-  constructor() { }
+
+  data = signal({});
+
+  constructor(httpClient: HttpClient) {
+    httpClient.get('/api/product')
+      .subscribe(data => {
+        this.data.set(data);
+      });
+
+  }
 }

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

@@ -11,7 +11,7 @@ export class AppConfigService {
 
     loadConfig(): Observable<any> {
         return new Observable(observer => {
-            fetch('/config.json')
+            fetch('/assets/config.json')
                 .then(async response => {
                     if (!response.ok) {
                         throw new Error(`Could not load config.json: ${response.statusText}`);