Omit the element that disrupts the functionality of Angular Universal

Question

Omit the element that disrupts the functionality of Angular Universal

Utilizing ng-toolkit in conjunction with ng add @ng-toolkit/universal proved to successfully integrate Angular Universal support into my project.

After building the production version without encountering any errors and running the server seamlessly, I faced an issue where the server would not respond when a request was made (nodeJS failed to render any output).

Upon investigation, it was revealed that one of my components was causing this breakdown in server-side rendering. The culprit turned out to be the Mat-Carousel:

component:

export class BannerComponent {

  slides: any[] = [
    // tslint:disable-next-line:max-line-length
    { image: 'assets/banner/banner-one.png' },
    // tslint:disable-next-line:max-line-length
    { image: 'assets/banner/banner-two.png' },
    // tslint:disable-next-line:max-line-length
    { image: 'assets/banner/banner-three.png' }
  ];

}

template:

<section class="sec-space-b" id="banner">
    <mat-carousel
        timings="250ms ease-in"
        [autoplay]="true"
        interval="5000"
        color="accent"
        maxWidth="auto"
        proportion="25"
        slides="5"
        [loop]="true"
        [hideArrows]="false"
        [hideIndicators]="false"
        [useKeyboard]="true"
        [useMouseWheel]="false"
        orientation="ltr"
      >
        <mat-carousel-slide
            #matCarouselSlide
            *ngFor="let slide of slides; let i = index"
            overlayColor="#00000000"
            [image]="slide.image"
            [hideOverlay]="false"
        ></mat-carousel-slide>
    </mat-carousel>
</section>

Is there a way to resolve this issue? Can I exclude a specific component from the Server-Side build in some manner?

angular typescript nodes

Answer 1

Answer №1

If you're looking to solve a common issue, consider utilizing the PLATFORM_ID token along with either the isPlatformBrowser or isPlatformServer method.

Implement the conditional statement in your template using #ngIf:

<section class="sec-space-b" id="banner" *ngIf="isBrowser">

In the component code, set up the isBrowser field as follows:

import { isPlatformBrowser } from '@angular/common';
import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';


@Component({
  selector: 'app-home-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.scss']
})
export class BannerComponent implements OnInit {

  public isBrowser = isPlatformBrowser(this.platformId);

  constructor(@Inject(PLATFORM_ID) private platformId: any) { }
}

To delve deeper into the usage of isPlatformServer and isPlatformBrowser, refer to this informative article where they are employed:

You can also watch my presentation on Angular Universal (starting at 13:26 - covering execution of different code on browser versus server): https://www.youtube.com/watch?v=J42mqpVsg0k

Answer 2

If you're looking to solve a common issue, consider utilizing the PLATFORM_ID token along with either the isPlatformBrowser or isPlatformServer method.

Implement the conditional statement in your template using #ngIf:

<section class="sec-space-b" id="banner" *ngIf="isBrowser">

In the component code, set up the isBrowser field as follows:

import { isPlatformBrowser } from '@angular/common';
import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';


@Component({
  selector: 'app-home-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.scss']
})
export class BannerComponent implements OnInit {

  public isBrowser = isPlatformBrowser(this.platformId);

  constructor(@Inject(PLATFORM_ID) private platformId: any) { }
}

To delve deeper into the usage of isPlatformServer and isPlatformBrowser, refer to this informative article where they are employed:

You can also watch my presentation on Angular Universal (starting at 13:26 - covering execution of different code on browser versus server): https://www.youtube.com/watch?v=J42mqpVsg0k

Answer 3

Answer №2

To simplify the process, you can implement a directive similar to this one:

import { isPlatformServer } from '@angular/common';
import { Directive, Inject, OnInit, PLATFORM_ID, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[ssrExclude]' })
export class SSRExcludeDirective implements OnInit {
    constructor(
        private readonly _viewContainer: ViewContainerRef,
        private readonly _templateRef: TemplateRef<any>,
        @Inject(PLATFORM_ID) private readonly _platformId: Object
    ) { }

    ngOnInit(): void {
        if (isPlatformServer(this._platformId)) {
            this._viewContainer.clear();
        } else {
            this._viewContainer.createEmbeddedView(this._templateRef);
        }
    }
}

After defining the directive above, you can use it in the following manner:

<section *ssrExclude>
    YOUR_HTML_CONTENT_HERE
</section>

Answer 4

To simplify the process, you can implement a directive similar to this one:

import { isPlatformServer } from '@angular/common';
import { Directive, Inject, OnInit, PLATFORM_ID, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[ssrExclude]' })
export class SSRExcludeDirective implements OnInit {
    constructor(
        private readonly _viewContainer: ViewContainerRef,
        private readonly _templateRef: TemplateRef<any>,
        @Inject(PLATFORM_ID) private readonly _platformId: Object
    ) { }

    ngOnInit(): void {
        if (isPlatformServer(this._platformId)) {
            this._viewContainer.clear();
        } else {
            this._viewContainer.createEmbeddedView(this._templateRef);
        }
    }
}

After defining the directive above, you can use it in the following manner:

<section *ssrExclude>
    YOUR_HTML_CONTENT_HERE
</section>

Omit the element that disrupts the functionality of Angular Universal

Answer №1

Answer №2

Similar questions

Executing event sending from child to parent via ngx-translate

Error in Typescript: Cannot assign type 'string[]' to type 'string'

React-leaflet with TypeScript is failing to display GeoJSON Points on the map

What is the reason for TypeScript not displaying a type mismatch error in this particular instance?

What is the best way to make one element's click event toggle the visibility of another element in Angular 4?

Changing the font family for a single element in Next.js

Angular 4 encounters a hiccup when a mistake in the XHR request brings a halt to a

What is the process of inserting a sparkline chart into a Kendo Angular grid?

Showcasing diverse content with an Angular Dropdown Menu

You are unable to declare an Angular component as an abstract class within a module

TypeORM is failing to create a table upon initialization

Angular Application caught in an infinite loop

Material UI React Autocomplete Component

Angular/NestJS user roles and authentication through JWT tokens

Spring Boot fails to recognize path variable data sent from Angular

Upon upgrading @types/angular, I encountered error TS2694 stating that the namespace 'angular' does not have an exported member 'xxx'

Having issues with Angular http.post not sending data when using subscribe

Gathering adorned categorizations (sans any listed category divisions)

Type aliases using generics may demonstrate varying behaviors from type aliases without generics

The directive is dynamically altering the disable attribute of its parent element