🎉 feat: migrate to standalone components

Author: hackingharold

projects/app/src/app/app.component.ts

@@ -1,8 +1,28 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatChipRow } from '@angular/material/chips';
+import { MatError, MatFormField, MatLabel } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatInput } from '@angular/material/input';
+import { FileInputDirective } from '@ngx-dropzone/cdk';
+import { MatDropzone } from '@ngx-dropzone/material';
 
 @Component({
   selector: 'app-root',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatError,
+    MatInput,
+    MatChipRow,
+    MatIcon,
+    MatDropzone,
+    FileInputDirective,
+  ],
   template: `<div class="app-container">
     <mat-form-field appearance="outline">
       <mat-label>Drop only .png files!</mat-label>

projects/app/src/app/app.module.ts

@@ -1,7 +1,7 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { AppComponent } from './app/app.component';
 
-import { AppModule } from './app/app.module';
-
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [provideAnimations()],
+}).catch((e) => console.error(e));

projects/app/src/main.ts

@@ -3,7 +3,6 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { FileInputDirective, FileInputValidators, FileInputValue } from '../file-input';
-import { DropzoneCdkModule } from './../cdk.module';
 import { DropzoneComponent } from './dropzone.component';
 
 interface Selectors<T> {
@@ -17,8 +16,7 @@ interface Selectors<T> {
 describe('DropzoneComponent', () => {
   function configureDropzoneTestingModule<T>(testComponent: Type<T>): Selectors<T> {
     const fixture = TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule, DropzoneCdkModule],
-      declarations: [testComponent],
+      imports: [testComponent],
     }).createComponent(testComponent);
 
     const element = fixture.debugElement.query(By.directive(DropzoneComponent));
@@ -148,6 +146,8 @@ describe('DropzoneComponent', () => {
 
 @Component({
   selector: 'basic-dropzone',
+  standalone: true,
+  imports: [DropzoneComponent, FileInputDirective],
   template: `
     <ngx-dropzone>
       <input type="file" fileInput />
@@ -158,6 +158,8 @@ class DropzoneBasic {}
 
 @Component({
   selector: 'form-control-dropzone',
+  standalone: true,
+  imports: [ReactiveFormsModule, DropzoneComponent, FileInputDirective],
   template: `
     <ngx-dropzone>
       <input type="file" fileInput [formControl]="fileCtrl" multiple />

projects/cdk/src/lib/cdk.module.ts

@@ -20,6 +20,9 @@ import { DropzoneService } from './dropzone.service';
 @Component({
   selector: 'ngx-dropzone',
   exportAs: 'dropzone',
+  standalone: true,
+  imports: [FileInputDirective],
+  providers: [DropzoneService],
   template: `<ng-content></ng-content>`,
   host: {
     tabindex: '0',

projects/cdk/src/lib/dropzone/dropzone.component.spec.ts

@@ -4,6 +4,11 @@ import { AcceptService } from './accept.service';
 describe('AcceptService', () => {
   let service: AcceptService;
 
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AcceptService);
+  });
+
   /** Returns a simple fake file with given extension and optional type. */
   const getFile = (ext: string, type?: string) => new File(['...'], `${Date.now()}.${ext}`, { type });
 
@@ -14,11 +19,6 @@ describe('AcceptService', () => {
     getFile('pdf', 'application/octet-stream'),
   ];
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(AcceptService);
-  });
-
   it('should filter based on file extension', () => {
     const files = getFileList();
     const accepted = service.accepts(files, '.doc, txt , .pdf,random/MIME');

projects/cdk/src/lib/dropzone/dropzone.component.ts

@@ -1,6 +1,6 @@
 import { Component, DebugElement, Type } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { getArrayValueError, getNonArrayValueError } from './file-input-errors';
 import { FileInputValue } from './file-input-value';
@@ -24,8 +24,7 @@ const getFileList = (files: File[]): FileList => {
 describe('FileInputDirective', () => {
   function configureFileInputTestingModule<T>(testComponent: Type<T>): Selectors<T> {
     const fixture = TestBed.configureTestingModule({
-      imports: [FormsModule, ReactiveFormsModule],
-      declarations: [FileInputDirective, testComponent],
+      imports: [testComponent],
     }).createComponent(testComponent);
 
     const inputElement = fixture.debugElement.query(By.directive(FileInputDirective));
@@ -299,34 +298,46 @@ describe('FileInputDirective', () => {
 });
 
 @Component({
+  standalone: true,
+  imports: [FileInputDirective],
   template: `<input fileInput type="file" />`,
 })
 class FileInputBasic {}
 
 @Component({
+  standalone: true,
+  imports: [FileInputDirective],
   template: `<input fileInput type="file" multiple />`,
 })
 class FileInputMultiple {}
 
 @Component({
+  standalone: true,
+  imports: [FileInputDirective],
   // This combination is not valid! "Append" should only be used together with "multiple".
   template: `<input fileInput type="file" mode="append" />`,
 })
 class FileInputAppend {}
 
 @Component({
+  standalone: true,
+  imports: [FileInputDirective],
   template: `<input fileInput type="file" multiple mode="append" />`,
 })
 class FileInputMultipleAppend {}
 
 @Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, FileInputDirective],
   template: `<input fileInput type="file" [formControl]="fileCtrl" />`,
 })
 class FileInputWithFormControl {
   fileCtrl = new FormControl<FileInputValue>(null, [Validators.required]);
 }
 
 @Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, FileInputDirective],
   template: `<input fileInput type="file" disabled />`,
 })
 class FileInputDisabled {}

projects/cdk/src/lib/file-input/accept.service.spec.ts

@@ -23,6 +23,7 @@ import { FileInputMode, FileInputValue } from './file-input-value';
 @Directive({
   selector: 'input[fileInput]',
   exportAs: 'fileInput',
+  standalone: true,
   host: {
     style: 'display: none',
     '(focus)': '_focusChanged(true)',

projects/cdk/src/lib/file-input/file-input.directive.spec.ts

@@ -2,7 +2,6 @@
  * Public API Surface of cdk
  */
 
-export * from './lib/cdk.module';
 export * from './lib/coercion';
 export * from './lib/dropzone';
 export * from './lib/file-input';

projects/cdk/src/lib/file-input/file-input.directive.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common';
 import { Component, DebugElement, Type } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
@@ -6,8 +7,7 @@ import { MatError, MatFormFieldModule, MatLabel } from '@angular/material/form-f
 import { MatIconModule } from '@angular/material/icon';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { DropzoneCdkModule, FileInputDirective, FileInputValidators, FileInputValue } from '@ngx-dropzone/cdk';
-import { DropzoneMaterialModule } from '../material.module';
+import { FileInputDirective, FileInputValidators, FileInputValue } from '@ngx-dropzone/cdk';
 import { MatDropzone } from './mat-dropzone.component';
 
 interface Selectors<T> {
@@ -25,16 +25,7 @@ interface Selectors<T> {
 describe('MatDropzone', () => {
   function configureDropzoneTestingModule<T>(testComponent: Type<T>): Selectors<T> {
     const fixture = TestBed.configureTestingModule({
-      imports: [
-        BrowserAnimationsModule,
-        ReactiveFormsModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatChipsModule,
-        DropzoneCdkModule,
-        DropzoneMaterialModule,
-      ],
-      declarations: [testComponent],
+      imports: [CommonModule, BrowserAnimationsModule, testComponent],
     }).createComponent(testComponent);
 
     const element = fixture.debugElement.query(By.directive(MatDropzone));
@@ -127,6 +118,8 @@ describe('MatDropzone', () => {
 
 @Component({
   selector: 'basic-dropzone',
+  standalone: true,
+  imports: [MatFormFieldModule, MatDropzone, FileInputDirective],
   template: `
     <mat-form-field>
       <mat-label>Drop it basic!</mat-label>
@@ -140,6 +133,8 @@ class DropzoneBasic {}
 
 @Component({
   selector: 'form-control-dropzone',
+  standalone: true,
+  imports: [ReactiveFormsModule, MatFormFieldModule, MatIconModule, MatChipsModule, MatDropzone, FileInputDirective],
   template: `
     <mat-form-field>
       <ngx-mat-dropzone>

projects/cdk/src/public-api.ts

@@ -14,14 +14,32 @@ import {
 import { Validators } from '@angular/forms';
 import { MatChipRow } from '@angular/material/chips';
 import { MatFormField, MatFormFieldControl } from '@angular/material/form-field';
-import { coerceBoolean, DropzoneComponent, FileInputValue } from '@ngx-dropzone/cdk';
+import {
+  AcceptService,
+  coerceBoolean,
+  DropzoneComponent,
+  DropzoneService,
+  FileInputDirective,
+  FileInputValue,
+} from '@ngx-dropzone/cdk';
 import { merge, Observable, Subject, takeUntil, tap } from 'rxjs';
 
 @Component({
   selector: 'ngx-mat-dropzone',
   exportAs: 'matDropzone',
+  standalone: true,
+  imports: [MatFormField, MatChipRow, FileInputDirective, DropzoneComponent],
+  providers: [
+    DropzoneService,
+    AcceptService,
+    {
+      provide: MatFormFieldControl,
+      useExisting: MatDropzone,
+    },
+  ],
   template: `
     <ng-content select="[fileInput]"></ng-content>
+
     <div class="mat-chip-grid" [class.filled-and-float]="filled && shouldLabelFloat">
       <ng-content select="mat-chip-row"></ng-content>
     </div>
@@ -57,12 +75,6 @@ import { merge, Observable, Subject, takeUntil, tap } from 'rxjs';
   ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: MatFormFieldControl,
-      useExisting: MatDropzone,
-    },
-  ],
 })
 export class MatDropzone
   extends DropzoneComponent

projects/material/src/lib/mat-dropzone/mat-dropzone.component.spec.ts

@@ -3,4 +3,3 @@
  */
 
 export * from './lib/mat-dropzone';
-export * from './lib/material.module';