fix(core): allow readonly arrays in NgModule imports and exports

NgModule should support readonly arrays in `@NgModule.imports` and `@NgModule.exports`. Fixes angular#48089
pkozlowski-opensource · Nov 17, 2022 · c985860 · c985860
1 parent 192207e
commit c985860
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 4 deletions.
diff --git a/goldens/public-api/core/index.md b/goldens/public-api/core/index.md
@@ -919,9 +919,9 @@ export interface NgModule {
     declarations?: Array<Type<any> | any[]>;
     // @deprecated
     entryComponents?: Array<Type<any> | any[]>;
-    exports?: Array<Type<any> | any[]>;
+    exports?: Array<Type<any> | ReadonlyArray<any>>;
     id?: string;
-    imports?: Array<Type<any> | ModuleWithProviders<{}> | any[]>;
+    imports?: Array<Type<any> | ModuleWithProviders<{}> | ReadonlyArray<any>>;
     jit?: true;
     providers?: Array<Provider | EnvironmentProviders>;
     schemas?: Array<SchemaMetadata | any[]>;

diff --git a/packages/core/src/metadata/ng_module.ts b/packages/core/src/metadata/ng_module.ts
@@ -136,7 +136,7 @@ export interface NgModule {
    * ```
    *
    */
-  imports?: Array<Type<any>|ModuleWithProviders<{}>|any[]>;
+  imports?: Array<Type<any>|ModuleWithProviders<{}>|ReadonlyArray<any>>;
 
   /**
    * The set of components, directives, and pipes declared in this
@@ -168,7 +168,7 @@ export interface NgModule {
    * }
    * ```
    */
-  exports?: Array<Type<any>|any[]>;
+  exports?: Array<Type<any>|ReadonlyArray<any>>;
 
   /**
    * The set of components to compile when this NgModule is defined,

diff --git a/packages/core/test/acceptance/standalone_spec.ts b/packages/core/test/acceptance/standalone_spec.ts
@@ -481,6 +481,75 @@ describe('standalone components, directives, and pipes', () => {
     expect(fixture.nativeElement.innerHTML).toBe('<div red="true">blue</div>');
   });
 
+  it('should support readonly arrays in @NgModule.imports and @NgModule.exports', () => {
+    @Directive({selector: '[red]', standalone: true, host: {'[attr.red]': 'true'}})
+    class RedIdDirective {
+    }
+
+    @Pipe({name: 'blue', pure: true, standalone: true})
+    class BluePipe implements PipeTransform {
+      transform() {
+        return 'blue';
+      }
+    }
+
+    const DirAndPipe = [RedIdDirective, BluePipe] as const;
+
+    @NgModule({
+      imports: [DirAndPipe],
+      exports: [DirAndPipe],
+    })
+    class TestNgModule {
+    }
+
+    @Component({
+      selector: 'uses-standalone',
+      template: `<div red>{{'' | blue}}</div>`,
+    })
+    class TestComponent {
+    }
+
+    const fixture = TestBed
+                        .configureTestingModule({
+                          declarations: [TestComponent],
+                          imports: [TestNgModule],
+                        })
+                        .createComponent(TestComponent);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.innerHTML).toBe('<div red="true">blue</div>');
+  });
+
+  it('should support readonly arrays in TestBed testing module imports', () => {
+    @Directive({selector: '[red]', standalone: true, host: {'[attr.red]': 'true'}})
+    class RedIdDirective {
+    }
+
+    @Pipe({name: 'blue', pure: true, standalone: true})
+    class BluePipe implements PipeTransform {
+      transform() {
+        return 'blue';
+      }
+    }
+
+    const DirAndPipe = [RedIdDirective, BluePipe] as const;
+
+    @Component({
+      selector: 'uses-standalone',
+      template: `<div red>{{'' | blue}}</div>`,
+    })
+    class TestComponent {
+    }
+
+    const fixture = TestBed
+                        .configureTestingModule({
+                          declarations: [TestComponent],
+                          imports: [DirAndPipe],
+                        })
+                        .createComponent(TestComponent);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.innerHTML).toBe('<div red="true">blue</div>');
+  });
+
   it('should deduplicate declarations', () => {
     @Component({selector: 'test-red', standalone: true, template: 'red(<ng-content></ng-content>)'})
     class RedComponent {