Adds requiresComponentDeclaration option

addons/storyshots/storyshots-core/src/frameworks/angular/helpers.ts

@@ -34,9 +34,24 @@ const createComponentFromTemplate = (template: string) => {
 };
 
 export const initModuleData = (storyObj: NgStory): any => {
-  const { component, template, props, moduleMetadata = {} } = storyObj;
+  const {
+    component,
+    template,
+    props,
+    moduleMetadata = {},
+    requiresComponentDeclaration: componentRequiresDeclaration = true,
+  } = storyObj;
 
-  const AnnotatedComponent = template ? createComponentFromTemplate(template) : component;
+  const isCreatingComponentFromTemplate = Boolean(template);
+
+  const AnnotatedComponent = isCreatingComponentFromTemplate
+    ? createComponentFromTemplate(template)
+    : component;
+
+  const componentDeclarations =
+    isCreatingComponentFromTemplate || componentRequiresDeclaration
+      ? [AppComponent, AnnotatedComponent]
+      : [AppComponent];
 
   const story = {
     component: AnnotatedComponent,
@@ -44,7 +59,7 @@ export const initModuleData = (storyObj: NgStory): any => {
   };
 
   const moduleMeta = getModuleMeta(
-    [AppComponent, AnnotatedComponent],
+    componentDeclarations,
     [AnnotatedComponent],
     [AppComponent],
     story,

addons/storyshots/storyshots-core/src/frameworks/angular/types.ts

@@ -12,6 +12,7 @@ export interface ICollection {
 
 export interface NgStory {
   component?: any;
+  requiresComponentDeclaration?: boolean;
   props: ICollection;
   propsMeta?: ICollection;
   moduleMetadata?: NgModuleMetadata;

app/angular/index.d.ts

@@ -22,6 +22,7 @@ export interface IStory {
   props?: ICollection;
   moduleMetadata?: Partial<NgModuleMetadata>;
   component?: any;
+  requiresComponentDeclaration?: boolean;
   template?: string;
 }
 

app/angular/src/client/preview/angular/helpers.ts

@@ -47,9 +47,25 @@ const createComponentFromTemplate = (template: string, styles: string[]) => {
 
 const initModule = (storyFn: IStoryFn) => {
   const storyObj = storyFn();
-  const { component, template, props, styles, moduleMetadata = {} } = storyObj;
+  const {
+    component,
+    template,
+    props,
+    styles,
+    moduleMetadata = {},
+    requiresComponentDeclaration: componentRequiresDeclaration = true,
+  } = storyObj;
 
-  let AnnotatedComponent = template ? createComponentFromTemplate(template, styles) : component;
+  const isCreatingComponentFromTemplate = Boolean(template);
+
+  const AnnotatedComponent = isCreatingComponentFromTemplate
+    ? createComponentFromTemplate(template, styles)
+    : component;
+
+  const componentDeclarations =
+    isCreatingComponentFromTemplate || componentRequiresDeclaration
+      ? [AppComponent, AnnotatedComponent]
+      : [AppComponent];
 
   const story = {
     component: AnnotatedComponent,
@@ -57,7 +73,7 @@ const initModule = (storyFn: IStoryFn) => {
   };
 
   return getModule(
-    [AppComponent, AnnotatedComponent],
+    componentDeclarations,
     [AnnotatedComponent],
     [AppComponent],
     story,

app/angular/src/client/preview/angular/types.ts

@@ -12,6 +12,7 @@ export interface ICollection {
 
 export interface NgStory {
   component?: any;
+  requiresComponentDeclaration?: boolean;
   props: ICollection;
   propsMeta?: ICollection;
   moduleMetadata?: NgModuleMetadata;