Update documentation app to angular 18 (#698)

Also:

* Remove angular-in-memory-web-api, create a simple custom mock-db instead

* Refactor the data service and menu service to make the app run again,
and remove a lot of redundant old code

package.json

@@ -23,42 +23,39 @@
   },
   "private": true,
   "dependencies": {
-    "@ali-hm/angular-tree-component": "^12.0.0",
-    "@angular/animations": "17.3.3",
-    "@angular/cdk": "17.0.5",
-    "@angular/common": "17.3.3",
-    "@angular/core": "17.3.3",
-    "@angular/forms": "17.3.3",
-    "@angular/localize": "17.3.3",
-    "@angular/platform-browser": "17.3.3",
-    "@angular/platform-browser-dynamic": "17.3.3",
-    "@angular/router": "17.3.3",
+    "@angular/animations": "^18.2.0",
+    "@angular/cdk": "^18.2.0",
+    "@angular/common": "^18.2.0",
+    "@angular/compiler": "^18.2.0",
+    "@angular/core": "^18.2.0",
+    "@angular/forms": "^18.2.0",
+    "@angular/platform-browser": "^18.2.0",
+    "@angular/platform-browser-dynamic": "^18.2.0",
+    "@angular/router": "^18.2.0",
     "@folkehelseinstituttet/style": "^6.0.0",
-    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
-    "@ng-select/ng-select": "^12.0.6",
+    "@ng-bootstrap/ng-bootstrap": "^17.0.1",
+    "@ng-select/ng-select": "^13.7.1",
     "@popperjs/core": "^2.11.8",
     "@types/lodash-es": "~4.17.6",
-    "angular-in-memory-web-api": "^0.17.0",
     "bootstrap": "5.3.2",
     "date-fns": ">=3.3.1 <4",
     "highcharts": "~11.4.0",
     "highcharts-angular": "~4.0.0",
     "lodash-es": "~4.17.21",
-    "ngx-markdown": "^17.1.1",
-    "rxjs": "~7.5.0",
-    "tslib": "^2.6.2",
-    "zone.js": "~0.14.0"
+    "ngx-markdown": "^18.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.6.0",
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~17.3.5",
-    "@angular-eslint/builder": "17.3.0",
-    "@angular-eslint/eslint-plugin": "17.3.0",
-    "@angular-eslint/eslint-plugin-template": "17.3.0",
-    "@angular-eslint/schematics": "17.3.0",
-    "@angular-eslint/template-parser": "17.3.0",
-    "@angular/cli": "17.3.3",
-    "@angular/compiler": "17.3.3",
-    "@angular/compiler-cli": "17.3.3",
+    "@angular-devkit/build-angular": "^18.2.4",
+    "@angular-eslint/builder": "18.3.1",
+    "@angular-eslint/eslint-plugin": "18.3.1",
+    "@angular-eslint/eslint-plugin-template": "18.3.1",
+    "@angular-eslint/schematics": "18.3.1",
+    "@angular-eslint/template-parser": "18.3.1",
+    "@angular/cli": "^18.2.4",
+    "@angular/compiler-cli": "^18.2.0",
     "@types/jasmine": "^5.1.4",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^20.11.1",
@@ -74,10 +71,10 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^17.0.3",
+    "ng-packagr": "^18.2.1",
     "prettier": "^3.0.3",
     "ts-node": "~8.3.0",
-    "typescript": "5.2.2",
+    "typescript": "~5.5.2",
     "webpack": "^5.88.2"
   }
 }

src/app/core/core.module.ts

@@ -1,34 +1,24 @@
 import { NgModule, Optional, SkipSelf } from '@angular/core';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
 
 import { LOCALE_ID } from '@angular/core';
 import { registerLocaleData } from '@angular/common';
 import localeNb from '@angular/common/locales/nb';
 import localeNbExtra from '@angular/common/locales/extra/nb';
 registerLocaleData(localeNb, 'nb', localeNbExtra);
 
-import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
-import { MockDbService } from './mock-db.service';
-
 import { SharedModule } from '../shared/shared.module';
