Internal style appending continuously in head tag when using CDN link in single page application on navigation.

[Rahul-kalsha]

What happens?

I integrated scalar API documentation via CDN link in angular SPA project. but there is a issue like Internal style appending continuously in head tag in single page application DOM on navigation change. Due to this it will impact on web performance and it's a bad structure of DOM.

Here i am adding the code. Help me to fix this bug.

Here is the component file:

import { AfterViewInit, Component, OnDestroy, OnInit, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-api-list',
  standalone: true,
  imports: [],
  templateUrl: './api-list.component.html',
  styleUrls: ['./api-list.component.scss'],
})
export class ApiListComponent implements OnInit, AfterViewInit, OnDestroy {
  constructor() { }

  ngOnInit(): void {
    this.loadScript('https://cdn.jsdelivr.net/npm/@scalar/api-reference').then((res: any) => {
      console.log('res:', res);
    }).catch(error => {
      console.error('Error loading script:', error);
    });
  }

  ngOnDestroy(): void {
  }

  ngAfterViewInit(): void {
  }

  private loadScript(url: string): Promise<void> {
    return new Promise<void>((resolve, reject) => {
      const scriptElement = document.createElement('script');
      scriptElement.src = url;
      scriptElement.onload = () => resolve();
      scriptElement.onerror = (error) => reject(error);
      document.body.appendChild(scriptElement);
    });
  }
}

Here is the html file:

<div
id="api-reference"
data-url="https://petstore3.swagger.io/api/v3/openapi.json"
data-proxy-url="https://api.scalar.com/request-proxy"></div>

You can check visually here and suggest me proper solution if i am miss any configuration then also please help me.

Internal.style.appending.continuously.in.head.tag.in.SPA.mp4

What did you expect to happen?

The internal style append should only happen once.

How can we reproduce the issue?

1. Setup CDN in Angular project as i already mentioned code above
2. Setup API documentation page in particular url slug
3. Navigate to another page
4. Go to the existing page on which we loaded the API documentation via CDN link
5. See head tag style in DOM via inspect element in browser

Swagger/OpenAPI Example

No response

[marclave]

thanks for reporting this @Rahul-kalsha ! and all the detail it's really helpful!

im unfamiliar with Angular but i know @amritk is quite the Angular wizard; i wonder if the ngOnInit gets run on every page load and if there's a way to cache it somehow? 🤔

[Rahul-kalsha]

thanks for reporting this @Rahul-kalsha ! and all the detail it's really helpful!

im unfamiliar with Angular but i know @amritk is quite the Angular wizard; i wonder if the ngOnInit gets run on every page load and if there's a way to cache it somehow? 🤔

Hello @marclave, there is a way to load the CDN API reference script only once during the initialization of the page. However, when navigating to different pages, the API documentation doesn't display in the browser. To address this issue, I've decided to load the script in the 'ngOnInit' function. This ensures that every time there's a navigation change, the component reloads, and the CDN API reference script is also called again.

[amritk]

So we should make an angular integration that handles this. But for now in ngOninit instead of loading the js again, all you need to do is call the initialization method. Maybe @marclave knows it off the top of his head otherwise I can check when I get to a computer

[amritk]

So I took a look and there is no method for init in standalone.ts, looks like it just initializes on load. We would need to come up with something unfortunately.

[amritk]

Alright @Rahul-kalsha we have just added some events, you can use the reload one now as seen in the docs in the PR

[jatingajera31]

Still I am getting this issue with this CDN version : https://cdn.jsdelivr.net/npm/@scalar/api-reference@1.21.2
@amritk