chore(angular): add ngcc postinstall for angular-cli example

change all angular storyshot because is now generated with ivy 🤔

app/angular/src/client/preview/angular-beta/RendererFactory.test.ts

@@ -1,4 +1,4 @@
-import { Component, getPlatform } from '@angular/core';
+import { Component, getPlatform, ɵresetJitOptions } from '@angular/core';
 import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { Parameters } from '../types-6-0';
@@ -26,6 +26,10 @@ describe('RendererFactory', () => {
 
   afterEach(() => {
     jest.clearAllMocks();
+
+    // Necessary to avoid this error "Provided value for `preserveWhitespaces` can not be changed once it has been set." :
+    // Source: https://github.com/angular/angular/commit/e342ffd855ffeb8af7067b42307ffa320d82177e#diff-92b125e532cc22977b46a91f068d6d7ea81fd61b772842a4a0212f1cfd875be6R28
+    ɵresetJitOptions();
   });
 
   describe('CanvasRenderer', () => {
@@ -65,7 +69,9 @@ describe('RendererFactory', () => {
         targetDOMNode: rootTargetDOMNode,
       });
 
-      expect(document.body.getElementsByTagName('my-story')[0].innerHTML).toBe('<foo>🦊</foo>');
+      expect(document.body.getElementsByTagName('my-story')[0].innerHTML).toBe(
+        '<foo>🦊</foo><!--container-->'
+      );
     });
 
     describe('when forced=true', () => {

app/angular/src/client/preview/angular-beta/RendererService.test.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ɵresetJitOptions } from '@angular/core';
 import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { Parameters } from '../types-6-0';
@@ -18,6 +18,10 @@ describe('RendererService', () => {
 
   afterEach(() => {
     jest.clearAllMocks();
+
+    // Necessary to avoid this error "Provided value for `preserveWhitespaces` can not be changed once it has been set." :
+    // Source: https://github.com/angular/angular/commit/e342ffd855ffeb8af7067b42307ffa320d82177e#diff-92b125e532cc22977b46a91f068d6d7ea81fd61b772842a4a0212f1cfd875be6R28
+    ɵresetJitOptions();
   });
 
   it('should initialize', () => {
@@ -53,7 +57,7 @@ describe('RendererService', () => {
       });
 
       expect(document.body.getElementsByTagName('storybook-wrapper')[0].innerHTML).toBe(
-        '<foo>🦊</foo>'
+        '<foo>🦊</foo><!--container-->'
       );
     });
 

examples/angular-cli/package.json

@@ -15,7 +15,8 @@
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:generate-output": "jest --json --config=jest.addon-config.js --outputFile=addon-jest.testresults.json || true",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "postinstall": "ngcc --source ../../node_modules"
   },
   "dependencies": {
     "@angular/common": "^11.2.14",
@@ -28,6 +29,7 @@
     "core-js": "^3.8.2",
     "node-sass": "^4.14.1",
     "rxjs": "^6.6.3",
+    "telejson": "^5.3.2",
     "zone.js": "^0.11.3"
   },
   "devDependencies": {

examples/angular-cli/src/stories/__snapshots__/welcome-angular.stories.storyshot

@@ -11,7 +11,7 @@ exports[`Storyshots Welcome/ To Angular To Angular 1`] = `
 
     </div>
     <div
-      style="text-align:center"
+      style="text-align: center;"
     >
       <h1>
          Welcome to app! 

examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot

@@ -3,98 +3,98 @@
 exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
 <storybook-wrapper>
   <storybook-welcome-component
-    _nghost-a-c25=""
+    _nghost-a-c151=""
   >
     <main
-      _ngcontent-a-c25=""
+      _ngcontent-a-c151=""
     >
       <h1
-        _ngcontent-a-c25=""
+        _ngcontent-a-c151=""
       >
         Welcome to storybook
       </h1>
       <p
-        _ngcontent-a-c25=""
+        _ngcontent-a-c151=""
       >
         This is a UI component dev environment for your app.
       </p>
       <p
-        _ngcontent-a-c25=""
+        _ngcontent-a-c151=""
       >
          We've added some basic stories inside the 
         <span
-          _ngcontent-a-c25=""
+          _ngcontent-a-c151=""
           class="inline-code"
         >
           src/stories
         </span>
          directory. 
         <br
-          _ngcontent-a-c25=""
+          _ngcontent-a-c151=""
         />
          A story is a single state of one or more UI components. You can have as many stories as you want. 
         <br
-          _ngcontent-a-c25=""
+          _ngcontent-a-c151=""
         />
          (Basically a story is like a visual test case.) 
       </p>
       <p
-        _ngcontent-a-c25=""
+        _ngcontent-a-c151=""
       >
          See these sample 
         <a
-          _ngcontent-a-c25=""
+          _ngcontent-a-c151=""
           role="button"
           tabindex="0"
         >
           stories
         </a>
          for a component called 
         <span
-          _ngcontent-a-c25=""
+          _ngcontent-a-c151=""
           class="inline-code"
         >
           Button
         </span>
          . 
       </p>
       <p
-        _ngcontent-a-c25=""
+        _ngcontent-a-c151=""
       >
          Just like that, you can add your own components as stories. 
         <br
-          _ngcontent-a-c25=""
+          _ngcontent-a-c151=""
         />
          You can also edit those components and see changes right away. 
         <br
-          _ngcontent-a-c25=""
+          _ngcontent-a-c151=""
         />
          (Try editing the 
         <span
-          _ngcontent-a-c25=""
+          _ngcontent-a-c151=""
           class="inline-code"
         >
           Button
         </span>
          stories located at 
         <span
-          _ngcontent-a-c25=""
+          _ngcontent-a-c151=""
           class="inline-code"
         >
           src/stories/index.js
         </span>
         .) 
       </p>
       <p
-        _ngcontent-a-c25=""
+        _ngcontent-a-c151=""
       >
          Usually we create stories with smaller UI components in the app.
         <br
-          _ngcontent-a-c25=""
+          _ngcontent-a-c151=""
         />
          Have a look at the 
         <a
-          _ngcontent-a-c25=""
+          _ngcontent-a-c151=""
           href="https://storybook.js.org/basics/writing-stories"
           rel="noopener noreferrer"
           target="_blank"
@@ -104,20 +104,20 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
          section in our documentation. 
       </p>
       <p
-        _ngcontent-a-c25=""
+        _ngcontent-a-c151=""
         class="note"
       >
         <b
-          _ngcontent-a-c25=""
+          _ngcontent-a-c151=""
         >
           NOTE:
         </b>
         <br
-          _ngcontent-a-c25=""
+          _ngcontent-a-c151=""
         />
          Have a look at the 
         <span
-          _ngcontent-a-c25=""
+          _ngcontent-a-c151=""
           class="inline-code"
         >
           .storybook/webpack.config.js

examples/angular-cli/src/stories/addons/actions/__snapshots__/addon-actions.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Actions Component Output with ArgsTypes 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c4=""
+    _nghost-a-c43=""
     ng-reflect-text="Button 🥁"
   >
     <button
-      _ngcontent-a-c4=""
+      _ngcontent-a-c43=""
     >
       Button 🥁
     </button>
@@ -18,11 +18,11 @@ exports[`Storyshots Addons/Actions Component Output with ArgsTypes 1`] = `
 exports[`Storyshots Addons/Actions Component Output with EventEmitter 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c2=""
+    _nghost-a-c43=""
     ng-reflect-text="Button 🥁"
   >
     <button
-      _ngcontent-a-c2=""
+      _ngcontent-a-c43=""
     >
       Button 🥁
     </button>
@@ -41,11 +41,11 @@ exports[`Storyshots Addons/Actions Story with template 1`] = `
 exports[`Storyshots Addons/Actions Use action in method 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c3=""
+    _nghost-a-c43=""
     ng-reflect-text="Button 🥁"
   >
     <button
-      _ngcontent-a-c3=""
+      _ngcontent-a-c43=""
     >
       Button 🥁
     </button>

examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons / Backgrounds Overridden 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c7=""
+    _nghost-a-c43=""
     ng-reflect-text="This one should have different"
   >
     <button
-      _ngcontent-a-c7=""
+      _ngcontent-a-c43=""
     >
       This one should have different backgrounds
     </button>
@@ -18,11 +18,11 @@ exports[`Storyshots Addons / Backgrounds Overridden 1`] = `
 exports[`Storyshots Addons / Backgrounds With Component 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c5=""
+    _nghost-a-c43=""
     ng-reflect-text="Button"
   >
     <button
-      _ngcontent-a-c5=""
+      _ngcontent-a-c43=""
     >
       Button
     </button>
@@ -33,11 +33,11 @@ exports[`Storyshots Addons / Backgrounds With Component 1`] = `
 exports[`Storyshots Addons / Backgrounds With Template 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c6=""
+    _nghost-a-c43=""
     ng-reflect-text="Button"
   >
     <button
-      _ngcontent-a-c6=""
+      _ngcontent-a-c43=""
     >
       Button
     </button>

examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Docs with some emoji 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c9=""
+    _nghost-a-c43=""
     ng-reflect-text="😀 😎 👍 💯"
   >
     <button
-      _ngcontent-a-c9=""
+      _ngcontent-a-c43=""
     >
       😀 😎 👍 💯
     </button>
@@ -18,11 +18,11 @@ exports[`Storyshots Addons/Docs with some emoji 1`] = `
 exports[`Storyshots Addons/Docs with text 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c8=""
+    _nghost-a-c43=""
     ng-reflect-text="hello button"
   >
     <button
-      _ngcontent-a-c8=""
+      _ngcontent-a-c43=""
     >
       hello button
     </button>

examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Docs/SimpleButton with text 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c11=""
+    _nghost-a-c43=""
     ng-reflect-text="Hello 👋"
   >
     <button
-      _ngcontent-a-c11=""
+      _ngcontent-a-c43=""
     >
       Hello 👋
     </button>

examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Docs/Iframe Basic 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c10=""
+    _nghost-a-c43=""
     ng-reflect-text="Add 👾"
   >
     <button
-      _ngcontent-a-c10=""
+      _ngcontent-a-c43=""
     >
       Add 👾
     </button>

examples/angular-cli/src/stories/addons/jest/__snapshots__/addon-jest.stories.storyshot

@@ -11,7 +11,7 @@ exports[`Storyshots Addons/Jest app.component with jest tests 1`] = `
 
     </div>
     <div
-      style="text-align:center"
+      style="text-align: center;"
     >
       <h1>
          Welcome to app! 

examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Links button with link to another story 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c12=""
+    _nghost-a-c43=""
     ng-reflect-text="Go to Welcome Story"
   >
     <button
-      _ngcontent-a-c12=""
+      _ngcontent-a-c43=""
     >
       Go to Welcome Story
     </button>