fix(animations): properly cache renderer and namespace triggers (#14703)

- Don’t use the animation renderer if a component
  used style encapsulation but no animations.
- The `AnimationRenderer` should be cached in the same
  lifecycle as its delegate.
- Trigger names need to be namespaced per component type.

modules/@angular/core/src/render/api.ts

@@ -123,7 +123,7 @@ export interface RendererTypeV2 {
   id: string;
   encapsulation: ViewEncapsulation;
   styles: (string|any[])[];
-  data: {[kind: string]: any[]};
+  data: {[kind: string]: any};
 }
 
 /**
@@ -137,6 +137,12 @@ export abstract class RendererFactoryV2 {
  * @experimental
  */
 export abstract class RendererV2 {
+  /**
+   * This field can be used to store arbitrary data on this renderer instance.
+   * This is useful for renderers that delegate to other renderers.
+   */
+  abstract get data(): {[key: string]: any};
+
   abstract destroy(): void;
   abstract createElement(name: string, namespace?: string): any;
   abstract createComment(value: string): any;

modules/@angular/core/src/view/services.ts

@@ -427,6 +427,8 @@ class DebugRendererFactoryV2 implements RendererFactoryV2 {
 class DebugRendererV2 implements RendererV2 {
   constructor(private delegate: RendererV2) {}
 
+  get data() { return this.delegate.data; }
+
   destroyNode(node: any) {
     removeDebugNodeFromIndex(getDebugNode(node));
     if (this.delegate.destroyNode) {

modules/@angular/core/test/animation/animation_integration_next_spec.ts

@@ -79,6 +79,22 @@ function declareTests({useJit}: {useJit: boolean}) {
         ]);
       });
 
+      it('should not throw an error if a trigger with the same name exists in separate components',
+         () => {
+           @Component({selector: 'cmp1', template: '...', animations: [trigger('trig', [])]})
+           class Cmp1 {
+           }
+
+           @Component({selector: 'cmp2', template: '...', animations: [trigger('trig', [])]})
+           class Cmp2 {
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp1, Cmp2]});
+           const cmp1 = TestBed.createComponent(Cmp1);
+           const cmp2 = TestBed.createComponent(Cmp2);
+         });
+
+
       it('should trigger a state change animation from void => state on the component host element',
          () => {
            @Component({