fix(@angular/cli): Allow service-workers package to be installed in parent node_modules

The checks on existence of @angular/service-worker used the node_modules relative to the
project root directly, but those don't exist when using yarn workspaces or lerna. Use
resolve.sync instead, which looks up the tree to parent node_modules folders.

A similar change is required when loading the service worker script from the
@angular/service-worker package. Switch to require.resolve here as well.

Fixes #8300

Author: bgotink

packages/@angular/cli/models/webpack-configs/production.ts

@@ -8,6 +8,7 @@ import { PurifyPlugin } from '@angular-devkit/build-optimizer';
 import { StaticAssetPlugin } from '../../plugins/static-asset';
 import { GlobCopyWebpackPlugin } from '../../plugins/glob-copy-webpack-plugin';
 import { WebpackConfigOptions } from '../webpack-config';
+import { resolveProjectModule } from '../../utilities/require-project-module';
 import { NEW_SW_VERSION } from '../../utilities/service-worker';
 
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
@@ -29,11 +30,12 @@ export function getProdConfig(wco: WebpackConfigOptions) {
   let entryPoints: { [key: string]: string[] } = {};
 
   if (appConfig.serviceWorker) {
-    const nodeModules = path.resolve(projectRoot, 'node_modules');
-    const swModule = path.resolve(nodeModules, '@angular/service-worker');
+    let swPackageJsonPath;
 
-    // @angular/service-worker is required to be installed when serviceWorker is true.
-    if (!fs.existsSync(swModule)) {
+    try {
+      swPackageJsonPath = resolveProjectModule(projectRoot, '@angular/service-worker/package.json');
+    } catch (_) {
+      // @angular/service-worker is required to be installed when serviceWorker is true.
       throw new Error(stripIndent`
         Your project is configured with serviceWorker = true, but @angular/service-worker
         is not installed. Run \`npm install --save-dev @angular/service-worker\`
@@ -43,7 +45,7 @@ export function getProdConfig(wco: WebpackConfigOptions) {
 
     // Read the version of @angular/service-worker and throw if it doesn't match the
     // expected version.
-    const swPackageJson = fs.readFileSync(`${swModule}/package.json`).toString();
+    const swPackageJson = fs.readFileSync(swPackageJsonPath).toString();
     const swVersion = JSON.parse(swPackageJson)['version'];
 
     const isLegacySw = semver.satisfies(swVersion, OLD_SW_VERSION);
@@ -58,6 +60,9 @@ export function getProdConfig(wco: WebpackConfigOptions) {
     }
 
     if (isLegacySw) {
+      // Path to the @angular/service-worker package
+      const swModule = path.dirname(swPackageJsonPath);
+
       // Path to the worker script itself.
       const workerPath = path.resolve(swModule, 'bundles/worker-basic.min.js');
 

packages/@angular/cli/utilities/require-project-module.ts

@@ -1,6 +1,11 @@
 const resolve = require('resolve');
 
+// resolve dependencies within the target project
+export function resolveProjectModule(root: string, moduleName: string) {
+  return resolve.sync(moduleName, { basedir: root });
+}
+
 // require dependencies within the target project
 export function requireProjectModule(root: string, moduleName: string) {
-  return require(resolve.sync(moduleName, { basedir: root }));
+  return require(resolveProjectModule(root, moduleName));
 }

packages/@angular/cli/utilities/service-worker/index.ts

@@ -5,6 +5,8 @@ import * as fs from 'fs';
 import * as path from 'path';
 import * as semver from 'semver';
 
+import { resolveProjectModule } from '../require-project-module';
+
 export const NEW_SW_VERSION = '5.0.0-rc.0';
 
 class CliFilesystem implements Filesystem {
@@ -49,25 +51,25 @@ class CliFilesystem implements Filesystem {
 }
 
 export function usesServiceWorker(projectRoot: string): boolean {
-  const nodeModules = path.resolve(projectRoot, 'node_modules');
-  const swModule = path.resolve(nodeModules, '@angular/service-worker');
-  if (!fs.existsSync(swModule)) {
+  let swPackageJsonPath;
+
+  try {
+    swPackageJsonPath = resolveProjectModule(projectRoot, '@angular/service-worker/package.json');
+  } catch (_) {
+    // @angular/service-worker is not installed
     return false;
   }
 
-  const swPackageJson = fs.readFileSync(`${swModule}/package.json`).toString();
+  const swPackageJson = fs.readFileSync(swPackageJsonPath).toString();
   const swVersion = JSON.parse(swPackageJson)['version'];
 
   return semver.gte(swVersion, NEW_SW_VERSION);
 }
 
 export function augmentAppWithServiceWorker(projectRoot: string, appRoot: string,
     outputPath: string, baseHref: string): Promise<void> {
-  const nodeModules = path.resolve(projectRoot, 'node_modules');
-  const swModule = path.resolve(nodeModules, '@angular/service-worker');
-
   // Path to the worker script itself.
-  const workerPath = path.resolve(swModule, 'ngsw-worker.js');
+  const workerPath = resolveProjectModule(projectRoot, '@angular/service-worker/ngsw-worker.js');
   const configPath = path.resolve(appRoot, 'ngsw-config.json');
 
   if (!fs.existsSync(configPath)) {