fix(platform-browser): insert APP_ID in styles, contentAttr and hostAttr (#17745)

petersalomonsen · IgorMinar · commit 712d60e467d5 · 2019-04-11T07:59:22.000-07:00
PR Close #17745
diff --git a/modules/benchmarks/src/tree/ng2_next/tree.ts b/modules/benchmarks/src/tree/ng2_next/tree.ts
@@ -94,7 +94,7 @@ export class AppModule implements Injector, NgModuleRef<any> {
   constructor() {
     initServicesIfNeeded();
     this.sanitizer = new DomSanitizerImpl(document);
-    this.renderer2 = new DomRendererFactory2(null, null);
+    this.renderer2 = new DomRendererFactory2(null, null, null);
     trustedEmptyColor = this.sanitizer.bypassSecurityTrustStyle('');
     trustedGreyColor = this.sanitizer.bypassSecurityTrustStyle('grey');
     this.componentFactory =
diff --git a/packages/core/test/bundling/todo_r2/todo_e2e_spec.ts b/packages/core/test/bundling/todo_r2/todo_e2e_spec.ts
@@ -27,7 +27,8 @@ describe('functional test for todo', () => {
            const toDoAppComponent = (window as any).toDoAppComponent;
            await whenRendered(toDoAppComponent);
 
-           const styleContent = findStyleTextForSelector('.todo-list\\\[_ngcontent-\\\w+\\\]');
+           const styleContent =
+               findStyleTextForSelector('.todo-list\\\[_ngcontent-[a-z]+-\\\w+\\\]');
            expect(styleContent).toMatch(/font-weight:\s*bold;/);
            expect(styleContent).toMatch(/color:\s*#d9d9d9;/);
          }));
diff --git a/packages/core/test/render3/component_spec.ts b/packages/core/test/render3/component_spec.ts
@@ -348,14 +348,14 @@ describe('encapsulation', () => {
     renderComponent(WrapperComponent, {rendererFactory: getRendererFactory2(document)});
     expect(containerEl.outerHTML)
         .toMatch(
-            /<div host=""><encapsulated _nghost-c(\d+)="">foo<leaf _ngcontent-c\1=""><span>bar<\/span><\/leaf><\/encapsulated><\/div>/);
+            /<div host=""><encapsulated _nghost-[a-z]+-c(\d+)="">foo<leaf _ngcontent-[a-z]+-c\1=""><span>bar<\/span><\/leaf><\/encapsulated><\/div>/);
   });
 
   it('should encapsulate host', () => {
     renderComponent(EncapsulatedComponent, {rendererFactory: getRendererFactory2(document)});
     expect(containerEl.outerHTML)
         .toMatch(
-            /<div host="" _nghost-c(\d+)="">foo<leaf _ngcontent-c\1=""><span>bar<\/span><\/leaf><\/div>/);
+            /<div host="" _nghost-[a-z]+-c(\d+)="">foo<leaf _ngcontent-[a-z]+-c\1=""><span>bar<\/span><\/leaf><\/div>/);
   });
 
   it('should encapsulate host and children with different attributes', () => {
@@ -401,7 +401,7 @@ describe('encapsulation', () => {
     renderComponent(WrapperComponentWith, {rendererFactory: getRendererFactory2(document)});
     expect(containerEl.outerHTML)
         .toMatch(
-            /<div host="" _nghost-c(\d+)=""><leaf _ngcontent-c\1="" _nghost-c(\d+)=""><span _ngcontent-c\2="">bar<\/span><\/leaf><\/div>/);
+            /<div host="" _nghost-[a-z]+-c(\d+)=""><leaf _ngcontent-[a-z]+-c\1="" _nghost-[a-z]+-c(\d+)=""><span _ngcontent-[a-z]+-c\2="">bar<\/span><\/leaf><\/div>/);
   });
 
 });
