feat(platform browser): introduce Meta service (#12322)

modules/@angular/platform-browser/src/browser.ts

@@ -14,6 +14,7 @@ import {WebAnimationsDriver} from '../src/dom/web_animations_driver';
 
 import {BrowserDomAdapter} from './browser/browser_adapter';
 import {BrowserPlatformLocation} from './browser/location/browser_platform_location';
+import {Meta} from './browser/meta';
 import {BrowserGetTestability} from './browser/testability';
 import {Title} from './browser/title';
 import {ELEMENT_PROBE_PROVIDERS} from './dom/debug/ng_probe';
@@ -46,7 +47,7 @@ export const BROWSER_SANITIZATION_PROVIDERS: Array<any> = [
 /**
  * @stable
  */
-export const platformBrowser =
+export const platformBrowser: (extraProviders?: Provider[]) => PlatformRef =
     createPlatformFactory(platformCore, 'browser', INTERNAL_BROWSER_PLATFORM_PROVIDERS);
 
 export function initDomAdapter() {
@@ -58,6 +59,10 @@ export function errorHandler(): ErrorHandler {
   return new ErrorHandler();
 }
 
+export function meta(): Meta {
+  return new Meta(getDOM());
+}
+
 export function _document(): any {
   return getDOM().defaultDoc();
 }
@@ -76,7 +81,8 @@ export function _resolveDefaultAnimationDriver(): AnimationDriver {
  */
 @NgModule({
   providers: [
-    BROWSER_SANITIZATION_PROVIDERS, {provide: ErrorHandler, useFactory: errorHandler, deps: []},
+    BROWSER_SANITIZATION_PROVIDERS,
+    {provide: ErrorHandler, useFactory: errorHandler, deps: []},
     {provide: DOCUMENT, useFactory: _document, deps: []},
     {provide: EVENT_MANAGER_PLUGINS, useClass: DomEventsPlugin, multi: true},
     {provide: EVENT_MANAGER_PLUGINS, useClass: KeyEventsPlugin, multi: true},
@@ -85,8 +91,13 @@ export function _resolveDefaultAnimationDriver(): AnimationDriver {
     {provide: DomRootRenderer, useClass: DomRootRenderer_},
     {provide: RootRenderer, useExisting: DomRootRenderer},
     {provide: SharedStylesHost, useExisting: DomSharedStylesHost},
-    {provide: AnimationDriver, useFactory: _resolveDefaultAnimationDriver}, DomSharedStylesHost,
-    Testability, EventManager, ELEMENT_PROBE_PROVIDERS, Title
+    {provide: AnimationDriver, useFactory: _resolveDefaultAnimationDriver},
+    {provide: Meta, useFactory: meta},
+    DomSharedStylesHost,
+    Testability,
+    EventManager,
+    ELEMENT_PROBE_PROVIDERS,
+    Title,
   ],
   exports: [CommonModule, ApplicationModule]
 })

modules/@angular/platform-browser/src/browser/meta.ts

@@ -0,0 +1,114 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Injectable} from '@angular/core';
+import {DomAdapter} from '../dom/dom_adapter';
+
+/**
+ * Represents a meta element.
+ *
+ * @experimental
+ */
+export interface MetaDefinition {
+  charset?: string;
+  content?: string;
+  httpEquiv?: string;
+  id?: string;
+  itemprop?: string;
+  name?: string;
+  property?: string;
+  scheme?: string;
+  url?: string;
+  [prop: string]: string;
+}
+
+/**
+ * A service that can be used to get and add meta tags.
+ *
+ * @experimental
+ */
+@Injectable()
+export class Meta {
+  constructor(private _dom: DomAdapter) {}
+
+  addTag(tag: MetaDefinition, forceCreation: boolean = false): HTMLMetaElement {
+    if (!tag) return null;
+    return this._getOrCreateElement(tag, forceCreation);
+  }
+
+  addTags(tags: MetaDefinition[], forceCreation: boolean = false): HTMLMetaElement[] {
+    if (!tags) return [];
+    return tags.reduce((result: HTMLMetaElement[], tag: MetaDefinition) => {
+      if (tag) {
+        result.push(this._getOrCreateElement(tag, forceCreation));
+      }
+      return result;
+    }, []);
+  }
+
+  getTag(attrSelector: string): HTMLMetaElement {
+    if (!attrSelector) return null;
+    return this._dom.query(`meta[${attrSelector}]`);
+  }
+
+  getTags(attrSelector: string): HTMLMetaElement[] {
+    if (!attrSelector) return [];
+    const list /*NodeList*/ =
+        this._dom.querySelectorAll(this._dom.defaultDoc(), `meta[${attrSelector}]`);
+    return list ? [].slice.call(list) : [];
+  }
+
+  updateTag(tag: MetaDefinition, selector?: string): HTMLMetaElement {
+    if (!tag) return null;
+    selector = selector || this._parseSelector(tag);
+    const meta: HTMLMetaElement = this.getTag(selector);
+    if (meta) {
+      return this._setMetaElementAttributes(tag, meta);
+    }
+    return this._getOrCreateElement(tag, true);
+  }
+
+  removeTag(attrSelector: string): void { this.removeTagElement(this.getTag(attrSelector)); }
+
+  removeTagElement(meta: HTMLMetaElement): void {
+    if (meta) {
+      this._dom.remove(meta);
+    }
+  }
+
+  private _getOrCreateElement(meta: MetaDefinition, forceCreation: boolean = false):
+      HTMLMetaElement {
+    if (!forceCreation) {
+      const selector: string = this._parseSelector(meta);
+      const elem: HTMLMetaElement = this.getTag(selector);
+      // It's allowed to have multiple elements with the same name so it's not enough to
+      // just check that element with the same name already present on the page. We also need to
+      // check if element has tag attributes
+      if (elem && this._containsAttributes(meta, elem)) return elem;
+    }
+    const element: HTMLMetaElement = this._dom.createElement('meta') as HTMLMetaElement;
+    this._setMetaElementAttributes(meta, element);
+    const head = this._dom.getElementsByTagName(this._dom.defaultDoc(), 'head')[0];
+    this._dom.appendChild(head, element);
+    return element;
+  }
+
+  private _setMetaElementAttributes(tag: MetaDefinition, el: HTMLMetaElement): HTMLMetaElement {
+    Object.keys(tag).forEach((prop: string) => this._dom.setAttribute(el, prop, tag[prop]));
+    return el;
+  }
+
+  private _parseSelector(tag: MetaDefinition): string {
+    const attr: string = tag.name ? 'name' : 'property';
+    return `${attr}="${tag[attr]}"`;
+  }
+
+  private _containsAttributes(tag: MetaDefinition, elem: HTMLMetaElement): boolean {
+    return Object.keys(tag).every((key: string) => this._dom.getAttribute(elem, key) === tag[key]);
+  }
+}

modules/@angular/platform-browser/src/platform-browser.ts

@@ -7,6 +7,7 @@
  */
 
 export {BrowserModule, platformBrowser} from './browser';
+export {Meta, MetaDefinition} from './browser/meta';
 export {Title} from './browser/title';
 export {disableDebugTools, enableDebugTools} from './browser/tools/tools';
 export {AnimationDriver} from './dom/animation_driver';