Angular v17 with Supabase freezes while ng serve or ng build

[LukasKomar]

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]

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]

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)

ng build will just freeze here forever

[alan-agius4]

@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.

[kaaai3]

@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]

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.

[halterdev]

@kaaai3 did you find a solution to this?

[kaaai3]

@halterdev Nope, not yet.

[davidboothe]

@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]

@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]

@davidboothe Thanks for the workaround.

[alan-agius4]

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.
  }
}

[angular-automatic-lock-bot]

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.}