Angular Universal SSR

Expected behavior Using SSR (Angular Universal) support for all MDB Bootstrap Angular Components with the lattest angular version (9.1.0)

Actual behavior

I Created a new angular project from the scratch and then adding universal support and then trying to serve the proyect, it stop throwing the following error in the SideNavComponent.

ReferenceError: document is not defined at ng_uikit_pro_standard_SidenavComponent.ngOnDestroy

My steps was (https://mdbootstrap.com/docs/angular/getting-started/angular-universal/) using Guide for Angular 9:

1. ng new project-name --style=scss
2. ng add @nguniversal/express-engine
3. Installation for angular mdbbootstrap pro edition using the Quick Start Guide (https://mdbootstrap.com/docs/angular/getting-started/quick-start/)
4. npm run build:ssr
5. npm run serve:ssr

Then throwing the following error trying to use SideNavComponent:

Node Express server listening on http://localhost:4000 ReferenceError: document is not defined at ng_uikit_pro_standard_SidenavComponent.ngOnDestroy (/home/ruben/Documentos/estoyconvos/dist/estoyconvos/server/main.js:1:2460745) at executeOnDestroys (/home/ruben/Documentos/estoyconvos/dist/estoyconvos/server/main.js:1:2943232)

NOTE: I understand that you proposed a workarround solution for older version (v8 and before) using domino to provide DOM funtionality at the server side but according to Angular Universal support they said that you should check current Platform to write conditional code.

See issue https://github.com/angular/universal/issues/860

And how use browser types as document, window and navigator https://github.com/angular/universal/blob/master/docs/gotchas.md

Resources (screenshots, code snippets etc.)

My project configuration is:

package.json

"engines": {
    "node": "12.16.3",
    "npm": "6.14.4"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run estoyconvos:serve-ssr",
    "serve:ssr": "node dist/estoyconvos/server/main.js",
    "build:ssr": "ng build --prod && ng run estoyconvos:server:production",
    "prerender": "ng run estoyconvos:prerender",

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';
import { HeaderComponent } from './shared/header/header.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserAnimationsModule,
    MDBBootstrapModulesPro.forRoot(),
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

angular.json

"prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/estoyconvos/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
              "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
              "node_modules/animate.css/animate.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/easy-pie-chart/dist/easypiechart.js",
              "node_modules/screenfull/dist/screenfull.js",
              "node_modules/hammerjs/hammer.min.js"
            ]
          },