feat(@schematics/angular): add migration for ngsw-config.json

packages/schematics/angular/migrations/update-9/index.ts

@@ -9,6 +9,7 @@
 import { Rule, chain } from '@angular-devkit/schematics';
 import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
 import { UpdateLibraries } from './ivy-libraries';
+import { updateNGSWConfig } from './ngsw-config';
 import { updateDependencies } from './update-dependencies';
 import { UpdateWorkspaceConfig } from './update-workspace-config';
 
@@ -17,6 +18,7 @@ export default function(): Rule {
     return chain([
       UpdateWorkspaceConfig(),
       UpdateLibraries(),
+      updateNGSWConfig(),
       updateDependencies(),
       (tree, context) => {
         const packageChanges = tree.actions.some(a => a.path.endsWith('/package.json'));

packages/schematics/angular/migrations/update-9/ngsw-config.ts

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { JsonParseMode, parseJsonAst } from '@angular-devkit/core';
+import { Rule, SchematicsException, Tree } from '@angular-devkit/schematics';
+import { appendValueInAstArray, findPropertyInAstObject } from '../../utility/json-utils';
+import { Builders } from '../../utility/workspace-models';
+import { getAllOptions, getTargets, getWorkspace } from './utils';
+
+
+/**
+ * Update ngsw-config.json to fix issue https://github.com/angular/angular-cli/pull/15277
+ */
+export function updateNGSWConfig(): Rule {
+  return (tree: Tree) => {
+    const workspace = getWorkspace(tree);
+
+    for (const { target } of getTargets(workspace, 'build', Builders.Browser)) {
+      for (const options of getAllOptions(target)) {
+        const ngswConfigPath = findPropertyInAstObject(options, 'ngswConfigPath');
+        if (!ngswConfigPath || ngswConfigPath.kind !== 'string') {
+          continue;
+        }
+
+        const path = ngswConfigPath.value;
+        const configBuffer = tree.read(path);
+        if (!configBuffer) {
+          throw new SchematicsException(`Could not find (${path})`);
+        }
+
+        const content = configBuffer.toString();
+        const ngswConfigAst = parseJsonAst(content, JsonParseMode.Loose);
+        if (!ngswConfigAst || ngswConfigAst.kind !== 'object') {
+          continue;
+        }
+
+        const assetGroups = findPropertyInAstObject(ngswConfigAst, 'assetGroups');
+        if (!assetGroups || assetGroups.kind !== 'array') {
+          continue;
+        }
+
+        const prefetchElement = assetGroups.elements.find(element => {
+          const installMode = element.kind === 'object' && findPropertyInAstObject(element, 'installMode');
+
+          return installMode && installMode.value === 'prefetch';
+        });
+
+        if (!prefetchElement || prefetchElement.kind !== 'object') {
+          continue;
+        }
+
+        const resources = findPropertyInAstObject(prefetchElement, 'resources');
+        if (!resources || resources.kind !== 'object') {
+          continue;
+        }
+
+        const files = findPropertyInAstObject(resources, 'files');
+        if (!files || files.kind !== 'array') {
+          continue;
+        }
+
+        const hasManifest = files.elements
+          .some(({ value }) => typeof value === 'string' && value.endsWith('manifest.webmanifest'));
+        if (hasManifest) {
+          continue;
+        }
+
+        const recorder = tree.beginUpdate(path);
+        appendValueInAstArray(recorder, files, '/manifest.webmanifest', 10);
+        tree.commitUpdate(recorder);
+      }
+    }
+
+    return tree;
+  };
+}

packages/schematics/angular/migrations/update-9/ngsw-config_spec.ts

@@ -0,0 +1,139 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { WorkspaceTargets } from '../../utility/workspace-models';
+
+// tslint:disable-next-line: no-any
+function getWorkspaceTargets(tree: UnitTestTree): any {
+  return JSON.parse(tree.readContent(workspacePath))
+    .projects['migration-test'].architect;
+}
+
+function updateWorkspaceTargets(tree: UnitTestTree, workspaceTargets: WorkspaceTargets) {
+  const config = JSON.parse(tree.readContent(workspacePath));
+  config.projects['migration-test'].architect = workspaceTargets;
+  tree.overwrite(workspacePath, JSON.stringify(config, undefined, 2));
+}
+
+const workspacePath = '/angular.json';
+
+// tslint:disable:no-big-function
+describe('Migration to version 9', () => {
+  describe('Migrate ngsw config', () => {
+    const schematicRunner = new SchematicTestRunner(
+      'migrations',
+      require.resolve('../migration-collection.json'),
+    );
+
+    let tree: UnitTestTree;
+
+    beforeEach(async () => {
+      tree = new UnitTestTree(new EmptyTree());
+      tree = await schematicRunner
+        .runExternalSchematicAsync(
+          require.resolve('../../collection.json'),
+          'ng-new',
+          {
+            name: 'migration-test',
+            version: '1.2.3',
+            directory: '.',
+          },
+          tree,
+        )
+        .toPromise();
+    });
+
+    it(`should add 'manifest.webmanifest' to files in prefetch`, async () => {
+      const ngswConfigPath = '/ngsw-config.json';
+      const config = getWorkspaceTargets(tree);
+      config.build.options.ngswConfigPath = ngswConfigPath;
+      updateWorkspaceTargets(tree, config);
+
+      const ngswConfig = JSON.stringify(
+        {
+          assetGroups: [
+            {
+              name: 'app',
+              installMode: 'prefetch',
+              resources: {
+                files: [
+                  '/favicon.ico',
+                  '/index.html',
+                ],
+              },
+            },
+            {
+              name: 'assets',
+              installMode: 'lazy',
+              updateMode: 'prefetch',
+              resources: {
+                files: [
+                  '/assets/**',
+                ],
+              },
+            },
+          ],
+        },
+        null,
+        2,
+      );
+
+      tree.create(ngswConfigPath, ngswConfig);
+
+      const tree2 = await schematicRunner.runSchematicAsync('migration-09', {}, tree.branch()).toPromise();
+      const { assetGroups } = JSON.parse(tree2.readContent(ngswConfigPath));
+      expect(assetGroups[0].resources.files).toEqual([
+        '/favicon.ico',
+        '/index.html',
+        '/manifest.webmanifest',
+      ]);
+      expect(assetGroups[1].resources.files).toEqual([
+        '/assets/**',
+      ]);
+    });
+
+    it(`should not add 'manifest.webmanifest' to files if exists`, async () => {
+      const ngswConfigPath = '/ngsw-config.json';
+      const config = getWorkspaceTargets(tree);
+      config.build.options.ngswConfigPath = ngswConfigPath;
+      updateWorkspaceTargets(tree, config);
+
+      const ngswConfig = JSON.stringify(
+        {
+          assetGroups: [
+            {
+              name: 'app',
+              installMode: 'prefetch',
+              resources: {
+                files: [
+                  '/manifest.webmanifest',
+                  '/favicon.ico',
+                  '/index.html',
+                ],
+              },
+            },
+          ],
+        },
+        null,
+        2,
+      );
+
+      tree.create(ngswConfigPath, ngswConfig);
+
+      const tree2 = await schematicRunner.runSchematicAsync('migration-09', {}, tree.branch()).toPromise();
+      const { assetGroups } = JSON.parse(tree2.readContent(ngswConfigPath));
+      expect(assetGroups[0].resources.files).toEqual([
+        '/manifest.webmanifest',
+        '/favicon.ico',
+        '/index.html',
+      ]);
+    });
+  });
+});