Skip to content
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

Open
BugProg opened this issue Nov 11, 2023 · 11 comments
Open

Window is not defined - Angular 17 #228

BugProg opened this issue Nov 11, 2023 · 11 comments

Comments

@BugProg
Copy link

BugProg commented Nov 11, 2023

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.

at eval (/home/user/Projects/Angular/angular-project/.angular/vite-root/angular-project/node_modules/.pnpm/@[email protected]/node_modules/@lottiefiles/lottie-player/dist/lottie-player.esm.js:1359:9)
at async instantiateModule (file:///home/user/Projects/Angular/angular-project/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56052:9)

Version :

  • Angular: 17
  • lottie-player : 2.02
@sey
Copy link

sey commented Dec 6, 2023

Did you activate the SSR option?

@BugProg
Copy link
Author

BugProg commented Dec 7, 2023

Yes, I have SSR enable.

@sey
Copy link

sey commented Dec 11, 2023

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.
https://angular.io/guide/hydration#how-to-skip-hydration-for-particular-components

@BugProg
Copy link
Author

BugProg commented Dec 16, 2023

Hi @sey !

Thank you for your solution ! I will try this very soon and notice you if it's working.

@ciriousjoker
Copy link

@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;
}

@ciriousjoker
Copy link

Nevermind, found the issue. Need to dynamically import the web component javascript.

// Remove this
import "@lottiefiles/lottie-player";

// Add this
constructor() {
  import ("@lottiefiles/lottie-player");
}

Why this suddenly works is beyond me though. I would expect that this approach also requires a check for isPlatformBrowser, but apparently it doesn't.

@BugProg
Copy link
Author

BugProg commented Feb 5, 2024

Hi @ciriousjoker !

Where did you add import ("@lottiefiles/lottie-player"); ? When I imported lottie-player in my component, ng s crash immediately and return error 1.

@ciriousjoker
Copy link

@BugProg inside the constructor

@BugProg
Copy link
Author

BugProg commented Feb 8, 2024

Hmmm, I added in the constructor but ng s crash immediately.

Node.js v20.9.0
fatal error: all goroutines are asleep - deadlock!

goroutine 1 [chan receive]:
github.com/evanw/esbuild/internal/helpers.(*ThreadSafeWaitGroup).Wait(...)
        github.com/evanw/esbuild/internal/helpers/waitgroup.go:36
main.runService.func2()
        github.com/evanw/esbuild/cmd/esbuild/service.go:114 +0x59
main.runService(0x1)
        github.com/evanw/esbuild/cmd/esbuild/service.go:160 +0x4ed
main.main()
        github.com/evanw/esbuild/cmd/esbuild/main.go:240 +0xa29

goroutine 6 [chan receive]:
main.runService.func1()
        github.com/evanw/esbuild/cmd/esbuild/service.go:98 +0x4a
created by main.runService
        github.com/evanw/esbuild/cmd/esbuild/service.go:97 +0x1e5

goroutine 7 [chan receive]:
main.(*serviceType).sendRequest(0xc0000fe060, {0x93c480, 0xc011bc0cf0})
        github.com/evanw/esbuild/cmd/esbuild/service.go:192 +0xfa
main.runService.func3()
        github.com/evanw/esbuild/cmd/esbuild/service.go:125 +0x39
created by main.runService
        github.com/evanw/esbuild/cmd/esbuild/service.go:122 +0x31c
 ELIFECYCLE  Command failed with exit code 1.

Do you use Vite? Can you provide an example of the code?

@ciriousjoker
Copy link

@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

@BugProg
Copy link
Author

BugProg commented Feb 8, 2024

Thanks for that detail @ciriousjoker ! I'm going to try the same code without Vite.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants