use lib spinner

package.json

@@ -32,7 +32,7 @@
     "@popperjs/core": "^2.11.8",
     "@sentry/browser": "^5.20.1",
     "@worldskills/bootstrap": "^4.10.1",
-    "@worldskills/worldskills-angular-lib": "^14.0.1",
+    "@worldskills/worldskills-angular-lib": "^14.0.2",
     "angular-oauth2-oidc": "^19.0.0",
     "jquery": "^3.5.1",
     "json2typescript": "^1.4.1",

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
-import {AlertsComponent, WorldskillsAngularLibModule, WsHttpInterceptor} from '@worldskills/worldskills-angular-lib';
+import {WorldskillsAngularLibModule, WsHttpInterceptor} from '@worldskills/worldskills-angular-lib';
 import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
@@ -10,12 +10,11 @@ import {OAuthModule} from 'angular-oauth2-oidc';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
-import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import {NgSelectModule} from '@ng-select/ng-select';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import {CommonModule, DatePipe} from '@angular/common';
 import {HttpInterceptorService} from '../services/http-interceptor/http-interceptor.service';
-import {WsSpinnerComponent} from './ws-spinner/ws-spinner.component';
 import {EventsComponent} from './events/events.component';
 import {EventsSearchFormComponent} from './events-search-form/events-search-form.component';
 import {EventComponent} from './event/event.component';
@@ -66,6 +65,15 @@ export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
 }
 
+export const appTranslationConfig = TranslateModule.forRoot({
+  loader: {
+      provide: TranslateLoader,
+      useFactory: HttpLoaderFactory,
+      deps: [HttpClient]
+  },
+  isolate: true // isolate property is the key point to remember/
+});
+
 @NgModule({
   imports: [
     CommonModule,
@@ -74,26 +82,30 @@ export function HttpLoaderFactory(http: HttpClient) {
     AppRoutingModule,
     FormsModule,
     ReactiveFormsModule,
+    WorldskillsAngularLibModule,
     OAuthModule.forRoot(),
-    NgSelectModule,
     NgbModule,
+    NgSelectModule,
     FontAwesomeModule,
-    TranslateModule.forRoot({
-      defaultLanguage: 'en',
-      loader: {
-        provide: TranslateLoader,
-        useFactory: HttpLoaderFactory,
-        deps: [HttpClient]
-      }
-    }),
+    appTranslationConfig,
     CKEditorModule,
-    WorldskillsAngularLibModule,
   ],
+  /*
+          FormsModule,
+        OAuthModule.forRoot(),
+        RouterModule.forRoot(appRoutes, routerOptions),
+        WorldskillsAngularLibModule,
+        NgbModule,
+        NgSelectModule,
+        appTranslationConfig], providers: [
+        { provide: HTTP_INTERCEPTORS, useClass: WsHttpInterceptor, multi: true },
+        DatePipe,
+        provideHttpClient(withInterceptorsFromDi())
+  */
   declarations: [
     AppComponent,
     HomeComponent,
     ErrorComponent,
-    WsSpinnerComponent,
     EventsComponent,
     EventsSearchFormComponent,
     EventComponent,
@@ -142,7 +154,9 @@ export function HttpLoaderFactory(http: HttpClient) {
   providers: [
     DatePipe,
     {provide: HTTP_INTERCEPTORS, useClass: WsHttpInterceptor, multi: true},
-    {provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true}
+    {provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true},
+    provideHttpClient(withInterceptorsFromDi())
+
   ],
   bootstrap: [AppComponent]
 })