Merge pull request #27353 from dario-baumberger/issue-26056-fix-mixed…

…-extends-import-problem Angular: Fix wrong detection of standalone components
storybookjs · May 31, 2024 · 2b3aedd · 2b3aedd
2 parents fa80d22 + 9fa5e39
commit 2b3aedd
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.test.ts b/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.test.ts
@@ -19,6 +19,11 @@ const TestComponent1 = Component({})(class {});
 const TestComponent2 = Component({})(class {});
 const StandaloneTestComponent = Component({ standalone: true })(class {});
 const StandaloneTestDirective = Directive({ standalone: true })(class {});
+const MixedTestComponent1 = Component({ standalone: true })(
+  class extends StandaloneTestComponent {}
+);
+const MixedTestComponent2 = Component({})(class extends MixedTestComponent1 {});
+const MixedTestComponent3 = Component({ standalone: true })(class extends MixedTestComponent2 {});
 const TestModuleWithDeclarations = NgModule({ declarations: [TestComponent1] })(class {});
 const TestModuleWithImportsAndProviders = NgModule({
   imports: [TestModuleWithDeclarations],
@@ -152,6 +157,21 @@ describe('PropertyExtractor', () => {
       const { isStandalone } = PropertyExtractor.analyzeDecorators(StandaloneTestComponent);
       expect(isStandalone).toBe(true);
     });
+
+    it('isStandalone should be true', () => {
+      const { isStandalone } = PropertyExtractor.analyzeDecorators(MixedTestComponent1);
+      expect(isStandalone).toBe(true);
+    });
+
+    it('isStandalone should be false', () => {
+      const { isStandalone } = PropertyExtractor.analyzeDecorators(MixedTestComponent2);
+      expect(isStandalone).toBe(false);
+    });
+
+    it('isStandalone should be true', () => {
+      const { isStandalone } = PropertyExtractor.analyzeDecorators(MixedTestComponent3);
+      expect(isStandalone).toBe(true);
+    });
   });
 
   describe('extractProviders', () => {

diff --git a/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts b/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts
@@ -175,7 +175,17 @@ export class PropertyExtractor implements NgModuleMetadata {
     const isPipe = decorators.some((d) => this.isDecoratorInstanceOf(d, 'Pipe'));
 
     const isDeclarable = isComponent || isDirective || isPipe;
-    const isStandalone = (isComponent || isDirective) && decorators.some((d) => d.standalone);
+
+    // Check if the hierarchically lowest Component or Directive decorator (the only relevant for importing dependencies) is standalone.
+    const isStandalone = !!(
+      (isComponent || isDirective) &&
+      [...decorators]
+        .reverse() // reflectionCapabilities returns decorators in a hierarchically top-down order
+        .find(
+          (d) =>
+            this.isDecoratorInstanceOf(d, 'Component') || this.isDecoratorInstanceOf(d, 'Directive')
+        )?.standalone
+    );
 
     return { isDeclarable, isStandalone };
   };