refactor: remove ngx-meta and replace with native implementation

package.json

@@ -68,7 +68,6 @@
     "@ngrx/store-devtools": "^11.0.1",
     "@nguniversal/express-engine": "^11.2.0",
     "@ngx-formly/core": "^5.10.14",
-    "@ngx-meta/core": "^9.0.0",
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@rx-angular/state": "^1.4.3",

src/app/extensions/seo/seo.module.ts

@@ -1,28 +1,8 @@
 import { NgModule } from '@angular/core';
-import { MetaLoader, MetaModule, MetaSettings, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core';
-import { TranslateService } from '@ngx-translate/core';
 
 import { SeoStoreModule } from './store/seo-store.module';
 
-export function metaFactory(translate: TranslateService): MetaLoader {
-  const settings: MetaSettings = {
-    callback: (key: string) => translate.get(key),
-    pageTitlePositioning: PageTitlePositioning.PrependPageTitle,
-    pageTitleSeparator: ' | ',
-    applicationName: 'seo.applicationName',
-  };
-
-  return new MetaStaticLoader(settings);
-}
-
 @NgModule({
-  imports: [
-    MetaModule.forRoot({
-      provide: MetaLoader,
-      useFactory: metaFactory,
-      deps: [TranslateService],
-    }),
-    SeoStoreModule,
-  ],
+  imports: [SeoStoreModule],
 })
 export class SeoModule {}

src/app/extensions/seo/store/seo/seo.effects.ts

@@ -1,14 +1,14 @@
 import { APP_BASE_HREF, DOCUMENT, isPlatformServer } from '@angular/common';
 import { ApplicationRef, Inject, Injectable, Optional, PLATFORM_ID } from '@angular/core';
+import { Meta, MetaDefinition, Title } from '@angular/platform-browser';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { routerNavigatedAction, routerNavigationAction } from '@ngrx/router-store';
 import { Store, select } from '@ngrx/store';
 import { REQUEST } from '@nguniversal/express-engine/tokens';
-import { MetaService } from '@ngx-meta/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Request } from 'express';
 import { isEqual } from 'lodash-es';
-import { merge, race } from 'rxjs';
+import { Subject, combineLatest, merge, race } from 'rxjs';
 import { distinctUntilChanged, filter, map, mapTo, switchMap, takeWhile, tap, withLatestFrom } from 'rxjs/operators';
 
 import { CategoryHelper } from 'ish-core/models/category/category.model';
@@ -29,7 +29,8 @@ export class SeoEffects {
   constructor(
     private actions$: Actions,
     private store: Store,
-    private meta: MetaService,
+    private metaService: Meta,
+    private titleService: Title,
     private translate: TranslateService,
     @Inject(DOCUMENT) private doc: Document,
     @Optional() @Inject(REQUEST) private request: Request,
@@ -38,6 +39,9 @@ export class SeoEffects {
     @Inject(PLATFORM_ID) private platformId: string
   ) {}
 
+  private pageTitle$ = new Subject<string>();
+  private pageDescription$ = new Subject<string>();
+
   private productPage$ = this.store.pipe(
     ofProductUrl(),
     select(getSelectedProduct),
@@ -137,8 +141,40 @@ export class SeoEffects {
         ofType(routerNavigatedAction),
         withLatestFrom(this.store.pipe(select(getCurrentLocale)), this.store.pipe(select(getAvailableLocales))),
         tap(([, current, locales]) => {
-          this.meta.setTag('og:locale', current.lang);
-          this.meta.setTag('og:locale:alternate', locales.map(x => x.lang).join(','));
+          this.metaService.addTag({ property: 'og:locale', content: current.lang });
+
+          this.metaService
+            .getTags('property="og:locale:alternate"')
+            .forEach(el => this.metaService.removeTagElement(el));
+          locales
+            .map(x => x.lang)
+            .filter(lang => lang !== current.lang)
+            .forEach(lang => this.metaService.addTag({ property: 'og:locale:alternate', content: lang }, true));
+        })
+      ),
+    { dispatch: false }
+  );
+
+  seoTitle$ = createEffect(
+    () =>
+      this.pageTitle$.pipe(
+        switchMap(title => combineLatest([this.translate.get(title), this.translate.get('seo.applicationName')])),
+        map(([title, application]) => `${title} | ${application}`),
+        tap(title => {
+          this.titleService.setTitle(title);
+          this.addOrModifyTag({ property: 'og:title', content: title });
+        })
+      ),
+    { dispatch: false }
+  );
+
+  seoDescription$ = createEffect(
+    () =>
+      this.pageDescription$.pipe(
+        switchMap(description => this.translate.get(description)),
+        tap(description => {
+          this.addOrModifyTag({ name: 'description', content: description });
+          this.addOrModifyTag({ property: 'og:description', content: description });
         })
       ),
     { dispatch: false }
@@ -162,7 +198,7 @@ export class SeoEffects {
       this.doc.head.appendChild(canonicalLink);
     }
     canonicalLink.setAttribute('href', url);
-    this.meta.setTag('og:url', url);
+    this.addOrModifyTag({ property: 'og:url', content: url });
   }
 
   private setSeoAttributes(seoAttributes: SeoAttributes) {
@@ -171,13 +207,23 @@ export class SeoEffects {
       .forEach(([key, value]) => {
         switch (key) {
           case 'title':
-            this.meta.setTitle(value);
-            break;
-          default:
-            this.meta.setTag(key, value);
-            break;
+            this.pageTitle$.next(value);
+            return;
+          case 'description':
+            this.pageDescription$.next(value);
+            return;
+          case 'robots':
+            this.addOrModifyTag({ name: key, content: value });
+            return;
         }
+        this.addOrModifyTag({ property: key.startsWith('og:') ? key : 'og:' + key, content: value });
       });
-    this.meta.setTag('pwa-version', PWA_VERSION);
+    this.addOrModifyTag({ property: 'pwa-version', content: PWA_VERSION });
+  }
+
+  private addOrModifyTag(tag: MetaDefinition) {
+    if (!this.metaService.updateTag(tag)) {
+      this.metaService.addTag(tag);
+    }
   }
 }