diff --git a/examples/angular-cli/src/stories/addon-actions.stories.ts b/examples/angular-cli/src/stories/addon-actions.stories.ts
new file mode 100644
index 000000000000..8154940d7232
--- /dev/null
+++ b/examples/angular-cli/src/stories/addon-actions.stories.ts
@@ -0,0 +1,23 @@
+import { storiesOf } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/angular/demo';
+
+storiesOf('Addon Actions', module)
+  .add('Action only', () => ({
+    component: Button,
+    props: {
+      text: 'Action only',
+      onClick: action('log 1')
+    }
+  }))
+  .add('Action and method', () => ({
+    component: Button,
+    props: {
+      text: 'Action and Method',
+      onClick: e => {
+        console.log(e);
+        e.preventDefault();
+        action('log2')(e.target);
+      }
+    }
+  }));
diff --git a/examples/angular-cli/src/stories/addon-knobs.stories.ts b/examples/angular-cli/src/stories/addon-knobs.stories.ts
new file mode 100644
index 000000000000..f3528056afd8
--- /dev/null
+++ b/examples/angular-cli/src/stories/addon-knobs.stories.ts
@@ -0,0 +1,69 @@
+import { storiesOf } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+
+import {
+  withKnobs,
+  text,
+  number,
+  boolean,
+  array,
+  select,
+  color,
+  date,
+  button,
+} from '@storybook/addon-knobs/angular';
+
+import { SimpleKnobsComponent } from './knobs.component';
+import { AllKnobsComponent } from './all-knobs.component';
+
+storiesOf('Addon Knobs', module)
+  .addDecorator(withKnobs)
+  .add('Simple', () => {
+    const name = text('Name', 'John Doe');
+    const age = number('Age', 44);
+
+    return {
+      component: SimpleKnobsComponent,
+      props: {
+        name,
+        age
+      }
+    };
+  })
+  .add('All knobs', () => {
+    const name = text('Name', 'Jane');
+    const stock = number('Stock', 20, {
+      range: true,
+      min: 0,
+      max: 30,
+      step: 5,
+    });
+    const fruits = {
+      apples: 'Apple',
+      bananas: 'Banana',
+      cherries: 'Cherry',
+    };
+    const fruit = select('Fruit', fruits, 'apple');
+    const price = number('Price', 2.25);
+
+    const border = color('Border', 'deeppink');
+    const today = date('Today', new Date('Jan 20 2017'));
+    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+    const nice = boolean('Nice', true);
+    button('Arbitrary action', action('You clicked it!'));
+
+    return {
+      component: AllKnobsComponent,
+      props: {
+        name,
+        stock,
+        fruits,
+        fruit,
+        price,
+        border,
+        today,
+        items,
+        nice
+      }
+    };
+  });
diff --git a/examples/angular-cli/src/stories/addon-notes.stories.ts b/examples/angular-cli/src/stories/addon-notes.stories.ts
new file mode 100644
index 000000000000..bee7284d04ee
--- /dev/null
+++ b/examples/angular-cli/src/stories/addon-notes.stories.ts
@@ -0,0 +1,33 @@
+import { storiesOf } from '@storybook/angular';
+import { withNotes } from '@storybook/addon-notes';
+import { Button } from '@storybook/angular/demo';
+
+storiesOf('Addon Notes', module)
+  .add(
+    'Simple note',
+    withNotes({ text: 'My notes on some button' })(() => ({
+      component: Button,
+      props: {
+        text: 'Notes on some Button',
+        onClick: () => {},
+      }
+    }))
+  )
+  .add(
+    'Note with HTML',
+    withNotes({
+      text: `
+      <h2>My notes on emojis</h2>
+
+      <em>It's not all that important to be honest, but..</em>
+
+      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+    `,
+    })(() => ({
+      component: Button,
+      props: {
+        text: 'Notes with HTML',
+        onClick: () => {},
+      }
+    }))
+  );
diff --git a/examples/angular-cli/src/stories/custom-metadata.stories.ts b/examples/angular-cli/src/stories/custom-metadata.stories.ts
new file mode 100644
index 000000000000..80e014205ae0
--- /dev/null
+++ b/examples/angular-cli/src/stories/custom-metadata.stories.ts
@@ -0,0 +1,67 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, text } from '@storybook/addon-knobs/angular';
+
+import { NameComponent } from './name.component';
+import { CustomPipePipe } from './custom.pipe';
+import { DummyService } from './moduleMetadata/dummy.service';
+import { ServiceComponent } from './moduleMetadata/service.component'
+
+storiesOf('Custom Pipe', module)
+  .add('Default', () => ({
+    component: NameComponent,
+    props: {
+      field: 'foobar',
+    },
+    moduleMetadata: {
+      imports: [],
+      schemas: [],
+      declarations: [CustomPipePipe],
+      providers: []
+    }
+  }));
+
+storiesOf('Custom Pipe/With Knobs', module)
+  .addDecorator(withKnobs)
+  .add('NameComponent', () => ({
+    component: NameComponent,
+    props: {
+      field: text('field', 'foobar'),
+    },
+    moduleMetadata: {
+      imports: [],
+      schemas: [],
+      declarations: [CustomPipePipe],
+      providers: []
+    }
+  }));
+
+storiesOf('Custom ngModule metadata', module)
+  .add('simple', () => ({
+    component: ServiceComponent,
+    props: {
+      name: 'Static name'
+    },
+    moduleMetadata: {
+      imports: [],
+      schemas: [],
+      declarations: [],
+      providers: [DummyService]
+    }
+  }))
+  .addDecorator(withKnobs)
+  .add('with knobs', () => {
+    const name = text('Name', 'Dynamic knob');
+
+    return {
+      component: ServiceComponent,
+      props: {
+        name
+      },
+      moduleMetadata: {
+        imports: [],
+        schemas: [],
+        declarations: [],
+        providers: [DummyService]
+      }
+    };
+  });
diff --git a/examples/angular-cli/src/stories/index.ts b/examples/angular-cli/src/stories/index.ts
index d755b4898847..08847b245744 100644
--- a/examples/angular-cli/src/stories/index.ts
+++ b/examples/angular-cli/src/stories/index.ts
@@ -1,35 +1,14 @@
 import { storiesOf } from '@storybook/angular';
