build: convert e2e app to standalone

Converts the e2e app to standalone APIs to reduce the amout of code we need to maintain.

.github/CODEOWNERS

@@ -243,34 +243,12 @@
 
 # E2E app
 /src/e2e-app/*                                              @andrewseguin
-/src/e2e-app/block-scroll-strategy/**                       @andrewseguin @crisbeto
-/src/e2e-app/button-toggle/**                               @andrewseguin
-/src/e2e-app/card/**                                        @andrewseguin
-/src/e2e-app/component-harness/**                           @mmalerba
-/src/e2e-app/e2e-app/**                                     @andrewseguin
-/src/e2e-app/example-viewer/**                              @andrewseguin
-/src/e2e-app/expansion/**                                   @andrewseguin
-/src/e2e-app/grid-list/**                                   @andrewseguin
-/src/e2e-app/icon/**                                        @andrewseguin
-/src/e2e-app/list/**                                        @andrewseguin
-/src/e2e-app/button/**                                      @andrewseguin
-/src/e2e-app/checkbox/**                                    @mmalerba
-/src/e2e-app/dialog/**                                      @devversion
-/src/e2e-app/input/**                                       @devversion
-/src/e2e-app/menu/**                                        @crisbeto
-/src/e2e-app/progress-bar/**                                @crisbeto
-/src/e2e-app/progress-spinner/**                            @mmalerba
-/src/e2e-app/radio/**                                       @mmalerba
-/src/e2e-app/slide-toggle/**                                @crisbeto
-/src/e2e-app/slider/**                                      @andrewseguin
-/src/e2e-app/table/**                                       @andrewseguin
-/src/e2e-app/tabs/**                                        @crisbeto
-/src/e2e-app/select/**                                      @crisbeto
-/src/e2e-app/sidenav/**                                     @mmalerba
-/src/e2e-app/stepper/**                                     @mmalerba
-/src/e2e-app/test-util/**                                   @andrewseguin
-/src/e2e-app/toolbar/**                                     @devversion
-/src/e2e-app/virtual-scroll/**                              @mmalerba
+/src/e2e-app/components/home.ts                             @andrewseguin
+/src/e2e-app/components/block-scroll-strategy/**            @andrewseguin @crisbeto
+/src/e2e-app/components/component-harness-e2e.ts            @mmalerba
+/src/e2e-app/components/e2e-app/**                          @andrewseguin
+/src/e2e-app/components/slider-e2e.ts                       @andrewseguin
+/src/e2e-app/components/virtual-scroll/**                   @mmalerba
 
 # Universal app
 /src/universal-app/**                                       @devversion

src/e2e-app/components/block-scroll-strategy/block-scroll-strategy-e2e.ts

@@ -0,0 +1,14 @@
+import {Component, inject} from '@angular/core';
+import {Overlay} from '@angular/cdk/overlay';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+
+@Component({
+  selector: 'block-scroll-strategy-e2e',
+  templateUrl: 'block-scroll-strategy-e2e.html',
+  styleUrls: ['block-scroll-strategy-e2e.css'],
+  standalone: true,
+  imports: [ScrollingModule],
+})
+export class BlockScrollStrategyE2E {
+  scrollStrategy = inject(Overlay).scrollStrategies.block();
+}

src/e2e-app/component-harness/component-harness-e2e.ts → src/e2e-app/components/component-harness-e2e.ts

@@ -1,9 +1,12 @@
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {TestComponentsModule} from '@angular/cdk/testing/tests';
 
 @Component({
   selector: 'component-harness-e2e',
   template: `<test-main></test-main>`,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [TestComponentsModule],
 })
 export class ComponentHarnessE2e {}

src/e2e-app/e2e-app/e2e-app-layout.html → src/e2e-app/components/e2e-app/e2e-app.html

@@ -5,5 +5,5 @@
     <a mat-list-item *ngFor="let link of navLinks" [routerLink]="[link.path]">{{link.title}}</a>
   </mat-nav-list>
 
-  <ng-content></ng-content>
+  <router-outlet></router-outlet>
 </main>

src/e2e-app/e2e-app/e2e-app-layout.ts → src/e2e-app/components/e2e-app/e2e-app.ts

@@ -1,14 +1,16 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-
-@Component({selector: 'home', template: `<p>e2e website!</p>`})
-export class Home {}
+import {NgFor, NgIf} from '@angular/common';
+import {MatListModule} from '@angular/material/list';
+import {RouterLink, RouterOutlet} from '@angular/router';
 
 @Component({
-  selector: 'e2e-app-layout',
-  templateUrl: 'e2e-app-layout.html',
+  selector: 'e2e-app',
+  templateUrl: 'e2e-app.html',
   encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [MatListModule, NgIf, NgFor, RouterLink, RouterOutlet],
 })
-export class E2eAppLayout {
+export class E2eApp {
   showLinks = false;
 
   navLinks = [

src/e2e-app/components/home.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'home',
+  template: `<p>Welcome to the e2e tests app</p>`,
+  standalone: true,
+})
+export class Home {}

src/e2e-app/slider/slider-e2e.ts → src/e2e-app/components/slider-e2e.ts

@@ -7,6 +7,7 @@
  */
 
 import {Component} from '@angular/core';