-import { MainMenuComponent } from '../core/main-menu/main-menu.component';
+import { MainMenuComponent } from './main-menu/main-menu.component';
+import { mockDbInterceptor } from './mock-db.interceptor';
 
 @NgModule({
   declarations: [MainMenuComponent],
-  imports: [
-    SharedModule,
-    HttpClientModule,
-
-    // The HttpClientInMemoryWebApiModule module intercepts HTTP requests and returns simulated server responses.
-    // Remove it when a real server is ready to receive requests.
-    HttpClientInMemoryWebApiModule.forRoot(MockDbService, {
-      apiBase: 'api/',
-      delay: 0,
-      passThruUnknownUrl: true,
-    }),
-  ],
   exports: [MainMenuComponent],
-  providers: [{ provide: LOCALE_ID, useValue: 'nb' }],
+  imports: [SharedModule],
+  providers: [
+    { provide: LOCALE_ID, useValue: 'nb' },
+    provideHttpClient(withInterceptors([mockDbInterceptor])),
+  ],
 })
 export class CoreModule {
   constructor(@Optional() @SkipSelf() parentModule: CoreModule) {

src/app/core/mock-db.interceptor.ts

@@ -0,0 +1,17 @@
+import { HttpEvent, HttpHandlerFn, HttpRequest, HttpResponse } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+
+import { getMockDbBody } from './mock-db';
+
+export function mockDbInterceptor(
+  req: HttpRequest<unknown>,
+  next: HttpHandlerFn,
+): Observable<HttpEvent<unknown>> {
+  const { url, method } = req;
+
+  if (url.startsWith('api/') && method === 'GET') {
+    return of(new HttpResponse({ status: 200, body: getMockDbBody(url) }));
+  }
+
+  return next(req);
+}

src/app/core/mock-db.service.ts → src/app/core/mock-db.ts

@@ -1,20 +1,3 @@
-import { Injectable } from '@angular/core';
-import { InMemoryDbService } from 'angular-in-memory-web-api';
-
-// All item ids
-import { LibraryItemIds } from 'src/MOCK_DB_DATA/library-items/library-item-ids';
-
-// All items for debuggings page
-import { AllData } from 'src/MOCK_DB_DATA/library-items/library-items.data';
-
-// Items
-
-// -----------------------------------------
-//
-// New id and title implementation!
-//
-// -----------------------------------------
-
 import { LibraryItemsSharedData } from 'src/MOCK_DB_DATA/library-items/library-items-shared-data';
 import { LibraryItemGroupsSharedData } from 'src/MOCK_DB_DATA/library-items/library-item-groups-shared-data';
 
@@ -48,53 +31,42 @@ import { TooltipPopoverData } from 'src/MOCK_DB_DATA/library-items/tooltip-popov
 import { TreeViewsData } from 'src/MOCK_DB_DATA/library-items/tree-views/_tree-views.data';
 import { TypographyData } from 'src/MOCK_DB_DATA/library-items/typography/_typography.data';
 
-// TODO: make logic for reading developer/debug/all in LibraryItemGroupsDataService
-// const AllLibraryItemsData: LibraryItem[] = [
-//   ...HighchartsData.libraryItems,
-// ];
-
-@Injectable({
-  providedIn: 'root',
-})
-export class MockDbService implements InMemoryDbService {
-  createDb(): object {
-    return {
-      LibraryItemsSharedData,
-      LibraryItemGroupsSharedData,
+export function getMockDbBody(url: string): unknown {
+  const urlSegment = url.slice(4);
 
-      // Items
-      AccordionsData,
-      AlertsData,
-      BadgesData,
-      BreadcrumbsData,
-      ButtonsData,
-      CardsData,
-      ColorsData,
-      DrawersData,
-      ErrorPagesData,
-      FormControlsData,
-      GlobalFootersData,
-      GlobalHeadersData,
-      HighchartsData,
-      IconsData,
-      LayoutTemplatesData,
-      ModalsData,
-      NavsData,
-      PaginationsData,
-      ProgressIndicatorsData,
-      PrototypeFormsData,
-      PrototypeTablesData,
-      SearchData,
-      TablesData,
-      TagsData,
-      TimeSelectorsData,
-      ToastsData,
-      TooltipPopoverData,
-      TreeViewsData,
-      TypographyData,
+  const dataMapping = {
+    LibraryItemsSharedData: LibraryItemsSharedData,
+    LibraryItemGroupsSharedData: LibraryItemGroupsSharedData,
+    AccordionsData: AccordionsData,
+    AlertsData: AlertsData,
+    BadgesData: BadgesData,
+    BreadcrumbsData: BreadcrumbsData,
+    ButtonsData: ButtonsData,
+    CardsData: CardsData,
+    ColorsData: ColorsData,
+    DrawersData: DrawersData,
+    ErrorPagesData: ErrorPagesData,
+    FormControlsData: FormControlsData,
+    GlobalFootersData: GlobalFootersData,
+    GlobalHeadersData: GlobalHeadersData,
+    HighchartsData: HighchartsData,
+    IconsData: IconsData,
+    LayoutTemplatesData: LayoutTemplatesData,
+    ModalsData: ModalsData,
+    NavsData: NavsData,
+    PaginationsData: PaginationsData,
+    ProgressIndicatorsData: ProgressIndicatorsData,
+    PrototypeFormsData: PrototypeFormsData,
+    PrototypeTablesData: PrototypeTablesData,
+    SearchData: SearchData,
+    TablesData: TablesData,
+    TagsData: TagsData,
+    TimeSelectorsData: TimeSelectorsData,
+    ToastsData: ToastsData,
+    TooltipPopoverData: TooltipPopoverData,
+    TreeViewsData: TreeViewsData,
+    TypographyData: TypographyData,
+  };
 
-      LibraryItemIds, // TODO: deprecate when all items use new system
-      AllData, // TODO: deprecate when all items use new system
-    };
-  }
+  return dataMapping[urlSegment] || null;
 }

src/app/views/designer/designer.component.ts

@@ -10,11 +10,11 @@ import { MenuItem } from '../../models/menu-item.model';
   templateUrl: './designer.component.html',
 })
 export class DesignerComponent implements OnInit, OnDestroy {
+  private subscription: Subscription = new Subscription();
+
   topLevelMenuItems!: MenuItem[];
   secondLevelMenuItems!: MenuItem[];
 
-  private subscription: Subscription = new Subscription();
-
   constructor(
     private urlService: UrlService,
     private libraryMenuService: LibraryMenuService,

src/app/views/developer/developer.component.html

@@ -1,17 +1,17 @@
-<div class="container" *ngIf="!isDebugging; else debugView">
-  <app-library-top-level-menu [menuItems]="topLevelMenuItems"></app-library-top-level-menu>
-  <div class="row">
-    <div class="col-xl-2">
-      <app-library-second-level-menu [menuItems]="secondLevelMenuItems"></app-library-second-level-menu>
-    </div>
-    <div class="col-xl-10">
-      <router-outlet></router-outlet>
+@if (dataIsLoaded && !isDebugging) {
+  <div class="container">
+    <app-library-top-level-menu [menuItems]="topLevelMenuItems"></app-library-top-level-menu>
+    <div class="row">
+      <div class="col-xl-2">
+        <app-library-second-level-menu [menuItems]="secondLevelMenuItems"></app-library-second-level-menu>
+      </div>
+      <div class="col-xl-10">
+        <router-outlet></router-outlet>
+      </div>
     </div>
   </div>
-</div>
-
-<ng-template #debugView>
-  <div class="container">
+} @else if (dataIsLoaded) {
+  <div class="container" *ngIf="dataIsLoaded">
     <router-outlet></router-outlet>
   </div>
-</ng-template>
+}

src/app/views/developer/developer.component.ts

@@ -1,13 +1,14 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { mergeMap } from 'rxjs/operators';
+import { mergeMap, tap } from 'rxjs/operators';
+
+import { FhiTreeViewNavigationItem } from '@folkehelseinstituttet/angular-components';
 
 import { UrlService } from '../../services/url.service';
-import { LibraryMenuService } from '../shared/services/library-menu.service';
 import { MenuItem } from '../../models/menu-item.model';
-import { FhiTreeViewNavigationItem } from '@folkehelseinstituttet/angular-components';
-import { LibraryItemGroupsSharedDataService } from '../shared/services/library-item-groups-shared-data.service';
+import { LibraryMenuService } from '../shared/services/library-menu.service';
 import { LibraryItemGroupsShared } from '../shared/models/library-item.model';
+import { LibraryItemsDataService } from '../shared/services/library-items-data.service';
 
 @Component({
   selector: 'app-developer',
@@ -20,28 +21,28 @@ export class DeveloperComponent implements OnInit, OnDestroy {
   secondLevelMenuItems!: Array<FhiTreeViewNavigationItem>;
   isDebugging = false;
   libraryItemGroupsShared!: LibraryItemGroupsShared;
+  dataIsLoaded = false;
 
   constructor(
     private urlService: UrlService,
     private libraryMenuService: LibraryMenuService,
-    private libraryItemGroupsSharedDataService: LibraryItemGroupsSharedDataService,
+    private libraryItemsDataService: LibraryItemsDataService,
   ) {}
 
   ngOnInit() {
     this.subscription.add(
       this.urlService.URL$.pipe(
-        mergeMap(() => this.libraryItemGroupsSharedDataService.getLibraryItemGroupsShared()),
+        tap(() => (this.dataIsLoaded = false)),
+        mergeMap(() => this.libraryItemsDataService.getLibraryItemGroupsShared()),
       ).subscribe({
         next: (libraryItemGroupsShared) => {
           this.topLevelMenuItems = this.libraryMenuService.getTopLevelMenuItems();
-          this.isDebugging = this.urlService.getSegmentPath(1) === 'debug' ? true : false;
+          this.isDebugging = this.urlService.getSegmentPath(1) === 'debug';
           if (!this.isDebugging && this.libraryMenuService.updateSecondLevelMenu()) {
-            this.secondLevelMenuItems = this.libraryMenuService
-              .getSecondLevelMenuItems(libraryItemGroupsShared)
-
-              // TODO: remove this when all items are using new system
-              .concat(this.libraryMenuService.getSecondLevelMenuItems_OLD());
+            this.secondLevelMenuItems =
+              this.libraryMenuService.getSecondLevelMenuItems(libraryItemGroupsShared);
           }
+          this.dataIsLoaded = true;
         },
         error: (error) => console.log(error),
       }),

src/app/views/developer/library-item/library-item.component.html

@@ -44,7 +44,7 @@ <h1 class="h2" [attr.lang]="titleLang === lang_NO ? null : lang_EN">{{ title }}<
 </ng-template>
 
 <ng-template #dynamicLibraryExample>
-  <app-dynamic-library-example [groupId]="groupId" [itemId]="id"> </app-dynamic-library-example>
+  <app-dynamic-library-example [group]="group" [itemId]="id"> </app-dynamic-library-example>
 </ng-template>
 
 <ng-template #debugView>