fix(angular): SSR support existing tag replacements

Author: harlan-zw

examples/angular/src/app/app.component.ts

@@ -14,22 +14,9 @@ export class AppComponent implements OnInit {
   constructor(
   ) {
     useHead({
-      htmlAttrs: {
-        lang: 'en',
-      },
-      meta: [
-        {
-          charset: 'utf-8'
-        },
-        {
-          name: 'viewport',
-          content: 'width=device-width, initial-scale=1'
-        }
-      ],
       title: 'Hello from Angular 123',
       bodyAttrs: {
         class: 'foo',
-        style: 'background-color: salmon'
       },
       style: [
         {

examples/angular/src/app/app.config.server.ts

@@ -9,7 +9,19 @@ const serverConfig: ApplicationConfig = {
   providers: [
     provideServerRendering(),
     provideServerRoutesConfig(serverRoutes),
-    provideServerHead(),
+    provideServerHead({
+      init: [
+        {
+          htmlAttrs: {
+            lang: 'en-AU',
+            ['data-foo']: true,
+            style: {
+              'font-size': '16px'
+            }
+          },
+        }
+      ]
+    }),
   ]
 };
 

examples/angular/src/app/counter/counter.component.ts

@@ -1,6 +1,6 @@
 // counter.component.ts
-import {Component, effect, signal} from '@angular/core';
-import { Unhead, useHead } from '@unhead/angular'
+import {Component, signal} from '@angular/core';
+import { useHead } from '@unhead/angular'
 
 @Component({
   selector: 'app-counter',

package.json

@@ -55,9 +55,9 @@
   },
   "resolutions": {
     "@unhead/addons": "workspace:*",
+    "@unhead/angular": "workspace:*",
     "@unhead/dom": "workspace:*",
     "@unhead/schema": "workspace:*",
-    "@unhead/angular": "workspace:*",
     "@unhead/schema-org": "workspace:*",
     "@unhead/shared": "workspace:*",
     "@unhead/ssr": "workspace:*",

packages/angular/server/src/server.ts

@@ -1,20 +1,21 @@
 import type { CreateServerHeadOptions } from 'unhead/types'
 import { makeEnvironmentProviders } from '@angular/core'
 import { BEFORE_APP_SERIALIZED } from '@angular/platform-server'
-import { Unhead, UnheadInjectionToken } from '@unhead/angular'
+import { UnheadInjectionToken } from '@unhead/angular'
 import { createHead as _createServerHead } from 'unhead/server'
+import { UnheadSSRService } from './ssr.service'
 
 export function provideServerHead(options: CreateServerHeadOptions = {}) {
   const head = _createServerHead(options)
   return makeEnvironmentProviders([
     { provide: UnheadInjectionToken, useValue: head },
-    Unhead,
+    UnheadSSRService,
     {
       provide: BEFORE_APP_SERIALIZED,
-      useFactory: (service: Unhead) => () => {
-        return service._ssrModifyResponse()
+      useFactory: (service: UnheadSSRService) => () => {
+        return service.render()
       },
-      deps: [Unhead],
+      deps: [UnheadSSRService],
       multi: true,
     },
   ])

packages/angular/src/unhead.service.ts packages/angular/server/src/ssr.service.ts

@@ -1,8 +1,8 @@
 import type { Unhead as UnheadSchema } from 'unhead/types'
 import { DOCUMENT } from '@angular/common'
 import { Inject, Injectable } from '@angular/core'
-import { renderSSRHead } from 'unhead/server'
-import { UnheadInjectionToken } from './context'
+import { UnheadInjectionToken } from '@unhead/angular'
+import { extractUnheadInputFromHtml, renderSSRHead } from 'unhead/server'
 
 function attrToElement(element: HTMLElement, acc: string) {
   const [key, value] = acc.match(/([a-z0-9-]+)(?:="([^"]*)")?/i)?.slice(1, 3) || []
@@ -36,19 +36,21 @@ const attrRegex = /([a-z0-9-]+(?:="[^"]*")?)/gi
 @Injectable({
   providedIn: 'root',
 })
-export class Unhead {
+export class UnheadSSRService {
   constructor(
     @Inject(DOCUMENT) private document: Document,
     @Inject(UnheadInjectionToken) private unhead: UnheadSchema,
   ) {}
 
-  async _ssrModifyResponse() {
+  async render() {
+    const { input } = extractUnheadInputFromHtml(this.document.documentElement.outerHTML)
+    this.unhead.entries.set(0, { _i: 0, input, options: {} })
     const { headTags, htmlAttrs, bodyAttrs, bodyTags, bodyTagsOpen } = await renderSSRHead(this.unhead, {
       omitLineBreaks: false,
     })
     htmlAttrs.match(attrRegex)?.forEach(attr => attrToElement(this.document.documentElement, attr))
     bodyAttrs.match(attrRegex)?.forEach(attr => attrToElement(this.document.body, attr))
     this.document.body.innerHTML = bodyTagsOpen + this.document.body.innerHTML + bodyTags
-    this.document.head.innerHTML = headTags + this.document.head.innerHTML
+    this.document.head.innerHTML = headTags
   }
 }

packages/angular/src/index.ts

@@ -2,7 +2,6 @@
  * Public API Surface of unhead
  */
 
-export * from './composables'
-export * from './context'
-export * from './head.component'
-export * from './unhead.service'
+export { useHead, useHeadSafe, useScript, useSeoMeta, useUnhead } from './composables'
+export { headSymbol, UnheadInjectionToken } from './context'
+export { Head } from './head.component'