Components converted to standalone

Author: ade-dev

angular.json

@@ -5,22 +5,20 @@
   "projects": {
     "angular-form-input-cross-validator": {
       "projectType": "application",
-      "schematics": {
-        "@schematics/angular:application": {
-          "strict": true
-        }
-      },
+      "schematics": {},
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
             "outputPath": "dist/angular-form-input-cross-validator",
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
@@ -30,9 +28,7 @@
               "src/styles.css"
             ],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
             "namedChunks": true
@@ -49,9 +45,6 @@
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",

src/app/app.component.html

@@ -1,4 +1,4 @@
-<h1 class="content" data-cy="pageHeading">{{title}}</h1>
+<h1 class="content" data-cy="pageHeading">{{pageHeading}}</h1>
 
 <nav>
   <a id="reactiveForm" routerLink="/reactive-form" routerLinkActive="active">Reactive form</a>

src/app/app.component.spec.ts

@@ -1,72 +1,55 @@
-import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing';
-import { ActivatedRoute } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
-import { RouterLinkStubDirective } from '../tests/router-link-directive-stub';
+import { TestBed, waitForAsync, fakeAsync, tick } from '@angular/core/testing';
+import { Router, RouterLink, provideRouter } from '@angular/router';
+import { RouterTestingHarness } from '@angular/router/testing';
 import { AppComponent } from './app.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
-
+import { appConfig } from './app.config';
 
 describe('AppComponent', () => {
-  let route: ActivatedRoute;
   let appComponent: AppComponent;
-  let app: ComponentFixture<AppComponent>;
-  let routerLinks: RouterLinkStubDirective[];
+  let harness: RouterTestingHarness;
 
   beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent,
-        RouterLinkStubDirective
-      ],
-      schemas: [NO_ERRORS_SCHEMA],
-      providers:
-        [
-          {
-            provide: ActivatedRoute,
-            useValue: {
-              snapshot: { data: { title: 'Angular - Reactive form input value cross-validation' } }
-            }
-          }
-        ]
-    }).compileComponents();
-
-    route = TestBed.inject(ActivatedRoute);
-
+    TestBed.configureTestingModule(Object.assign({}, appConfig, {
+      imports: [AppComponent],
+      providers: [
+        provideRouter([{ path: '**', component: AppComponent }])
+      ]
+    }))
+      .compileComponents()
+      .then(async () => {
+        harness = await RouterTestingHarness.create();
+        appComponent = await harness.navigateByUrl('/', AppComponent);
+        harness.detectChanges();
+      });
   }));
 
-  beforeEach(() => {
-    app = TestBed.createComponent(AppComponent);
-    appComponent = app.componentInstance;
-    appComponent.title = route.snapshot.data['title'];
-    app.detectChanges();
-
-    // Find DebugElements with an attached RouterLinkStubDirective
-    const linkElms = app.debugElement.queryAll(By.directive(RouterLinkStubDirective));
-
-    // Using each DebugElement's injector
-    routerLinks = linkElms.map(el => el.injector.get(RouterLinkStubDirective));
+  it('should create an instance of the app', () => {
+    expect(appComponent).toBeInstanceOf(AppComponent);
   });
 
-  it('Should create the app', () => {
-    expect(appComponent).toBeTruthy();
+  it('should get RouterLinks from template', () => {
+    const linkItems = harness.routeNativeElement?.querySelectorAll('a') as unknown as HTMLAnchorElement[];
+    expect(linkItems.length).toBe(2);
+    expect(linkItems[0].getAttribute('routerLink')).toBe('/reactive-form');
+    expect(linkItems[1].getAttribute('routerLink')).toBe('/template-driven-form');
   });
 
-  it('can get RouterLinks from template', () => {
-    expect(routerLinks.length).toBe(2);
-    expect(routerLinks[0].linkParams).toBe('/reactive-form');
-    expect(routerLinks[1].linkParams).toBe('/template-driven-form');
-  });
+  it('should activate RouterLinks', fakeAsync(() => {
+    const linkElms = harness.routeDebugElement?.queryAll(By.directive(RouterLink));
+    linkElms![0].triggerEventHandler('click', { button: 0, });
+    tick();
+    expect(TestBed.inject(Router).url).toEqual('/reactive-form');
 
-  it("Should have 'route.snapshot.data.title' as title", () => {
-    expect(appComponent.title).toEqual('Angular - Reactive form input value cross-validation');
-  });
+    linkElms![1].triggerEventHandler('click', { button: 0, });
+    tick();
+    expect(TestBed.inject(Router).url).toEqual('/template-driven-form');
+  }));
 
-  it('Should render title', () => {
-    const compiled = app.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Angular - Reactive form input value cross-validation');
+  it('should render correct page heading', () => {
+    appComponent.pageHeading = 'Angular - Reactive form input value cross-validation';
+    harness.detectChanges();
+    const heading = harness.routeNativeElement?.querySelector('h1');
+    expect(heading?.textContent).toContain('Angular - Reactive form input value cross-validation');
   });
-});
+});

src/app/app.component.ts

@@ -1,10 +1,12 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
+import { Router, NavigationEnd, ActivatedRoute, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, RouterLink, RouterLinkActive],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
@@ -15,7 +17,7 @@ export class AppComponent implements OnInit, OnDestroy {
 
   }
 
-  title = 'Angular - Form input value cross validator';
+  pageHeading = 'Angular - Form input value cross validator';
   routeSubscription!: Subscription;
 
   setTitle() {
@@ -27,7 +29,7 @@ export class AppComponent implements OnInit, OnDestroy {
       while (route && route.firstChild) {
         route = route.firstChild;
       }
-      route?.snapshot.data['title'] ? this.title = route.snapshot.data['title'] : '';
+      route?.snapshot.data['title'] ? this.pageHeading = route.snapshot.data['title'] : '';
     });
   }
 

src/app/app.config.ts

@@ -0,0 +1,9 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        provideRouter(routes)
+    ]
+};

