[Angular] BrowserDomAdapterの読み込み方

JS側でCookie制御をする必要がでてきたので
Angularに則った書き方をしてみようと思ったが
意外と骨が折れたので、記録しておく。

Step.1 さがす

cookie というキーワードでソースをgrepしてみる。

$ find node_modules/\@angular/ -name '*.d.ts' | xargs -i grep -i cookie {}
    supportsCookies(): boolean;
    getCookie(name: string): string | null;
    setCookie(name: string, value: string): void;
export declare function parseCookieValue(cookieStr: string, name: string): string | null;
    abstract supportsCookies(): boolean;
    abstract getCookie(name: string): string | null;
    abstract setCookie(name: string, value: string): any;
    supportsCookies(): boolean;
    getCookie(name: string): string;
    setCookie(name: string, value: string): void;
export { _createDefaultCookieXSRFStrategy as ɵb, httpFactory as ɵc, jsonpFactory as ɵd } from './src/http_module';
 * using a cookie. See https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)
 * Applications can configure custom cookie and header names by binding an instance of this class
 * with different `cookieName` and `headerName` values. See the main HTTP documentation for more
export declare class CookieXSRFStrategy implements XSRFStrategy {
    private _cookieName;
    constructor(_cookieName?: string, _headerName?: string);
import { CookieXSRFStrategy, XHRBackend } from './backends/xhr_backend';
export declare function _createDefaultCookieXSRFStrategy(): CookieXSRFStrategy;
export { CookieXSRFStrategy, XHRBackend, XHRConnection } from './backends/xhr_backend';

get/setCookie がみつかった。

次にファイルを特定する

$ find node_modules/\@angular/ -name '*.d.ts' | xargs -i grep -i setCookie {} -l
node_modules/@angular/platform-browser/src/browser/browser_adapter.d.ts
node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts
node_modules/@angular/platform-server/src/parse5_adapter.d.ts

たぶんbrowser_adapter.d.tsだろうと見当する。

browser_adapter.d.ts

import { GenericBrowserDomAdapter } from './generic_browser_adapter';
/**
 * A `DomAdapter` powered by full browser DOM APIs.
 *
 * @security Tread carefully! Interacting with the DOM directly is dangerous and
 * can introduce XSS risks.
 */
export declare class BrowserDomAdapter extends GenericBrowserDomAdapter {
    parse(templateHtml: string): void;
    static makeCurrent(): void;
    hasProperty(element: Node, name: string): boolean;
    setProperty(el: Node, name: string, value: any): void;
    getProperty(el: Node, name: string): any;
    invoke(el: Node, methodName: string, args: any[]): any;
    logError(error: string): void;
    log(error: string): void;
    logGroup(error: string): void;
    logGroupEnd(): void;
    readonly attrToPropMap: any;
    contains(nodeA: any, nodeB: any): boolean;
    querySelector(el: Element, selector: string): any;
    querySelectorAll(el: any, selector: string): any[];
    on(el: Node, evt: any, listener: any): void;
    onAndCancel(el: Node, evt: any, listener: any): Function;
    dispatchEvent(el: Node, evt: any): void;
    createMouseEvent(eventType: string): MouseEvent;
    createEvent(eventType: any): Event;
    preventDefault(evt: Event): void;
    isPrevented(evt: Event): boolean;
    getInnerHTML(el: HTMLElement): string;
    getTemplateContent(el: Node): Node | null;
    getOuterHTML(el: HTMLElement): string;
    nodeName(node: Node): string;
    nodeValue(node: Node): string | null;
    type(node: HTMLInputElement): string;
    content(node: Node): Node;
    firstChild(el: Node): Node | null;
    nextSibling(el: Node): Node | null;
    parentElement(el: Node): Node | null;
    childNodes(el: any): Node[];
    childNodesAsList(el: Node): any[];
    clearNodes(el: Node): void;
    appendChild(el: Node, node: Node): void;
    removeChild(el: Node, node: Node): void;
    replaceChild(el: Node, newChild: Node, oldChild: Node): void;
    remove(node: Node): Node;
    insertBefore(parent: Node, ref: Node, node: Node): void;
    insertAllBefore(parent: Node, ref: Node, nodes: Node[]): void;
    insertAfter(parent: Node, ref: Node, node: any): void;
    setInnerHTML(el: Element, value: string): void;
    getText(el: Node): string | null;
    setText(el: Node, value: string): void;
    getValue(el: any): string;
    setValue(el: any, value: string): void;
    getChecked(el: any): boolean;
    setChecked(el: any, value: boolean): void;
    createComment(text: string): Comment;
    createTemplate(html: any): HTMLElement;
    createElement(tagName: string, doc?: Document): HTMLElement;
    createElementNS(ns: string, tagName: string, doc?: Document): Element;
    createTextNode(text: string, doc?: Document): Text;
    createScriptTag(attrName: string, attrValue: string, doc?: Document): HTMLScriptElement;
    createStyleElement(css: string, doc?: Document): HTMLStyleElement;
    createShadowRoot(el: HTMLElement): DocumentFragment;
    getShadowRoot(el: HTMLElement): DocumentFragment;
    getHost(el: HTMLElement): HTMLElement;
    clone(node: Node): Node;
    getElementsByClassName(element: any, name: string): HTMLElement[];
    getElementsByTagName(element: any, name: string): HTMLElement[];
    classList(element: any): any[];
    addClass(element: any, className: string): void;
    removeClass(element: any, className: string): void;
    hasClass(element: any, className: string): boolean;
    setStyle(element: any, styleName: string, styleValue: string): void;
    removeStyle(element: any, stylename: string): void;
    getStyle(element: any, stylename: string): string;
    hasStyle(element: any, styleName: string, styleValue?: string | null): boolean;
    tagName(element: any): string;
    attributeMap(element: any): Map<string, string>;
    hasAttribute(element: Element, attribute: string): boolean;
    hasAttributeNS(element: Element, ns: string, attribute: string): boolean;
    getAttribute(element: Element, attribute: string): string | null;
    getAttributeNS(element: Element, ns: string, name: string): string;
    setAttribute(element: Element, name: string, value: string): void;
    setAttributeNS(element: Element, ns: string, name: string, value: string): void;
    removeAttribute(element: Element, attribute: string): void;
    removeAttributeNS(element: Element, ns: string, name: string): void;
    templateAwareRoot(el: Node): any;
    createHtmlDocument(): HTMLDocument;
    getBoundingClientRect(el: Element): any;
    getTitle(doc: Document): string;
    setTitle(doc: Document, newTitle: string): void;
    elementMatches(n: any, selector: string): boolean;
    isTemplateElement(el: Node): boolean;
    isTextNode(node: Node): boolean;
    isCommentNode(node: Node): boolean;
    isElementNode(node: Node): boolean;
    hasShadowRoot(node: any): boolean;
    isShadowRoot(node: any): boolean;
    importIntoDoc(node: Node): any;
    adoptNode(node: Node): any;
    getHref(el: Element): string;
    getEventKey(event: any): string;
    getGlobalEventTarget(doc: Document, target: string): EventTarget | null;
    getHistory(): History;
    getLocation(): Location;
    getBaseHref(doc: Document): string | null;
    resetBaseElement(): void;
    getUserAgent(): string;
    setData(element: Element, name: string, value: string): void;
    getData(element: Element, name: string): string | null;
    getComputedStyle(element: any): any;
    supportsWebAnimation(): boolean;
    performanceNow(): number;
    supportsCookies(): boolean;
    getCookie(name: string): string | null;
    setCookie(name: string, value: string): void;
}
export declare function parseCookieValue(cookieStr: string, name: string): string | null;

ビンゴ。

おもむろに読み込む。

sample.service.ts

import {Injectable} from "@angular/core";
import {BrowserDomAdapter} from "@angular/platform-browser";

@Injectable()
export class SampleService
{
  private browserDomAdapter: BrowserDomAdapter = new BrowserDomAdapter();