diff --git a/packages/core/test/render3/imported_renderer2.ts b/packages/core/test/render3/imported_renderer2.ts
@@ -35,7 +35,7 @@ export function getRendererFactory2(document: any): RendererFactory2 {
   const fakeNgZone: NgZone = new NoopNgZone();
   const eventManager = new EventManager([new SimpleDomEventsPlugin(document)], fakeNgZone);
   const rendererFactory =
-      new ɵDomRendererFactory2(eventManager, new ɵDomSharedStylesHost(document));
+      new ɵDomRendererFactory2(eventManager, new ɵDomSharedStylesHost(document), 'dummyappid');
   const origCreateRenderer = rendererFactory.createRenderer;
   rendererFactory.createRenderer = function() {
     const renderer = origCreateRenderer.apply(this, arguments);
diff --git a/packages/core/test/render3/providers_spec.ts b/packages/core/test/render3/providers_spec.ts
@@ -1123,7 +1123,7 @@ describe('providers', () => {
          fixture.update();
          expect(fixture.html)
              .toMatch(
-                 /<host-cmp>foo<\/host-cmp><embedded-cmp _nghost-c(\d+)="">From module injector<\/embedded-cmp>/);
+                 /<host-cmp>foo<\/host-cmp><embedded-cmp _nghost-[a-z]+-c(\d+)="">From module injector<\/embedded-cmp>/);
        });
 
     it('should cross the root view boundary to the parent of the host, thanks to the default root view injector',
diff --git a/packages/platform-browser/src/browser.ts b/packages/platform-browser/src/browser.ts
@@ -80,7 +80,7 @@ export const BROWSER_MODULE_PROVIDERS: StaticProvider[] = [
   {
     provide: DomRendererFactory2,
     useClass: DomRendererFactory2,
-    deps: [EventManager, DomSharedStylesHost]
+    deps: [EventManager, DomSharedStylesHost, APP_ID]
   },
   {provide: RendererFactory2, useExisting: DomRendererFactory2},
   {provide: SharedStylesHost, useExisting: DomSharedStylesHost},
diff --git a/packages/platform-browser/src/dom/dom_renderer.ts b/packages/platform-browser/src/dom/dom_renderer.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, ViewEncapsulation} from '@angular/core';
+import {APP_ID, Inject, Injectable, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, ViewEncapsulation} from '@angular/core';
 
 import {EventManager} from './events/event_manager';
 import {DomSharedStylesHost} from './shared_styles_host';
@@ -63,7 +63,9 @@ export class DomRendererFactory2 implements RendererFactory2 {
   private rendererByCompId = new Map<string, Renderer2>();
   private defaultRenderer: Renderer2;
 
-  constructor(private eventManager: EventManager, private sharedStylesHost: DomSharedStylesHost) {
+  constructor(
+      private eventManager: EventManager, private sharedStylesHost: DomSharedStylesHost,
+      @Inject(APP_ID) private appId: string) {
     this.defaultRenderer = new DefaultDomRenderer2(eventManager);
   }
 
@@ -75,8 +77,8 @@ export class DomRendererFactory2 implements RendererFactory2 {
       case ViewEncapsulation.Emulated: {
         let renderer = this.rendererByCompId.get(type.id);
         if (!renderer) {
-          renderer =
-              new EmulatedEncapsulationDomRenderer2(this.eventManager, this.sharedStylesHost, type);
+          renderer = new EmulatedEncapsulationDomRenderer2(
+              this.eventManager, this.sharedStylesHost, type, this.appId);
           this.rendererByCompId.set(type.id, renderer);
         }
         (<EmulatedEncapsulationDomRenderer2>renderer).applyToHost(element);
@@ -243,13 +245,13 @@ class EmulatedEncapsulationDomRenderer2 extends DefaultDomRenderer2 {
 
   constructor(
       eventManager: EventManager, sharedStylesHost: DomSharedStylesHost,
-      private component: RendererType2) {
+      private component: RendererType2, appId: string) {
     super(eventManager);
-    const styles = flattenStyles(component.id, component.styles, []);
+    const styles = flattenStyles(appId + '-' + component.id, component.styles, []);
     sharedStylesHost.addStyles(styles);
 
-    this.contentAttr = shimContentAttribute(component.id);
-    this.hostAttr = shimHostAttribute(component.id);
+    this.contentAttr = shimContentAttribute(appId + '-' + component.id);
+    this.hostAttr = shimHostAttribute(appId + '-' + component.id);
   }
 
   applyToHost(element: any) { super.setAttribute(element, this.hostAttr, ''); }

Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,7 @@ export const BROWSER_MODULE_PROVIDERS: StaticProvider[] = [`
`80`	`80`	`{`
`81`	`81`	`provide: DomRendererFactory2,`
`82`	`82`	`useClass: DomRendererFactory2,`
`83`		`- deps: [EventManager, DomSharedStylesHost]`
	`83`	`+ deps: [EventManager, DomSharedStylesHost, APP_ID]`
`84`	`84`	`},`
`85`	`85`	`{provide: RendererFactory2, useExisting: DomRendererFactory2},`
`86`	`86`	`{provide: SharedStylesHost, useExisting: DomSharedStylesHost},`