use standalone for components

Author: markgoho

apps/example-app/src/app/app.module.ts

@@ -28,8 +28,8 @@ function reducerItems() {
 }
 
 @NgModule({
-  declarations: [
-    AppComponent,
+  declarations: [AppComponent],
+  imports: [
     SingleComponent,
     NestedButtonComponent,
     NestedValueComponent,
@@ -43,8 +43,6 @@ function reducerItems() {
     RootComponent,
     DetailComponent,
     HiddenDetailComponent,
-  ],
-  imports: [
     BrowserModule,
     ReactiveFormsModule,
     BrowserAnimationsModule,

apps/example-app/src/app/examples/00-single-component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-fixture',
+  standalone: true,
   template: `
     <button (click)="value = value - 1">Decrement</button>
     <span data-testid="value">{{ value }}</span>

apps/example-app/src/app/examples/01-nested-component.spec.ts

@@ -1,13 +1,11 @@
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
-import { NestedButtonComponent, NestedValueComponent, NestedContainerComponent } from './01-nested-component';
+import { NestedContainerComponent } from './01-nested-component';
 
 test('renders the current value and can increment and decrement', async () => {
   const user = userEvent.setup();
-  await render(NestedContainerComponent, {
-    declarations: [NestedButtonComponent, NestedValueComponent],
-  });
+  await render(NestedContainerComponent);
 
   const incrementControl = screen.getByRole('button', { name: /increment/i });
   const decrementControl = screen.getByRole('button', { name: /decrement/i });

apps/example-app/src/app/examples/01-nested-component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
+  standalone: true,
   selector: 'app-button',
   template: ' <button (click)="raise.emit()">{{ name }}</button> ',
 })
@@ -10,6 +11,7 @@ export class NestedButtonComponent {
 }
 
 @Component({
+  standalone: true,
   selector: 'app-value',
   template: ' <span data-testid="value">{{ value }}</span> ',
 })
@@ -18,12 +20,14 @@ export class NestedValueComponent {
 }
 
 @Component({
+  standalone: true,
   selector: 'app-fixture',
   template: `
-    <app-button (raise)="value = value - 1" name="Decrement"></app-button>
-    <app-value [value]="value"></app-value>
-    <app-button (raise)="value = value + 1" name="Increment"></app-button>
+    <app-button (raise)="value = value - 1" name="Decrement" />
+    <app-value [value]="value" />
+    <app-button (raise)="value = value + 1" name="Increment" />
   `,
+  imports: [NestedButtonComponent, NestedValueComponent],
 })
 export class NestedContainerComponent {
   value = 0;

apps/example-app/src/app/examples/02-input-output.spec.ts

@@ -38,8 +38,8 @@ test('is possible to set input and listen for output with the template syntax',
   const user = userEvent.setup();
   const sendSpy = jest.fn();
 
-  await render('<app-fixture [value]="47" (sendValue)="sendValue($event)" (clicked)="clicked()"></app-fixture>', {
-    declarations: [InputOutputComponent],
+  await render('<app-fixture [value]="47" (sendValue)="sendValue($event)" />', {
+    imports: [InputOutputComponent],
     componentProperties: {
       sendValue: sendSpy,
     },

apps/example-app/src/app/examples/02-input-output.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
+  standalone: true,
   selector: 'app-fixture',
   template: `
     <button (click)="value = value - 1">Decrement</button>

apps/example-app/src/app/examples/03-forms.ts

@@ -1,8 +1,11 @@
+import { NgForOf, NgIf } from '@angular/common';
 import { Component } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
+  standalone: true,
   selector: 'app-fixture',
+  imports: [ReactiveFormsModule, NgForOf, NgIf],
   template: `
     <form [formGroup]="form" name="form">
       <div>

apps/example-app/src/app/examples/04-forms-with-material.spec.ts

@@ -1,15 +1,12 @@
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 
-import { MaterialModule } from '../material.module';
 import { MaterialFormsComponent } from './04-forms-with-material';
 
 test('is possible to fill in a form and verify error messages (with the help of jest-dom https://testing-library.com/docs/ecosystem-jest-dom)', async () => {
   const user = userEvent.setup();
 
-  const { fixture } = await render(MaterialFormsComponent, {
-    imports: [MaterialModule],
-  });
+  const { fixture } = await render(MaterialFormsComponent);
 
   const nameControl = screen.getByLabelText(/name/i);
   const scoreControl = screen.getByRole('spinbutton', { name: /score/i });
@@ -69,9 +66,7 @@ test('is possible to fill in a form and verify error messages (with the help of
 test('set and show pre-set form values', async () => {
   const user = userEvent.setup();
 
-  const { fixture, detectChanges } = await render(MaterialFormsComponent, {
-    imports: [MaterialModule],
-  });
+  const { fixture, detectChanges } = await render(MaterialFormsComponent);
 
   fixture.componentInstance.form.setValue({
     name: 'Max',

apps/example-app/src/app/examples/04-forms-with-material.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MaterialModule } from '../material.module';
+import { NgForOf, NgIf } from '@angular/common';
 
 @Component({
+  standalone: true,
+  imports: [MaterialModule, ReactiveFormsModule, NgForOf, NgIf],
   selector: 'app-fixture',
   template: `
     <form [formGroup]="form" name="form">

apps/example-app/src/app/examples/05-component-provider.ts

@@ -20,6 +20,7 @@ export class CounterService {
 }
 
 @Component({
+  standalone: true,
   selector: 'app-fixture',
   template: `
     <button (click)="counter.decrement()">Decrement</button>

apps/example-app/src/app/examples/06-with-ngrx-store.ts

@@ -1,3 +1,4 @@
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { createSelector, Store, createAction, createReducer, on, select } from '@ngrx/store';
 
@@ -15,6 +16,8 @@ const selectValue = createSelector(
 );
 
 @Component({
+  standalone: true,
+  imports: [AsyncPipe],
   selector: 'app-fixture',
   template: `
     <button (click)="decrement()">Decrement</button>

apps/example-app/src/app/examples/07-with-ngrx-mock-store.ts

@@ -1,3 +1,4 @@
+import { AsyncPipe, NgForOf } from '@angular/common';
 import { Component } from '@angular/core';
 import { createSelector, Store, select } from '@ngrx/store';
 
@@ -7,6 +8,8 @@ export const selectItems = createSelector(
 );
 
 @Component({
+  standalone: true,
+  imports: [AsyncPipe, NgForOf],
   selector: 'app-fixture',
   template: `
     <ul>

apps/example-app/src/app/examples/08-directive.spec.ts

@@ -7,7 +7,7 @@ test('it is possible to test directives', async () => {
   const user = userEvent.setup();
 
   await render('<div appSpoiler data-testid="dir"></div>', {
-    declarations: [SpoilerDirective],
+    imports: [SpoilerDirective],
   });
 
   const directive = screen.getByTestId('dir');
@@ -30,7 +30,7 @@ test('it is possible to test directives with props', async () => {
   const visible = 'There is nothing to see here ...';
 
   await render('<div appSpoiler [hidden]="hidden" [visible]="visible"></div>', {
-    declarations: [SpoilerDirective],
+    imports: [SpoilerDirective],
     componentProperties: {
       hidden,
       visible,
@@ -55,7 +55,7 @@ test('it is possible to test directives with props in template', async () => {
   const visible = 'There is nothing to see here ...';
 
   await render(`<div appSpoiler hidden="${hidden}" visible="${visible}"></div>`, {
-    declarations: [SpoilerDirective],
+    imports: [SpoilerDirective],
   });
 
   expect(screen.queryByText(visible)).not.toBeInTheDocument();

apps/example-app/src/app/examples/08-directive.ts

@@ -1,6 +1,7 @@
 import { Directive, HostListener, ElementRef, Input, OnInit } from '@angular/core';
 
 @Directive({
+  standalone: true,
   selector: '[appSpoiler]',
 })
 export class SpoilerDirective implements OnInit {

apps/example-app/src/app/examples/09-router.spec.ts

@@ -6,7 +6,6 @@ import { DetailComponent, RootComponent, HiddenDetailComponent } from './09-rout
 test('it can navigate to routes', async () => {
   const user = userEvent.setup();
   await render(RootComponent, {
-    declarations: [DetailComponent, HiddenDetailComponent],
     routes: [
       {
         path: '',
@@ -45,7 +44,6 @@ test('it can navigate to routes', async () => {
 
 test('it can navigate to routes - workaround', async () => {
   const { navigate } = await render(RootComponent, {
-    declarations: [DetailComponent, HiddenDetailComponent],
     routes: [
       {
         path: '',
@@ -84,7 +82,6 @@ test('it can navigate to routes - workaround', async () => {
 test('it can navigate to routes with a base path', async () => {
   const basePath = 'base';
   const { navigate } = await render(RootComponent, {
-    declarations: [DetailComponent, HiddenDetailComponent],
     routes: [
       {
         path: basePath,

apps/example-app/src/app/examples/09-router.ts

@@ -1,28 +1,33 @@
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';
 import { map } from 'rxjs/operators';
 
 @Component({
+  standalone: true,
+  imports: [RouterLink, RouterOutlet],
   selector: 'app-main',
   template: `
-    <a [routerLink]="'./detail/one'">Load one</a> | <a [routerLink]="'./detail/two'">Load two</a> |
-    <a [routerLink]="'./detail/three'">Load three</a> |
+    <a routerLink="./detail/one">Load one</a> | <a routerLink="./detail/two">Load two</a> |
+    <a routerLink="./detail/three">Load three</a> |
 
     <hr />
 
-    <router-outlet></router-outlet>
+    <router-outlet />
   `,
 })
 export class RootComponent {}
 
 @Component({
+  standalone: true,
+  imports: [RouterLink, AsyncPipe],
   selector: 'app-detail',
   template: `
     <h2>Detail {{ id | async }}</h2>
 
     <p>{{ text | async }} {{ subtext | async }}</p>
 
-    <a [routerLink]="'../..'">Back to parent</a>
+    <a routerLink="../..">Back to parent</a>
     <a routerLink="/hidden-detail">hidden x</a>
   `,
 })
@@ -34,6 +39,7 @@ export class DetailComponent {
 }
 
 @Component({
+  standalone: true,
   selector: 'app-detail-hidden',
   template: ' You found the treasure! ',
 })

apps/example-app/src/app/examples/10-inject-token-dependency.ts

@@ -3,6 +3,7 @@ import { Component, InjectionToken, Inject } from '@angular/core';
 export const DATA = new InjectionToken<{ text: string }>('Components Data');
 
 @Component({
+  standalone: true,
   selector: 'app-fixture',
   template: ' {{ data.text }} ',
 })

apps/example-app/src/app/examples/11-ng-content.spec.ts

@@ -4,9 +4,9 @@ import { CellComponent } from './11-ng-content';
 
 test('it is possible to test ng-content without selector', async () => {
   const projection = 'it should be showed into a p element!';
-  
+
   await render(`<app-fixture data-testid="one-cell-with-ng-content">${projection}</app-fixture>`, {
-    declarations: [CellComponent]
+    imports: [CellComponent],
   });
 
   expect(screen.getByText(projection)).toBeInTheDocument();

apps/example-app/src/app/examples/11-ng-content.ts

@@ -1,6 +1,7 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
+  standalone: true,
   selector: 'app-fixture',
   template: `
     <p>

apps/example-app/src/app/examples/12-service-component.ts

@@ -1,3 +1,4 @@
+import { AsyncPipe, NgForOf } from '@angular/common';
 import { Component, Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 
@@ -16,6 +17,8 @@ export class CustomersService {
 }
 
 @Component({
+  standalone: true,
+  imports: [AsyncPipe, NgForOf],
   selector: 'app-fixture',
   template: `
     <ul>

apps/example-app/src/app/examples/13-scrolling.component.spec.ts

@@ -1,12 +1,9 @@
 import { render, screen, waitForElementToBeRemoved } from '@testing-library/angular';
 
 import { CdkVirtualScrollOverviewExampleComponent } from './13-scrolling.component';
-import { ScrollingModule } from '@angular/cdk/scrolling';
 
 test('should scroll to load more items', async () => {
-  await render(CdkVirtualScrollOverviewExampleComponent, {
-    imports: [ScrollingModule],
-  });
+  await render(CdkVirtualScrollOverviewExampleComponent);
 
   const item0 = await screen.findByText(/Item #0/i);
   expect(item0).toBeVisible();

apps/example-app/src/app/examples/13-scrolling.component.ts

@@ -1,6 +1,9 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 
 @Component({
+  standalone: true,
+  imports: [ScrollingModule],
   selector: 'app-cdk-virtual-scroll-overview-example',
   template: `
     <cdk-virtual-scroll-viewport itemSize="50" class="example-viewport" data-testid="scroll-viewport">

apps/example-app/src/app/examples/14-async-component.ts

@@ -1,8 +1,11 @@
+import { AsyncPipe, NgIf } from '@angular/common';
 import { Component, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 import { delay, filter, mapTo } from 'rxjs/operators';
 
 @Component({
+  standalone: true,
+  imports: [AsyncPipe, NgIf],
   selector: 'app-fixture',
   template: `
     <button (click)="load()">Load</button>