fix(platform-server): fix get/set title in parse5 adapter (angular#14965

)
asnowwolf · Aug 11, 2017 · 4dae001 · 4dae001
1 parent eab6d4d
commit 4dae001
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 deletions.
diff --git a/packages/platform-server/src/parse5_adapter.ts b/packages/platform-server/src/parse5_adapter.ts
@@ -491,8 +491,10 @@ export class Parse5DomAdapter extends DomAdapter {
     return newDoc;
   }
   getBoundingClientRect(el: any): any { return {left: 0, top: 0, width: 0, height: 0}; }
-  getTitle(doc: Document): string { return doc.title || ''; }
-  setTitle(doc: Document, newTitle: string) { doc.title = newTitle; }
+  getTitle(doc: Document): string { return this.getText(this.getTitleNode(doc)) || ''; }
+  setTitle(doc: Document, newTitle: string) {
+    this.setText(this.getTitleNode(doc), newTitle || '');
+  }
   isTemplateElement(el: any): boolean {
     return this.isElementNode(el) && this.tagName(el) === 'template';
   }
@@ -591,6 +593,16 @@ export class Parse5DomAdapter extends DomAdapter {
   getCookie(name: string): string { throw new Error('not implemented'); }
   setCookie(name: string, value: string) { throw new Error('not implemented'); }
   animate(element: any, keyframes: any[], options: any): any { throw new Error('not implemented'); }
+  private getTitleNode(doc: Document) {
+    let title = this.querySelector(doc, 'title');
+
+    if (!title) {
+      title = <HTMLTitleElement>this.createElement('title');
+      this.appendChild(this.querySelector(doc, 'head'), title);
+    }
+
+    return title;
+  }
 }
 
 // TODO: build a proper list, this one is all the keys of a HTMLInputElement

diff --git a/packages/platform-server/test/integration_spec.ts b/packages/platform-server/test/integration_spec.ts
@@ -11,7 +11,7 @@ import {ApplicationRef, CompilerFactory, Component, NgModule, NgModuleRef, NgZon
 import {TestBed, async, inject} from '@angular/core/testing';
 import {Http, HttpModule, Response, ResponseOptions, XHRBackend} from '@angular/http';
 import {MockBackend, MockConnection} from '@angular/http/testing';
-import {BrowserModule, DOCUMENT} from '@angular/platform-browser';
+import {BrowserModule, DOCUMENT, Title} from '@angular/platform-browser';
 import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
 import {INITIAL_CONFIG, PlatformState, ServerModule, platformDynamicServer, renderModule, renderModuleFactory} from '@angular/platform-server';
 import {Subscription} from 'rxjs/Subscription';
@@ -43,6 +43,16 @@ class MyServerApp2 {
 class ExampleModule2 {
 }
 
+@Component({selector: 'app', template: ``})
+class TitleApp {
+  constructor(private title: Title) {}
+  ngOnInit() { this.title.setTitle('Test App Title'); }
+}
+
+@NgModule({declarations: [TitleApp], imports: [ServerModule], bootstrap: [TitleApp]})
+class TitleAppModule {
+}
+
 @Component({selector: 'app', template: '{{text}}'})
 class MyAsyncServerApp {
   text = '';
@@ -145,6 +155,21 @@ export function main() {
          });
        }));
 
+    it('adds title to the document using Title service', async(() => {
+         const platform = platformDynamicServer([{
+           provide: INITIAL_CONFIG,
+           useValue:
+               {document: '<html><head><title></title></head><body><app></app></body></html>'}
+         }]);
+         platform.bootstrapModule(TitleAppModule).then(ref => {
+           const state = ref.injector.get(PlatformState);
+           const doc = ref.injector.get(DOCUMENT);
+           const title = getDOM().querySelector(doc, 'title');
+           expect(getDOM().getText(title)).toBe('Test App Title');
+           expect(state.renderToString()).toContain('<title>Test App Title</title>');
+         });
+       }));
+
     it('adds styles with ng-transition attribute', async(() => {
          const platform = platformDynamicServer([{
            provide: INITIAL_CONFIG,