fix(ivy): pass ngContentSelectors through to defineComponent() calls (#27867)

Libraries that create components dynamically using component factories,
such as `@angular/upgrade` need to pass blocks of projected content
through to the `ComponentFactory.create()` method. These blocks
are extracted from the content by matching CSS selectors defined in
`<ng-content select="..">` tags found in the component's template.

The Angular compiler collects these CSS selectors when compiling a component's
template, and exposes them via the `ComponentFactory.ngContentSelectors`
property.

This change ensures that this property is filled correctly when the
component factory is created by compiling a component with the Ivy engine.

PR Close #27867

packages/upgrade/test/static/integration/content_projection_spec.ts

@@ -22,82 +22,78 @@ withEachNg1Version(() => {
     beforeEach(() => destroyPlatform());
     afterEach(() => destroyPlatform());
 
-    fixmeIvy('FW-714: ng1 projected content is not being rendered')
-        .it('should instantiate ng2 in ng1 template and project content', async(() => {
+    it('should instantiate ng2 in ng1 template and project content', async(() => {
 
-              // the ng2 component that will be used in ng1 (downgraded)
-              @Component({selector: 'ng2', template: `{{ prop }}(<ng-content></ng-content>)`})
-              class Ng2Component {
-                prop = 'NG2';
-                ngContent = 'ng2-content';
-              }
+         // the ng2 component that will be used in ng1 (downgraded)
+         @Component({selector: 'ng2', template: `{{ prop }}(<ng-content></ng-content>)`})
+         class Ng2Component {
+           prop = 'NG2';
+           ngContent = 'ng2-content';
+         }
 
-              // our upgrade module to host the component to downgrade
-              @NgModule({
-                imports: [BrowserModule, UpgradeModule],
-                declarations: [Ng2Component],
-                entryComponents: [Ng2Component]
-              })
-              class Ng2Module {
-                ngDoBootstrap() {}
-              }
+         // our upgrade module to host the component to downgrade
+         @NgModule({
+           imports: [BrowserModule, UpgradeModule],
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
 
-              // the ng1 app module that will consume the downgraded component
-              const ng1Module = angular
-                                    .module('ng1', [])
-                                    // create an ng1 facade of the ng2 component
-                                    .directive('ng2', downgradeComponent({component: Ng2Component}))
-                                    .run(($rootScope: angular.IRootScopeService) => {
-                                      $rootScope['prop'] = 'NG1';
-                                      $rootScope['ngContent'] = 'ng1-content';
-                                    });
+         // the ng1 app module that will consume the downgraded component
+         const ng1Module = angular
+                               .module('ng1', [])
+                               // create an ng1 facade of the ng2 component
+                               .directive('ng2', downgradeComponent({component: Ng2Component}))
+                               .run(($rootScope: angular.IRootScopeService) => {
+                                 $rootScope['prop'] = 'NG1';
+                                 $rootScope['ngContent'] = 'ng1-content';
+                               });
 
-              const element =
-                  html('<div>{{ \'ng1[\' }}<ng2>~{{ ngContent }}~</ng2>{{ \']\' }}</div>');
+         const element = html('<div>{{ \'ng1[\' }}<ng2>~{{ ngContent }}~</ng2>{{ \']\' }}</div>');
 
-              bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
-                expect(document.body.textContent).toEqual('ng1[NG2(~ng1-content~)]');
-              });
-            }));
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+           expect(document.body.textContent).toEqual('ng1[NG2(~ng1-content~)]');
+         });
+       }));
 
-    fixmeIvy('FW-714: ng1 projected content is not being rendered')
-        .it('should correctly project structural directives', async(() => {
-              @Component({selector: 'ng2', template: 'ng2-{{ itemId }}(<ng-content></ng-content>)'})
-              class Ng2Component {
-                // TODO(issue/24571): remove '!'.
-                @Input() itemId !: string;
-              }
+    it('should correctly project structural directives', async(() => {
+         @Component({selector: 'ng2', template: 'ng2-{{ itemId }}(<ng-content></ng-content>)'})
+         class Ng2Component {
+           // TODO(issue/24571): remove '!'.
+           @Input() itemId !: string;
+         }
 
-              @NgModule({
-                imports: [BrowserModule, UpgradeModule],
-                declarations: [Ng2Component],
-                entryComponents: [Ng2Component]
-              })
-              class Ng2Module {
-                ngDoBootstrap() {}
-              }
+         @NgModule({
+           imports: [BrowserModule, UpgradeModule],
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
 
-              const ng1Module =
-                  angular.module('ng1', [])
-                      .directive('ng2', downgradeComponent({component: Ng2Component}))
-                      .run(($rootScope: angular.IRootScopeService) => {
-                        $rootScope['items'] = [
-                          {id: 'a', subitems: [1, 2, 3]}, {id: 'b', subitems: [4, 5, 6]},
-                          {id: 'c', subitems: [7, 8, 9]}
-                        ];
-                      });
+         const ng1Module = angular.module('ng1', [])
+                               .directive('ng2', downgradeComponent({component: Ng2Component}))
+                               .run(($rootScope: angular.IRootScopeService) => {
+                                 $rootScope['items'] = [
+                                   {id: 'a', subitems: [1, 2, 3]}, {id: 'b', subitems: [4, 5, 6]},
+                                   {id: 'c', subitems: [7, 8, 9]}
+                                 ];
+                               });
 
-              const element = html(`
+         const element = html(`
            <ng2 ng-repeat="item in items" [item-id]="item.id">
              <div ng-repeat="subitem in item.subitems">{{ subitem }}</div>
            </ng2>
          `);
 
-              bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
-                expect(multiTrim(document.body.textContent))
-                    .toBe('ng2-a( 123 )ng2-b( 456 )ng2-c( 789 )');
-              });
-            }));
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
+           expect(multiTrim(document.body.textContent))
+               .toBe('ng2-a( 123 )ng2-b( 456 )ng2-c( 789 )');
+         });
+       }));
 
     it('should instantiate ng1 in ng2 template and project content', async(() => {
 
@@ -145,39 +141,38 @@ withEachNg1Version(() => {
          });
        }));
 
-    fixmeIvy('FW-714: ng1 projected content is not being rendered')
-        .it('should support multi-slot projection', async(() => {
+    it('should support multi-slot projection', async(() => {
 
-              @Component({
-                selector: 'ng2',
-                template: '2a(<ng-content select=".ng1a"></ng-content>)' +
-                    '2b(<ng-content select=".ng1b"></ng-content>)'
-              })
-              class Ng2Component {
-                constructor() {}
-              }
+         @Component({
+           selector: 'ng2',
+           template: '2a(<ng-content select=".ng1a"></ng-content>)' +
+               '2b(<ng-content select=".ng1b"></ng-content>)'
+         })
+         class Ng2Component {
+           constructor() {}
+         }
 
-              @NgModule({
-                declarations: [Ng2Component],
-                entryComponents: [Ng2Component],
-                imports: [BrowserModule, UpgradeModule]
-              })
-              class Ng2Module {
-                ngDoBootstrap() {}
-              }
+         @NgModule({
+           declarations: [Ng2Component],
+           entryComponents: [Ng2Component],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() {}
+         }
 
-              const ng1Module = angular.module('ng1', []).directive(
-                  'ng2', downgradeComponent({component: Ng2Component}));
+         const ng1Module = angular.module('ng1', []).directive(
+             'ng2', downgradeComponent({component: Ng2Component}));
 
-              // The ng-if on one of the projected children is here to make sure
-              // the correct slot is targeted even with structural directives in play.
-              const element = html(
-                  '<ng2><div ng-if="true" class="ng1a">1a</div><div' +
-                  ' class="ng1b">1b</div></ng2>');
+         // The ng-if on one of the projected children is here to make sure
+         // the correct slot is targeted even with structural directives in play.
+         const element = html(
+             '<ng2><div ng-if="true" class="ng1a">1a</div><div' +
+             ' class="ng1b">1b</div></ng2>');
 
-              bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
-                expect(document.body.textContent).toEqual('2a(1a)2b(1b)');
-              });
-            }));
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then((upgrade) => {
+           expect(document.body.textContent).toEqual('2a(1a)2b(1b)');
+         });
+       }));
   });
 });

packages/upgrade/test/static/integration/downgrade_component_spec.ts

@@ -709,7 +709,7 @@ withEachNg1Version(() => {
          });
        }));
 
-    fixmeIvy('FW-714: ng1 projected content is not being rendered')
+    fixmeIvy('FW-873: projected component injector hierarchy not wired up correctly')
         .it('should respect hierarchical dependency injection for ng2', async(() => {
               @Component({selector: 'parent', template: 'parent(<ng-content></ng-content>)'})
               class ParentComponent {

packages/upgrade/test/static/integration/downgrade_module_spec.ts

@@ -952,7 +952,6 @@ withEachNg1Version(() => {
               }));
 
       fixmeIvy('FW-715: ngOnChanges being called a second time unexpectedly')
-          .fixmeIvy('FW-714: ng1 projected content is not being rendered')
           .it('should run the lifecycle hooks in the correct order', async(() => {
                 const logs: string[] = [];
                 let rootScope: angular.IRootScopeService;

packages/upgrade/test/static/integration/examples_spec.ts

@@ -24,70 +24,69 @@ withEachNg1Version(() => {
 
     it('should have AngularJS loaded', () => expect(angular.version.major).toBe(1));
 
-    fixmeIvy('FW-714: ng1 projected content is not being rendered')
-        .it('should verify UpgradeAdapter example', async(() => {
+    it('should verify UpgradeAdapter example', async(() => {
 
-              // This is wrapping (upgrading) an AngularJS component to be used in an Angular
-              // component
-              @Directive({selector: 'ng1'})
-              class Ng1Component extends UpgradeComponent {
-                // TODO(issue/24571): remove '!'.
-                @Input() title !: string;
+         // This is wrapping (upgrading) an AngularJS component to be used in an Angular
+         // component
+         @Directive({selector: 'ng1'})
+         class Ng1Component extends UpgradeComponent {
+           // TODO(issue/24571): remove '!'.
+           @Input() title !: string;
 
-                constructor(elementRef: ElementRef, injector: Injector) {
-                  super('ng1', elementRef, injector);
-                }
-              }
+           constructor(elementRef: ElementRef, injector: Injector) {
+             super('ng1', elementRef, injector);
+           }
+         }
 
-              // This is an Angular component that will be downgraded
-              @Component({
-                selector: 'ng2',
-                template: 'ng2[<ng1 [title]="nameProp">transclude</ng1>](<ng-content></ng-content>)'
-              })
-              class Ng2Component {
-                // TODO(issue/24571): remove '!'.
-                @Input('name') nameProp !: string;
-              }
+         // This is an Angular component that will be downgraded
+         @Component({
+           selector: 'ng2',
+           template: 'ng2[<ng1 [title]="nameProp">transclude</ng1>](<ng-content></ng-content>)'
+         })
+         class Ng2Component {
+           // TODO(issue/24571): remove '!'.
+           @Input('name') nameProp !: string;
+         }
 
-              // This module represents the Angular pieces of the application
-              @NgModule({
-                declarations: [Ng1Component, Ng2Component],
-                entryComponents: [Ng2Component],
-                imports: [BrowserModule, UpgradeModule]
-              })
-              class Ng2Module {
-                ngDoBootstrap() { /* this is a placeholder to stop the bootstrapper from
-                                     complaining */
-                }
-              }
+         // This module represents the Angular pieces of the application
+         @NgModule({
+           declarations: [Ng1Component, Ng2Component],
+           entryComponents: [Ng2Component],
+           imports: [BrowserModule, UpgradeModule]
+         })
+         class Ng2Module {
+           ngDoBootstrap() { /* this is a placeholder to stop the bootstrapper from
+                                complaining */
+           }
+         }
 
-              // This module represents the AngularJS pieces of the application
-              const ng1Module =
-                  angular
-                      .module('myExample', [])
-                      // This is an AngularJS component that will be upgraded
-                      .directive(
-                          'ng1',
-                          () => {
-                            return {
-                              scope: {title: '='},
-                              transclude: true,
-                              template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'
-                            };
-                          })
-                      // This is wrapping (downgrading) an Angular component to be used in
-                      // AngularJS
-                      .directive('ng2', downgradeComponent({component: Ng2Component}));
+         // This module represents the AngularJS pieces of the application
+         const ng1Module =
+             angular
+                 .module('myExample', [])
+                 // This is an AngularJS component that will be upgraded
+                 .directive(
+                     'ng1',
+                     () => {
+                       return {
+                         scope: {title: '='},
+                         transclude: true,
+                         template: 'ng1[Hello {{title}}!](<span ng-transclude></span>)'
+                       };
+                     })
+                 // This is wrapping (downgrading) an Angular component to be used in
+                 // AngularJS
+                 .directive('ng2', downgradeComponent({component: Ng2Component}));
 
-              // This is the (AngularJS) application bootstrap element
-              // Notice that it is actually a downgraded Angular component
-              const element = html('<ng2 name="World">project</ng2>');
+         // This is the (AngularJS) application bootstrap element
+         // Notice that it is actually a downgraded Angular component
+         const element = html('<ng2 name="World">project</ng2>');
 
-              // Let's use a helper function to make this simpler
-              bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
-                expect(multiTrim(element.textContent))
-                    .toBe('ng2[ng1[Hello World!](transclude)](project)');
-              });
-            }));
+         // Let's use a helper function to make this simpler
+         bootstrap(platformBrowserDynamic(), Ng2Module, element, ng1Module).then(upgrade => {
+           expect(multiTrim(element.textContent))
+               .toBe('ng2[ng1[Hello World!](transclude)](project)');
+         });
+       }));
   });
 });