fix(upgrade): allow non-element selectors for downgraded components (#…

…14291)

This affects the dynamic version of `upgrade` and makes it more consistent with
the static version, while removing an artificial limitation.

(This commit backports the fix from 9aafdc7 to 2.4.x.)

modules/@angular/upgrade/src/metadata.ts

@@ -10,7 +10,6 @@ import {DirectiveResolver} from '@angular/compiler';
 import {Directive, Type} from '@angular/core';
 
 const COMPONENT_SELECTOR = /^[\w|-]*$/;
-const SKEWER_CASE = /-(\w)/g;
 const directiveResolver = new DirectiveResolver();
 
 export interface AttrProp {
@@ -33,12 +32,7 @@ export interface ComponentInfo {
 
 export function getComponentInfo(type: Type<any>): ComponentInfo {
   const resolvedMetadata: Directive = directiveResolver.resolve(type);
-  let selector = resolvedMetadata.selector;
-  if (!selector.match(COMPONENT_SELECTOR)) {
-    throw new Error('Only selectors matching element names are supported, got: ' + selector);
-  }
-  selector = selector.replace(
-      SKEWER_CASE, (all: any /** TODO #9100 */, letter: string) => letter.toUpperCase());
+  const selector = resolvedMetadata.selector;
   return {
     type: type,
     selector: selector,

modules/@angular/upgrade/test/metadata_spec.ts

@@ -13,17 +13,12 @@ import {getComponentInfo, parseFields} from '@angular/upgrade/src/metadata';
 export function main() {
   describe('upgrade metadata', () => {
     it('should extract component selector', () => {
-      expect(getComponentInfo(ElementNameComponent).selector).toEqual('elementNameDashed');
+      expect(getComponentInfo(ElementNameComponent).selector).toBe('element-name-dashed');
     });
 
 
     describe('errors', () => {
       it('should throw on missing selector', () => {
-        expect(() => getComponentInfo(AttributeNameComponent))
-            .toThrowError('Only selectors matching element names are supported, got: [attr-name]');
-      });
-
-      it('should throw on non element names', () => {
         expect(() => getComponentInfo(NoAnnotationComponent))
             .toThrowError('No Directive annotation found on NoAnnotationComponent');
       });

modules/@angular/upgrade/test/upgrade_spec.ts

@@ -270,6 +270,25 @@ export function main() {
     });
 
     describe('downgrade ng2 component', () => {
+      it('should allow non-element selectors for downgraded components', async(() => {
+           @Component({selector: '[itWorks]', template: 'It works'})
+           class WorksComponent {
+           }
+
+           @NgModule({declarations: [WorksComponent], imports: [BrowserModule]})
+           class Ng2Module {
+           }
+
+           const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
+           const ng1Module = angular.module('ng1', []);
+           ng1Module.directive('ng2', adapter.downgradeNg2Component(WorksComponent));
+
+           const element = html('<ng2></ng2>');
+           adapter.bootstrap(element, ['ng1']).ready((ref) => {
+             expect(multiTrim(document.body.textContent)).toBe('It works');
+           });
+         }));
+
       it('should bind properties, events', async(() => {
            const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module));
            const ng1Module = angular.module('ng1', []);