fix(@angular-devkit/build-angular): re-add TestBed compileComponents …

…in schematics to support defer block testing

The defer block support introduces a new asynchronous form of the set class metadata Angular function. This form
is needed to allow for providing metadata for dynamically imported deferred components. The asynchronous compileComponents
call within TestBed is now used to initialize this metadata during unit tests. Unit tests that contain defer blocks
must use this call prior to executing a test to allow templates containing defer to properly render. Existing tests that
do not use the new defer block do not require modification unless the defer block is introduced into components used in
the unit test.

packages/schematics/angular/application/files/module-files/src/app/app.component.spec.ts.template

@@ -3,10 +3,16 @@ import { RouterTestingModule } from '@angular/router/testing';<% } %>
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(() => TestBed.configureTestingModule({<% if (routing) { %>
-    imports: [RouterTestingModule],<% } %>
-    declarations: [AppComponent]
-  }));
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({<% if (routing) { %>
+      imports: [
+        RouterTestingModule
+      ],<% } %>
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

packages/schematics/angular/application/files/standalone-files/src/app/app.component.spec.ts.template

@@ -2,9 +2,11 @@ import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(() => TestBed.configureTestingModule({
-    imports: [AppComponent]
-  }));
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);

packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.spec.ts.template

@@ -6,10 +6,12 @@ describe('<%= classify(name) %><%= classify(type) %>', () => {
   let component: <%= classify(name) %><%= classify(type) %>;
   let fixture: ComponentFixture<<%= classify(name) %><%= classify(type) %>>;
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       <%= standalone ? 'imports' : 'declarations' %>: [<%= classify(name) %><%= classify(type) %>]
-    });
+    })
+    .compileComponents();
+
     fixture = TestBed.createComponent(<%= classify(name) %><%= classify(type) %>);
     component = fixture.componentInstance;
     fixture.detectChanges();

packages/schematics/angular/component/index_spec.ts

@@ -55,6 +55,14 @@ describe('Component Schematic', () => {
     appTree = await schematicRunner.runSchematic('application', appOptions, appTree);
   });
 
+  it('should contain a TestBed compileComponents call', async () => {
+    const options = { ...defaultOptions };
+
+    const tree = await schematicRunner.runSchematic('component', options, appTree);
+    const tsContent = tree.readContent('/projects/bar/src/app/foo/foo.component.spec.ts');
+    expect(tsContent).toContain('compileComponents()');
+  });
+
   it('should set change detection to OnPush', async () => {
     const options = { ...defaultOptions, changeDetection: 'OnPush' };