  public constructor()
  {
    this.browserDomAdapter.setCookie("setCookie", "true");
  }
}

error TS2305: Module '"node_modules/@angular/platform-browser/platform-browser"' has no exported member 'BrowserDomAdapter'.

んん？

Step.2 しらべる

公式サイトでBrowserDomAdapterと調べてみるがNo results found.

しかたがないので、d.tsをたどる

$ find node_modules/\@angular/ -name '*.d.ts' | xargs -i grep -i BrowserDomAdapter {}
export { GenericBrowserDomAdapter as ɵh } from './src/browser/generic_browser_adapter';
export declare abstract class GenericBrowserDomAdapter extends DomAdapter {
import { GenericBrowserDomAdapter } from './generic_browser_adapter';
export declare class BrowserDomAdapter extends GenericBrowserDomAdapter {
export { BrowserDomAdapter as ɵBrowserDomAdapter } from './browser/browser_adapter';

BrowserDomAdapter as ɵBrowserDomAdapterを発見

private_export.d.tsに記述してあったけれども、
この接頭文字ɵは、なにか共通ルールがあるのかな～。

Setp.3 よみこむ

sample.service.ts

import {Injectable} from "@angular/core";
import {ɵBrowserDomAdapter} from "@angular/platform-browser";

@Injectable()
export class SampleService
{
  private browserDomAdapter: ɵBrowserDomAdapter = new ɵBrowserDomAdapter();

  public constructor()
  {
    this.browserDomAdapter.setCookie("setCookie", "true");
  }
}

めでたしめでたし。