fix(ivy): properly bootstrap components with attribute selectors (#34450)

Fixes #34349

PR Close #34450

packages/core/test/acceptance/bootstrap_spec.ts

@@ -7,16 +7,28 @@
  */
 
 import {Component, NgModule} from '@angular/core';
-import {getComponentDef} from '@angular/core/src/render3/definition';
 import {BrowserModule} from '@angular/platform-browser';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-import {onlyInIvy, withBody} from '@angular/private/testing';
+import {withBody} from '@angular/private/testing';
 
 describe('bootstrap', () => {
-  it('should bootstrap using #id selector', withBody('<div #my-app>', async() => {
+  it('should bootstrap using #id selector',
+     withBody('<div>before|</div><button id="my-app"></button>', async() => {
        try {
-         const ngModuleRef = await platformBrowserDynamic().bootstrapModule(MyAppModule);
-         expect(document.body.textContent).toEqual('works!');
+         const ngModuleRef = await platformBrowserDynamic().bootstrapModule(IdSelectorAppModule);
+         expect(document.body.textContent).toEqual('before|works!');
+         ngModuleRef.destroy();
+       } catch (err) {
+         console.error(err);
+       }
+     }));
+
+  it('should bootstrap using one of selectors from the list',
+     withBody('<div>before|</div><div class="bar"></div>', async() => {
+       try {
+         const ngModuleRef =
+             await platformBrowserDynamic().bootstrapModule(MultipleSelectorsAppModule);
+         expect(document.body.textContent).toEqual('before|works!');
          ngModuleRef.destroy();
        } catch (err) {
          console.error(err);
@@ -28,9 +40,28 @@ describe('bootstrap', () => {
   selector: '#my-app',
   template: 'works!',
 })
-export class MyAppComponent {
+export class IdSelectorAppComponent {
 }
 
-@NgModule({imports: [BrowserModule], declarations: [MyAppComponent], bootstrap: [MyAppComponent]})
-export class MyAppModule {
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [IdSelectorAppComponent],
+  bootstrap: [IdSelectorAppComponent],
+})
+export class IdSelectorAppModule {
 }
+
+@Component({
+  selector: '[foo],span,.bar',
+  template: 'works!',
+})
+export class MultipleSelectorsAppComponent {
+}
+
+@NgModule({
+  imports: [BrowserModule],
+  declarations: [MultipleSelectorsAppComponent],
+  bootstrap: [MultipleSelectorsAppComponent],
+})
+export class MultipleSelectorsAppModule {
+}

packages/core/test/acceptance/component_spec.ts

@@ -340,6 +340,44 @@ describe('component', () => {
     expect(log).toEqual(['CompB:ngDoCheck']);
   });
 
+  it('should preserve simple component selector in a component factory', () => {
+    @Component({selector: '[foo]', template: ''})
+    class AttSelectorCmp {
+    }
+
+    @NgModule({
+      declarations: [AttSelectorCmp],
+      entryComponents: [AttSelectorCmp],
+    })
+    class AppModule {
+    }
+
+    TestBed.configureTestingModule({imports: [AppModule]});
+    const cmpFactoryResolver = TestBed.inject(ComponentFactoryResolver);
+    const cmpFactory = cmpFactoryResolver.resolveComponentFactory(AttSelectorCmp);
+
+    expect(cmpFactory.selector).toBe('[foo]');
+  });
+
+  it('should preserve complex component selector in a component factory', () => {
+    @Component({selector: '[foo],div:not(.bar)', template: ''})
+    class ComplexSelectorCmp {
+    }
+
+    @NgModule({
+      declarations: [ComplexSelectorCmp],
+      entryComponents: [ComplexSelectorCmp],
+    })
+    class AppModule {
+    }
+
+    TestBed.configureTestingModule({imports: [AppModule]});
+    const cmpFactoryResolver = TestBed.inject(ComponentFactoryResolver);
+    const cmpFactory = cmpFactoryResolver.resolveComponentFactory(ComplexSelectorCmp);
+
+    expect(cmpFactory.selector).toBe('[foo],div:not(.bar)');
+  });
+
   describe('should clear host element if provided in ComponentFactory.create', () => {
     function runTestWithRenderer(rendererProviders: any[]) {
       @Component({