feat(ivy): ngcc - compile only specified package.json format properties (angular#29092)

You can now specify a list of properties in the package.json that
should be considered (in order) to find the path to the format to compile.

The build marker system has been updated to store the markers in
the package.json rather than an additional external file.
Also instead of tracking the underlying bundle format that was compiled,
it now tracks the package.json property.

BREAKING CHANGE:

The `proertiesToConsider` option replaces the previous `formats` option,
which specified the final bundle format, rather than the property in the
package.json.
If you were using this option to compile only specific bundle formats,
you must now modify your usage to pass in the properties in the package.json
that map to the format that you wish to compile.

In the CLI, the `--formats` is no longer available. Instead use the
`--properties` option.

FW-1120

PR Close angular#29092

Author: petebacondarwin

aio/package.json

@@ -17,7 +17,7 @@
     "build": "yarn ~~build",
     "prebuild-local": "yarn setup-local",
     "build-local": "yarn ~~build",
-    "prebuild-with-ivy": "yarn setup-local && yarn ivy-ngcc --formats fesm2015 fesm5",
+    "prebuild-with-ivy": "yarn setup-local && yarn ivy-ngcc",
     "build-with-ivy": "node scripts/build-with-ivy",
     "extract-cli-command-docs": "node tools/transforms/cli-docs-package/extract-cli-commands.js cafa558cf",
     "lint": "yarn check-env && yarn docs-lint && ng lint && yarn example-lint && yarn tools-lint",

aio/tools/examples/example-boilerplate.js

@@ -12,80 +12,36 @@ const EXAMPLES_BASE_PATH = path.resolve(__dirname, '../../content/examples');
 
 const BOILERPLATE_PATHS = {
   cli: [
-    'src/environments/environment.prod.ts',
-    'src/environments/environment.ts',
-    'src/assets/.gitkeep',
-    'src/browserslist',
-    'src/favicon.ico',
-    'src/karma.conf.js',
-    'src/polyfills.ts',
-    'src/test.ts',
-    'src/tsconfig.app.json',
-    'src/tsconfig.spec.json',
-    'src/tslint.json',
-    'e2e/src/app.po.ts',
-    'e2e/protractor.conf.js',
-    'e2e/tsconfig.e2e.json',
-    '.editorconfig',
-    'angular.json',
-    'package.json',
-    'tsconfig.json',
-    'tslint.json'
+    'src/environments/environment.prod.ts', 'src/environments/environment.ts',
+    'src/assets/.gitkeep', 'src/browserslist', 'src/favicon.ico', 'src/karma.conf.js',
+    'src/polyfills.ts', 'src/test.ts', 'src/tsconfig.app.json', 'src/tsconfig.spec.json',
+    'src/tslint.json', 'e2e/src/app.po.ts', 'e2e/protractor.conf.js', 'e2e/tsconfig.e2e.json',
+    '.editorconfig', 'angular.json', 'package.json', 'tsconfig.json', 'tslint.json'
   ],
   systemjs: [
-    'src/systemjs-angular-loader.js',
-    'src/systemjs.config.js',
-    'src/tsconfig.json',
-    'bs-config.json',
-    'bs-config.e2e.json',
-    'package.json',
-    'tslint.json'
+    'src/systemjs-angular-loader.js', 'src/systemjs.config.js', 'src/tsconfig.json',
+    'bs-config.json', 'bs-config.e2e.json', 'package.json', 'tslint.json'
   ],
-  common: [
-    'src/styles.css'
-  ]
+  common: ['src/styles.css']
 };
 
 // All paths in this tool are relative to the current boilerplate folder, i.e boilerplate/i18n
 // This maps the CLI files that exists in a parent folder
 const cliRelativePath = BOILERPLATE_PATHS.cli.map(file => `../cli/${file}`);
 
-BOILERPLATE_PATHS.elements = [
-  ...cliRelativePath,
-  'tsconfig.json'
-];
+BOILERPLATE_PATHS.elements = [...cliRelativePath, 'tsconfig.json'];
 
-BOILERPLATE_PATHS.i18n = [
-  ...cliRelativePath,
-  'angular.json',
-  'package.json'
-];
+BOILERPLATE_PATHS.i18n = [...cliRelativePath, 'angular.json', 'package.json'];
 
-BOILERPLATE_PATHS['service-worker'] = [
-  ...cliRelativePath,
-  'angular.json',
-  'package.json'
-];
+BOILERPLATE_PATHS['service-worker'] = [...cliRelativePath, 'angular.json', 'package.json'];
 
-BOILERPLATE_PATHS.testing = [
-  ...cliRelativePath,
-  'angular.json'
-];
+BOILERPLATE_PATHS.testing = [...cliRelativePath, 'angular.json'];
 
-BOILERPLATE_PATHS.universal = [
-  ...cliRelativePath,
-  'angular.json',
-  'package.json'
-];
+BOILERPLATE_PATHS.universal = [...cliRelativePath, 'angular.json', 'package.json'];
 
 BOILERPLATE_PATHS.ivy = {
-  systemjs: [
-    'rollup-config.js',
-    'tsconfig-aot.json'
-  ],
-  cli: [
-    'src/tsconfig.app.json'
-  ]
+  systemjs: ['rollup-config.js', 'tsconfig-aot.json'],
+  cli: ['src/tsconfig.app.json']
 };
 
 BOILERPLATE_PATHS.schematics = [
@@ -101,11 +57,13 @@ class ExampleBoilerPlate {
    */
   add(ivy = false) {
     // Get all the examples folders, indicated by those that contain a `example-config.json` file
-    const exampleFolders = this.getFoldersContaining(EXAMPLES_BASE_PATH, EXAMPLE_CONFIG_FILENAME, 'node_modules');
+    const exampleFolders =
+        this.getFoldersContaining(EXAMPLES_BASE_PATH, EXAMPLE_CONFIG_FILENAME, 'node_modules');
 
     if (!fs.existsSync(SHARED_NODE_MODULES_PATH)) {
-      throw new Error(`The shared node_modules folder for the examples (${SHARED_NODE_MODULES_PATH}) is missing.\n` +
-        `Perhaps you need to run "yarn example-use-npm" or "yarn example-use-local" to install the dependencies?`);
+      throw new Error(
+          `The shared node_modules folder for the examples (${SHARED_NODE_MODULES_PATH}) is missing.\n` +
+          `Perhaps you need to run "yarn example-use-npm" or "yarn example-use-local" to install the dependencies?`);
     }
 
     if (ivy) {
@@ -114,7 +72,7 @@ class ExampleBoilerPlate {
       // the module typings if we specified an "es2015" format. This means that
       // we also need to build with "fesm2015" in order to get updated typings
       // which are needed for compilation.
-      shelljs.exec(`yarn --cwd ${SHARED_PATH} ivy-ngcc --formats fesm2015 fesm5`);
+      shelljs.exec(`yarn --cwd ${SHARED_PATH} ivy-ngcc`);
     }
 
     exampleFolders.forEach(exampleFolder => {
@@ -128,40 +86,41 @@ class ExampleBoilerPlate {
       const boilerPlateBasePath = path.resolve(BOILERPLATE_BASE_PATH, boilerPlateType);
 
       // Copy the boilerplate specific files
-      BOILERPLATE_PATHS[boilerPlateType].forEach(filePath => this.copyFile(boilerPlateBasePath, exampleFolder, filePath));
+      BOILERPLATE_PATHS[boilerPlateType].forEach(
+          filePath => this.copyFile(boilerPlateBasePath, exampleFolder, filePath));
 
       // Copy the boilerplate common files
-      BOILERPLATE_PATHS.common.forEach(filePath => this.copyFile(BOILERPLATE_COMMON_BASE_PATH, exampleFolder, filePath));
+      BOILERPLATE_PATHS.common.forEach(
+          filePath => this.copyFile(BOILERPLATE_COMMON_BASE_PATH, exampleFolder, filePath));
 
       // Copy Ivy specific files
       if (ivy) {
         const ivyBoilerPlateType = boilerPlateType === 'systemjs' ? 'systemjs' : 'cli';
-        const ivyBoilerPlateBasePath = path.resolve(BOILERPLATE_BASE_PATH, 'ivy', ivyBoilerPlateType);
-        BOILERPLATE_PATHS.ivy[ivyBoilerPlateType].forEach(filePath => this.copyFile(ivyBoilerPlateBasePath, exampleFolder, filePath));
+        const ivyBoilerPlateBasePath =
+            path.resolve(BOILERPLATE_BASE_PATH, 'ivy', ivyBoilerPlateType);
+        BOILERPLATE_PATHS.ivy[ivyBoilerPlateType].forEach(
+            filePath => this.copyFile(ivyBoilerPlateBasePath, exampleFolder, filePath));
       }
     });
   }
 
   /**
    * Remove all the boilerplate files from all the examples
    */
-  remove() {
-    shelljs.exec('git clean -xdfq', { cwd: EXAMPLES_BASE_PATH });
-  }
+  remove() { shelljs.exec('git clean -xdfq', {cwd: EXAMPLES_BASE_PATH}); }
 
   main() {
-    yargs
-      .usage('$0 <cmd> [args]')
-      .command('add', 'add the boilerplate to each example', (yrgs) => this.add(yrgs.argv.ivy))
-      .command('remove', 'remove the boilerplate from each example', () => this.remove())
-      .demandCommand(1, 'Please supply a command from the list above')
-      .argv;
+    yargs.usage('$0 <cmd> [args]')
+        .command('add', 'add the boilerplate to each example', (yrgs) => this.add(yrgs.argv.ivy))
+        .command('remove', 'remove the boilerplate from each example', () => this.remove())
+        .demandCommand(1, 'Please supply a command from the list above')
+        .argv;
   }
 
   getFoldersContaining(basePath, filename, ignore) {
     const pattern = path.resolve(basePath, '**', filename);
     const ignorePattern = path.resolve(basePath, '**', ignore, '**');
-    return glob.sync(pattern, { ignore: [ignorePattern] }).map(file => path.dirname(file));
+    return glob.sync(pattern, {ignore: [ignorePattern]}).map(file => path.dirname(file));
   }
 
   copyFile(sourceFolder, destinationFolder, filePath) {
@@ -171,13 +130,11 @@ class ExampleBoilerPlate {
     filePath = this.normalizePath(filePath);
 
     const destinationPath = path.resolve(destinationFolder, filePath);
-    fs.copySync(sourcePath, destinationPath, { overwrite: true });
+    fs.copySync(sourcePath, destinationPath, {overwrite: true});
     fs.chmodSync(destinationPath, 444);
   }
 
-  loadJsonFile(filePath) {
-    return fs.readJsonSync(filePath, { throws: false }) || {};
-  }
+  loadJsonFile(filePath) { return fs.readJsonSync(filePath, {throws: false}) || {}; }
 
   normalizePath(filePath) {
     // transform for example ../cli/src/tsconfig.app.json to src/tsconfig.app.json

integration/ngcc/test.sh

@@ -10,11 +10,25 @@ ivy-ngcc --help
 ivy-ngcc
 
 # Did it add the appropriate build markers?
+
+  # - esm2015
+  grep '"__modified_by_ngcc__":[^}]*"esm2015":"' node_modules/@angular/common/package.json
+  if [[ $? != 0 ]]; then exit 1; fi
+
   # - fesm2015
-  ls node_modules/@angular/common | grep __modified_by_ngcc_for_fesm2015
+  grep '"__modified_by_ngcc__":[^}]*"fesm2015":"' node_modules/@angular/common/package.json
   if [[ $? != 0 ]]; then exit 1; fi
-  # - esm2015
-  ls node_modules/@angular/common | grep __modified_by_ngcc_for_esm2015
+  grep '"__modified_by_ngcc__":[^}]*"es2015":"' node_modules/@angular/common/package.json
+  if [[ $? != 0 ]]; then exit 1; fi
+
+  # - esm5
+  grep '"__modified_by_ngcc__":[^}]*"esm5":"' node_modules/@angular/common/package.json
+  if [[ $? != 0 ]]; then exit 1; fi
+
+  # - fesm5
+  grep '"__modified_by_ngcc__":[^}]*"module":"' node_modules/@angular/common/package.json
+  if [[ $? != 0 ]]; then exit 1; fi
+  grep '"__modified_by_ngcc__":[^}]*"fesm5":"' node_modules/@angular/common/package.json
   if [[ $? != 0 ]]; then exit 1; fi
 
 # Did it replace the PRE_R3 markers correctly?
@@ -48,6 +62,9 @@ ivy-ngcc
 # Can it be safely run again (as a noop)?
 ivy-ngcc
 
+# Does running it with --formats fail?
+ivy-ngcc --formats fesm2015 && exit 1
+
 # Now try compiling the app using the ngcc compiled libraries
 ngc -p tsconfig-app.json
 

packages/compiler-cli/ngcc/main-ngcc.ts

@@ -10,7 +10,7 @@ import * as path from 'canonical-path';
 import * as yargs from 'yargs';
 
 import {mainNgcc} from './src/main';
-import {EntryPointFormat} from './src/packages/entry_point';
+import {EntryPointJsonProperty} from './src/packages/entry_point';
 
 // CLI entry point
 if (require.main === module) {
@@ -22,11 +22,15 @@ if (require.main === module) {
             describe: 'A path to the root folder to compile.',
             default: './node_modules'
           })
-          .option('f', {
-            alias: 'formats',
+          .option('f', {alias: 'formats', hidden: true, array: true})
+          .option('p', {
+            alias: 'properties',
             array: true,
-            describe: 'An array of formats to compile.',
-            default: ['fesm2015', 'esm2015', 'fesm5', 'esm5']
+            describe:
+                'An array of names of properties in package.json (e.g. `module` or `es2015`)\n' +
+                'These properties should hold a path to a bundle-format to compile.\n' +
+                'If provided, only the specified properties are considered for processing.\n' +
+                'If not provided, all the supported format properties (e.g. fesm2015, fesm5, es2015, esm2015, esm5, main, module) in the package.json are considered.'
           })
           .option('t', {
             alias: 'target',
@@ -36,11 +40,16 @@ if (require.main === module) {
           .help()
           .parse(args);
 
+  if (options['f'] && options['f'].length) {
+    console.error(
+        'The formats option (-f/--formats) has been removed. Consider the properties option (-p/--properties) instead.');
+    process.exit(1);
+  }
   const baseSourcePath: string = path.resolve(options['s']);
-  const formats: EntryPointFormat[] = options['f'];
+  const propertiesToConsider: EntryPointJsonProperty[] = options['p'];
   const baseTargetPath: string = options['t'];
   try {
-    mainNgcc({baseSourcePath, formats, baseTargetPath});
+    mainNgcc({baseSourcePath, propertiesToConsider, baseTargetPath});
     process.exitCode = 0;
   } catch (e) {
     console.error(e.stack || e.message);