docs(docs-infra): build examples with Ivy

Author: brandonroberts

.circleci/config.yml

@@ -254,6 +254,29 @@ jobs:
         # with either "0", "1" or "2" as node index. This can be passed to the "--shard" argument.
       - run: yarn --cwd aio example-e2e --setup --local --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
 
+  test_docs_examples_ivy:
+    <<: *job_defaults
+    docker:
+      # Needed because the example e2e tests depend on Chrome.
+      - image: *browsers_docker_image
+    parallelism: 3
+    steps:
+      - checkout:
+          <<: *post_checkout
+      - restore_cache:
+          key: *cache_key
+      - attach_workspace:
+          at: dist
+      - *define_env_vars
+        # Install root
+      - *yarn_install
+        # Install aio
+      - run: yarn --cwd aio install --frozen-lockfile --non-interactive
+        # Run examples tests with ivy. The "CIRCLE_NODE_INDEX" will be set if "parallelism" is enabled.
+        # Since the parallelism is set to "3", there will be three parallel CircleCI containers
+        # with either "0", "1" or "2" as node index. This can be passed to the "--shard" argument.
+      - run: yarn --cwd aio example-e2e --setup --local --ivy --shard=${CIRCLE_NODE_INDEX}/${CIRCLE_NODE_TOTAL}
+
   # This job should only be run on PR builds, where `CI_PULL_REQUEST` is not `false`.
   aio_preview:
     <<: *job_defaults
@@ -516,6 +539,9 @@ workflows:
       - test_docs_examples:
           requires:
             - build-packages-dist
+      - test_docs_examples_ivy:
+          requires:
+            - build-packages-dist
       - aio_preview:
           # Only run on PR builds. (There can be no previews for non-PR builds.)
           filters:
@@ -541,6 +567,7 @@ workflows:
             - test_aio_local
             - test_aio_local_ivy
             - test_docs_examples
+            - test_docs_examples_ivy
             # Get the artifacts to publish from the build-packages-dist job
             # since the publishing script expects the legacy outputs layout.
             - build-packages-dist

aio/package.json

@@ -57,6 +57,7 @@
     "preserve-and-sync": "yarn docs",
     "serve-and-sync": "run-p \"start\" \"docs-watch --watch-only\"",
     "boilerplate:add": "node ./tools/examples/example-boilerplate add",
+    "boilerplate:add:ivy": "yarn boilerplate:add --ivy",
     "boilerplate:remove": "node ./tools/examples/example-boilerplate remove",
     "boilerplate:test": "node tools/examples/test.js",
     "generate-stackblitz": "node ./tools/stackblitz-builder/generateStackblitz",
@@ -167,4 +168,4 @@
     "xregexp": "^4.0.0",
     "yargs": "^7.0.2"
   }
-}
+}

aio/tools/examples/example-boilerplate.js

@@ -84,16 +84,23 @@ class ExampleBoilerPlate {
   /**
    * Add boilerplate files to all the examples
    */
-  add() {
+  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');
-    exampleFolders.forEach(exampleFolder => {
-      const exampleConfig = this.loadJsonFile(path.resolve(exampleFolder, EXAMPLE_CONFIG_FILENAME));
 
-      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` +
+    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?`);
-      }
+    }
+
+    if (ivy) {
+      shelljs.exec(`yarn --cwd ${SHARED_PATH} ivy-ngcc`);
+
+      BOILERPLATE_PATHS.common.push('src/tsconfig.app.json');
+    }
+
+    exampleFolders.forEach(exampleFolder => {
+      const exampleConfig = this.loadJsonFile(path.resolve(exampleFolder, EXAMPLE_CONFIG_FILENAME));
 
       // Link the node modules - requires admin access (on Windows) because it adds symlinks
       const destinationNodeModules = path.resolve(exampleFolder, 'node_modules');
@@ -114,13 +121,13 @@ class ExampleBoilerPlate {
    * Remove all the boilerplate files from all the examples
    */
   remove() {
-    shelljs.exec('git clean -xdfq', {cwd: EXAMPLES_BASE_PATH});
+    shelljs.exec('git clean -xdfq', { cwd: EXAMPLES_BASE_PATH });
   }
 
   main() {
     yargs
       .usage('$0 <cmd> [args]')
-      .command('add', 'add the boilerplate to each example', () => this.add())
+      .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;
@@ -144,7 +151,7 @@ class ExampleBoilerPlate {
   }
 
   loadJsonFile(filePath) {
-    return fs.readJsonSync(filePath, {throws: false}) || {};
+    return fs.readJsonSync(filePath, { throws: false }) || {};
   }
 
   normalizePath(filePath) {

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

@@ -44,7 +44,7 @@ function runE2e() {
     // Run setup.
     console.log('runE2e: setup boilerplate');
     const installPackagesCommand = `example-use-${argv.local ? 'local' : 'npm'}`;
-    const addBoilerplateCommand = 'boilerplate:add';
+    const addBoilerplateCommand = `boilerplate:add${argv.ivy ? ':ivy' : ''}`;
     shelljs.exec(`yarn ${installPackagesCommand}`, { cwd: AIO_PATH });
     shelljs.exec(`yarn ${addBoilerplateCommand}`, { cwd: AIO_PATH });
   }
@@ -102,16 +102,16 @@ function findAndRunE2eTests(filter, outputFile, shard) {
           });
         });
       }, Promise.resolve())
-      .then(() => {
-        return e2eSpecPaths.cli.reduce((promise, specPath) => {
-          return promise.then(() => {
-            return runE2eTestsCLI(specPath, outputFile).then(ok => {
-              const arr = ok ? status.passed : status.failed;
-              arr.push(specPath);
+        .then(() => {
+          return e2eSpecPaths.cli.reduce((promise, specPath) => {
+            return promise.then(() => {
+              return runE2eTestsCLI(specPath, outputFile).then(ok => {
+                const arr = ok ? status.passed : status.failed;
+                arr.push(specPath);
+              });
             });
-          });
-        }, Promise.resolve());
-      });
+          }, Promise.resolve());
+        });
     })
     .then(() => {
       const stopTime = new Date().getTime();
@@ -172,8 +172,8 @@ function runProtractorSystemJS(prepPromise, appDir, appRunSpawnInfo, outputFile)
       });
     })
     .then(
-    function () { return finish(appRunSpawnInfo.proc.pid, true); },
-    function () { return finish(appRunSpawnInfo.proc.pid, false); }
+      function () { return finish(appRunSpawnInfo.proc.pid, true); },
+      function () { return finish(appRunSpawnInfo.proc.pid, false); }
     );
 }
 
