fix: view engine - fix some corner cases

modules/@angular/platform-server/src/server_renderer.ts

@@ -266,11 +266,12 @@ function appendNodes(parent: any, nodes: any) {
 export class ServerRendererFactoryV2 implements RendererFactoryV2 {
   private rendererByCompId = new Map<string, RendererV2>();
   private defaultRenderer: RendererV2;
+  private schema = new DomElementSchemaRegistry();
 
   constructor(
       private ngZone: NgZone, @Inject(DOCUMENT) private document: any,
       private sharedStylesHost: SharedStylesHost) {
-    this.defaultRenderer = new DefaultServerRendererV2(document, ngZone);
+    this.defaultRenderer = new DefaultServerRendererV2(document, ngZone, this.schema);
   };
 
   createRenderer(element: any, type: RendererTypeV2): RendererV2 {
@@ -282,7 +283,7 @@ export class ServerRendererFactoryV2 implements RendererFactoryV2 {
         let renderer = this.rendererByCompId.get(type.id);
         if (!renderer) {
           renderer = new EmulatedEncapsulationServerRendererV2(
-              this.document, this.ngZone, this.sharedStylesHost, type);
+              this.document, this.ngZone, this.sharedStylesHost, this.schema, type);
           this.rendererByCompId.set(type.id, renderer);
         }
         (<EmulatedEncapsulationServerRendererV2>renderer).applyToHost(element);
@@ -303,7 +304,8 @@ export class ServerRendererFactoryV2 implements RendererFactoryV2 {
 }
 
 class DefaultServerRendererV2 implements RendererV2 {
-  constructor(private document: any, private ngZone: NgZone) {}
+  constructor(
+      private document: any, private ngZone: NgZone, private schema: DomElementSchemaRegistry) {}
 
   destroy(): void {}
 
@@ -382,7 +384,26 @@ class DefaultServerRendererV2 implements RendererV2 {
     getDOM().removeStyle(el, style);
   }
 
-  setProperty(el: any, name: string, value: any): void { getDOM().setProperty(el, name, value); }
+  // The value was validated already as a property binding, against the property name.
+  // To know this value is safe to use as an attribute, the security context of the
+  // attribute with the given name is checked against that security context of the
+  // property.
+  private _isSafeToReflectProperty(tagName: string, propertyName: string): boolean {
+    return this.schema.securityContext(tagName, propertyName, true) ===
+        this.schema.securityContext(tagName, propertyName, false);
+  }
+
+  setProperty(el: any, name: string, value: any): void {
+    getDOM().setProperty(el, name, value);
+    // Mirror property values for known HTML element properties in the attributes.
+    const tagName = (el.tagName as string).toLowerCase();
+    if (isPresent(value) && (typeof value === 'number' || typeof value == 'string') &&
+        this.schema.hasElement(tagName, EMPTY_ARRAY) &&
+        this.schema.hasProperty(tagName, name, EMPTY_ARRAY) &&
+        this._isSafeToReflectProperty(tagName, name)) {
+      this.setAttribute(el, name, value.toString());
+    }
+  }
 
   setValue(node: any, value: string): void { getDOM().setText(node, value); }
 
@@ -404,8 +425,8 @@ class EmulatedEncapsulationServerRendererV2 extends DefaultServerRendererV2 {
 
   constructor(
       document: any, ngZone: NgZone, sharedStylesHost: SharedStylesHost,
-      private component: RendererTypeV2) {
-    super(document, ngZone);
+      schema: DomElementSchemaRegistry, private component: RendererTypeV2) {
+    super(document, ngZone, schema);
     const styles = flattenStyles(component.id, component.styles, []);
     sharedStylesHost.addStyles(styles);
 

modules/@angular/platform-server/test/integration_spec.ts

@@ -7,14 +7,14 @@
  */
 
 import {PlatformLocation} from '@angular/common';
+import {USE_VIEW_ENGINE} from '@angular/compiler/src/config';
 import {ApplicationRef, CompilerFactory, Component, NgModule, NgModuleRef, NgZone, PlatformRef, destroyPlatform, getPlatform} from '@angular/core';
-import {async, inject} from '@angular/core/testing';
+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 {DOCUMENT} 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';
 import {filter} from 'rxjs/operator/filter';
 import {first} from 'rxjs/operator/first';
@@ -99,6 +99,25 @@ class ImageExampleModule {
 }
 
 export function main() {
+  describe('regular', () => { declareTests({viewEngine: false}); });
+
+  describe('view engine', () => {
+    beforeEach(() => {
+      TestBed.configureCompiler({
+        useJit: true,
+        providers: [{
+          provide: USE_VIEW_ENGINE,
+          useValue: true,
+        }],
+      });
+    });
+
+    declareTests({viewEngine: true});
+  });
+}
+
+
+function declareTests({viewEngine}: {viewEngine: boolean}) {
   if (getDOM().supportsDOMEvents()) return;  // NODE only
 
   describe('platform-server integration', () => {