search

mdbootstrap / mdb-angular-ui-kit

Angular 18 & Bootstrap 5 & Material Design UI KIT
https://mdbootstrap.com/docs/angular/
Other
1.12k stars 282 forks source link

Bug: navbar.nativeElement.append is not a function in Angular Univeral #58

Closed kaihaase-wd closed 6 years ago

kaihaase-wd commented 6 years ago

Hello, MDB team,

thank you for "Angular Bootstrap with Material Design". We use the PRO version together with Angular Universal (Express Framework).

When delivering our app, the following error message is issued by the server: ERROR TypeError: t.navbar.nativeElement.append is not a function

I suspect that the nativeElement of navbar in the NavbarComponent in Angular Univer does not fully implement all functions.

Is it possible to fix this or at least catch the error by checking whether the function exists before the call?

hosboss26 commented 6 years ago

Hello,

I have the same problem

Bloodcast69 commented 6 years ago

Hey guys, So sorry for so much respond time. Unfortunately, for now, we're not compatible at all with Angular Universal. We'll do our best to achieve this.

Bloodcast69 commented 6 years ago

Hey guys

Sorry for so much responding time. I've got a fix for this problem. Please head to: /free/navbars/navbar.component.ts and: In constructor change type of renderer from Renderer to Renderer2 then find a line:

this.navbar.nativeElement.append(child) and change it to this.renderer.appendChild(this.navbar.nativeElement, child); And now it should work fine.

Let me know if there are more problems.

Best Regards,

Damian

kvincent3 commented 6 years ago

@Bloodcast69 Thanks for your angular universal compatibility answer. you have just save me a lot of time :-).

Bloodcast69 commented 6 years ago

@kvincent3 we're now compatible with Angular Universal. Feel free to try it! https://mdbootstrap.com/getting-started/angular-universal/ Best Regards, Damian

xxyyzz2050 commented 5 years ago

I'm using angular universal, and I followed this guid, but an error occured when I import MDBBootstrapModule.forRoot() to app.module.ts

ReferenceError: window is not defined

xxyyzz2050 commented 5 years ago

also in your guid you didn't mention how to correctly use mdb after installing angular universal @Bloodcast69

mdbootstrap commented 5 years ago

Dear @xxyyzz2050

Please follow our Universal Guide carefully, and it will work. You have to add those lines to your server file, and it should work fine.

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;

Please follow carefully our Universal guide, because this guide was tested few times, and we're sure that it works fine.

LINK: https://mdbootstrap.com/docs/angular/getting-started/angular-universal/