Prepare to use @ngx-utils/cookies as backend for SSR cookies.

This will be used to store authentication data. The reason for this is to make
this data available to the server during the SSR so it can be used to render
values that come from API queries.

This uses temporarily a fork of @ngx-utils/cookies, while the support needed for
Angular 10 is not merged. The associated PR for this support is
ngx-utils/cookies#24.

Author: kenkeiras

frontend/package-lock.json

@@ -37,7 +37,10 @@
     "@angular/router": "^10.0.10",
     "@ng-toolkit/universal": "^8.1.0",
     "@nguniversal/express-engine": "^10.0.2",
+    "@ngx-utils/cookies": "https://github.com/kenkeiras/ngx-cookies/releases/download/angular-10-support/ngx-cookies-angular-10.tgz",
+    "@types/cookie-parser": "^1.4.2",
     "bootstrap": "^4.5.0",
+    "cookie-parser": "^1.4.5",
     "core-js": "^2.6.11",
     "express": "^4.15.2",
     "fuse.js": "^5.2.3",

frontend/package.json

@@ -7,13 +7,17 @@ import { join } from 'path';
 import { AppServerModule } from './src/main.server';
 import { APP_BASE_HREF } from '@angular/common';
 import { existsSync } from 'fs';
+import { REQUEST } from '@nguniversal/express-engine/tokens';
+import cookieParser from 'cookie-parser';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
   const server = express();
   const distFolder = join(process.cwd(), 'dist/programaker/browser');
   const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
 
+  server.use(cookieParser());
+
   // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
   server.engine('html', ngExpressEngine({
     bootstrap: AppServerModule,
@@ -31,7 +35,14 @@ export function app(): express.Express {
 
   // All regular routes use the Universal engine
   server.get('*', (req, res) => {
-    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+      res.render(indexHtml, {
+          req,
+          res,
+          providers: [
+              { provide: APP_BASE_HREF, useValue: req.baseUrl },
+              { provide: 'RESPONSE', useValue: res },
+              { provide: 'REQUEST', useValue: req },
+          ] });
   });
 
   return server;

frontend/server.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ANIMATION_MODULE_TYPE, BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { CookiesService } from '@ngx-utils/cookies';
+import { BrowserCookiesModule, BrowserCookiesService } from '@ngx-utils/cookies/browser';
+import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
+
+@NgModule({
+    imports: [
+        BrowserModule.withServerTransition({ appId: 'serverApp' }),
+        BrowserCookiesModule.forRoot(),
+        BrowserAnimationsModule,
+        AppModule,
+    ],
+    bootstrap: [AppComponent],
+    providers: [
+        {
+            provide: CookiesService,
+            useClass: BrowserCookiesService,
+        },
+        {
+            provide: ANIMATION_MODULE_TYPE,
+            useValue: 'BrowserAnimations',
+        },
+    ],
+})
+export class AppBrowserModule {}

frontend/src/app/app.browser.module.ts

@@ -23,8 +23,6 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
 import { AlertModule } from 'ngx-bootstrap/alert';
 
 import { AppComponent } from './app.component';
@@ -143,18 +141,17 @@ import { EditCollaboratorsDialogComponent } from './dialogs/editor-collaborators
         MatTooltipModule,
         MatSelectModule,
 
-        BrowserAnimationsModule,
-
-        BrowserModule.withServerTransition({ appId: 'serverApp' }),
         FormsModule,
         ReactiveFormsModule,
         HttpClientModule,
         AlertModule.forRoot(),
         AppRoutingModule,
+
+        BrowserModule.withServerTransition({ appId: 'serverApp' }),
     ],
-    exports: [],
+    exports: [AppComponent],
     providers: [],
-    bootstrap: [AppComponent],
+    bootstrap: [],
 })
 
 export class AppModule {

frontend/src/app/app.module.ts

@@ -1,14 +1,30 @@
 import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { ANIMATION_MODULE_TYPE, NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ServerModule } from '@angular/platform-server';
-
-import { AppModule } from './app.module';
+import { CookiesService } from '@ngx-utils/cookies';
+import { ServerCookiesModule, ServerCookiesService } from '@ngx-utils/cookies/server';
 import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
 
 @NgModule({
-  imports: [
-    AppModule,
-    ServerModule,
-  ],
-  bootstrap: [AppComponent],
+    imports: [
+        NoopAnimationsModule,
+        BrowserModule.withServerTransition({appId: 'serverApp'}),
+        ServerModule,
+        ServerCookiesModule.forRoot(),
+        AppModule,
+    ],
+    bootstrap: [AppComponent],
+    providers: [
+        {
+            provide: CookiesService,
+            useClass: ServerCookiesService,
+        },
+        {
+            provide: ANIMATION_MODULE_TYPE,
+            useValue: 'NoopAnimations',
+        },
+    ],
 })
 export class AppServerModule {}

frontend/src/app/app.server.module.ts

@@ -7,6 +7,7 @@ import * as progbar from './ui/progbar';
 import * as API from './api-config';
 import { ContentType } from './content-type';
 import { BrowserService } from './browser.service';
+import { CookiesService } from '@ngx-utils/cookies';
 
 export type SessionInfoUpdate = { session: Session };
 
@@ -34,6 +35,7 @@ export class SessionService {
     constructor(
         private http: HttpClient,
         private browser: BrowserService,
+        private cookies: CookiesService,
     ) {
         this.http = http;
     }

frontend/src/app/session.service.ts

@@ -1,13 +1,13 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+import { AppBrowserModule } from './app/app.browser.module';
 import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-  platformBrowserDynamic().bootstrapModule(AppModule);
+  platformBrowserDynamic().bootstrapModule(AppBrowserModule);
 });