angularserver-side-renderingangular-ssr

Can't execute client side features Angular 17 with ssr


enter image description hereenter image description here How to force my component to be executed on client side, something like "use client" in nextjs?

It's my first experience with ssr in Angular, if it's disabled everything works fine


Solution

  • In your app.component.html, we can wrap the button inside an @if or *ngFor with the below boolean.

    import { isPlatformBrowser } from '@angular/common';
    import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
    
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
    
      public isBrowser = isPlatformBrowser(this.platformId);
    
      constructor(@Inject(PLATFORM_ID) private platformId: any) { }
    }
    

    html

    @if(isBrowser) {
        <auth-btn/>
    }
    /* we can use ngFor also! */
    /* <ng-container *ngFor="isBrowser">
        <auth-btn/>
    </ng-container> */