diff --git a/examples/angular-cli/jest.config.js b/examples/angular-cli/jest.config.js
index 5a1d1f9dfdd6..aef6a6dd8a31 100644
--- a/examples/angular-cli/jest.config.js
+++ b/examples/angular-cli/jest.config.js
@@ -8,6 +8,7 @@ module.exports = {
   },
   roots: [__dirname],
   transform: {
+    '^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName',
     '^.+\\.jsx?$': '<rootDir>/scripts/babel-jest.js',
     '^.+[/\\\\].storybook[/\\\\]config\\.ts$': '<rootDir>/scripts/jest-ts-babel.js',
     '^.+\\.html$': '<rootDir>/node_modules/jest-preset-angular/preprocessor.js',
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
index aceb663dd9cd..15bf0a822832 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon|Actions Action and method 1`] = `
+exports[`Storyshots Addon|Actions Action And Method 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c1=""
+    _nghost-a-c14=""
   >
     <button
-      _ngcontent-a-c1=""
+      _ngcontent-a-c14=""
     >
       Action and Method
     </button>
@@ -18,17 +18,17 @@ exports[`Storyshots Addon|Actions Action and method 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Addon|Actions Action only 1`] = `
+exports[`Storyshots Addon|Actions Action Only 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c0=""
+    _nghost-a-c13=""
   >
     <button
-      _ngcontent-a-c0=""
+      _ngcontent-a-c13=""
     >
       Action only
     </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot
index 2e50937f7f3f..f9548c66262a 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot
@@ -72,11 +72,11 @@ exports[`Storyshots Addon|Background background template 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c2=""
+      _nghost-a-c0=""
       ng-reflect-text="Hello Button"
     >
       <button
-        _ngcontent-a-c2=""
+        _ngcontent-a-c0=""
       >
         Hello Button
       </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-centered.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-centered.stories.storyshot
index 518603dd9fd3..a567e0501801 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-centered.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-centered.stories.storyshot
@@ -92,11 +92,11 @@ exports[`Storyshots Addon|Centered centered template 1`] = `
         style="margin: auto; max-height: 100%;"
       >
         <storybook-button-component
-          _nghost-a-c3=""
+          _nghost-a-c1=""
           ng-reflect-text="Hello Button"
         >
           <button
-            _ngcontent-a-c3=""
+            _ngcontent-a-c1=""
           >
             Hello Button
           </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-jest.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-jest.stories.storyshot
index 2b1132e5688a..1c3a8b3f4756 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-jest.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-jest.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon|Jest app.component with jest tests 1`] = `
+exports[`Storyshots Addon|Jest App Component With Jest Tests 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
index 51a75fa6a790..b165c070723f 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon|Knobs All knobs 1`] = `
+exports[`Storyshots Addon|Knobs All Knobs 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
@@ -76,7 +76,7 @@ exports[`Storyshots Addon|Knobs Simple 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Addon|Knobs XSS safety 1`] = `
+exports[`Storyshots Addon|Knobs Xss Safety 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
index d582fdc9b04b..05605817fdd6 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon|Links button with link to another story 1`] = `
+exports[`Storyshots Addon|Links Button With Link To Another Story 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c4=""
+    _nghost-a-c15=""
   >
     <button
-      _ngcontent-a-c4=""
+      _ngcontent-a-c15=""
     >
       Go to Welcome Story
     </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
index ce3742208373..f8309318557d 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+exports[`Storyshots Addon|Notes Note With Html 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c6=""
+    _nghost-a-c17=""
   >
     <button
-      _ngcontent-a-c6=""
+      _ngcontent-a-c17=""
     >
       Notes with HTML
     </button>
@@ -18,17 +18,17 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Addon|Notes Simple note 1`] = `
+exports[`Storyshots Addon|Notes Simple Note 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c5=""
+    _nghost-a-c16=""
   >
     <button
-      _ngcontent-a-c5=""
+      _ngcontent-a-c16=""
     >
       Notes on some Button
     </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
index 3425505a2436..812919e5188b 100644
--- a/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/app.component.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots App Component Component with separate template 1`] = `
+exports[`Storyshots App Component Component With Separate Template 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
diff --git a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
index b9d392d5c995..0f70ce4c3287 100644
--- a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Core|Parameters passed to story 1`] = `
+exports[`Storyshots Core|Parameters Passed To Story 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c7=""
+    _nghost-a-c18=""
   >
     <button
-      _ngcontent-a-c7=""
+      _ngcontent-a-c18=""
     >
-      Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{"iframeHeight":"60px"},"globalParameter":"globalParameter","framework":"angular","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
+      Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{"iframeHeight":"60px"},"globalParameter":"globalParameter","framework":"angular","chapterParameter":"chapterParameter","storyParameter":"storyParameter","displayName":"passed to story"}
     </button>
   </storybook-button-component>
 </storybook-dynamic-app-root>
diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot
index b2a69015ad53..ac80b8afb219 100644
--- a/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/custom-pipes.stories.storyshot
@@ -14,7 +14,7 @@ exports[`Storyshots Custom|Pipes Simple 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Custom|Pipes With Knobs 1`] = `
+exports[`Storyshots Custom|Pipes With Knobs Story 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-providers.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-providers.stories.storyshot
index 78c81be6c3b5..e16b95cda994 100644
--- a/examples/angular-cli/src/stories/__snapshots__/custom-providers.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/custom-providers.stories.storyshot
@@ -17,7 +17,7 @@ exports[`Storyshots Custom|Providers Simple 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Custom|Providers With knobs 1`] = `
+exports[`Storyshots Custom|Providers With Knobs Story 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot
index 2dda80850d23..ed2cbdef8c35 100644
--- a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Custom|Style Default 1`] = `
+exports[`Storyshots Custom|Style Default Story 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
@@ -8,11 +8,11 @@ exports[`Storyshots Custom|Style Default 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c8=""
+      _nghost-a-c19=""
       ng-reflect-text="Button with custom styles"
     >
       <button
-        _ngcontent-a-c8=""
+        _ngcontent-a-c19=""
       >
         Button with custom styles
       </button>
@@ -21,7 +21,7 @@ exports[`Storyshots Custom|Style Default 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Custom|Style With Knobs 1`] = `
+exports[`Storyshots Custom|Style With Knobs Story 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
@@ -29,11 +29,11 @@ exports[`Storyshots Custom|Style With Knobs 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c9=""
+      _nghost-a-c20=""
       ng-reflect-text="Button with custom styles"
     >
       <button
-        _ngcontent-a-c9=""
+        _ngcontent-a-c20=""
       >
         Button with custom styles
       </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot
index 6ffc693b1131..d597059e64d0 100644
--- a/examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot
@@ -8,11 +8,11 @@ exports[`Storyshots Button with some emoji 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c12=""
+      _nghost-a-c4=""
       ng-reflect-text="😀 😎 👍 💯"
     >
       <button
-        _ngcontent-a-c12=""
+        _ngcontent-a-c4=""
       >
         😀 😎 👍 💯
       </button>
@@ -29,11 +29,11 @@ exports[`Storyshots Button with text 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c11=""
+      _nghost-a-c3=""
       ng-reflect-text="Hello Button"
     >
       <button
-        _ngcontent-a-c11=""
+        _ngcontent-a-c3=""
       >
         Hello Button
       </button>
@@ -50,47 +50,47 @@ exports[`Storyshots Welcome to Storybook 1`] = `
 >
   <ng-component>
     <storybook-welcome-component
-      _nghost-a-c10=""
+      _nghost-a-c2=""
     >
       <main
-        _ngcontent-a-c10=""
+        _ngcontent-a-c2=""
       >
         <h1
-          _ngcontent-a-c10=""
+          _ngcontent-a-c2=""
         >
           Welcome to storybook
         </h1>
         <p
-          _ngcontent-a-c10=""
+          _ngcontent-a-c2=""
         >
           This is a UI component dev environment for your app.
         </p>
         <p
-          _ngcontent-a-c10=""
+          _ngcontent-a-c2=""
         >
            We've added some basic stories inside the 
           <span
-            _ngcontent-a-c10=""
+            _ngcontent-a-c2=""
             class="inline-code"
           >
             src/stories
           </span>
            directory. 
           <br
-            _ngcontent-a-c10=""
+            _ngcontent-a-c2=""
           />
            A story is a single state of one or more UI components. You can have as many stories as you want. 
           <br
-            _ngcontent-a-c10=""
+            _ngcontent-a-c2=""
           />
            (Basically a story is like a visual test case.) 
         </p>
         <p
-          _ngcontent-a-c10=""
+          _ngcontent-a-c2=""
         >
            See these sample 
           <a
-            _ngcontent-a-c10=""
+            _ngcontent-a-c2=""
             role="button"
             tabindex="0"
           >
@@ -98,7 +98,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
           </a>
            for a component called 
           <span
-            _ngcontent-a-c10=""
+            _ngcontent-a-c2=""
             class="inline-code"
           >
             Button
@@ -106,26 +106,26 @@ exports[`Storyshots Welcome to Storybook 1`] = `
            . 
         </p>
         <p
-          _ngcontent-a-c10=""
+          _ngcontent-a-c2=""
         >
            Just like that, you can add your own components as stories. 
           <br
-            _ngcontent-a-c10=""
+            _ngcontent-a-c2=""
           />
            You can also edit those components and see changes right away. 
           <br
-            _ngcontent-a-c10=""
+            _ngcontent-a-c2=""
           />
            (Try editing the 
           <span
-            _ngcontent-a-c10=""
+            _ngcontent-a-c2=""
             class="inline-code"
           >
             Button
           </span>
            stories located at 
           <span
-            _ngcontent-a-c10=""
+            _ngcontent-a-c2=""
             class="inline-code"
           >
             src/stories/index.js
@@ -133,15 +133,15 @@ exports[`Storyshots Welcome to Storybook 1`] = `
           .) 
         </p>
         <p
-          _ngcontent-a-c10=""
+          _ngcontent-a-c2=""
         >
            Usually we create stories with smaller UI components in the app.
           <br
-            _ngcontent-a-c10=""
+            _ngcontent-a-c2=""
           />
            Have a look at the 
           <a
-            _ngcontent-a-c10=""
+            _ngcontent-a-c2=""
             href="https://storybook.js.org/basics/writing-stories"
             rel="noopener noreferrer"
             target="_blank"
@@ -151,20 +151,20 @@ exports[`Storyshots Welcome to Storybook 1`] = `
            section in our documentation. 
         </p>
         <p
-          _ngcontent-a-c10=""
+          _ngcontent-a-c2=""
           class="note"
         >
           <b
-            _ngcontent-a-c10=""
+            _ngcontent-a-c2=""
           >
             NOTE:
           </b>
           <br
-            _ngcontent-a-c10=""
+            _ngcontent-a-c2=""
           />
            Have a look at the 
           <span
-            _ngcontent-a-c10=""
+            _ngcontent-a-c2=""
             class="inline-code"
           >
             .storybook/webpack.config.js
diff --git a/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
index bb1e628d5f83..e5a7203f3a78 100644
--- a/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/component-with-di/__snapshots__/di.component.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Custom|Dependencies inputs and inject dependencies 1`] = `
+exports[`Storyshots Custom|Dependencies Inputs And Inject Dependencies 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
@@ -31,7 +31,7 @@ exports[`Storyshots Custom|Dependencies inputs and inject dependencies 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Custom|Dependencies inputs and inject dependencies with knobs 1`] = `
+exports[`Storyshots Custom|Dependencies Inputs And Inject Dependencies With Knobs 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
diff --git a/examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot b/examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot
index add314142c4f..d26ec96e6091 100644
--- a/examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot
+++ b/examples/angular-cli/src/stories/component-with-style/__snapshots__/styled.component.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Custom|styleUrls Component with styles 1`] = `
+exports[`Storyshots Custom|styleUrls Component With Styles 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
index 5b04573306f1..414a67409592 100644
--- a/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
+++ b/examples/angular-cli/src/stories/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Custom|ngModel custom ControlValueAccessor 1`] = `
+exports[`Storyshots Custom|ngModel Custom Control Value Accessor 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
diff --git a/examples/angular-cli/src/stories/inheritance/__snapshots__/inheritance.stories.storyshot b/examples/angular-cli/src/stories/inheritance/__snapshots__/inheritance.stories.storyshot
index 5213750e890e..4d680501adf0 100644
--- a/examples/angular-cli/src/stories/inheritance/__snapshots__/inheritance.stories.storyshot
+++ b/examples/angular-cli/src/stories/inheritance/__snapshots__/inheritance.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Custom|Inheritance base button 1`] = `
+exports[`Storyshots Custom|Inheritance Base Button 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
@@ -14,7 +14,7 @@ exports[`Storyshots Custom|Inheritance base button 1`] = `
 </storybook-dynamic-app-root>
 `;
 
-exports[`Storyshots Custom|Inheritance icon button 1`] = `
+exports[`Storyshots Custom|Inheritance Icon Button 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}
diff --git a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context-forRoot.stories.storyshot b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context-forRoot.stories.storyshot
index eaf3db5a9d02..fa0397a37c2d 100644
--- a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context-forRoot.stories.storyshot
+++ b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context-forRoot.stories.storyshot
@@ -7,21 +7,21 @@ exports[`Storyshots Custom|Feature Module as Context with forRoot Component with
   target={[Function ViewContainerRef_]}
 >
   <storybook-chip
-    _nghost-a-c15=""
+    _nghost-a-c7=""
     style="background-color: rgb(238, 238, 238);"
   >
     <span
-      _ngcontent-a-c15=""
+      _ngcontent-a-c7=""
       class="text"
     >
       My Chíp
     </span>
     <div
-      _ngcontent-a-c15=""
+      _ngcontent-a-c7=""
       class="remove"
     >
       <span
-        _ngcontent-a-c15=""
+        _ngcontent-a-c7=""
         class="x"
       >
         ✕
@@ -38,21 +38,21 @@ exports[`Storyshots Custom|Feature Module as Context with forRoot Component with
   target={[Function ViewContainerRef_]}
 >
   <storybook-chip
-    _nghost-a-c16=""
+    _nghost-a-c8=""
     style="background-color: rgb(238, 238, 238);"
   >
     <span
-      _ngcontent-a-c16=""
+      _ngcontent-a-c8=""
       class="text"
     >
       My Chíp
     </span>
     <div
-      _ngcontent-a-c16=""
+      _ngcontent-a-c8=""
       class="remove"
     >
       <span
-        _ngcontent-a-c16=""
+        _ngcontent-a-c8=""
         class="x"
       >
         ✕
@@ -69,28 +69,28 @@ exports[`Storyshots Custom|Feature Module as Context with forRoot Component with
   target={[Function ViewContainerRef_]}
 >
   <storybook-chips-group
-    _nghost-a-c13=""
+    _nghost-a-c5=""
   >
     
     <storybook-chip
-      _ngcontent-a-c13=""
-      _nghost-a-c14=""
+      _ngcontent-a-c5=""
+      _nghost-a-c6=""
       class="chip"
       ng-reflect-display-text="Chip 1"
       style="background-color: rgb(238, 238, 238);"
     >
       <span
-        _ngcontent-a-c14=""
+        _ngcontent-a-c6=""
         class="text"
       >
         Chíp 1
       </span>
       <div
-        _ngcontent-a-c14=""
+        _ngcontent-a-c6=""
         class="remove"
       >
         <span
-          _ngcontent-a-c14=""
+          _ngcontent-a-c6=""
           class="x"
         >
           ✕
@@ -98,24 +98,24 @@ exports[`Storyshots Custom|Feature Module as Context with forRoot Component with
       </div>
     </storybook-chip>
     <storybook-chip
-      _ngcontent-a-c13=""
-      _nghost-a-c14=""
+      _ngcontent-a-c5=""
+      _nghost-a-c6=""
       class="chip"
       ng-reflect-display-text="Chip 2"
       style="background-color: rgb(238, 238, 238);"
     >
       <span
-        _ngcontent-a-c14=""
+        _ngcontent-a-c6=""
         class="text"
       >
         Chíp 2
       </span>
       <div
-        _ngcontent-a-c14=""
+        _ngcontent-a-c6=""
         class="remove"
       >
         <span
-          _ngcontent-a-c14=""
+          _ngcontent-a-c6=""
           class="x"
         >
           ✕
@@ -124,7 +124,7 @@ exports[`Storyshots Custom|Feature Module as Context with forRoot Component with
     </storybook-chip>
     
     <div
-      _ngcontent-a-c13=""
+      _ngcontent-a-c5=""
       class="remove-all"
     >
        Remove All 
diff --git a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot
index d61ddd41ba4c..838d283d5c21 100644
--- a/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot
+++ b/examples/angular-cli/src/stories/module-context/__snapshots__/module-context.stories.storyshot
@@ -7,21 +7,21 @@ exports[`Storyshots Custom|Feature Module as Context Component with default prov
   target={[Function ViewContainerRef_]}
 >
   <storybook-chip
-    _nghost-a-c19=""
+    _nghost-a-c11=""
     style="background-color: rgb(238, 238, 238);"
   >
     <span
-      _ngcontent-a-c19=""
+      _ngcontent-a-c11=""
       class="text"
     >
       My Chíp
     </span>
     <div
-      _ngcontent-a-c19=""
+      _ngcontent-a-c11=""
       class="remove"
     >
       <span
-        _ngcontent-a-c19=""
+        _ngcontent-a-c11=""
         class="x"
       >
         ✕
@@ -38,21 +38,21 @@ exports[`Storyshots Custom|Feature Module as Context Component with overridden p
   target={[Function ViewContainerRef_]}
 >
   <storybook-chip
-    _nghost-a-c20=""
+    _nghost-a-c12=""
     style="background-color: yellow;"
   >
     <span
-      _ngcontent-a-c20=""
+      _ngcontent-a-c12=""
       class="text"
     >
       My Chíp
     </span>
     <div
-      _ngcontent-a-c20=""
+      _ngcontent-a-c12=""
       class="remove"
     >
       <span
-        _ngcontent-a-c20=""
+        _ngcontent-a-c12=""
         class="x"
       >
         ✕
@@ -69,28 +69,28 @@ exports[`Storyshots Custom|Feature Module as Context Component with self and dep
   target={[Function ViewContainerRef_]}
 >
   <storybook-chips-group
-    _nghost-a-c17=""
+    _nghost-a-c9=""
   >
     
     <storybook-chip
-      _ngcontent-a-c17=""
-      _nghost-a-c18=""
+      _ngcontent-a-c9=""
+      _nghost-a-c10=""
       class="chip"
       ng-reflect-display-text="Chip 1"
       style="background-color: rgb(238, 238, 238);"
     >
       <span
-        _ngcontent-a-c18=""
+        _ngcontent-a-c10=""
         class="text"
       >
         Chíp 1
       </span>
       <div
-        _ngcontent-a-c18=""
+        _ngcontent-a-c10=""
         class="remove"
       >
         <span
-          _ngcontent-a-c18=""
+          _ngcontent-a-c10=""
           class="x"
         >
           ✕
@@ -98,24 +98,24 @@ exports[`Storyshots Custom|Feature Module as Context Component with self and dep
       </div>
     </storybook-chip>
     <storybook-chip
-      _ngcontent-a-c17=""
-      _nghost-a-c18=""
+      _ngcontent-a-c9=""
+      _nghost-a-c10=""
       class="chip"
       ng-reflect-display-text="Chip 2"
       style="background-color: rgb(238, 238, 238);"
     >
       <span
-        _ngcontent-a-c18=""
+        _ngcontent-a-c10=""
         class="text"
       >
         Chíp 2
       </span>
       <div
-        _ngcontent-a-c18=""
+        _ngcontent-a-c10=""
         class="remove"
       >
         <span
-          _ngcontent-a-c18=""
+          _ngcontent-a-c10=""
           class="x"
         >
           ✕
@@ -124,7 +124,7 @@ exports[`Storyshots Custom|Feature Module as Context Component with self and dep
     </storybook-chip>
     
     <div
-      _ngcontent-a-c17=""
+      _ngcontent-a-c9=""
       class="remove-all"
     >
        Remove All 
diff --git a/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot b/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot
index e449b7c64137..16233edd0907 100644
--- a/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot
+++ b/examples/angular-cli/src/stories/on-push/__snapshots__/on-push.stories.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Core|OnPush Class-specified component with OnPush and Knobs 1`] = `
+exports[`Storyshots Core|OnPush Class Specified Component With On Push And Knobs 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}
   data={[Function Object]}