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

Angular v17 with Supabase freezes while ng serve or ng build #26395

Closed
1 task done
LukasKomar opened this issue Nov 17, 2023 · 12 comments
Closed
1 task done

Angular v17 with Supabase freezes while ng serve or ng build #26395

LukasKomar opened this issue Nov 17, 2023 · 12 comments

Comments

@LukasKomar
Copy link

LukasKomar commented Nov 17, 2023

Command

build, serve

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

16

Description

Hey, I just created a new Angular 17 Application. After adding the latest supabase client the serve and build command will not work properly anymore.

Minimal Reproduction

ng new repro-app
npm install @supabase/supabase-js

Exception or Error

ng build-> Build freeze

ng serve-> no freeze, command looks fine. But localhost:4200 will not provide any data.

Your Environment

Angular CLI: 17.0.1
Node: 20.9.0
Package Manager: npm 10.1.0
OS: win32 x64

Angular: 17.0.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.1
@angular-devkit/build-angular   17.0.1
@angular-devkit/core            17.0.1
@angular-devkit/schematics      17.0.1
@angular/cli                    17.0.1
@angular/ssr                    17.0.1
@schematics/angular             17.0.1
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

No response

@dgp1130
Copy link
Collaborator

dgp1130 commented Nov 17, 2023

Are you on Windows and is this related to introducing and then fixing errors during an ng serve? I wonder if this could be a duplicate of #26334 (comment)?

@LukasKomar
Copy link
Author

Im on Windows yes, but im not sure if this is really related to that issue.

ng serve acts like its working perfectly but i will not serve any Data for some Reason. (all files will be generated according to the console, but localhost:4200 will just have no connection)
image

ng build will just freeze here forever

image

@alan-agius4
Copy link
Collaborator

@LukasKomar, I was not able to reproduce using the steps provided. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

@alan-agius4 alan-agius4 added needs: repro steps We cannot reproduce the issue with the information given and removed type: bug/fix needs: more info Reporter must clarify the issue area: @angular-devkit/build-angular angular/build:application labels Nov 22, 2023
@kaaai3
Copy link

kaaai3 commented Nov 23, 2023

@alan-agius4 I face the same issue here is a repro https://github.com/kaaai3/repro-supabase Line 12 in the file data.service.ts breaks the app.

@alan-agius4
Copy link
Collaborator

During prerendering a supabase client will be created, however it is never destroyed therefore rendering cannot terminate. I am not familiar with supabase to understand how it should be closed properly.

@alan-agius4 alan-agius4 added area: @angular-devkit/build-angular angular/build:application and removed needs: repro steps We cannot reproduce the issue with the information given labels Nov 23, 2023
@halterdev
Copy link

@kaaai3 did you find a solution to this?

@kaaai3
Copy link

kaaai3 commented Nov 28, 2023

@halterdev Nope, not yet.

@davidboothe
Copy link

davidboothe commented Nov 30, 2023

@halterdev and @kaaai3 ,
my workaround is to disable SSR for my app.

set prerender and ssr to false in the angular.json to turn off SSR.
you can also set this at an environment level.

This is just a bandaid really, but it got me moving forward again.

--

@alan-agius4 for SPA angular apps, I believe services use a singleton pattern. Is there a lifecycle for services with SSR where I can dispose of the supabase client? I couldn't find anything about that in the docs.

@davidboothe
Copy link

@halterdev and @kaaai3 ,

I have an additional workaround. If you don't want to turn SSR off.

The main issue here is due to the Server Side Rendering trying to open the supabase client and then getting stuck. So the solution below shows how to avoid creating the supabase client when in SSR and only create it in the browser.

You will have to move the creation of the supabase client to another function and call it in your components constructor.

export class SupabaseService {
  private supabase: SupabaseClient | null = null
  _session: AuthSession | null = null

  constructor() {
  }

  initialize() {
    this.supabase = createClient(environment.supabaseUrl, environment.supabaseKey);
  }
}

Then in your component

export class AppComponent  {
  title = 'angular-user-management'

  constructor(private readonly supabase: SupabaseService) {
    afterNextRender(() => {
      this.supabase.initialize();
    })
  }
}

@kaaai3
Copy link

kaaai3 commented Nov 30, 2023

@davidboothe Thanks for the workaround.

@alan-agius4
Copy link
Collaborator

alan-agius4 commented Dec 5, 2023

So I looked at this again, and the proper solution for this would be to initialise supabase outside of Zone.js context

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private supabase: SupabaseClient;
  private readonly ngZone = inject(NgZone);

  constructor() {
    this.supabase = this.ngZone.runOutsideAngular(() =>
      createClient(environment.supabaseUrl, environment.supabaseKey)
    );
  }
}

ngOnDestroy can be used in a service to perform cleanup and close the client.

@Injectable({
  providedIn: 'root',
})
export class DataService implements OnDestroy {
  ngOnDestroy(): void {
    // perform clean up.
  }
}

@alan-agius4 alan-agius4 closed this as not planned Won't fix, can't repro, duplicate, stale Dec 5, 2023
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jan 5, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

6 participants