+import {MatSliderModule} from '@angular/material/slider';
 
 @Component({
   selector: 'slider-e2e',
@@ -25,5 +26,7 @@ import {Component} from '@angular/core';
     </mat-slider>
     `,
   styles: ['.mat-mdc-slider { width: 148px; }'],
+  standalone: true,
+  imports: [MatSliderModule],
 })
 export class SliderE2e {}

src/e2e-app/virtual-scroll/virtual-scroll-e2e.ts → src/e2e-app/components/virtual-scroll/virtual-scroll-e2e.ts

@@ -1,11 +1,15 @@
 import {Component} from '@angular/core';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {ScrollingModule as ExperimentalScrollingModule} from '@angular/cdk-experimental/scrolling';
 
 const itemSizeSample = [100, 25, 50, 50, 100, 200, 75, 100, 50, 250];
 
 @Component({
   selector: 'virtual-scroll-e2e',
   templateUrl: 'virtual-scroll-e2e.html',
   styleUrls: ['virtual-scroll-e2e.css'],
+  standalone: true,
+  imports: [ScrollingModule, ExperimentalScrollingModule],
 })
 export class VirtualScrollE2E {
   uniformItems = Array(1000).fill(50);

src/e2e-app/index.html

@@ -6,14 +6,10 @@
   <title>Angular Material</title>
   <base href="/">
 
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="theme.css" rel="stylesheet">
-
-  <!-- FontAwesome for mat-icon demo. -->
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 </head>
 <body>
   <e2e-app>Loading...</e2e-app>

src/e2e-app/main.ts

@@ -1,8 +1,27 @@
 import {enableProdMode} from '@angular/core';
-import {platformBrowser} from '@angular/platform-browser';
+import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser';
+import {provideNoopAnimations} from '@angular/platform-browser/animations';
+import {provideRouter} from '@angular/router';
 
-import {MainModule} from './main-module';
+import {E2eApp} from './components/e2e-app/e2e-app';
+import {Home} from './components/home';
+import {BlockScrollStrategyE2E} from './components/block-scroll-strategy/block-scroll-strategy-e2e';
+import {ComponentHarnessE2e} from './components/component-harness-e2e';
+import {SliderE2e} from './components/slider-e2e';
+import {VirtualScrollE2E} from './components/virtual-scroll/virtual-scroll-e2e';
 
 enableProdMode();
 
-platformBrowser().bootstrapModule(MainModule);
+bootstrapApplication(E2eApp, {
+  providers: [
+    provideNoopAnimations(),
+    provideProtractorTestingSupport(),
+    provideRouter([
+      {path: '', component: Home},
+      {path: 'block-scroll-strategy', component: BlockScrollStrategyE2E},
+      {path: 'component-harness', component: ComponentHarnessE2e},
+      {path: 'slider', component: SliderE2e},
+      {path: 'virtual-scroll', component: VirtualScrollE2E},
+    ]),
+  ],
+});