Update angular example to v8

addons/storyshots/storyshots-core/src/frameworks/angular/app.component.ts

@@ -27,7 +27,7 @@ import { NgStory, ICollection } from './types';
   template: '<ng-template #target></ng-template>',
 })
 export class AppComponent implements OnInit, OnDestroy {
-  @ViewChild('target', { read: ViewContainerRef })
+  @ViewChild('target', { read: ViewContainerRef, static: true })
   target: ViewContainerRef;
 
   constructor(private cfr: ComponentFactoryResolver, @Inject(STORY) private data: NgStory) {}

app/angular/src/client/preview/angular/components/app.component.ts

@@ -28,7 +28,7 @@ import { StoryFnAngularReturnType, ICollection } from '../../types';
   template: '<ng-template #target></ng-template>',
 })
 export class AppComponent implements OnInit, OnDestroy {
-  @ViewChild('target', { read: ViewContainerRef })
+  @ViewChild('target', { read: ViewContainerRef, static: true })
   target: ViewContainerRef;
 
   readonly previousValues: { [key: string]: any } = {};

app/angular/src/server/__tests__/angular-cli_config.test.ts

@@ -1,67 +1,52 @@
 import stripJsonComments from 'strip-json-comments';
 import { Path } from '@angular-devkit/core';
-import { getAngularCliWebpackConfigOptions } from '../angular-cli_config';
-
-// eslint-disable-next-line global-require
-jest.mock('fs', () => require('../../../../../__mocks__/fs'));
-jest.mock('path', () => ({
-  join: (...args) =>
-    args[args.length - 1] === 'angular.json'
-      ? 'angular.json'
-      : jest.requireActual('path').join(...args),
-  resolve: (...args) => 'tsconfig.json',
-}));
-
-const angularJson = jest
-  .requireActual('fs')
-  .readFileSync(jest.requireActual('path').resolve(__dirname, 'angular.json'), 'utf8');
-
-const setupFiles = (files: any) => {
-  // eslint-disable-next-line no-underscore-dangle, global-require
-  require('fs').__setMockFiles(files);
-};
+import * as fs from 'fs';
+import * as path from 'path';
+import {
+  getAngularCliWebpackConfigOptions,
+  getLeadingAngularCliProject,
+} from '../angular-cli_config';
 
 describe('angular-cli_config', () => {
-  describe('getAngularCliWebpackConfigOptions()', () => {
-    it('should return have empty `buildOptions.sourceMap` and `buildOptions.optimization` by default', () => {
-      setupFiles({ 'angular.json': angularJson });
-
-      const config = getAngularCliWebpackConfigOptions('/' as Path);
-
-      expect(config).toMatchObject({
-        buildOptions: {
-          sourceMap: {},
-          optimization: {},
-        },
-      });
+  it('should return have empty `buildOptions.sourceMap` and `buildOptions.optimization` by default', () => {
+    const config = getAngularCliWebpackConfigOptions(__dirname as Path);
+    expect(config).toMatchObject({
+      buildOptions: {
+        sourceMap: {},
+        optimization: {},
+      },
     });
+  });
 
-    it('should use `storybook` project by default when project is defined', () => {
-      // Lazy clone example angular json
-      const overrideAngularJson = JSON.parse(stripJsonComments(angularJson));
-      // Add storybook project
-      overrideAngularJson.projects.storybook = {
-        architect: {
-          build: {
-            options: {
-              assets: [],
-              styles: ['custom/styles'],
-            },
+  it('should use `storybook` project by default when `storybook` project is defined', () => {
+    // Lazy clone example angular json
+    const angularJson = fs.readFileSync(path.resolve(__dirname, 'angular.json'), 'utf8');
+    const angularJsonWithStorybookProject = JSON.parse(stripJsonComments(angularJson));
+
+    // Add storybook project
+    angularJsonWithStorybookProject.projects.storybook = {
+      architect: {
+        build: {
+          options: {
+            assets: [],
+            styles: ['custom/styles'],
           },
         },
-      };
-
-      setupFiles({ 'angular.json': JSON.stringify(overrideAngularJson) });
-
-      const config = getAngularCliWebpackConfigOptions('/' as Path);
-
-      // Assure configuration matches values from `storybook` project
-      expect(config).toMatchObject({
-        buildOptions: {
-          assets: [],
-          styles: ['custom/styles'],
+      },
+    };
+
+    const projectConfig = getLeadingAngularCliProject(angularJsonWithStorybookProject);
+
+    // Assure configuration matches values from `storybook` project
+    expect(projectConfig).toMatchObject({
+      architect: {
+        build: {
+          options: {
+            assets: [],
+            styles: ['custom/styles'],
+          },
         },
-      });
+      },
     });
   });
 });

app/angular/src/server/angular-cli_config.ts

@@ -46,24 +46,30 @@ function getTsConfigOptions(tsConfigPath: Path) {
   return basicOptions;
 }
 
-export function getAngularCliWebpackConfigOptions(dirToSearch: Path) {
+export function getAngularCliConfig(dirToSearch: string) {
   const fname = path.join(dirToSearch, 'angular.json');
 
   if (!fs.existsSync(fname)) {
     return null;
   }
 
-  const angularJson = JSON.parse(stripJsonComments(fs.readFileSync(fname, 'utf8')));
-  const { projects, defaultProject } = angularJson;
+  return JSON.parse(stripJsonComments(fs.readFileSync(fname, 'utf8')));
+}
 
+export function getLeadingAngularCliProject(ngCliConfig: any) {
+  const { defaultProject } = ngCliConfig;
+  const { projects }: any = ngCliConfig;
   if (!projects || !Object.keys(projects).length) {
     throw new Error('angular.json must have projects entry.');
   }
 
   const fallbackProject = defaultProject && projects[defaultProject];
   const firstProject = projects[Object.keys(projects)[0]];
-  const project = projects.storybook || fallbackProject || firstProject;
+  return projects.storybook || fallbackProject || firstProject;
+}
 
+export function getAngularCliWebpackConfigOptions(dirToSearch: Path) {
+  const project = getLeadingAngularCliProject(getAngularCliConfig(dirToSearch));
   const { options: projectOptions } = project.architect.build;
 
   const normalizedAssets = normalizeAssetPatterns(

app/angular/src/server/framework-preset-angular-cli.ts

@@ -10,10 +10,7 @@ import {
 export function webpackFinal(config: Configuration) {
   const cwd = process.cwd() as Path;
   const cliWebpackConfigOptions = getAngularCliWebpackConfigOptions(cwd);
-
-  if (cliWebpackConfigOptions) {
-    logger.info('=> Loading angular-cli config.');
-  }
+  logger.info('=> Loading angular-cli config.');
 
   return applyAngularCliWebpackConfig(config, cliWebpackConfigOptions);
 }

examples/angular-cli/angular.json

@@ -1,7 +1,7 @@
 {
   /* angular.json can have comments */
   // angular.json can have comments
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
@@ -20,18 +20,10 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css",
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css", "src/styles.scss"],
             "stylePreprocessorOptions": {
-              "includePaths": [
-                "src/commons"
-              ]
+              "includePaths": ["src/commons"]
             },
             "scripts": []
           },
@@ -79,26 +71,16 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
-            "styles": [
-              "styles.css"
-            ],
+            "styles": ["styles.css"],
             "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
+            "assets": ["src/favicon.ico", "src/assets"]
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
           }
         }
       }
@@ -118,9 +100,7 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "exclude": ["**/node_modules/**"]
           }
         }
       }

examples/angular-cli/package.json

@@ -18,23 +18,23 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@angular/common": "^7.2.6",
-    "@angular/compiler": "^7.2.6",
-    "@angular/core": "^7.2.6",
-    "@angular/forms": "^7.2.6",
-    "@angular/platform-browser": "^7.2.6",
-    "@angular/platform-browser-dynamic": "^7.2.6",
-    "@ngrx/store": "^7.2.0",
+    "@angular/common": "^8.2.8",
+    "@angular/compiler": "^8.2.8",
+    "@angular/core": "^8.2.8",
+    "@angular/forms": "^8.2.8",
+    "@angular/platform-browser": "^8.2.8",
+    "@angular/platform-browser-dynamic": "^8.2.8",
+    "@ngrx/store": "^8.2.0",
     "core-js": "^3.0.1",
     "node-sass": "^4.12.0",
     "rxjs": "^6.3.3",
     "rxjs-compat": "^6.4.0",
-    "zone.js": "^0.8.29"
+    "zone.js": "^0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.13.4",
-    "@angular/cli": "^7.3.6",
-    "@angular/compiler-cli": "^7.2.6",
+    "@angular-devkit/build-angular": "~0.803.6",
+    "@angular/cli": "^8.3.6",
+    "@angular/compiler-cli": "^8.2.8",
     "@storybook/addon-a11y": "5.3.0-alpha.5",
     "@storybook/addon-actions": "5.3.0-alpha.5",
     "@storybook/addon-backgrounds": "5.3.0-alpha.5",

examples/angular-cli/src/stories/ngrx-store.stories.ts

@@ -21,7 +21,19 @@ class WithStoreComponent {
 storiesOf('ngrx|Store', module)
   .addDecorator(
     moduleMetadata({
-      imports: [StoreModule.forRoot({})],
+      imports: [
+        StoreModule.forRoot(
+          {},
+          {
+            runtimeChecks: {
+              strictStateImmutability: true,
+              strictActionImmutability: true,
+              strictStateSerializability: true,
+              strictActionSerializability: true,
+            },
+          }
+        ),
+      ],
       declarations: [WithStoreComponent],
     })
   )

package.json

@@ -116,12 +116,12 @@
   },
   "browserslist": "defaults",
   "devDependencies": {
-    "@angular/common": "^7.2.6",
-    "@angular/compiler": "^7.2.6",
-    "@angular/core": "^7.2.6",
-    "@angular/forms": "^7.2.6",
-    "@angular/platform-browser": "^7.2.6",
-    "@angular/platform-browser-dynamic": "^7.2.6",
+    "@angular/common": "^8.2.8",
+    "@angular/compiler": "^8.2.8",
+    "@angular/core": "^8.2.8",
+    "@angular/forms": "^8.2.8",
+    "@angular/platform-browser": "^8.2.8",
+    "@angular/platform-browser-dynamic": "^8.2.8",
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.3.4",
     "@babel/plugin-proposal-class-properties": "^7.3.3",
@@ -158,7 +158,6 @@
     "codecov": "^3.5.0",
     "codelyzer": "^5.0.0",
     "commander": "^2.19.0",
-    "ts-dedent": "^1.1.0",
     "concurrently": "^4.0.1",
     "core-js": "^3.0.1",
     "corejs-upgrade-webpack-plugin": "^2.2.0",
@@ -212,6 +211,7 @@
     "svelte": "^3.4.1",
     "svelte-jest": "^0.2.0",
     "trash": "^6.0.0",
+    "ts-dedent": "^1.1.0",
     "ts-jest": "^24.0.2",
     "typescript": "^3.4.0",
     "weak": "^1.0.1"