-
Notifications
You must be signed in to change notification settings - Fork 180
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Window is not defined - Angular 17 #228
Comments
Did you activate the SSR option? |
Yes, I have SSR enable. |
I think you should isolate the LottiePlayer in a dedicated component and skip the hydration process for that component as the window context is only available on the client side and not on the server side. |
Hi @sey ! Thank you for your solution ! I will try this very soon and notice you if it's working. |
@sey The workaround isn't working. I have a lottie-lazy component that lazily renders the lottie component (which in turn loads the web component). Some relevant excerpts: lottie-player-lazy: @Component({
selector: "ringe-lottie-player-lazy",
templateUrl: "./lottie-player-lazy.component.html",
styles: [],
host: { ngSkipHydration: "true" },
})
export class LottiePlayerLazyComponent implements AfterViewInit {
private platformId = inject(PLATFORM_ID);
private viewContainer = inject(ViewContainerRef);
async ngAfterViewInit(): Promise<void> {
// We cannot access window during prerendering, which is indirectly used by the lottie web component under the hood.
if (!isPlatformBrowser(this.platformId)) return;
const url = this.data?.file?.data?.attributes?.url;
if (url === undefined) return;
this.viewContainer?.clear();
const { LottiePlayerComponent } = await import("./lottie-player.component");
const player = this.viewContainer?.createComponent(LottiePlayerComponent);
if (player !== undefined) player.instance.url = url;
}
} lottie-player import { Component, Input } from "@angular/core";
import "@lottiefiles/lottie-player";
@Component({
selector: "ringe-lottie-player",
templateUrl: "./lottie-player.component.html",
styles: [],
host: { ngSkipHydration: "true" },
})
export class LottiePlayerComponent {
@Input() url?: string;
} |
Nevermind, found the issue. Need to dynamically import the web component javascript.
Why this suddenly works is beyond me though. I would expect that this approach also requires a check for |
Hi @ciriousjoker ! Where did you add |
@BugProg inside the constructor |
Hmmm, I added in the constructor but
Do you use Vite? Can you provide an example of the code? |
@BugProg im not sure. I used the default compiler in angular 17, so I guess not. I just upgraded, an older default might still be in use |
Thanks for that detail @ciriousjoker ! I'm going to try the same code without Vite. |
Hi !
I just updated my project to Angular 17, and I'm using modern compilation method with Vite.
I have an issue with lottie-player , I get the following error:
[vite] Internal server error: window is not defined
during the compilation.Version :
The text was updated successfully, but these errors were encountered: