元标记更新并在本地主机源代码中可见,但在生产中不可见

问题描述 投票:0回答:0

我能够在本地主机 Angular SSR 中更新元标记,如果从本地主机运行,我可以在查看源代码时看到它们,但在生产中看不到它们。如何解决这个问题?

Home.component.ts

import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { weburl } from 'src/environments/environment';
import { CityService, SliderModel } from '../city.service';
import { EventEmitterService } from '../event-emitter.service';
import { LocalstorageService } from '../localstorage.service';
import { isPlatformBrowser } from '@angular/common';
import { catchError, throwError } from 'rxjs';
@Component({
  selector: 'index-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
  webUrl: any;
  homePage: any;
  testimonials: any = [];
  public sliders!: any;
  public categories!: any;
  public f_categories: any;
  constructor(@Inject(PLATFORM_ID) private platformId: Object,
    private _localStorage: LocalstorageService,
    private _cityService: CityService,
    private router: Router,
    private route: ActivatedRoute,
    private meta: Meta, private eventService: EventEmitterService, private title: Title) {

    this.webUrl = weburl.apiUrl;

    // this._cityService.getHeader().pipe(
    //   catchError(err => {
    //     console.log(err)
    //     return throwError(err);
    //   })
    // ).subscribe((data: any) => {
    // });

    this.eventService.subject.subscribe((data: any) => {
      this.getDashboard()
    });
  }

  getDashboard() {
    this.sliders = [];
    this.categories = [];
    this.f_categories = [];
    if (isPlatformBrowser(this.platformId)) {
      var areadId = JSON.parse(this._localStorage.getItem('areaId')!);
      var cityId = JSON.parse(this._localStorage.getItem('cityId')!);
      this._cityService.dashboard(cityId, areadId).pipe(
        catchError(err => {
          alert(err.error.message);
          return throwError(err);
        })
      ).subscribe((data: any) => {
        this.homePage = data.homepage;
        this.sliders = data.slider;
        this.categories = data.category;
        this.testimonials = data.test;
        this.f_categories = data.f_category;
      });
    }
  }

  ngOnInit(): void {
    this.route.data.subscribe((data: any) => {
      console.log('Data FETCHED');
      console.log(data);
      this.title.setTitle(data.des.site_name);
      this.meta.updateTag(
        { name: 'title', content: data.des.meta_title }
      );
      this.meta.updateTag(
        { name: 'description', content: data.des.meta_des }
      );
      this.meta.updateTag(
        { name: 'keywords', content: data.des.meta_keywords }
      );
      // let res =data.res;
    }
    );
    this.getDashboard();
  }
}

加载主页后在本地主机查看源代码标签正在更新

Image1

在生产视图中,源标签没有更新

Image2

加载页面上的生产服务器控制台错误

Image3

meta-tags angular-universal angular-ssr
© www.soinside.com 2019 - 2024. All rights reserved.