How to use SSR and add titles, meta tags, and json-ld to an Angular 17 project?

Question

After building the projcet with ssr and try to test it on schema.org and google rich results test I get "No Items Found". Here in google rich results test https://search.google.com/test/rich-results/result?id=RU_baj2MpSVeB7o5cQG8Gw the tested page HTML code has the correct title, meta tags and json-ld but it still says "No Items Found".

On the other hand, schema.org test https://validator.schema.org/#url=https%3A%2F%2Fwww.beitseeker.com%2Fdeveloper%2Fpalm-hills the tested source code has no meta tags, no json-ld and has a wrong title, and also "No Items Found".

What is the problem here??

Example: the ts file of one page

export class DeveloperDetailsComponent implements OnInit {
  langPrefix!: '/ar' | '';
  _SeoManagement!: SeoManagement;
  dev!: DeveloperDetails;
  allProjects!: Project[];
  developersLoading = false;
  projectsLoading = false;
  paginationArgs!: PaginationArgs;
  keywords!: string[];

  constructor(
    public langService: LangService,
    private translate: TranslateService,
    private meta: Meta,
    private linkService: LinkService,
    public _title: Title,
    @Inject(PLATFORM_ID) private platformId: any,
    private activatedRoute: ActivatedRoute,
    private developerService: DevelopersService,
    private router: Router,
    private jsonLDService: JsonLDService
  ) {
    this.translate.setDefaultLang(this.langService.getLang());
    this.langService.setDir();
    this.langService.currentLang$.subscribe((lang) => {
      this.translate.use(lang);
      this.langPrefix = lang === 'ar' ? '/ar' : '';
      this._SeoManagement = new SeoManagement(
        this._title,
        this.meta,
        isPlatformBrowser(platformId),
        this.linkService,
        this.langService
      );
    });
  }

  ngOnInit(): void {
    this.activatedRoute.params.subscribe((params) => {
      let developerSlug = params['developerSlug'];
      this.getDeveloperDetails(developerSlug);
    });
  }

  getAllProjects(page: number) {
    this.projectsLoading = true;
    this.developerService
      .getAllCompoundsByDeveloperId(this.dev.id, page)
      .subscribe((res) => {
        this.projectsLoading = false;
        this.allProjects = res.data;
        this.paginationArgs = res.pagination;
        this.setSeoTagsProperties();
      });
  }

  getDeveloperDetails(slug: string) {
    this.developersLoading = true;
    this.developerService.getDeveloperBySlug(slug).subscribe((res) => {
      this.developersLoading = false;
      this.dev = res;
      this.getAllProjects(1);
      this.setJsonLD();
    });
  }

  setJsonLD() {
    this.setKeywords();
    this.jsonLDService.insertSchema({
      '@context': 'https://schema.org/',
      '@type': 'RealEstateAgent',
      name: this.dev.name,
      address: 'Cairo, Egypt',
      image: this.dev.logo,
      aggregateRating: {
        '@type': 'AggregateRating',
        ratingValue: '4.6',
        ratingCount: '131',
      },
    });

    this.jsonLDService.insertSchema({
      '@context': 'https://schema.org/',
      '@type': 'BreadcrumbList',
      itemListElement: [
        {
          '@type': 'ListItem',
          position: '1',
          name: this.dev.name,
          item: ${environment.host}${this.langPrefix}/developer/${this.dev.slug},
        },
      ],
    });

    this.jsonLDService.insertSchema({
      '@context': 'http://schema.org',
      '@type': 'BlogPosting',
      headline: this.dev.name,
      keywords: this.keywords,
      mainEntityOfPage: {
        '@type': 'WebPage',
        '@id': location.href,
      },
      author: { '@type': 'Person', name: 'Data Entry' },
      publisher: {
        '@type': 'Organization',
        name: 'Beitseeker',
        logo: {
          '@type': 'ImageObject',
          url: 'https://beitseeker.com/assets/images/Logo.svg',
          width: '690',
          height: '215',
        },
      },

      image: {
        '@type': 'ImageObject',
        url: this.dev.logo,
        width: '690',
        height: '215',
      },
      name: this.dev.name,
    });
  }

  setSeoTagsProperties() {
    let image = this.dev.image_project;
    let title, description;

    if (this.langPrefix === '/ar') {
      title = ${this.dev.all_units_count} وحدة للبيع في أفضل مشاريع شركة ${this.dev.name} - بيت سيكر;
      description = امتلك منزل أحلامك الآن اختر من بين ${this.paginationArgs.totalItems} مشروعًا جديدًا لشركة ${this.dev.name} في مصر، مع أفضل خطط سداد وأفضل نظم التقسيط من خلال بيت سيكر;
    } else {
      title = ${this.dev.name} - ${this.dev.all_units_count} New Homes for Sale in Egypt - Beit Seeker;
      description = Own your dream home now. Choose from ${this.paginationArgs.totalItems} new projects in ${this.dev.name}, Egypt - with down payment and instalment plans available through Beit Seeker;
    }

    this._SeoManagement.setSeoTags(
      title,
      description,
      ${environment.host}${this.router.url},
      image
    );
  }

  ngOnDestroy(): void {
    this._SeoManagement.onDestroy();
    this.jsonLDService.removeStructuredData();
  }
}