Merge pull request #21167 from storybookjs/valentin/fix-is-standalone…

…-not-available-error Angular: Fix 'isStandalone' function not available error
storybookjs · Feb 20, 2023 · b5778a0 · b5778a0
2 parents eafec4f + 4f7772b
commit b5778a0
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 26 deletions.
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
@@ -77,7 +77,6 @@
     "@angular/forms": "^15.1.1",
     "@angular/platform-browser": "^15.1.1",
     "@angular/platform-browser-dynamic": "^15.1.1",
-    "@ngxs/store": "^3.7.6",
     "@types/rimraf": "^3.0.2",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",

diff --git a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts
@@ -1,10 +1,4 @@
-import {
-  ApplicationRef,
-  enableProdMode,
-  importProvidersFrom,
-  isStandalone,
-  NgModule,
-} from '@angular/core';
+import { ApplicationRef, enableProdMode, importProvidersFrom, NgModule } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 
 import { BehaviorSubject, Subject } from 'rxjs';
@@ -127,11 +121,15 @@ export abstract class AbstractRenderer {
     this.initAngularRootElement(targetDOMNode, targetSelector);
 
     const analyzedMetadata = new PropertyExtractor(storyFnAngular.moduleMetadata, component);
+
     const providers = [
       // Providers for BrowserAnimations & NoopAnimationsModule
       analyzedMetadata.singletons,
       importProvidersFrom(
-        ...analyzedMetadata.imports.filter((imported) => !isStandalone(imported))
+        ...analyzedMetadata.imports.filter((imported) => {
+          const { isStandalone } = PropertyExtractor.analyzeDecorators(component);
+          return !isStandalone;
+        })
       ),
       analyzedMetadata.providers,
       storyPropsProvider(newStoryProps$),

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
@@ -125,6 +125,18 @@ describe('PropertyExtractor', () => {
     });
   });
 
+  describe('analyzeDecorators', () => {
+    it('isStandalone should be false', () => {
+      const { isStandalone } = PropertyExtractor.analyzeDecorators(TestComponent1);
+      expect(isStandalone).toBe(false);
+    });
+
+    it('isStandalone should be true', () => {
+      const { isStandalone } = PropertyExtractor.analyzeDecorators(StandaloneTestComponent);
+      expect(isStandalone).toBe(true);
+    });
+  });
+
   describe('extractProviders', () => {
     it('should return an array of providers', () => {
       const providers = 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
@@ -5,7 +5,6 @@ import {
   Injectable,
   InjectionToken,
   Input,
-  isStandalone,
   NgModule,
   Output,
   Pipe,
@@ -51,14 +50,14 @@ export class PropertyExtractor implements NgModuleMetadata {
     this.declarations = uniqueArray(analyzed.declarations);
 
     if (this.component) {
-      const { isDeclarable } = PropertyExtractor.analyzeDecorators(this.component);
+      const { isDeclarable, isStandalone } = PropertyExtractor.analyzeDecorators(this.component);
       const isDeclared = isComponentAlreadyDeclared(
         this.component,
         analyzed.declarations,
         this.imports
       );
 
-      if (isStandalone(this.component)) {
+      if (isStandalone) {
         this.imports.push(this.component);
       } else if (isDeclarable && !isDeclared) {
         this.declarations.push(this.component);
@@ -134,8 +133,9 @@ export class PropertyExtractor implements NgModuleMetadata {
     const isPipe = decorators.some((d) => this.isDecoratorInstanceOf(d, 'Pipe'));
 
     const isDeclarable = isComponent || isDirective || isPipe;
+    const isStandalone = isComponent && decorators.some((d) => d.standalone);
 
-    return { isDeclarable };
+    return { isDeclarable, isStandalone };
   };
 
   static isDecoratorInstanceOf = (decorator: any, name: string) => {

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -3383,18 +3383,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ngxs/store@npm:^3.7.6":
-  version: 3.7.6
-  resolution: "@ngxs/store@npm:3.7.6"
-  dependencies:
-    tslib: ^1.9.0
-  peerDependencies:
-    "@angular/core": ">=6.1.0 <16.0.0"
-    rxjs: ">=6.5.5"
-  checksum: 38e9c0e9830712e9dfa0de6c0226e16fd5cf0cf9960d0eb1ebf67f35228225685536be12c920c0755298cc0e95f2eb673ede91f23ed78d8f0cdde04ae3c51cdd
-  languageName: node
-  linkType: hard
-
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -5065,7 +5053,6 @@ __metadata:
     "@angular/forms": ^15.1.1
     "@angular/platform-browser": ^15.1.1
     "@angular/platform-browser-dynamic": ^15.1.1
-    "@ngxs/store": ^3.7.6
     "@storybook/builder-webpack5": 7.0.0-beta.51
     "@storybook/cli": 7.0.0-beta.51
     "@storybook/client-logger": 7.0.0-beta.51