feat(component): add separate modules for PushPipe and LetDirective (#…

…3449)

Closes #3341

modules/component/spec/let/let.module.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+import { LetModule } from '../../src/let/let.module';
+
+describe('LetModule', () => {
+  let letModule: LetModule;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [LetModule],
+    });
+
+    letModule = TestBed.inject(LetModule);
+  });
+
+  it('should be initialized', () => {
+    expect(letModule).toBeDefined();
+  });
+});

modules/component/spec/push/push.module.spec.ts

@@ -0,0 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+import { PushModule } from '../../src/push/push.module';
+
+describe('PushModule', () => {
+  let pushModule: PushModule;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [PushModule],
+    });
+
+    pushModule = TestBed.inject(PushModule);
+  });
+
+  it('should be initialized', () => {
+    expect(pushModule).toBeDefined();
+  });
+});

modules/component/spec/reactive-component.module.spec.ts

@@ -1,18 +1,18 @@
 import { TestBed } from '@angular/core/testing';
 import { ReactiveComponentModule } from '../src/reactive-component.module';
 
-describe('Component Module', () => {
-  let componentModule: ReactiveComponentModule;
+describe('ReactiveComponentModule', () => {
+  let reactiveComponentModule: ReactiveComponentModule;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [ReactiveComponentModule],
     });
 
-    componentModule = TestBed.inject(ReactiveComponentModule);
+    reactiveComponentModule = TestBed.inject(ReactiveComponentModule);
   });
 
-  it('should add all effects when instantiated', () => {
-    expect(componentModule).toBeDefined();
+  it('should be initialized', () => {
+    expect(reactiveComponentModule).toBeDefined();
   });
 });

modules/component/src/index.ts

@@ -1,3 +1,5 @@
-export { PushPipe } from './push/push.pipe';
 export { LetDirective } from './let/let.directive';
+export { LetModule } from './let/let.module';
+export { PushPipe } from './push/push.pipe';
+export { PushModule } from './push/push.module';
 export { ReactiveComponentModule } from './reactive-component.module';

modules/component/src/let/let.directive.ts

@@ -43,7 +43,7 @@ export interface LetViewContext<PO> {
 }
 
 /**
- * @ngModule ReactiveComponentModule
+ * @ngModule LetModule
  *
  * @description
  *

modules/component/src/let/let.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { LetDirective } from './let.directive';
+
+@NgModule({
+  declarations: [LetDirective],
+  exports: [LetDirective],
+})
+export class LetModule {}

modules/component/src/push/push.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { PushPipe } from './push.pipe';
+
+@NgModule({
+  declarations: [PushPipe],
+  exports: [PushPipe],
+})
+export class PushModule {}

modules/component/src/push/push.pipe.ts

@@ -16,7 +16,7 @@ type PushPipeResult<PO> = PO extends ObservableOrPromise<infer R>
   : PO;
 
 /**
- * @ngModule ReactiveComponentModule
+ * @ngModule PushModule
  *
  * @description
  *

modules/component/src/reactive-component.module.ts

@@ -1,13 +1,8 @@
 import { NgModule } from '@angular/core';
-
-import { LetDirective } from './let/let.directive';
-import { PushPipe } from './push/push.pipe';
-
-const DECLARATIONS = [LetDirective, PushPipe];
-const EXPORTS = [DECLARATIONS];
+import { LetModule } from './let/let.module';
+import { PushModule } from './push/push.module';
 
 @NgModule({
-  declarations: [DECLARATIONS],
-  exports: [EXPORTS],
+  exports: [LetModule, PushModule],
 })
 export class ReactiveComponentModule {}

projects/ngrx.io/content/guide/component/let.md

@@ -5,16 +5,33 @@ The `*ngrxLet` directive serves a convenient way of binding observables to a vie
 
 ## Usage
 
-The `*ngrxLet` directive is provided through the `ReactiveComponentModule`.
-To use it, add the `ReactiveComponentModule` to the `imports` of your NgModule:
+The `*ngrxLet` directive is provided through the `LetModule`.
+To use it, add the `LetModule` to the `imports` of your standalone component or NgModule:
+
+```ts
+import { Component } from '@angular/core';
+import { LetModule } from '@ngrx/component';
+
+@Component({
+  // ... other metadata
+  standalone: true,
+  imports: [
+    // ... other imports
+    LetModule,
+  ],
+})
+export class MyStandaloneComponent {}
+```
+
+The `*ngrxLet` directive can be also used by importing the `ReactiveComponentModule`:
 
 ```ts
 import { NgModule } from '@angular/core';
 import { ReactiveComponentModule } from '@ngrx/component';
 
 @NgModule({
   imports: [
-    // other imports
+    // ... other imports
     ReactiveComponentModule,
   ],
 })

projects/ngrx.io/content/guide/component/push.md

@@ -6,18 +6,35 @@ running in zone-full as well as zone-less mode without any changes to the code.
 
 ## Usage
 
-The `ngrxPush` pipe is provided through the `ReactiveComponentModule`.
-To use it, add the `ReactiveComponentModule` to the `imports` of your NgModule:
+The `ngrxPush` pipe is provided through the `PushModule`.
+To use it, add the `PushModule` to the `imports` of your standalone component or NgModule:
 
-```typescript
+```ts
+import { Component } from '@angular/core';
+import { PushModule } from '@ngrx/component';
+
+@Component({
+  // ... other metadata
+  standalone: true,
+  imports: [
+    // ... other imports
+    PushModule,
+  ],
+})
+export class MyStandaloneComponent {}
+```
+
+The `ngrxPush` pipe can be also used by importing the `ReactiveComponentModule`:
+
+```ts
 import { NgModule } from '@angular/core';
 import { ReactiveComponentModule } from '@ngrx/component';
 
 @NgModule({
   imports: [
-    // other imports
-    ReactiveComponentModule
-  ]
+    // ... other imports
+    ReactiveComponentModule,
+  ],
 })
 export class MyFeatureModule {}
 ```