feat(api): add standalone support to components and directives

Now it is not required to use `NgModules` with this library

Author: gund

goldens/ng-dynamic-component/api.md

@@ -12,7 +12,6 @@ import { ElementRef } from '@angular/core';
 import { EnvironmentInjector } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import * as i0 from '@angular/core';
-import * as i3 from '@angular/common';
 import { InjectionToken } from '@angular/core';
 import { Injector } from '@angular/core';
 import { IterableDiffers } from '@angular/core';
@@ -43,7 +42,7 @@ export class ComponentOutletInjectorDirective implements DynamicComponentInjecto
     // (undocumented)
     get componentRef(): ComponentRef<unknown>;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ComponentOutletInjectorDirective, "[ngComponentOutlet]", ["ndcComponentOutletInjector"], {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComponentOutletInjectorDirective, "[ngComponentOutlet]", ["ndcComponentOutletInjector"], {}, {}, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ComponentOutletInjectorDirective, [{ host: true; }]>;
 }
@@ -58,7 +57,7 @@ export class ComponentOutletInjectorModule {
     // Warning: (ae-forgotten-export) The symbol "i2" needs to be exported by the entry point public-api.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ComponentOutletInjectorModule, [typeof i1.ComponentOutletInjectorDirective, typeof i2.ComponentOutletIoDirective], [typeof i3.CommonModule], [typeof i1.ComponentOutletInjectorDirective, typeof i2.ComponentOutletIoDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ComponentOutletInjectorModule, never, [typeof i1.ComponentOutletInjectorDirective, typeof i2.ComponentOutletIoDirective], [typeof i1.ComponentOutletInjectorDirective, typeof i2.ComponentOutletIoDirective]>;
 }
 
 // @public (undocumented)
@@ -71,7 +70,7 @@ export class ComponentOutletIoDirective implements DoCheck {
     // (undocumented)
     ngDoCheck(): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ComponentOutletIoDirective, "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", ["ndcDynamicIo"], { "ngComponentOutletNdcDynamicInputs": "ngComponentOutletNdcDynamicInputs"; "ngComponentOutletNdcDynamicOutputs": "ngComponentOutletNdcDynamicOutputs"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComponentOutletIoDirective, "[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", ["ndcDynamicIo"], { "ngComponentOutletNdcDynamicInputs": "ngComponentOutletNdcDynamicInputs"; "ngComponentOutletNdcDynamicOutputs": "ngComponentOutletNdcDynamicOutputs"; }, {}, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ComponentOutletIoDirective, never>;
 }
@@ -113,7 +112,7 @@ export class DynamicAttributesDirective implements DoCheck {
     // (undocumented)
     setAttribute(name: string, value: string, namespace?: string): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicAttributesDirective, "[ndcDynamicAttributes],[ngComponentOutletNdcDynamicAttributes]", ["ndcDynamicAttributes"], { "ndcDynamicAttributes": "ndcDynamicAttributes"; "ngComponentOutletNdcDynamicAttributes": "ngComponentOutletNdcDynamicAttributes"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicAttributesDirective, "[ndcDynamicAttributes],[ngComponentOutletNdcDynamicAttributes]", ["ndcDynamicAttributes"], { "ndcDynamicAttributes": "ndcDynamicAttributes"; "ngComponentOutletNdcDynamicAttributes": "ngComponentOutletNdcDynamicAttributes"; }, {}, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicAttributesDirective, [null, null, { optional: true; }]>;
 }
@@ -125,10 +124,10 @@ export class DynamicAttributesModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<DynamicAttributesModule>;
     // Warning: (ae-forgotten-export) The symbol "i1_4" needs to be exported by the entry point public-api.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i3_3" needs to be exported by the entry point public-api.d.ts
+    // Warning: (ae-forgotten-export) The symbol "i2_2" needs to be exported by the entry point public-api.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DynamicAttributesModule, [typeof i1_4.DynamicAttributesDirective], [typeof i3.CommonModule], [typeof i1_4.DynamicAttributesDirective, typeof i3_3.ComponentOutletInjectorModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DynamicAttributesModule, never, [typeof i1_4.DynamicAttributesDirective], [typeof i1_4.DynamicAttributesDirective, typeof i2_2.ComponentOutletInjectorModule]>;
 }
 
 // @public (undocumented)
@@ -155,7 +154,7 @@ export class DynamicComponent<C = unknown> implements OnChanges, DynamicComponen
     // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicComponent<any>, "ndc-dynamic", never, { "ndcDynamicComponent": "ndcDynamicComponent"; "ndcDynamicInjector": "ndcDynamicInjector"; "ndcDynamicProviders": "ndcDynamicProviders"; "ndcDynamicContent": "ndcDynamicContent"; "ndcDynamicNgModuleRef": "ndcDynamicNgModuleRef"; "ndcDynamicEnvironmentInjector": "ndcDynamicEnvironmentInjector"; }, { "ndcDynamicCreated": "ndcDynamicCreated"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicComponent<any>, "ndc-dynamic", never, { "ndcDynamicComponent": "ndcDynamicComponent"; "ndcDynamicInjector": "ndcDynamicInjector"; "ndcDynamicProviders": "ndcDynamicProviders"; "ndcDynamicContent": "ndcDynamicContent"; "ndcDynamicNgModuleRef": "ndcDynamicNgModuleRef"; "ndcDynamicEnvironmentInjector": "ndcDynamicEnvironmentInjector"; }, { "ndcDynamicCreated": "ndcDynamicCreated"; }, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicComponent<any>, never>;
 }
