Topic: Angular Universal SSR

rrosales priority asked 2 years ago


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"
            ]
          },

Arkadiusz Idzikowski staff commented 2 years ago

Thank you, we will take a closer look at this problem and fix it as soon as possible.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 9.1.0
  • Device: Desktop, Mobile
  • Browser: Chrome Version 81.0.4044.138
  • OS: Ubuntu
  • Provided sample code: No
  • Provided link: Yes