-
-import { withNotes } from '@storybook/addon-notes';
-import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
-import {
-  withKnobs,
-  text,
-  number,
-  boolean,
-  array,
-  select,
-  color,
-  date,
-  button,
-} from '@storybook/addon-knobs/angular';
-
 import { Welcome, Button } from '@storybook/angular/demo';
-import { SimpleKnobsComponent } from './knobs.component';
-import { AllKnobsComponent } from './all-knobs.component';
 import { AppComponent } from '../app/app.component';
-import { DummyService } from './moduleMetadata/dummy.service';
-import { ServiceComponent } from './moduleMetadata/service.component'
-import { NameComponent } from './name.component';
-import { CustomPipePipe } from './custom.pipe';
 
 storiesOf('Welcome', module)
   .add('to Storybook', () => ({
     component: Welcome,
     props: {}
-  }))
+  }));
 
 storiesOf('Button', module)
   .add('with text', () => ({
@@ -45,7 +24,7 @@ storiesOf('Button', module)
       text: '😀 😎 👍 💯',
       onClick: () => {}
     }
-  }))
+  }));
 
 storiesOf('Another Button', module)
   .add('button with link to another story', () => ({
@@ -54,173 +33,11 @@ storiesOf('Another Button', module)
       text: 'Go to Welcome Story',
       onClick: linkTo('Welcome')
     }
-  }))
+  }));
 
 storiesOf('App Component', module)
   .add('Component with separate template', () => ({
     component: AppComponent,
     props: {}
-  }))
-
-storiesOf('Addon Actions', module)
-  .add('Action only', () => ({
-    component: Button,
-    props: {
-      text: 'Action only',
-      onClick: action('log 1')
-    }
-  }))
-  .add('Action and method', () => ({
-    component: Button,
-    props: {
-      text: 'Action and Method',
-      onClick: e => {
-        console.log(e);
-        e.preventDefault();
-        action('log2')(e.target);
-      }
-    }
   }));
 
-storiesOf('Addon Notes', module)
-  .add(
-    'Simple note',
-    withNotes({ text: 'My notes on some button' })(() => ({
-      component: Button,
-      props: {
-        text: 'Notes on some Button',
-        onClick: () => {},
-      }
-    }))
-  )
-  .add(
-    'Note with HTML',
-    withNotes({
-      text: `
-      <h2>My notes on emojis</h2>
-
-      <em>It's not all that important to be honest, but..</em>
-
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    })(() => ({
-      component: Button,
-      props: {
-        text: 'Notes with HTML',
-        onClick: () => {},
-      }
-    }))
-  );
-
-
-storiesOf('Addon Knobs', module)
-  .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const name = text('Name', 'John Doe');
-    const age = number('Age', 44);
-
-    return {
-      component: SimpleKnobsComponent,
-      props: {
-        name,
-        age
-      }
-    };
-  })
-  .add('All knobs', () => {
-    const name = text('Name', 'Jane');
-    const stock = number('Stock', 20, {
-      range: true,
-      min: 0,
-      max: 30,
-      step: 5,
-    });
-    const fruits = {
-      apples: 'Apple',
-      bananas: 'Banana',
-      cherries: 'Cherry',
-    };
-    const fruit = select('Fruit', fruits, 'apple');
-    const price = number('Price', 2.25);
-
-    const border = color('Border', 'deeppink');
-    const today = date('Today', new Date('Jan 20 2017'));
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const nice = boolean('Nice', true);
-    button('Arbitrary action', action('You clicked it!'));
-
-    return {
-      component: AllKnobsComponent,
-      props: {
-        name,
-        stock,
-        fruits,
-        fruit,
-        price,
-        border,
-        today,
-        items,
-        nice
-      }
-    };
-  });
-
-storiesOf('Custom ngModule metadata', module)
-  .add('simple', () => ({
-    component: ServiceComponent,
-    props: {
-      name: 'Static name'
-    },
-    moduleMetadata: {
-      imports: [],
-      schemas: [],
-      declarations: [],
-      providers: [DummyService]
-    }
-  }))
-  .addDecorator(withKnobs)
-  .add('with knobs', () => {
-    const name = text('Name', 'Dynamic knob');
-
-    return {
-      component: ServiceComponent,
-      props: {
-        name
-      },
-      moduleMetadata: {
-        imports: [],
-        schemas: [],
-        declarations: [],
-        providers: [DummyService]
-      }
-    };
-  });
-
-storiesOf('Custom Pipe', module)
-  .add('Default', () => ({
-    component: NameComponent,
-    props: {
-      field: 'foobar',
-    },
-    moduleMetadata: {
-      imports: [],
-      schemas: [],
-      declarations: [CustomPipePipe],
-      providers: []
-    }
-  }));
-
-storiesOf('Custom Pipe/With Knobs', module)
-  .addDecorator(withKnobs)
-  .add('NameComponent', () => ({
-    component: NameComponent,
-    props: {
-      field: text('field', 'foobar'),
-    },
-    moduleMetadata: {
-      imports: [],
-      schemas: [],
-      declarations: [CustomPipePipe],
-      providers: []
-    }
-  }));