@@ -196,7 +195,7 @@ export class DynamicDirectivesDirective implements OnDestroy, DoCheck {
     // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicDirectivesDirective, "[ndcDynamicDirectives],[ngComponentOutletNdcDynamicDirectives]", never, { "ndcDynamicDirectives": "ndcDynamicDirectives"; "ngComponentOutletNdcDynamicDirectives": "ngComponentOutletNdcDynamicDirectives"; }, { "ndcDynamicDirectivesCreated": "ndcDynamicDirectivesCreated"; }, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicDirectivesDirective, "[ndcDynamicDirectives],[ngComponentOutletNdcDynamicDirectives]", never, { "ndcDynamicDirectives": "ndcDynamicDirectives"; "ngComponentOutletNdcDynamicDirectives": "ngComponentOutletNdcDynamicDirectives"; }, { "ndcDynamicDirectivesCreated": "ndcDynamicDirectivesCreated"; }, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicDirectivesDirective, [null, null, null, null, { optional: true; }]>;
 }
@@ -210,7 +209,7 @@ export class DynamicDirectivesModule {
     // Warning: (ae-forgotten-export) The symbol "i1_5" needs to be exported by the entry point public-api.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DynamicDirectivesModule, [typeof i1_5.DynamicDirectivesDirective], [typeof i3.CommonModule], [typeof i1_5.DynamicDirectivesDirective, typeof i3_3.ComponentOutletInjectorModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DynamicDirectivesModule, never, [typeof i1_5.DynamicDirectivesDirective], [typeof i1_5.DynamicDirectivesDirective, typeof i2_2.ComponentOutletInjectorModule]>;
 }
 
 // @public (undocumented)
@@ -223,7 +222,7 @@ export class DynamicIoDirective implements DoCheck {
     // (undocumented)
     ngDoCheck(): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicIoDirective, "[ndcDynamicInputs],[ndcDynamicOutputs]", ["ndcDynamicIo"], { "ndcDynamicInputs": "ndcDynamicInputs"; "ndcDynamicOutputs": "ndcDynamicOutputs"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DynamicIoDirective, "[ndcDynamicInputs],[ndcDynamicOutputs]", ["ndcDynamicIo"], { "ndcDynamicInputs": "ndcDynamicInputs"; "ndcDynamicOutputs": "ndcDynamicOutputs"; }, {}, never, never, true>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicIoDirective, never>;
 }
@@ -237,7 +236,7 @@ export class DynamicIoModule {
     // Warning: (ae-forgotten-export) The symbol "i1_3" needs to be exported by the entry point public-api.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DynamicIoModule, [typeof i1_3.DynamicIoDirective], [typeof i3.CommonModule], [typeof i1_3.DynamicIoDirective, typeof i3_3.ComponentOutletInjectorModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DynamicIoModule, never, [typeof i1_3.DynamicIoDirective], [typeof i1_3.DynamicIoDirective, typeof i2_2.ComponentOutletInjectorModule]>;
 }
 
 // @public (undocumented)
@@ -247,10 +246,10 @@ export class DynamicModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<DynamicModule>;
     // Warning: (ae-forgotten-export) The symbol "i1_2" needs to be exported by the entry point public-api.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i3_2" needs to be exported by the entry point public-api.d.ts
+    // Warning: (ae-forgotten-export) The symbol "i2_3" needs to be exported by the entry point public-api.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DynamicModule, [typeof i1_2.DynamicComponent], [typeof i3.CommonModule, typeof i3_2.DynamicIoModule], [typeof i1_2.DynamicComponent, typeof i3_2.DynamicIoModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DynamicModule, never, [typeof i1_2.DynamicIoModule, typeof i2_3.DynamicComponent], [typeof i1_2.DynamicIoModule, typeof i2_3.DynamicComponent]>;
 }
 
 // @public @deprecated (undocumented)

