Prism.js in Angular works for the first code block (Code syntax highlighting)

Question

According to this article

After installing the following package

npm install prismjs --save

Then I created a service named: HighlightService

import { Injectable } from '@angular/core';

import 'prismjs';
import 'prismjs/plugins/toolbar/prism-toolbar';
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-java';
import 'prismjs/components/prism-markup';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-sass';
import 'prismjs/components/prism-scss';

declare var Prism: any;

@Injectable()
export class HighlightService {
    constructor() { }

    highlightAll() {
        Prism.highlightAll();
    }
}

I used service above in the component as below:

export class AdminBlogDetailComponent implements AfterViewInit {
  ... 

  ngAfterViewInit(): void {
    this.highlightService.highlightAll();
  }

}

And finally, add the following SCSS on the top of style.scss:

@import "~prismjs/plugins/toolbar/prism-toolbar.css";
@import "~prismjs/themes/prism-okaidia";

My problem is that above service works for the first block of code in the page!

Stackblitz Here