src/app/app.module.ts

@@ -1,9 +1,8 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes } from '@angular/router';
 import { ReactiveFormComponent } from './reactive-form/reactive-form.component';
 import { TemplateDrivenFormComponent } from './template-driven-form/template-driven-form.component';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     path: 'reactive-form', component: ReactiveFormComponent,
     data: { title: 'Angular - Reactive form input value cross-validation' }
@@ -14,10 +13,4 @@ const routes: Routes = [
   },
   { path: '**', redirectTo: '/reactive-form', pathMatch: 'full' },
   { path: '', redirectTo: '/reactive-form', pathMatch: 'full' },
-];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, { initialNavigation: 'enabledBlocking' })],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }
+];

src/app/app-routing.module.ts renamed to src/app/app.routes.ts

@@ -12,6 +12,7 @@ export function compareInputValidator(crossFields: Array<string>): ValidatorFn {
 }
 @Directive({
   selector: '[appCompareInputValidate]',
+  standalone: true,
   providers: [{ provide: NG_VALIDATORS, useExisting: CompareInputValidatorDirective, multi: true }]
 })
 export class CompareInputValidatorDirective {

src/app/compare-input-validator.directive.ts

@@ -3,18 +3,14 @@ import { FormsModule, ReactiveFormsModule, FormBuilder } from '@angular/forms';
 import { ReactiveFormComponent } from './reactive-form.component';
 import { UserR, mockValidRuser, mockInvalidRuser } from '../user';
 
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-
 describe('ReactiveForm', () => {
   let component: ReactiveFormComponent;
   let app: ComponentFixture<ReactiveFormComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ReactiveFormComponent],
       providers: [FormBuilder],
-      imports: [FormsModule, ReactiveFormsModule],
-      schemas: [NO_ERRORS_SCHEMA]
+      imports: [FormsModule, ReactiveFormsModule, ReactiveFormComponent]
     })
       .compileComponents();
 

src/app/package.json

@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 import { compareInputValidator } from '../compare-input-validator.directive';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-reactive-form',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
   templateUrl: './reactive-form.component.html',
   styleUrls: ['./reactive-form.component.css']
 })

src/app/reactive-form/reactive-form.component.spec.ts

@@ -4,17 +4,13 @@ import { TemplateDrivenFormComponent } from './template-driven-form.component';
 
 import { FormsModule } from '@angular/forms';
 
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-
 describe('TemplateDrivenFormComponent', () => {
   let component: TemplateDrivenFormComponent;
   let app: ComponentFixture<TemplateDrivenFormComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [FormsModule],
-      declarations: [TemplateDrivenFormComponent],
-      schemas: [NO_ERRORS_SCHEMA]
+      imports: [FormsModule, TemplateDrivenFormComponent]
     })
       .compileComponents();
   }));

src/app/reactive-form/reactive-form.component.ts

@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
-import { NgForm } from '@angular/forms';
+import { NgForm, FormsModule } from '@angular/forms';
 import { User } from '../user';
+import { CommonModule } from '@angular/common';
+import { CompareInputValidatorDirective } from '../compare-input-validator.directive';
 
 @Component({
   selector: 'app-template-driven-form',
+  standalone: true,
+  imports: [CommonModule, FormsModule, CompareInputValidatorDirective],
   templateUrl: './template-driven-form.component.html',
   styleUrls: ['./template-driven-form.component.css']
 })

src/app/template-driven-form/template-driven-form.component.spec.ts

@@ -1,12 +1,6 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

src/app/template-driven-form/template-driven-form.component.ts

@@ -12,7 +12,7 @@ app-root {
 
 .main-container {
     background-color: #f7f7f7;
-    width: calc(100%-48px);
+    width: calc(100% - 48px);
     padding: 24px;
     color: #111;
     font-weight: 400;
@@ -92,7 +92,7 @@ input {
 }
 
 .alert {
-    width: calc(100%-20px);
+    width: calc(100% - 20px);
     padding: 0 10px;
     margin-bottom: 20px;
     border: 1px solid transparent;