diff --git a/modules/@angular/upgrade/src/upgrade_adapter.ts b/modules/@angular/upgrade/src/upgrade_adapter.ts index 14566492b2..0126d0f068 100644 --- a/modules/@angular/upgrade/src/upgrade_adapter.ts +++ b/modules/@angular/upgrade/src/upgrade_adapter.ts @@ -401,9 +401,12 @@ export class UpgradeAdapter { ._bootstrapModuleWithZone( DynamicNgUpgradeModule, undefined, ngZone, (componentFactories: ComponentFactory[]) => { - componentFactories.forEach((componentFactory) => { - componentFactoryRefMap[getComponentInfo(componentFactory.componentType) - .selector] = componentFactory; + componentFactories.forEach((componentFactory: ComponentFactory) => { + var type: Type = componentFactory.componentType; + if (this.upgradedComponents.indexOf(type) !== -1) { + componentFactoryRefMap[getComponentInfo(type).selector] = + componentFactory; + } }); }) .then((ref: NgModuleRef) => { diff --git a/modules/@angular/upgrade/test/upgrade_spec.ts b/modules/@angular/upgrade/test/upgrade_spec.ts index 91cdf7706f..8aaf51a6fd 100644 --- a/modules/@angular/upgrade/test/upgrade_spec.ts +++ b/modules/@angular/upgrade/test/upgrade_spec.ts @@ -964,6 +964,31 @@ export function main() { })); }); + it('should allow attribute selectors for components in ng2', async(() => { + const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => MyNg2Module)); + var ng1Module = angular.module('myExample', []); + + @Component({selector: '[works]', template: 'works!'}) + class WorksComponent { + } + + @Component({selector: 'root-component', template: 'It
'}) + class RootComponent { + } + + @NgModule({imports: [BrowserModule], declarations: [RootComponent, WorksComponent]}) + class MyNg2Module { + } + + ng1Module.directive('rootComponent', adapter.downgradeNg2Component(RootComponent)); + + document.body.innerHTML = ''; + adapter.bootstrap(document.body.firstElementChild, ['myExample']).ready((ref) => { + expect(multiTrim(document.body.textContent)).toEqual('It works!'); + ref.dispose(); + }); + })); + describe('examples', () => { it('should verify UpgradeAdapter example', async(() => { const adapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => Ng2Module)); @@ -994,7 +1019,7 @@ export function main() { document.body.innerHTML = 'project'; - adapter.bootstrap(document.body, ['myExample']).ready((ref) => { + adapter.bootstrap(document.body.firstElementChild, ['myExample']).ready((ref) => { expect(multiTrim(document.body.textContent)) .toEqual('ng2[ng1[Hello World!](transclude)](project)'); ref.dispose();