CODEWITHSUNDEEP
server-side-renderingangular17angular17-ssr
Sha Na
Sha Na

Reputation: 11

Angular 17 SSR: window is not defined

Am using Angular 17 with SSR and have imported third party libraries which has been installed.

Am importing one component from these libraries into my app.component.html, but getting error window is not defined. It works if i turn off SSR.

How do I fix this?

app.component.ts

import { SideBarComponent, SidebarItemComponent  } from '@impactech/sidenav';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, SideBarComponent, SidebarItemComponent],
    templateUrl: './app.component.html',
    styleUrl: './app.component.scss'
})

app.component.html

<router-outlet>
    <impactech-sidebar>
        <impactech-sidebar-item type="header" label="Header"></impactech-sidebar-item>
        <impactech-sidebar-item label="item without icon" link="#"></impactech-sidebar-item>
        <impactech-sidebar-item bottom label="item at bottom" link="#" icon="icons8-o-settings"></impactech-sidebar-item>
    </impactech-sidebar>
<router-outlet/>

Upvotes: 1

Views: 330

Answers (1)

Kent Leow
Kent Leow

Reputation: 1

Yes, it's due to the external library that defined the function globally.

For me, I solved it by adding this chunk of code in app.component.ts

// add this
if (globalThis.window === undefined) {
  globalThis.window =
    ({
      addEventListener: () => {},
      // add more methods as you wish
    } as never);
}

// app.component.ts
@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  imports: [...],
})

This is not a perfect solution, but it serves as a temporary workaround to get past the blocker. By doing this, when there is no defined window, we will assign a new window object. If any of the window's methods are required, we can add them to the object we defined.

Upvotes: 0

Related Questions