Menu Dropdowns Not Functioning Properly in Angular 17 SSR Project with 'metismenujs' Library

[adnannrajaa]

Describe the bug:
I am encountering an issue while using "metismenujs" version 1.4.0 in my Angular 17 SSR (Server-Side Rendering) project, which utilizes Node.js version 18.13.0. The problem arises when attempting to re-initialize the menu using the provided code snippets.

Error 1:
When attempting to re-initialize the menu with the following code:
this.menu = new MetisMenu(this.sideMenu.nativeElement);

I receive the following error message during Angular SSR CLI execution:
ERROR TypeError: this.element.querySelectorAll is not a function or its return value is not iterable
at _MetisMenu.init

Error 2:
Similarly, when trying to re-initialize the menu with the code snippet:
this.menu = new MetisMenu("#menu");
this.menu.update();

I encounter the error:
ERROR ReferenceError: document is not defined
at new _MetisMenu

Symptoms:
When commenting out the menu re-initialization code and only leaving the activation function (this._activateMenuDropdown()), Angular CLI does not display any errors. However, the menu functionality on the web browser is not working properly.

For better clarity, please refer to the attached snapshots.

To Reproduce:
Install "metismenujs" version 1.4.0 in an Angular 17 SSR project.
Attempt to re-initialize the menu using either of the provided code snippets.

Expected behavior
The menu should be successfully re-initialized without encountering errors.
The menu dropdowns should be activated and functional without any issues.

Actual Behavior:
While no errors are shown in the Angular CLI, the menu dropdowns do not function properly in the web browser.

Screenshots

Error 1:

Error 2:

Symptoms:

Angular Version

Additional context:
Angular version: 17
"metismenujs" version: 1.4.0
Node.js version: 18.13.0
Please let me know if further information is required to address this issue.