[ENG-10032] SSR: Main resources page (#852)

- Ticket: [ENG-10032]
- Feature flag: n/a

## Summary of Changes
1. Added SSR setup.
2. Added new routes for SSR.
3. Fixed issues with SSR.

Author: nsemets

angular.json

@@ -63,10 +63,39 @@
               "node_modules/ngx-markdown-editor/assets/highlight.js/highlight.min.js",
               "node_modules/ngx-markdown-editor/assets/marked.min.js",
               "src/assets/js/ace/snippetsMarkdown.js"
-            ]
+            ],
+            "server": "src/main.server.ts",
+            "outputMode": "server",
+            "ssr": {
+              "entry": "src/server.ts"
+            }
           },
           "configurations": {
             "production": {
+              "outputMode": "static",
+              "server": false,
+              "ssr": false,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "9MB",
+                  "maximumError": "10MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "20KB",
+                  "maximumError": "25kB"
+                }
+              ],
+              "outputHashing": "all",
+              "optimization": true
+            },
+            "ssr": {
+              "outputMode": "server",
+              "server": "src/main.server.ts",
+              "ssr": {
+                "entry": "src/server.ts"
+              },
               "budgets": [
                 {
                   "type": "initial",
@@ -119,28 +148,6 @@
                   "with": "src/environments/environment.staging.ts"
                 }
               ]
-            },
-            "test": {
-              "optimization": true,
-              "extractLicenses": false,
-              "sourceMap": false,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.test.ts"
-                }
-              ]
-            },
-            "test-osf": {
-              "optimization": true,
-              "extractLicenses": false,
-              "sourceMap": false,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.test-osf.ts"
-                }
-              ]
             }
           },
           "defaultConfiguration": "production"

package.json

@@ -5,6 +5,7 @@
     "ng": "ng",
     "analyze-bundle": "ng build --configuration=analyze-bundle && source-map-explorer dist/**/*.js --no-border-checks",
     "build": "ng build",
+    "build:ssr": "ng build --configuration=ssr",
     "check:config": "node ./docker/check-config.js",
     "ci:test": "jest",
     "ci:test:coverage": "jest --coverage",
@@ -21,8 +22,6 @@
     "start": "ng serve",
     "start:docker": "npm run check:config && ng serve --host 0.0.0.0 --port 4200 --poll 2000 --configuration development",
     "start:docker:local": "npm run check:config && ng serve --host 0.0.0.0 --port 4200 --poll 2000 --configuration docker",
-    "start:test": "ng serve --configuration test-osf",
-    "start:test:future": "ng serve --configuration test",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage && npm run test:display",

src/app/app.config.ts

@@ -6,7 +6,7 @@ import { ConfirmationService, MessageService } from 'primeng/api';
 import { providePrimeNG } from 'primeng/config';
 import { DialogService } from 'primeng/dynamicdialog';
 
-import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
 import { ApplicationConfig, ErrorHandler, importProvidersFrom, provideZoneChangeDetection } from '@angular/core';
 import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
@@ -49,7 +49,7 @@ export const appConfig: ApplicationConfig = {
         },
       },
     }),
-    provideHttpClient(withInterceptors([authInterceptor, viewOnlyInterceptor, errorInterceptor])),
+    provideHttpClient(withInterceptors([authInterceptor, viewOnlyInterceptor, errorInterceptor]), withFetch()),
     provideRouter(routes, withInMemoryScrolling({ scrollPositionRestoration: 'top', anchorScrolling: 'enabled' })),
     provideStore(STATES),
     provideZoneChangeDetection({ eventCoalescing: true }),

src/app/app.routes.server.ts