projects/ng-dynamic-component/src/lib/component-outlet/component-outlet-injector.directive.spec.ts

@@ -5,7 +5,7 @@ import { ComponentOutletInjectorDirective } from './component-outlet-injector.di
 
 describe('ComponentOutletInjectorDirective', () => {
   @Component({ selector: 'dynamic', template: '' })
-  class DynamicComponent {}
+  class Dynamic1Component {}
 
   @Component({
     selector: 'host',
@@ -18,9 +18,10 @@ describe('ComponentOutletInjectorDirective', () => {
   }
 
   const testSetup = new TestSetup(HostComponent, {
-    props: { component: DynamicComponent },
+    props: { component: Dynamic1Component },
     ngModule: {
-      declarations: [ComponentOutletInjectorDirective, DynamicComponent],
+      imports: [ComponentOutletInjectorDirective],
+      declarations: [Dynamic1Component],
     },
   });
 
@@ -45,6 +46,6 @@ describe('ComponentOutletInjectorDirective', () => {
 
     const directive = fixture.getHost().directive;
 
-    expect(directive?.componentRef.instance).toBeInstanceOf(DynamicComponent);
+    expect(directive?.componentRef.instance).toBeInstanceOf(Dynamic1Component);
   });
 });

projects/ng-dynamic-component/src/lib/component-outlet/component-outlet-injector.directive.ts

@@ -13,6 +13,7 @@ import {
   // eslint-disable-next-line @angular-eslint/directive-selector
   selector: '[ngComponentOutlet]',
   exportAs: 'ndcComponentOutletInjector',
+  standalone: true,
   providers: [
     {
       provide: DynamicComponentInjectorToken,

projects/ng-dynamic-component/src/lib/component-outlet/component-outlet-injector.module.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { ComponentOutletInjectorDirective } from './component-outlet-injector.directive';
@@ -8,8 +7,7 @@ import { ComponentOutletIoDirective } from './component-outlet-io.directive';
  * @public
  */
 @NgModule({
-  imports: [CommonModule],
+  imports: [ComponentOutletInjectorDirective, ComponentOutletIoDirective],
   exports: [ComponentOutletInjectorDirective, ComponentOutletIoDirective],
-  declarations: [ComponentOutletInjectorDirective, ComponentOutletIoDirective],
 })
 export class ComponentOutletInjectorModule {}

projects/ng-dynamic-component/src/lib/component-outlet/component-outlet-io.directive.spec.ts

@@ -6,7 +6,7 @@ import { ComponentOutletIoDirective } from './component-outlet-io.directive';
 
 describe('Directive: ComponentOutletIo', () => {
   @Component({ selector: 'dynamic', template: 'DynamicComponent' })
-  class DynamicComponent {
+  class Dynamic1Component {
     @Input() prop1: any;
     @Input() prop2: any;
     @Output() output = new EventEmitter<any>();
@@ -21,13 +21,10 @@ describe('Directive: ComponentOutletIo', () => {
   }
 
   const testSetup = new TestSetup(HostComponent, {
-    props: { component: DynamicComponent },
+    props: { component: Dynamic1Component },
     ngModule: {
-      declarations: [
-        ComponentOutletIoDirective,
-        ComponentOutletInjectorDirective,
-        DynamicComponent,
-      ],
+      imports: [ComponentOutletIoDirective, ComponentOutletInjectorDirective],
+      declarations: [Dynamic1Component],
     },
   });
 
@@ -40,7 +37,7 @@ describe('Directive: ComponentOutletIo', () => {
         template: `<ng-container *ngComponentOutlet="component; ndcDynamicInputs: inputs"></ng-container>`,
       });
 
-      expect(fixture.getComponent(DynamicComponent)).toEqual(
+      expect(fixture.getComponent(Dynamic1Component)).toEqual(
         expect.objectContaining({
           prop1: '123',
           prop2: 1,
@@ -60,7 +57,7 @@ describe('Directive: ComponentOutletIo', () => {
 
       expect(outputs.output).not.toHaveBeenCalled();
 
-      fixture.getComponent(DynamicComponent)!.output.emit('data');
+      fixture.getComponent(Dynamic1Component)!.output.emit('data');
 
       expect(outputs.output).toHaveBeenCalledWith('data');
     });

projects/ng-dynamic-component/src/lib/component-outlet/component-outlet-io.directive.ts

@@ -10,6 +10,7 @@ import { InputsType, IoService, OutputsType } from '../io';
     // eslint-disable-next-line @angular-eslint/directive-selector
     '[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]',
   exportAs: 'ndcDynamicIo',
+  standalone: true,
   providers: [IoService],
 })
 export class ComponentOutletIoDirective implements DoCheck {

projects/ng-dynamic-component/src/lib/dynamic-attributes/dynamic-attributes.directive.spec.ts

@@ -2,15 +2,15 @@
 import { Component, Type } from '@angular/core';
 import { TestFixture, TestSetup } from '../../test';
 import { ComponentOutletInjectorDirective } from '../component-outlet';
-import { DynamicComponent as NdcDynamicComponent } from '../dynamic.component';
+import { DynamicComponent } from '../dynamic.component';
 import {
   AttributesMap,
   DynamicAttributesDirective,
 } from './dynamic-attributes.directive';
 
 describe('DynamicAttributesDirective', () => {
   @Component({ selector: 'dynamic', template: `` })
-  class DynamicComponent {}
+  class Dynamic1Component {}
 
   @Component({
     selector: 'host',
@@ -28,17 +28,15 @@ describe('DynamicAttributesDirective', () => {
 
   class DynamicTestFixture<THost> extends TestFixture<THost> {
     getDynamicElem() {
-      return this.getComponentElement(DynamicComponent)!;
+      return this.getComponentElement(Dynamic1Component)!;
     }
   }
 
   const testSetup = new TestSetup(HostComponent, {
-    props: { component: DynamicComponent },
+    props: { component: Dynamic1Component },
     ngModule: {
-      declarations: [
-        DynamicAttributesDirective,
-        ComponentOutletInjectorDirective,
-      ],
+      imports: [DynamicAttributesDirective, ComponentOutletInjectorDirective],
+      declarations: [Dynamic1Component],
     },
     fixtureCtor: DynamicTestFixture,
   });
@@ -252,7 +250,7 @@ describe('DynamicAttributesDirective', () => {
             [ndcDynamicAttributes]="attrs"
           ></ndc-dynamic>
       `,
-        ngModule: { declarations: [NdcDynamicComponent] },
+        ngModule: { imports: [DynamicComponent] },
       });
 
       expect(fixture.getDynamicElem().attributes).toMatchObject({

projects/ng-dynamic-component/src/lib/dynamic-attributes/dynamic-attributes.directive.ts

@@ -33,6 +33,7 @@ interface AttributeActions {
 @Directive({
   selector: '[ndcDynamicAttributes],[ngComponentOutletNdcDynamicAttributes]',
   exportAs: 'ndcDynamicAttributes',
+  standalone: true,
 })
 export class DynamicAttributesDirective implements DoCheck {
   @Input()

projects/ng-dynamic-component/src/lib/dynamic-attributes/dynamic-attributes.module.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { ComponentOutletInjectorModule } from '../component-outlet';
@@ -8,8 +7,7 @@ import { DynamicAttributesDirective } from './dynamic-attributes.directive';
  * @public
  */
 @NgModule({
-  imports: [CommonModule],
+  imports: [DynamicAttributesDirective],
   exports: [DynamicAttributesDirective, ComponentOutletInjectorModule],
-  declarations: [DynamicAttributesDirective],
 })
 export class DynamicAttributesModule {}

projects/ng-dynamic-component/src/lib/dynamic-directives/dynamic-directives.directive.spec.ts

@@ -23,7 +23,7 @@ import {
 
 import { TestFixture, TestSetup } from '../../test';
 import { ComponentOutletInjectorDirective } from '../component-outlet';
-import { DynamicComponent as NdcDynamicComponent } from '../dynamic.component';
+import { DynamicComponent } from '../dynamic.component';
 import { IoFactoryService } from '../io';
 import {
   DirectiveRef,
@@ -34,7 +34,7 @@ import {
 
 describe('Directive: DynamicDirectives', () => {
   @Component({ selector: 'dynamic', template: `` })
-  class DynamicComponent {}
+  class Dynamic1Component {}
 
   @Component({
     selector: 'host',
@@ -121,14 +121,10 @@ describe('Directive: DynamicDirectives', () => {
   }
 
   const testSetup = new TestSetup(HostComponent, {
-    props: { component: DynamicComponent },
+    props: { component: Dynamic1Component },
     ngModule: {
-      declarations: [
-        DynamicDirectivesDirective,
-        ComponentOutletInjectorDirective,
-        HostComponent,
-        DynamicComponent,
-      ],
+      imports: [DynamicDirectivesDirective, ComponentOutletInjectorDirective],
+      declarations: [Dynamic1Component],
       providers: [IoFactoryService],
     },
     fixtureCtor: DirectivesTestFixture,
@@ -643,7 +639,7 @@ describe('Directive: DynamicDirectives', () => {
         ngModule: { imports: [CommonModule] },
       });
 
-      const dynamicElem = fixture.getComponentElement(DynamicComponent)!;
+      const dynamicElem = fixture.getComponentElement(Dynamic1Component)!;
 
       expect(dynamicElem).toBeTruthy();
       expect(dynamicElem.classes).toEqual({ cls1: true, cls2: true });
@@ -664,7 +660,7 @@ describe('Directive: DynamicDirectives', () => {
         ngModule: { imports: [CommonModule] },
       });
 
-      const dynamicElem = fixture.getComponentElement(DynamicComponent)!;
+      const dynamicElem = fixture.getComponentElement(Dynamic1Component)!;
 
       expect(dynamicElem).toBeTruthy();
       expect(dynamicElem.classes).toEqual({ cls1: true, cls2: true });
@@ -684,12 +680,11 @@ describe('Directive: DynamicDirectives', () => {
           ></ndc-dynamic>
         `,
         ngModule: {
-          imports: [CommonModule],
-          declarations: [NdcDynamicComponent],
+          imports: [CommonModule, DynamicComponent],
         },
       });
 
-      const dynamicElem = fixture.getComponentElement(DynamicComponent)!;
+      const dynamicElem = fixture.getComponentElement(Dynamic1Component)!;
 
       expect(dynamicElem).toBeTruthy();
       expect(dynamicElem.classes).toEqual({ cls1: true, cls2: true });

projects/ng-dynamic-component/src/lib/dynamic-directives/dynamic-directives.directive.ts

@@ -70,6 +70,7 @@ export interface DirectiveRef<T> {
  */
 @Directive({
   selector: '[ndcDynamicDirectives],[ngComponentOutletNdcDynamicDirectives]',
+  standalone: true,
   providers: [IoFactoryService],
 })
 export class DynamicDirectivesDirective implements OnDestroy, DoCheck {

projects/ng-dynamic-component/src/lib/dynamic-directives/dynamic-directives.module.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { ComponentOutletInjectorModule } from '../component-outlet';
@@ -8,8 +7,7 @@ import { DynamicDirectivesDirective } from './dynamic-directives.directive';
  * @public
  */
 @NgModule({
-  imports: [CommonModule],
+  imports: [DynamicDirectivesDirective],
   exports: [DynamicDirectivesDirective, ComponentOutletInjectorModule],
-  declarations: [DynamicDirectivesDirective],
 })
 export class DynamicDirectivesModule {}