feat(@schematics/angular): account for root level assets and resourcesOutputPath (#13074)

* feat(@schematics/angular): account for root level assets and `resourcesOutputPath`

By default we are only account for assets inside the assets folder. Which breaks the offline experience.

Fixes #13067

* test: add test to verify root level assets in service workers

Author: alan-agius4

packages/angular_devkit/build_angular/test/browser/service-worker_spec_large.ts

@@ -20,8 +20,9 @@ describe('Browser Builder service worker', () => {
         name: 'app',
         installMode: 'prefetch',
         resources: {
-          files: ['/favicon.ico', '/index.html'],
-          versionedFiles: [
+          files: [
+            '/favicon.ico',
+            '/index.html',
             '/*.bundle.css',
             '/*.bundle.js',
             '/*.chunk.js',
@@ -33,7 +34,10 @@ describe('Browser Builder service worker', () => {
         installMode: 'lazy',
         updateMode: 'prefetch',
         resources: {
-          files: ['/assets/**'],
+          files: [
+            '/assets/**',
+            '/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)',
+          ],
         },
       },
     ],
@@ -55,6 +59,7 @@ describe('Browser Builder service worker', () => {
     host.writeMultipleFiles({
       'src/ngsw-config.json': JSON.stringify(manifest),
       'src/assets/folder-asset.txt': 'folder-asset.txt',
+      'src/styles.css': `body { background: url(./spectrum.png); }`,
     });
 
     const overrides = { serviceWorker: true };
@@ -91,6 +96,7 @@ describe('Browser Builder service worker', () => {
               updateMode: 'prefetch',
               urls: [
                 '/assets/folder-asset.txt',
+                '/spectrum.png',
               ],
               patterns: [],
             },
@@ -100,6 +106,7 @@ describe('Browser Builder service worker', () => {
             '/favicon.ico': '84161b857f5c547e3699ddfbffc6d8d737542e01',
             '/assets/folder-asset.txt': '617f202968a6a81050aa617c2e28e1dca11ce8d4',
             '/index.html': '843c96f0aeadc8f093b1b2203c08891ecd8f7425',
+            '/spectrum.png': '8d048ece46c0f3af4b598a95fd8e4709b631c3c0',
           },
         });
       }),

packages/schematics/angular/service-worker/files/ngsw-config.json

@@ -18,7 +18,8 @@
       "updateMode": "prefetch",
       "resources": {
         "files": [
-          "/assets/**"
+          "/assets/**",
+          "<%= resourcesOutputPath %>/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
         ]
       }
     }

packages/schematics/angular/service-worker/index.ts

@@ -26,30 +26,41 @@ import { getWorkspace, updateWorkspace } from '../utility/config';
 import { addPackageJsonDependency, getPackageJsonDependency } from '../utility/dependencies';
 import { getAppModulePath } from '../utility/ng-ast-utils';
 import { getProjectTargets, targetBuildNotFoundError } from '../utility/project-targets';
-import { BrowserBuilderOptions, BrowserBuilderTarget } from '../utility/workspace-models';
+import {
+  BrowserBuilderOptions,
+  BrowserBuilderTarget,
+  WorkspaceSchema,
+} from '../utility/workspace-models';
 import { Schema as ServiceWorkerOptions } from './schema';
 
-function updateConfigFile(options: ServiceWorkerOptions): Rule {
-  return (host: Tree, context: SchematicContext) => {
-    context.logger.debug('updating config file.');
-    const workspace = getWorkspace(host);
+function getProjectConfiguration(
+  workspace: WorkspaceSchema,
+  options: ServiceWorkerOptions,
+): BrowserBuilderOptions {
+  const projectTargets = getProjectTargets(workspace, options.project);
+  if (!projectTargets[options.target]) {
+    throw new Error(`Target is not defined for this project.`);
+  }
 
-    const projectTargets = getProjectTargets(workspace, options.project);
+  const target = projectTargets[options.target] as BrowserBuilderTarget;
+  let applyTo = target.options;
 
-    if (!projectTargets[options.target]) {
-      throw new Error(`Target is not defined for this project.`);
-    }
+  if (options.configuration &&
+    target.configurations &&
+    target.configurations[options.configuration]) {
+    applyTo = target.configurations[options.configuration] as BrowserBuilderOptions;
+  }
 
-    const target = projectTargets[options.target] as BrowserBuilderTarget;
-    let applyTo = target.options;
+  return applyTo;
+}
 
-    if (options.configuration &&
-      target.configurations &&
-      target.configurations[options.configuration]) {
-      applyTo = target.configurations[options.configuration] as BrowserBuilderOptions;
-    }
+function updateConfigFile(options: ServiceWorkerOptions): Rule {
+  return (host: Tree, context: SchematicContext) => {
+    context.logger.debug('updating config file.');
+    const workspace = getWorkspace(host);
 
-    applyTo.serviceWorker = true;
+    const config = getProjectConfiguration(workspace, options);
+    config.serviceWorker = true;
 
     return updateWorkspace(workspace);
   };
@@ -160,8 +171,13 @@ export default function (options: ServiceWorkerOptions): Rule {
       throw new SchematicsException(`Service worker requires a project type of "application".`);
     }
 
+    let { resourcesOutputPath = '' } = getProjectConfiguration(workspace, options);
+    if (resourcesOutputPath) {
+      resourcesOutputPath = '/' + resourcesOutputPath.split('/').filter(x => !!x).join('/');
+    }
+
     const templateSource = apply(url('./files'), [
-      template({...options}),
+      template({ ...options, resourcesOutputPath }),
       move(project.root),
     ]);
 

packages/schematics/angular/service-worker/index_spec.ts

@@ -55,7 +55,7 @@ describe('Service Worker Schematic', () => {
   });
 
   it('should update the target options if no configuration is set', () => {
-    const options = {...defaultOptions, configuration: ''};
+    const options = { ...defaultOptions, configuration: '' };
     const tree = schematicRunner.runSchematic('service-worker', options, appTree);
     const configText = tree.readContent('/angular.json');
     const config = JSON.parse(configText);
@@ -97,4 +97,24 @@ describe('Service Worker Schematic', () => {
     const path = '/projects/bar/ngsw-config.json';
     expect(tree.exists(path)).toEqual(true);
   });
+
+  it('should add root assets RegExp', () => {
+    const tree = schematicRunner.runSchematic('service-worker', defaultOptions, appTree);
+    const pkgText = tree.readContent('/projects/bar/ngsw-config.json');
+    const config = JSON.parse(pkgText);
+    expect(config.assetGroups[1].resources.files)
+      .toContain('/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)');
+  });
+
+  it('should add resourcesOutputPath to root assets when specified', () => {
+    const config = JSON.parse(appTree.readContent('/angular.json'));
+    config.projects.bar.architect.build.configurations.production.resourcesOutputPath = 'outDir';
+    appTree.overwrite('/angular.json', JSON.stringify(config));
+    const tree = schematicRunner.runSchematic('service-worker', defaultOptions, appTree);
+    const pkgText = tree.readContent('/projects/bar/ngsw-config.json');
+    const ngswConfig = JSON.parse(pkgText);
+    expect(ngswConfig.assetGroups[1].resources.files)
+      .toContain('/outDir/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)');
+  });
+
 });

packages/schematics/angular/utility/workspace-models.ts

@@ -47,6 +47,7 @@ export interface BrowserBuilderOptions extends BrowserBuilderBaseOptions {
     serviceWorker?: boolean;
     optimization?: boolean;
     outputHashing?: 'all';
+    resourcesOutputPath?: string;
     extractCss?: boolean;
     namedChunks?: boolean;
     aot?: boolean;