@@ -3,27 +3,27 @@ import { RenderMode, ServerRoute } from '@angular/ssr';
 export const serverRoutes: ServerRoute[] = [
   {
     path: 'terms-of-use',
-    renderMode: RenderMode.Server,
+    renderMode: RenderMode.Prerender,
   },
   {
     path: 'privacy-policy',
-    renderMode: RenderMode.Server,
+    renderMode: RenderMode.Prerender,
   },
   {
     path: 'forbidden',
-    renderMode: RenderMode.Server,
+    renderMode: RenderMode.Prerender,
   },
   {
-    path: 'request-access/:id',
-    renderMode: RenderMode.Server,
+    path: 'not-found',
+    renderMode: RenderMode.Prerender,
   },
   {
-    path: 'not-found',
-    renderMode: RenderMode.Server,
+    path: 'forgotpassword',
+    renderMode: RenderMode.Prerender,
   },
   {
-    path: 'preprints/:providerId/:id',
-    renderMode: RenderMode.Server,
+    path: '',
+    renderMode: RenderMode.Prerender,
   },
   {
     path: 'dashboard',
@@ -41,18 +41,130 @@ export const serverRoutes: ServerRoute[] = [
     path: 'my-preprints',
     renderMode: RenderMode.Client,
   },
+  {
+    path: 'register',
+    renderMode: RenderMode.Client,
+  },
   {
     path: 'profile',
     renderMode: RenderMode.Client,
   },
+  {
+    path: 'registries/drafts/**',
+    renderMode: RenderMode.Client,
+  },
+  {
+    path: 'registries/revisions/**',
+    renderMode: RenderMode.Client,
+  },
   {
     path: 'settings/**',
     renderMode: RenderMode.Client,
   },
+  {
+    path: 'request-access/:id',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'resetpassword/:userId/:token',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'search',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'preprints/discover',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'preprints/:providerId/:id/pending-moderation',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'preprints/:providerId/discover',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'preprints/:providerId/:id',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'preprints/:providerId',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'registries/discover',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'registries/:providerId',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'institutions',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'institutions/:institutionId',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'collections/:providerId/discover',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'meetings/**',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'user/:id',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'project/:id/node/:nodeId/files/:provider/:fileId',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: 'project/:id/files/:provider/:fileId',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: ':id/files/:provider/:fileId',
+    renderMode: RenderMode.Server,
+  },
   {
     path: ':id/overview',
     renderMode: RenderMode.Server,
   },
+  {
+    path: ':id/files/**',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: ':id/registrations',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: ':id/analytics',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: ':id/links',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: ':id/resources',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: ':id/components',
+    renderMode: RenderMode.Server,
+  },
+  {
+    path: ':id/recent-activity',
+    renderMode: RenderMode.Server,
+  },
   {
     path: ':id',
     renderMode: RenderMode.Server,

src/app/app.routes.ts

@@ -100,6 +100,13 @@ export const routes: Routes = [
         path: 'preprints',
         loadChildren: () => import('./features/preprints/preprints.routes').then((mod) => mod.preprintsRoutes),
       },
+      {
+        path: 'preprints/:providerId/:id/pending-moderation',
+        loadComponent: () =>
+          import(
+            '@osf/features/preprints/pages/preprint-pending-moderation/preprint-pending-moderation.component'
+          ).then((mod) => mod.PreprintPendingModerationComponent),
+      },
       {
         path: 'preprints/:providerId/:id',
         loadComponent: () =>
@@ -156,13 +163,6 @@ export const routes: Routes = [
           import('./core/components/forbidden-page/forbidden-page.component').then((mod) => mod.ForbiddenPageComponent),
         data: { skipBreadcrumbs: true },
       },
-      {
-        path: 'preprints/:providerId/:id/pending-moderation',
-        loadComponent: () =>
-          import(
-            '@osf/features/preprints/pages/preprint-pending-moderation/preprint-pending-moderation.component'
-          ).then((mod) => mod.PreprintPendingModerationComponent),
-      },
       {
         path: 'request-access/:id',
         loadComponent: () =>
@@ -176,7 +176,7 @@ export const routes: Routes = [
         data: { skipBreadcrumbs: true },
       },
       {
-        path: ':id/files/:provider/:fileId',
+        path: 'project/:id/node/:nodeId/files/:provider/:fileId',
         loadComponent: () =>
           import('./features/files/pages/file-redirect/file-redirect.component').then((m) => m.FileRedirectComponent),
       },
@@ -186,7 +186,7 @@ export const routes: Routes = [
           import('./features/files/pages/file-redirect/file-redirect.component').then((m) => m.FileRedirectComponent),
       },
       {
-        path: 'project/:id/node/:nodeId/files/:provider/:fileId',
+        path: ':id/files/:provider/:fileId',
         loadComponent: () =>
           import('./features/files/pages/file-redirect/file-redirect.component').then((m) => m.FileRedirectComponent),
       },

src/app/core/guards/is-file-provider.guard.spec.ts

@@ -0,0 +1,49 @@
+import { ParamMap, UrlSegment } from '@angular/router';
+
+import { FileProvider } from '@osf/features/files/constants';
+
+import { isFileProvider } from './is-file-provider.guard';
+
+describe('isFileProvider', () => {
+  const createMockParamMap = (): ParamMap => ({
+    get: () => null,
+    getAll: () => [],
+    has: () => false,
+    keys: [],
+  });
+
+  const createMockSegment = (path: string): UrlSegment => ({
+    path,
+    parameters: {},
+    parameterMap: createMockParamMap(),
+  });
+
+  const createMockSegments = (path: string) => [createMockSegment(path)];
+
+  it('should return true when id matches a FileProvider value', () => {
+    Object.values(FileProvider).forEach((provider) => {
+      const result = isFileProvider({} as any, createMockSegments(provider));
+      expect(result).toBe(true);
+    });
+  });
+
+  it('should return false when id does not match any FileProvider value', () => {
+    const result = isFileProvider({} as any, createMockSegments('invalid-provider'));
+    expect(result).toBe(false);
+  });
+
+  it('should return false when segments array is empty', () => {
+    const result = isFileProvider({} as any, []);
+    expect(result).toBe(false);
+  });
+
+  it('should return false when first segment has no path', () => {
+    const result = isFileProvider({} as any, [createMockSegment('')]);
+    expect(result).toBe(false);
+  });
+
+  it('should return false when first segment is undefined', () => {
+    const result = isFileProvider({} as any, [undefined as any]);
+    expect(result).toBe(false);
+  });
+});