(fix): plotly fix, preparation for full server bundle and xsrf token re-introduced

src/app/app.browser.module.ts

@@ -5,11 +5,12 @@ import { Minds } from './app.component';
 
 import * as PlotlyJS from 'plotly.js/dist/plotly.js';
 import { PlotlyModule } from 'angular-plotly.js';
+import { CookieModule } from '@gorniv/ngx-universal';
 
 PlotlyModule.plotlyjs = PlotlyJS;
 
 @NgModule({
-  imports: [MindsModule, PlotlyModule],
+  imports: [MindsModule, PlotlyModule, CookieModule],
   bootstrap: [Minds],
   providers: [{ provide: 'ORIGIN_URL', useValue: location.origin }],
 })

src/app/app.module.ts

@@ -77,6 +77,7 @@ import { ChannelContainerModule } from './modules/channel-container/channel-cont
 import { UpgradesModule } from './modules/upgrades/upgrades.module';
 
 import * as Sentry from '@sentry/browser';
+import { CookieModule } from '@gorniv/ngx-universal';
 
 Sentry.init({
   dsn: 'https://3f786f8407e042db9053434a3ab527a2@sentry.io/1538008', // TODO: do not hardcard
@@ -106,6 +107,7 @@ export class SentryErrorHandler implements ErrorHandler {
   imports: [
     BrowserModule.withServerTransition({ appId: 'm-app' }),
     BrowserTransferStateModule,
+    CookieModule.forRoot(),
     // TransferHttpCacheModule,
     //BrowserAnimationsModule,
     ReactiveFormsModule,

src/app/app.server.module.ts

@@ -8,6 +8,13 @@ import * as xhr2 from 'xhr2';
 import { MindsModule } from './app.module';
 import { Minds } from './app.component';
 import { PlotlyModule } from 'angular-plotly.js';
+import { CookieService, CookieBackendService } from '@gorniv/ngx-universal';
+
+PlotlyModule.plotlyjs = {
+  plot: () => {
+    // This simply satisfies the isValid() error
+  },
+};
 
 // activate cookie for server-side rendering
 export class ServerXhr implements XhrFactory {
@@ -25,7 +32,13 @@ export class ServerXhr implements XhrFactory {
     ServerTransferStateModule,
     PlotlyModule,
   ],
-  providers: [{ provide: XhrFactory, useClass: ServerXhr }],
+  providers: [
+    { provide: XhrFactory, useClass: ServerXhr },
+    {
+      provide: CookieService,
+      useClass: CookieBackendService,
+    },
+  ],
   bootstrap: [Minds],
 })
 export class AppServerModule {}

src/app/common/api/client.service.ts

@@ -7,13 +7,12 @@ import { environment } from '../../../environments/environment';
  */
 export class MindsHttpClient {
   base: string = '/';
-  cookie: Cookie = new Cookie();
 
-  static _(http: HttpClient) {
-    return new MindsHttpClient(http);
+  static _(http: HttpClient, cookie: Cookie) {
+    return new MindsHttpClient(http, cookie);
   }
 
-  constructor(public http: HttpClient) {}
+  constructor(public http: HttpClient, private cookie: Cookie) {}
 
   /**
    * Return a GET request

src/app/common/common.module.ts

@@ -132,6 +132,7 @@ import { FormToastComponent } from './components/form-toast/form-toast.component
 import { SsoService } from './services/sso.service';
 import { EmailConfirmationComponent } from './components/email-confirmation/email-confirmation.component';
 import { ConfigsService } from './services/configs.service';
+import { Cookie } from '../services/cookie';
 
 const routes: Routes = [
   {
@@ -375,7 +376,7 @@ const routes: Routes = [
     {
       provide: MindsHttpClient,
       useFactory: MindsHttpClient._,
-      deps: [HttpClient],
+      deps: [HttpClient, Cookie],
     },
     {
       provide: NSFWSelectorCreatorService,

src/app/modules/channels/channel.component.ts

@@ -77,7 +77,7 @@ export class ChannelComponent {
       this.editing = false;
 
       if (params['username']) {
-        this.changed = this.user.username !== params['username'];
+        this.changed = this.username !== params['username'];
         this.username = params['username'];
 
         feedChanged = true;

src/app/services/api/client.ts

@@ -12,21 +12,29 @@ import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';
  */
 export class Client {
   base: string = '/';
-  cookie: Cookie = new Cookie();
 
   static _(
     http: HttpClient,
     location: Location,
+    cookie: Cookie,
     platformId,
     transferState: TransferState,
     @Inject('ORIGIN_URL') baseUrl: string
   ) {
-    return new Client(http, location, platformId, transferState, baseUrl);
+    return new Client(
+      http,
+      location,
+      cookie,
+      platformId,
+      transferState,
+      baseUrl
+    );
   }
 
   constructor(
     public http: HttpClient,
     public location: Location,
+    private cookie: Cookie,
     @Inject(PLATFORM_ID) private platformId,
     private transferState: TransferState,
     @Inject('ORIGIN_URL') public baseUrl: string
@@ -251,11 +259,6 @@ export class Client {
    * Build the options
    */
   private buildOptions(options: Object, withCredentials: boolean = false) {
-    if (isPlatformServer(this.platformId)) {
-      return {
-        withCredentials: true,
-      };
-    }
     const XSRF_TOKEN = this.cookie.get('XSRF-TOKEN') || '';
 
     const headers = {

src/app/services/api/upload.ts

@@ -6,13 +6,12 @@ import { HttpClient } from '@angular/common/http';
  */
 export class Upload {
   base: string = '/';
-  cookie: Cookie = new Cookie();
 
-  static _(http: HttpClient) {
-    return new Upload(http);
+  static _(http: HttpClient, cookie: Cookie) {
+    return new Upload(http, cookie);
   }
 
-  constructor(public http: HttpClient) {}
+  constructor(public http: HttpClient, private cookie: Cookie) {}
 
   /**
    * Return a POST request

src/app/services/cookie.ts

+import { CookieService } from '@gorniv/ngx-universal';
+import { Injectable } from '@angular/core';
+
 /**
  * A very simple cookie service
  */
+@Injectable()
 export class Cookie {
+  constructor(private cookieService: CookieService) {}
+
   /**
    * Return a cookie by name
    */
   get(key: string): string {
-    var cookies: Array<string> = document.cookie
-      ? document.cookie.split('; ')
-      : [];
+    return this.cookieService.get(key);
+    // var cookies: Array<string> = document.cookie
+    //   ? document.cookie.split('; ')
+    //   : [];
 
-    if (!cookies) return;
+    // if (!cookies) return;
 
-    for (let cookie of cookies) {
-      let name: string, value: string;
-      [name, value] = cookie.split('=');
-      if (name === key) return value;
-    }
-    return;
+    // for (let cookie of cookies) {
+    //   let name: string, value: string;
+    //   [name, value] = cookie.split('=');
+    //   if (name === key) return value;
+    // }
+    // return;
   }
 }

src/app/services/providers.ts

@@ -50,6 +50,7 @@ import { FormToastService } from '../common/services/form-toast.service';
 import { ConfigsService } from '../common/services/configs.service';
 import { TransferHttpInterceptorService } from './transfer-http-interceptor.service';
 import { CookieHttpInterceptorService } from './api/cookie-http-interceptor.service';
+import { Cookie } from './cookie';
 
 export const MINDS_PROVIDERS: any[] = [
   SiteService,
@@ -71,12 +72,19 @@ export const MINDS_PROVIDERS: any[] = [
   {
     provide: Client,
     useFactory: Client._,
-    deps: [HttpClient, Location, PLATFORM_ID, TransferState, 'ORIGIN_URL'],
+    deps: [
+      HttpClient,
+      Location,
+      Cookie,
+      PLATFORM_ID,
+      TransferState,
+      'ORIGIN_URL',
+    ],
   },
   {
     provide: Upload,
     useFactory: Upload._,
-    deps: [HttpClient],
+    deps: [HttpClient, Cookie],
   },
   {
     provide: HTTP_INTERCEPTORS,
@@ -88,6 +96,7 @@ export const MINDS_PROVIDERS: any[] = [
     useClass: CookieHttpInterceptorService,
     multi: true,
   },
+  Cookie,
   {
     provide: Storage,
     useFactory: Storage._,

webpack.server.config.js

@@ -4,24 +4,15 @@ const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplaceme
 
 const path = require('path');
 const webpack = require('webpack');
-const nodeExternals = require('webpack-node-externals');
 
 module.exports = {
   mode: 'none',
   entry: {
     // This is our Express server for Dynamic universal
     server: './server.ts',
-    // This is an example of Static prerendering (generative)
   },
   target: 'node',
-  resolve: { extensions: ['.ts', '.js'] },
-  // Make sure we include all node_modules etc
-  externals: [
-    /node_modules/,
-    nodeExternals({
-      whitelist: [/^@agm\/core/, /^hammerjs/],
-    }),
-  ],
+  resolve: { extensions: ['.ts', '.js', '.json'] },
   output: {
     // Puts the output at the root of the dist folder
     path: path.join(__dirname, 'dist'),