@@ -206,20 +206,20 @@ function runE2eTestsCLI(appDir, outputFile) {
   console.log(`\n\n=========== Running aio example tests for: ${appDir}`);
   // `--no-webdriver-update` is needed to preserve the ChromeDriver version already installed.
   const config = loadExampleConfig(appDir);
-  const commands = config.e2e || [{ cmd: 'yarn', args: ['e2e', '--no-webdriver-update'] }];
+  const commands = config.e2e || [{ cmd: 'yarn', args: ['e2e', (argv.ivy ? '--prod' : ''), '--no-webdriver-update'] }];
 
   const e2eSpawnPromise = commands.reduce((prevSpawnPromise, { cmd, args }) => {
     return prevSpawnPromise.then(() => {
       const currSpawn = spawnExt(cmd, args, { cwd: appDir });
       return currSpawn.promise.then(
-          () => Promise.resolve(finish(currSpawn.proc.pid, true)),
-          () => Promise.reject(finish(currSpawn.proc.pid, false)));
+        () => Promise.resolve(finish(currSpawn.proc.pid, true)),
+        () => Promise.reject(finish(currSpawn.proc.pid, false)));
     });
   }, Promise.resolve());
 
   return e2eSpawnPromise.then(
-      () => { fs.appendFileSync(outputFile, `Passed: ${appDir}\n\n`); return true; },
-      () => { fs.appendFileSync(outputFile, `Failed: ${appDir}\n\n`); return false; });
+    () => { fs.appendFileSync(outputFile, `Passed: ${appDir}\n\n`); return true; },
+    () => { fs.appendFileSync(outputFile, `Failed: ${appDir}\n\n`); return false; });
 }
 
 // Report final status.

aio/tools/examples/shared/boilerplate/common/src/tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ],
+  "angularCompilerOptions": {
+    "enableIvy": "ngtsc"
+  }
+}

aio/tools/examples/shared/package.json

@@ -18,22 +18,22 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@angular/animations": "^7.0.0",
-    "@angular/common": "^7.0.0",
-    "@angular/compiler": "^7.0.0",
-    "@angular/core": "^7.0.0",
-    "@angular/elements": "^7.0.0",
-    "@angular/forms": "^7.0.0",
-    "@angular/http": "^7.0.0",
-    "@angular/platform-browser": "^7.0.0",
-    "@angular/platform-browser-dynamic": "^7.0.0",
-    "@angular/router": "^7.0.0",
-    "@angular/service-worker": "^7.0.0",
-    "@angular/upgrade": "^7.0.0",
-    "@nguniversal/common": "^7.0.0",
-    "@nguniversal/express-engine": "^7.0.0",
-    "@nguniversal/module-map-ngfactory-loader": "^7.0.0",
-    "angular-in-memory-web-api": "^0.6.0",
+    "@angular/animations": "^7.1.0",
+    "@angular/common": "^7.1.0",
+    "@angular/compiler": "^7.1.0",
+    "@angular/core": "^7.1.0",
+    "@angular/elements": "^7.1.0",
+    "@angular/forms": "^7.1.0",
+    "@angular/http": "^7.1.0",
+    "@angular/platform-browser": "^7.1.0",
+    "@angular/platform-browser-dynamic": "^7.1.0",
+    "@angular/router": "^7.1.0",
+    "@angular/service-worker": "^7.1.0",
+    "@angular/upgrade": "^7.1.0",
+    "@nguniversal/common": "^7.1.0",
+    "@nguniversal/express-engine": "^7.1.0",
+    "@nguniversal/module-map-ngfactory-loader": "^7.1.0",
+    "angular-in-memory-web-api": "git+ssh://[email protected]:brandonroberts/in-memory-web-api#14ce89b",
     "core-js": "^2.5.4",
     "express": "^4.14.1",
     "rxjs": "^6.3.0",
@@ -42,11 +42,11 @@
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.10.0",
-    "@angular/cli": "^7.0.0",
-    "@angular/compiler-cli": "^7.0.0",
-    "@angular/language-service": "^7.0.0",
-    "@angular/platform-server": "^7.0.0",
+    "@angular-devkit/build-angular": "^0.11.0",
+    "@angular/cli": "^7.1.0",
+    "@angular/compiler-cli": "^7.1.0",
+    "@angular/language-service": "^7.1.0",
+    "@angular/platform-server": "^7.1.0",
     "@types/angular": "^1.6.47",
     "@types/angular-animate": "^1.5.10",
     "@types/angular-mocks": "^1.6.0",
@@ -86,4 +86,4 @@
     "webpack-cli": "^3.1.0"
   },
   "repository": {}
-}
+}