fix: legacy setup code from Angular 15 to 17 migration

This commit attempts to fix legacy setup code from the Angular 15 to 17 migration. Since Angular 17 uses standalone mode instead of modules as default and the Angular documentation for v17 presumes standalone mode, it is difficult to percieve what the proper Angular 17 setup should be for modules based apps with both server side rendering and i18n enabled.

This commit:
- Changes `HttpClientModule` to `provideHttpClient(withFetch())` (recommended for SSR apps: https://angular.io/api/common/http/provideHttpClient).
- Changes the polyfills config in `angular.json` and deletes the `src/polyfills.ts` file.
- Renames the app component from `DigitalEditionApp` to the default `AppComponent`.
- Removes the check for `document.readyState` and the `DOMContentLoaded` event listener before bootstrapping in `main.ts`.

Most of the changes are based on what the source code of a new modules based Angular 17 app with SSR and i18n enabled looks like (generated with `ng new <app-name> --routing --ssr --no-standalone`).

CHANGELOG.md

@@ -8,6 +8,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/), and this
 
 ## [Unreleased]
 
+### Fixed
+
+- Legacy setup code from Angular 15 to 17 migration. Angular 17 introduced several changes to the `app.module.\*`, `main.server.ts`, `main.ts`, `server.ts` and `tsconfig.\*` files. During the original v15 -> v17 update of the app all of these changes were not implemented. This fix attempts to align the app with the setup of a new modules based Angular 17 app that has SSR and i18n enabled.
+
 
 
 ## [1.2.0] – 2024-01-10

angular.json

@@ -30,7 +30,9 @@
             "outputPath": "dist/app/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "i18nDuplicateTranslation": "error",
@@ -168,7 +170,10 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",

server.ts

@@ -10,7 +10,7 @@ import * as express from 'express';
 import { existsSync } from 'fs';
 import { join } from 'path';
 
-import { AppServerModule } from './src/main.server';
+import AppServerModule from './src/main.server';
 import { environment } from './src/environments/environment';
 
 // The Express app is exported so that it can be used by serverless Functions.

src/app/app.component.spec.ts

@@ -1,19 +1,19 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 
-import { DigitalEditionApp } from './app.component';
+import { AppComponent } from './app.component';
 
-describe('DigitalEditionApp', () => {
+describe('AppComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [DigitalEditionApp],
+      declarations: [AppComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
   });
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(DigitalEditionApp);
+    const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });

src/app/app.component.ts

@@ -13,7 +13,7 @@ import { isBrowser } from '@utility-functions';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class DigitalEditionApp implements OnDestroy, OnInit {
+export class AppComponent implements OnDestroy, OnInit {
   appIsStarting: boolean = true;
   collectionID: string = '';
   collectionSideMenuInitialUrlSegments: UrlSegment[];

src/app/app.module.ts

@@ -1,20 +1,20 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withFetch } from '@angular/common/http';
 import { BrowserModule, Title } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 
 import { AppRoutingModule } from './app-routing.module';
-import { DigitalEditionApp } from './app.component';
+import { AppComponent } from './app.component';
 import { CollectionSideMenuComponent } from '@components/menus/collection-side/collection-side-menu.component';
 import { MainSideMenuComponent } from '@components/menus/main-side/main-side-menu.component';
 import { TopMenuComponent } from '@components/menus/top/top-menu.component';
 
 
 @NgModule({
   declarations: [
-    DigitalEditionApp
+    AppComponent
   ],
   imports: [
     BrowserModule,
@@ -25,16 +25,16 @@ import { TopMenuComponent } from '@components/menus/top/top-menu.component';
       }
     ),
     AppRoutingModule,
-    HttpClientModule,
     CommonModule,
     CollectionSideMenuComponent,
     MainSideMenuComponent,
     TopMenuComponent
   ],
   providers: [
+    provideHttpClient(withFetch()),
     Title,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
   ],
-  bootstrap: [DigitalEditionApp]
+  bootstrap: [AppComponent]
 })
 export class AppModule {}

src/app/app.server.module.ts

@@ -1,9 +1,10 @@
 import { NgModule } from '@angular/core';
+import { provideHttpClient, withFetch } from '@angular/common/http';
 import { ServerModule } from '@angular/platform-server';
 import { IonicServerModule } from '@ionic/angular-server';
 
 import { AppModule } from './app.module';
-import { DigitalEditionApp } from './app.component';
+import { AppComponent } from './app.component';
 
 
 @NgModule({
@@ -12,6 +13,7 @@ import { DigitalEditionApp } from './app.component';
     ServerModule,
     IonicServerModule,
   ],
-  bootstrap: [DigitalEditionApp],
+  providers: [provideHttpClient(withFetch())],
+  bootstrap: [AppComponent],
 })
 export class AppServerModule {}

src/main.server.ts

@@ -1 +1 @@
-export { AppServerModule } from './app/app.server.module';
+export { AppServerModule as default } from './app/app.server.module';

src/main.ts

@@ -11,13 +11,5 @@ if (environment.production) {
   enableProdMode();
 }
 
-function bootstrap() {
-  platformBrowserDynamic().bootstrapModule(AppModule)
-    .catch(err => console.log(err));
-};
-
-if (document.readyState === 'complete') {
-  bootstrap();
-} else {
-  document.addEventListener('DOMContentLoaded', bootstrap);
-}
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

tsconfig.app.json

@@ -4,12 +4,12 @@
   "compilerOptions": {
     "outDir": "./out-tsc/app",
     "types": [
+      "node",
       "@angular/localize"
     ]
   },
   "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
+    "src/main.ts"
   ],
   "include": [
     "src/**/*.d.ts"

tsconfig.json

@@ -18,11 +18,11 @@
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",
+    "useDefineForClassFields": false,
     "lib": [
       "ES2022",
       "dom"
     ],
-    "useDefineForClassFields": false,
     "allowSyntheticDefaultImports": true,
     "strictPropertyInitialization": false,
     "paths": {

tsconfig.spec.json

@@ -8,10 +8,6 @@
       "@angular/localize"
     ]
   },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
   "include": [
     "src/**/*.spec.ts",
     "src/**/*.d.ts"