fix(core): allow readonly arrays for standalone imports (#47851)

pkozlowski-opensource · pkozlowski-opensource · commit 96c0e42e61b8 · 2022-10-27T09:29:24.000+02:00
Standalone components should support readonly arrays in the `@Component.imports`. Fixes #47643 PR Close #47851
diff --git a/goldens/public-api/core/index.md b/goldens/public-api/core/index.md
@@ -188,7 +188,7 @@ export interface Component extends Directive {
     encapsulation?: ViewEncapsulation;
     // @deprecated
     entryComponents?: Array<Type<any> | any[]>;
-    imports?: (Type<any> | any[])[];
+    imports?: (Type<any> | ReadonlyArray<any>)[];
     interpolation?: [string, string];
     moduleId?: string;
     preserveWhitespaces?: boolean;
diff --git a/packages/core/src/metadata/directives.ts b/packages/core/src/metadata/directives.ts
@@ -629,7 +629,7 @@ export interface Component extends Directive {
    * More information about standalone components, directives, and pipes can be found in [this
    * guide](guide/standalone-components).
    */
-  imports?: (Type<any>|any[])[];
+  imports?: (Type<any>|ReadonlyArray<any>)[];
 
   /**
    * The set of schemas that declare elements to be allowed in a standalone component. Elements and
diff --git a/packages/core/test/acceptance/standalone_spec.ts b/packages/core/test/acceptance/standalone_spec.ts
@@ -152,7 +152,7 @@ describe('standalone components, directives, and pipes', () => {
   });
 
 
-  it('should render a standalone component with dependenices and ambient providers', () => {
+  it('should render a standalone component with dependencies and ambient providers', () => {
     @Component({
       standalone: true,
       template: 'Inner',
@@ -453,6 +453,34 @@ describe('standalone components, directives, and pipes', () => {
     expect(fixture.nativeElement.innerHTML).toBe('<div red="true">blue</div>');
   });
 
+  it('should support readonly arrays in @Component.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: 'standalone',
+      standalone: true,
+      template: `<div red>{{'' | blue}}</div>`,
+      imports: [DirAndPipe],
+    })
+    class TestComponent {
+    }
+
+    const fixture = TestBed.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 {
