migrate to Standalone components

angular.json

@@ -20,7 +20,9 @@
             "outputPath": "dist/angular-material-date-fns-adapter",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -86,10 +88,11 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
             "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
@@ -127,9 +130,11 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/ngx-material-date-fns-adapter/src/test.ts",
-            "tsConfig": "projects/ngx-material-date-fns-adapter/tsconfig.spec.json",
-            "karmaConfig": "projects/ngx-material-date-fns-adapter/karma.conf.js"
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "projects/ngx-material-date-fns-adapter/tsconfig.spec.json"
           }
         }
       }

projects/ngx-material-date-fns-adapter/tsconfig.spec.json

@@ -7,9 +7,6 @@
       "jasmine"
     ]
   },
-  "files": [
-    "src/test.ts"
-  ],
   "include": [
     "**/*.spec.ts",
     "**/*.d.ts"

src/app/app.component.spec.ts

@@ -1,31 +1,13 @@
 import { TestBed } from '@angular/core/testing';
-import { MatIconModule } from '@angular/material/icon';
-import { MatCardModule } from '@angular/material/card';
-import { MatInputModule } from '@angular/material/input';
-import { MatButtonModule } from '@angular/material/button';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatDatepickerModule } from '@angular/material/datepicker';
 
 import { AppComponent } from './app.component';
-import { NgxMatDateFnsModule } from 'ngx-material-date-fns-adapter';
+import { provideDateFnsAdapter } from 'ngx-material-date-fns-adapter';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        MatIconModule,
-        MatCardModule,
-        MatInputModule,
-        MatButtonModule,
-        MatTooltipModule,
-        MatToolbarModule,
-        MatFormFieldModule,
-        MatDatepickerModule,
-        NgxMatDateFnsModule,
-      ],
-      declarations: [AppComponent],
+      imports: [AppComponent],
+      providers: [provideDateFnsAdapter()],
     }).compileComponents();
   });
 

src/app/app.component.ts

@@ -1,10 +1,29 @@
 import { Component, Inject, ViewEncapsulation } from '@angular/core';
 import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import packageJson from '../../projects/ngx-material-date-fns-adapter/package.json';
 
 import { enUS, faIR, ar, fr, ja, ru } from 'date-fns/locale';
 
 @Component({
+  standalone: true,
+  imports: [
+    MatIconModule,
+    MatCardModule,
+    MatInputModule,
+    MatButtonModule,
+    MatTooltipModule,
+    MatToolbarModule,
+    MatFormFieldModule,
+    MatDatepickerModule,
+  ],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],

src/app/app.config.ts

@@ -0,0 +1,7 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideDateFnsAdapter } from 'ngx-material-date-fns-adapter';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideAnimations(), provideDateFnsAdapter()],
+};

src/main.ts

@@ -1,12 +1,7 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
 
-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)
+);

tsconfig.app.json

@@ -6,8 +6,7 @@
     "types": []
   },
   "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
+    "src/main.ts"
   ],
   "include": [
     "src/**/*.d.ts"

tsconfig.spec.json

@@ -7,10 +7,6 @@
       "jasmine"
     ]
   },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
   "include": [
     "src/**/*.spec.ts",
     "src/**/*.d.ts"