Make devextreme-angular components standalone (DevExpress#29748)

Co-authored-by: Mikhail Preyskurantov <[email protected]>

Author: GoodDayForSurf

package.json

@@ -44,7 +44,7 @@
     "axe-core": "4.10.3",
     "cheerio": "1.0.0-rc.10",
     "codelyzer": "6.0.2",
-    "devextreme-internal-tools": "16.5.2",
+    "devextreme-internal-tools": "18.0.0-beta.1",
     "http-server": "14.1.1",
     "husky": "8.0.3",
     "jest": "29.7.0",

packages/devextreme-angular/src/core/component.ts

@@ -16,6 +16,9 @@ import {
   AfterContentChecked,
   AfterViewInit,
   AfterViewChecked,
+  createNgModule,
+  inject,
+  Injector,
 } from '@angular/core';
 
 import { isPlatformServer } from '@angular/common';
@@ -36,6 +39,8 @@ import {
   CollectionNestedOptionContainerImpl,
 } from './nested-option';
 
+import { DxIntegrationModule } from './integration';
+
 config({
   buyNowLink: 'https://go.devexpress.com/Licensing_Installer_Watermark_DevExtremeAngular.aspx',
   licensingDocLink: 'https://go.devexpress.com/Licensing_Documentation_DevExtremeAngular.aspx',
@@ -225,6 +230,10 @@ export abstract class DxComponent implements OnChanges, OnInit, DoCheck, AfterCo
     private readonly transferState: TransferState,
     @Inject(PLATFORM_ID) private readonly platformId: any,
   ) {
+    if (!DxIntegrationModule.initialized) {
+      createNgModule(DxIntegrationModule, inject(Injector));
+    }
+
     this.templates = [];
     templateHost.setHost(this);
     this._collectionContainerImpl = new CollectionNestedOptionContainerImpl(this._setOption.bind(this));

packages/devextreme-angular/src/core/integration.ts

@@ -93,7 +93,10 @@ let doInjections = (document: any, ngZone: NgZone, xhrFactory: XhrFactory) => {
 
 @NgModule({})
 export class DxIntegrationModule {
+  static initialized = false;
+
   constructor(@Inject(DOCUMENT) document: any, ngZone: NgZone, @Optional() xhrFactory: XhrFactory) {
     doInjections(document, ngZone, xhrFactory);
+    DxIntegrationModule.initialized = true;
   }
 }

packages/devextreme-angular/src/core/template.ts

@@ -28,6 +28,7 @@ export class RenderData {
 
 @Directive({
   selector: '[dxTemplate]',
+  standalone: true,
 })
 export class DxTemplateDirective {
   @Input()
@@ -92,7 +93,7 @@ export class DxTemplateDirective {
 }
 
 @NgModule({
-  declarations: [DxTemplateDirective],
+  imports: [DxTemplateDirective],
   exports: [DxTemplateDirective],
 })
 export class DxTemplateModule { }

packages/devextreme-angular/src/ui/accordion/index.ts

@@ -56,8 +56,10 @@ import { DxiAccordionItemComponent } from 'devextreme-angular/ui/accordion/neste
  */
 @Component({
     selector: 'dx-accordion',
+    standalone: true,
     template: '',
     host: { ngSkipHydration: 'true' },
+    imports: [ DxIntegrationModule ],
     providers: [
         DxTemplateHost,
         WatcherHelper,
@@ -830,14 +832,12 @@ export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent i
 
 @NgModule({
   imports: [
+    DxAccordionComponent,
     DxiItemModule,
     DxiAccordionItemModule,
     DxIntegrationModule,
     DxTemplateModule
   ],
-  declarations: [
-    DxAccordionComponent
-  ],
   exports: [
     DxAccordionComponent,
     DxiItemModule,
@@ -847,6 +847,8 @@ export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent i
 })
 export class DxAccordionModule { }
 
+export * from 'devextreme-angular/ui/accordion/nested';
+
 import type * as DxAccordionTypes from "devextreme/ui/accordion_types";
 export { DxAccordionTypes };
 

packages/devextreme-angular/src/ui/accordion/nested/item-dxi.ts

@@ -18,6 +18,7 @@ import { DOCUMENT } from '@angular/common';
 
 
 import {
+    DxIntegrationModule,
     NestedOptionHost,
     extractTemplate,
     DxTemplateDirective,
@@ -29,8 +30,10 @@ import { CollectionNestedOption } from 'devextreme-angular/core';
 
 @Component({
     selector: 'dxi-accordion-item',
+    standalone: true,
     template: '<ng-content></ng-content>',
     styles: [':host { display: block; }'],
+    imports: [ DxIntegrationModule ],
     providers: [NestedOptionHost, DxTemplateHost]
 })
 export class DxiAccordionItemComponent extends CollectionNestedOption implements AfterViewInit,
@@ -133,7 +136,7 @@ export class DxiAccordionItemComponent extends CollectionNestedOption implements
 }
 
 @NgModule({
-  declarations: [
+  imports: [
     DxiAccordionItemComponent
   ],
   exports: [

packages/devextreme-angular/src/ui/action-sheet/index.ts

@@ -56,8 +56,10 @@ import { DxiActionSheetItemComponent } from 'devextreme-angular/ui/action-sheet/
  */
 @Component({
     selector: 'dx-action-sheet',
+    standalone: true,
     template: '',
     host: { ngSkipHydration: 'true' },
+    imports: [ DxIntegrationModule ],
     providers: [
         DxTemplateHost,
         WatcherHelper,
@@ -607,14 +609,12 @@ export class DxActionSheetComponent<TItem = any, TKey = any> extends DxComponent
 
 @NgModule({
   imports: [
+    DxActionSheetComponent,
     DxiItemModule,
     DxiActionSheetItemModule,
     DxIntegrationModule,
     DxTemplateModule
   ],
-  declarations: [
-    DxActionSheetComponent
-  ],
   exports: [
     DxActionSheetComponent,
     DxiItemModule,
@@ -624,6 +624,8 @@ export class DxActionSheetComponent<TItem = any, TKey = any> extends DxComponent
 })
 export class DxActionSheetModule { }
 
+export * from 'devextreme-angular/ui/action-sheet/nested';
+
 import type * as DxActionSheetTypes from "devextreme/ui/action_sheet_types";
 export { DxActionSheetTypes };
 

packages/devextreme-angular/src/ui/action-sheet/nested/item-dxi.ts

@@ -20,6 +20,7 @@ import { NativeEventInfo } from 'devextreme/common/core/events';
 import { ButtonStyle, ButtonType } from 'devextreme/common';
 
 import {
+    DxIntegrationModule,
     NestedOptionHost,
     extractTemplate,
     DxTemplateDirective,
@@ -31,8 +32,10 @@ import { CollectionNestedOption } from 'devextreme-angular/core';
 
 @Component({
     selector: 'dxi-action-sheet-item',
+    standalone: true,
     template: '<ng-content></ng-content>',
     styles: [':host { display: block; }'],
+    imports: [ DxIntegrationModule ],
     providers: [NestedOptionHost, DxTemplateHost]
 })
 export class DxiActionSheetItemComponent extends CollectionNestedOption implements AfterViewInit,
@@ -127,7 +130,7 @@ export class DxiActionSheetItemComponent extends CollectionNestedOption implemen
 }
 
 @NgModule({
-  declarations: [
+  imports: [
     DxiActionSheetItemComponent
   ],
   exports: [

packages/devextreme-angular/src/ui/autocomplete/index.ts

@@ -102,8 +102,10 @@ const CUSTOM_VALUE_ACCESSOR_PROVIDER = {
  */
 @Component({
     selector: 'dx-autocomplete',
+    standalone: true,
     template: '',
     host: { ngSkipHydration: 'true' },
+    imports: [ DxIntegrationModule ],
     providers: [
         DxTemplateHost,
         WatcherHelper,
@@ -1553,6 +1555,7 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C
 
 @NgModule({
   imports: [
+    DxAutocompleteComponent,
     DxiButtonModule,
     DxoOptionsModule,
     DxoDropDownOptionsModule,
@@ -1587,9 +1590,6 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C
     DxIntegrationModule,
     DxTemplateModule
   ],
-  declarations: [
-    DxAutocompleteComponent
-  ],
   exports: [
     DxAutocompleteComponent,
     DxiButtonModule,
@@ -1628,6 +1628,8 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C
 })
 export class DxAutocompleteModule { }
 
+export * from 'devextreme-angular/ui/autocomplete/nested';
+
 import type * as DxAutocompleteTypes from "devextreme/ui/autocomplete_types";
 export { DxAutocompleteTypes };
 

packages/devextreme-angular/src/ui/autocomplete/nested/animation.ts

@@ -17,15 +17,18 @@ import {
 import { AnimationConfig } from 'devextreme/common/core/animation';
 
 import {
+    DxIntegrationModule,
     NestedOptionHost,
 } from 'devextreme-angular/core';
 import { NestedOption } from 'devextreme-angular/core';
 
 
 @Component({
     selector: 'dxo-autocomplete-animation',
+    standalone: true,
     template: '',
     styles: [''],
+    imports: [ DxIntegrationModule ],
     providers: [NestedOptionHost]
 })
 export class DxoAutocompleteAnimationComponent extends NestedOption implements OnDestroy, OnInit  {
@@ -71,7 +74,7 @@ export class DxoAutocompleteAnimationComponent extends NestedOption implements O
 }
 
 @NgModule({
-  declarations: [
+  imports: [
     DxoAutocompleteAnimationComponent
   ],
   exports: [