build(docs-infra): switch docs examples to Ivy (#36143)

The docs examples are switched to Ivy. On CI, the tests are run with
both Ivy and ViewEngine.

Partially addresses:
[FW-1609](https://angular-team.atlassian.net/browse/FW-1609)

PR Close #36143

aio/tools/example-zipper/customizer/package-json/cli-ajs.json

@@ -1,7 +1,7 @@
 {
   "scripts": [
     { "name": "ng", "command": "ng" },
-    { "name": "build", "command": "ng build --prod" },
+    { "name": "build", "command": "ng build" },
     { "name": "start", "command": "ng serve" },
     { "name": "test", "command": "ng test" },
     { "name": "lint", "command": "ng lint" },

aio/tools/example-zipper/customizer/package-json/cli.json

@@ -1,7 +1,7 @@
 {
   "scripts": [
     { "name": "ng", "command": "ng" },
-    { "name": "build", "command": "ng build --prod" },
+    { "name": "build", "command": "ng build" },
     { "name": "start", "command": "ng serve" },
     { "name": "test", "command": "ng test" },
     { "name": "lint", "command": "ng lint" },

aio/tools/example-zipper/customizer/package-json/getting-started.json

@@ -1,7 +1,7 @@
 {
   "scripts": [
     { "name": "ng", "command": "ng" },
-    { "name": "build", "command": "ng build --prod" },
+    { "name": "build", "command": "ng build" },
     { "name": "start", "command": "ng serve" },
     { "name": "test", "command": "ng test" },
     { "name": "lint", "command": "ng lint" },

aio/tools/example-zipper/customizer/package-json/i18n.json

@@ -2,7 +2,7 @@
   "scripts": [
     { "name": "start", "command": "ng serve" },
     { "name": "start:fr", "command": "ng serve --configuration=fr" },
-    { "name": "build", "command": "ng build --prod" },
+    { "name": "build", "command": "ng build" },
     { "name": "build:fr", "command": "ng build --configuration=production-fr" },
     { "name": "test", "command": "ng test" },
     { "name": "lint", "command": "ng lint" },

aio/tools/example-zipper/customizer/package-json/schematics.json

@@ -1,7 +1,7 @@
 {
   "scripts": [
     { "name": "ng", "command": "ng" },
-    { "name": "build", "command": "ng build --prod" },
+    { "name": "build", "command": "ng build" },
     { "name": "build:lib", "command": "ng build my-lib" },
     { "name": "start", "command": "ng serve" },
     { "name": "test", "command": "ng test" },

aio/tools/examples/README.md

@@ -32,12 +32,12 @@ Currently you will find the next project types:
 * cli - For CLI based examples. This is the default one, to be used in the majority of the examples.
 * getting-started - CLI-based with its own set of styles.
 * i18n - CLI-based with additional scripts for internationalization.
-* ivy - CLI-based with additional configuration for running the examples with the Ivy renderer and ngstc compiler.
 * schematics - CLI-based with additional scripts for building schematics.
 * service-worker - CLI-based with additional packages and configuration for service workers.
 * systemjs - Currently in deprecation, only used in a few examples.
 * testing - CLI-based with additional styles for jasmine testing.
 * universal - CLI-based with an extra server target.
+* viewengine - Additional configuration for running CLI-/SystemJS-based examples with `ViewEngine` (the pre-Ivy compiler/renderer).
 
 There is also a `common` folder that contains files used in all different examples.
 

aio/tools/examples/example-boilerplate.js

@@ -50,11 +50,6 @@ BOILERPLATE_PATHS['getting-started'] = [
   'src/styles.css'
 ];
 
-BOILERPLATE_PATHS.ivy = {
-  systemjs: ['rollup-config.js', 'tsconfig-aot.json'],
-  cli: ['tsconfig.app.json']
-};
-
 BOILERPLATE_PATHS.schematics = [
   ...cliRelativePath,
   'angular.json'
@@ -65,13 +60,18 @@ BOILERPLATE_PATHS['cli-ajs'] = [
   'package.json'
 ];
 
+BOILERPLATE_PATHS.viewengine = {
+  systemjs: ['rollup-config.js', 'tsconfig-aot.json'],
+  cli: ['tsconfig.json']
+};
+
 const EXAMPLE_CONFIG_FILENAME = 'example-config.json';
 
 class ExampleBoilerPlate {
   /**
    * Add boilerplate files to all the examples
    */
-  add(ivy = false) {
+  add(viewengine = 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');
@@ -82,7 +82,7 @@ class ExampleBoilerPlate {
           `Perhaps you need to run "yarn example-use-npm" or "yarn example-use-local" to install the dependencies?`);
     }
 
-    if (ivy) {
+    if (!viewengine) {
       shelljs.exec(`yarn --cwd ${SHARED_PATH} ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points`);
     }
 
@@ -107,13 +107,13 @@ class ExampleBoilerPlate {
         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));
+      // Copy ViewEngine (pre-Ivy) specific files
+      if (viewengine) {
+        const veBoilerPlateType = boilerPlateType === 'systemjs' ? 'systemjs' : 'cli';
+        const veBoilerPlateBasePath =
+            path.resolve(BOILERPLATE_BASE_PATH, 'viewengine', veBoilerPlateType);
+        BOILERPLATE_PATHS.viewengine[veBoilerPlateType].forEach(
+            filePath => this.copyFile(veBoilerPlateBasePath, exampleFolder, filePath));
       }
     });
   }
@@ -125,7 +125,7 @@ class ExampleBoilerPlate {
 
   main() {
     yargs.usage('$0 <cmd> [args]')
-        .command('add', 'add the boilerplate to each example', (yrgs) => this.add(yrgs.argv.ivy))
+        .command('add', 'add the boilerplate to each example', yrgs => this.add(yrgs.argv.viewengine))
         .command('remove', 'remove the boilerplate from each example', () => this.remove())
         .demandCommand(1, 'Please supply a command from the list above')
         .argv;

aio/tools/examples/example-boilerplate.spec.js

@@ -14,18 +14,29 @@ describe('example-boilerplate tool', () => {
       i18n: 2,
       universal: 2,
       systemjs: 7,
-      common: 1
+      common: 1,
+      viewengine: {
+        cli: 1,
+        systemjs: 2,
+      },
     };
     const exampleFolders = ['a/b', 'c/d'];
 
     beforeEach(() => {
       spyOn(fs, 'ensureSymlinkSync');
       spyOn(fs, 'existsSync').and.returnValue(true);
+      spyOn(shelljs, 'exec');
       spyOn(exampleBoilerPlate, 'copyFile');
       spyOn(exampleBoilerPlate, 'getFoldersContaining').and.returnValue(exampleFolders);
       spyOn(exampleBoilerPlate, 'loadJsonFile').and.returnValue({});
     });
 
+    it('should run `ngcc`', () => {
+      exampleBoilerPlate.add();
+      expect(shelljs.exec).toHaveBeenCalledWith(
+          `yarn --cwd ${sharedDir} ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points`);
+    });
+
     it('should process all the example folders', () => {
       const examplesDir = path.resolve(__dirname, '../../content/examples');
       exampleBoilerPlate.add();
@@ -50,7 +61,7 @@ describe('example-boilerplate tool', () => {
 
     it('should copy all the source boilerplate files for systemjs', () => {
       const boilerplateDir = path.resolve(sharedDir, 'boilerplate');
-      exampleBoilerPlate.loadJsonFile.and.callFake(filePath => filePath.indexOf('a/b') !== -1 ? { projectType: 'systemjs' } : {})
+      exampleBoilerPlate.loadJsonFile.and.callFake(filePath => filePath.indexOf('a/b') !== -1 ? { projectType: 'systemjs' } : {});
       exampleBoilerPlate.add();
       expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes(
         (BPFiles.cli) +
@@ -110,6 +121,38 @@ describe('example-boilerplate tool', () => {
       expect(exampleBoilerPlate.loadJsonFile).toHaveBeenCalledWith(path.resolve('a/b/example-config.json'));
       expect(exampleBoilerPlate.loadJsonFile).toHaveBeenCalledWith(path.resolve('c/d/example-config.json'));
     });
+
+    describe('(viewengine: true)', () => {
+      it('should not run `ngcc`', () => {
+        exampleBoilerPlate.add(true);
+        expect(shelljs.exec).not.toHaveBeenCalled();
+      });
+
+      it('should copy all the source boilerplate files for systemjs', () => {
+        const boilerplateDir = path.resolve(sharedDir, 'boilerplate');
+        exampleBoilerPlate.loadJsonFile.and.callFake(filePath => filePath.indexOf('a/b') !== -1 ? { projectType: 'systemjs' } : {});
+        exampleBoilerPlate.add(true);
+        expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes(
+          (BPFiles.cli + BPFiles.viewengine.cli) +
+          (BPFiles.systemjs + BPFiles.viewengine.systemjs) +
+          (BPFiles.common * exampleFolders.length)
+        );
+        // for example
+        expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/viewengine/systemjs`, 'a/b', 'tsconfig-aot.json');
+      });
+
+      it('should copy all the source boilerplate files for cli', () => {
+        const boilerplateDir = path.resolve(sharedDir, 'boilerplate');
+        exampleBoilerPlate.add(true);
+        expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes(
+          (BPFiles.cli * exampleFolders.length) +
+          (BPFiles.viewengine.cli * exampleFolders.length) +
+          (BPFiles.common * exampleFolders.length)
+        );
+        // for example
+        expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/viewengine/cli`, 'a/b', 'tsconfig.json');
+      });
+    });
   });
 
   describe('remove', () => {

aio/tools/examples/run-example-e2e.js

@@ -28,7 +28,7 @@ const fixmeIvyExamples = [
   'i18n',
 ];
 
-if (argv.ivy) {
+if (!argv.viewengine) {
   IGNORED_EXAMPLES.push(...fixmeIvyExamples);
 }
 
@@ -46,7 +46,7 @@ if (argv.ivy) {
  *    Must be used in conjunction with --setup as this is when the packages are copied.
  *    e.g. --setup --local
  *
- *  --ivy to turn on `ivy` mode
+ *  --viewengine to turn on `ViewEngine` mode
  *
  *  --shard to shard the specs into groups to allow you to run them in parallel
  *    e.g. --shard=0/2 // the even specs: 0, 2, 4, etc
@@ -64,7 +64,7 @@ function runE2e() {
     // Run setup.
     console.log('runE2e: setup boilerplate');
     const installPackagesCommand = `example-use-${argv.local ? 'local' : 'npm'}`;
-    const addBoilerplateCommand = `boilerplate:add${argv.ivy ? ':ivy' : ''}`;
+    const addBoilerplateCommand = `boilerplate:add${argv.viewengine ? ':viewengine' : ''}`;
     shelljs.exec(`yarn ${installPackagesCommand}`, {cwd: AIO_PATH});
     shelljs.exec(`yarn ${addBoilerplateCommand}`, {cwd: AIO_PATH});
   }
@@ -185,7 +185,7 @@ function runE2eTestsSystemJS(appDir, outputFile) {
 
   // Only run AOT tests in ViewEngine mode. The current AOT setup does not work in Ivy.
   // See https://github.com/angular/angular/issues/35989.
-  if (!argv.ivy && fs.existsSync(appDir + '/aot/index.html')) {
+  if (argv.viewengine && fs.existsSync(appDir + '/aot/index.html')) {
     run = run.then((ok) => ok && runProtractorAoT(appDir, outputFile));
   }
   return run;
@@ -311,7 +311,7 @@ function reportStatus(status, outputFile) {
   IGNORED_EXAMPLES.filter(example => !fixmeIvyExamples.find(ex => ex.startsWith(example)))
       .forEach(function(val) { log.push('  ' + val); });
 
-  if (argv.ivy) {
+  if (!argv.viewengine) {
     log.push('');
     log.push('Suites ignored due to breakage with Ivy:');
     fixmeIvyExamples.forEach(function(val) { log.push('  ' + val); });

aio/tools/examples/shared/boilerplate/cli/tsconfig.json

@@ -20,7 +20,6 @@
     ]
   },
   "angularCompilerOptions": {
-    "enableIvy": false,
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true
   }

aio/tools/examples/shared/boilerplate/ivy/cli/tsconfig.app.json

@@ -1,33 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": []
-  },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ],
-  "exclude": [
-    "src/test.ts",
-    "src/**/*.spec.ts",
-    "src/**/*-specs.ts",
-    "src/**/*.avoid.ts",
-    "src/**/*.0.ts",
-    "src/**/*.1.ts",
-    "src/**/*.1b.ts",
-    "src/**/*.2.ts",
-    "src/**/*.3.ts",
-    "src/**/*.4.ts",
-    "src/**/*.5.ts",
-    "src/**/*.6.ts",
-    "src/**/*.7.ts",
-    "src/**/testing"
-  ],
-  "angularCompilerOptions": {
-    "enableIvy": true
-  }
-}

aio/tools/examples/shared/boilerplate/viewengine/cli/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableIvy": false,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
+  }
+}

aio/tools/examples/shared/boilerplate/viewengine/systemjs/rollup-config.js

@@ -5,7 +5,7 @@ import uglify from 'rollup-plugin-uglify'
 
 //paths are relative to the execution path
 export default {
-  input: 'app/main.js',
+  input: 'app/main-aot.js',
   output: {
     file: 'aot/dist/build.js', // output a single application bundle
     format: 'iife',
@@ -13,7 +13,7 @@ export default {
     sourcemapFile: 'aot/dist/build.js.map'
   },
   plugins: [
-    nodeResolve({ jsnext: true, module: true }),
+    nodeResolve({jsnext: true, module: true}),
     commonjs({
       include: ['node_modules/rxjs/**']
     }),

aio/tools/examples/shared/boilerplate/viewengine/systemjs/tsconfig-aot.json

@@ -7,24 +7,23 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "lib": [
-      "es2018",
+      "es2015",
       "dom"
     ],
     "removeComments": false,
     "noImplicitAny": true,
     "skipLibCheck": true,
     "suppressImplicitAnyIndexErrors": true,
-    "importHelpers": true,
     "typeRoots": [
       "node_modules/@types"
     ]
   },
   "files": [
     "app/app.module.ts",
-    "app/main.ts"
+    "app/main-aot.ts"
   ],
   "angularCompilerOptions": {
-    "skipMetadataEmit": true,
-    "enableIvy": true
+    "enableIvy": false,
+    "skipMetadataEmit": true
   }
 }