From 96c0e42e61b8a4fced1354da0162c06e7b029cf3 Mon Sep 17 00:00:00 2001
From: Pawel Kozlowski <pkozlowski.opensource@gmail.com>
Date: Mon, 24 Oct 2022 19:03:31 +0200
Subject: [PATCH] fix(core): allow readonly arrays for standalone imports
 (#47851)

Standalone components should support readonly arrays in the
`@Component.imports`.

Fixes #47643

PR Close #47851
---
 goldens/public-api/core/index.md              |  2 +-
 packages/core/src/metadata/directives.ts      |  2 +-
 .../core/test/acceptance/standalone_spec.ts   | 30 ++++++++++++++++++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/goldens/public-api/core/index.md b/goldens/public-api/core/index.md
index fa702ea2943c4..93b8d269dafea 100644
--- 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
index 7e7039ac35537..b67025f549253 100644
--- 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
index 297cfab1d3902..7f3057848492a 100644
--- 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 {