1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Angular Universal with mdboostrap NOT Working

faroooq.in pro asked 5 years ago

Hello, I installed Angular 6 with Angular Universal feature for SEO. Then i imported mdboostrap pro components in imports section in app.module.ts. When i REMOVE mdboostrap components from import (
MDBBootstrapModulesPro.forRoot() ) and providers (
MDBSpinningPreloader) section in app.module.ts file SEO is working fine.
When i ADD
Ex: ...
imports: [
   MDBBootstrapModulesPro.forRoot(),
]
providers: [
   MDBSpinningPreloader
]
...
 and run the commands like:
npm run build:prod (its building).
npm run server (ERROR).
Error: ReferenceError: window is not defined
My Guess is Angular 6 mdbootstrap components are not supported for Angular Universal.
i.e: ng add @ng-toolkit/universal
Please help me on this.
Tutorial i followed: https://medium.com/@maciejtreder/angular-server-side-rendering-with-ng-toolkit-universal-c08479ca688

faroooq.in pro commented 5 years ago

Thank you. But serverless deployment (ng add @ng-toolkit/serverless ) not working with mdbootstrap universal. I mean the link that you provided. Please help.

Damian Gemza staff answered 5 years ago

Dear Reachfrq, We have to fix those problems. For now I can't provide you ready-to-use answer, because it doesn't exist. We will be focused on resolving your problem. Best Regards, Damian

Damian Gemza staff answered 5 years ago

Dear reachfrq, Please read our tutorial how to integrate Angular Universal with MDBootstrap. There is everything which should you know about integrating MDB with Universal in Angular. Also there's solution for your problem with window is undefined. Here's the link to our tutorial: LINK Best Regards, Damian

faroooq.in pro commented 5 years ago

ng add @ng-toolkit/serverless is not working with the universal tutorial provided by mdbootstrap.com. I mean with above link you shared. Please help

Damian Gemza staff commented 5 years ago

Dear Reachfrq, As I said before, you have to add the below code to the server.ts file, and everything will be okay: const DIST_FOLDER = join(process.cwd(), 'dist'); import { readFileSync } from 'fs'; const domino = require('domino'); const template = readFileSync(join(DIST_FOLDER, '/browser/index.html')).toString(); const win = domino.createWindow(template); global['window'] = win; global['Node'] = win.Node; global['navigator'] = win.navigator; global['Event'] = win.Event; global['Event']['prototype'] = win.Event.prototype; global['document'] = win.document; Best Regards, Damian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: No
  • Browser: Chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No
Tags
components mdbpro angular-6
About author
faroooq.in
Pro User 10Support score
4Questions 0Answers 0Snippets