Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

New Install


Hi, when following the instructions for creating a new project using Tailwind and integrating styles here: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/angular

The project does not compile:

[vite] Error when evaluating SSR module /main.server.mjs:
|- ReferenceError: window is not defined

When creating the new project using cli there are some options not mentioned in the installation guide including SSR / SSG and Server Routing. I have chosen Yes for both these in addition to selecting Sass (SCSS):

√ Which stylesheet format would you like to use? Sass (SCSS) [
]
√ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? Yes
√ Would you like to use the Server Routing and App Engine APIs (Developer Preview) for this server application? Yes

I am wondering if the installation has been tested on the latest angular version using these new options?


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi

The Metronic Tailwind Angular integration guide does not support SSR (Server-Side Rendering) at the moment.

You can disable the SSR option during the Angular CLI setup to avoid compatibility issues.

SSR pre-renders pages on the server before sending them to the browser, but the window object is a browser-only API and isn't available in the server environment.

Metronic's UI templates are designed to work primarily on the client-side (browser environment).

We will update the documentation to clarify this soon.

Thanks


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(