build(aio): change examples to CLI (#19248)

PR Close #19248
2017-08-22 21:31:15 +02:00
parent 344a5ca545
commit 9bbf009dff
377 changed files with 2339 additions and 1748 deletions
@@ -6,9 +6,13 @@
    { "name": "lint", "command": "ng lint" },
    { "name": "e2e", "command": "ng e2e" }
  ],
-  "dependencies": [],
+  "dependencies": [
+    "web-animations-js"
+  ],
  "devDependencies": [
    "@angular/cli",
+    "@types/jasminewd2",
+    "karma-coverage-istanbul-reporter",
    "ts-node"
  ]
 }
@@ -8,7 +8,7 @@ const packageFolder = path.resolve(__dirname);
 class PackageJsonCustomizer {
  constructor() {
    this.dependenciesPackageJson = require(path.join(examplesPath, '/shared/package.json'));
-    this.scriptsPackageJson = require(path.join(examplesPath, '/shared/boilerplate/package.json'));
+    this.scriptsPackageJson = require(path.join(examplesPath, '/shared/boilerplate/systemjs/package.json'));
    this.basePackageJson = require(`${packageFolder}/base.json`);
  }

@@ -9,12 +9,14 @@ const globby = require('globby');
 const PackageJsonCustomizer = require('./customizer/package-json/packageJsonCustomizer');
 const regionExtractor = require('../transforms/examples-package/services/region-parser');

+const EXAMPLE_CONFIG_NAME = 'example-config.json';
+
 class ExampleZipper {
  constructor(sourceDirName, outputDirName) {
    this.examplesPackageJson = path.join(__dirname, '../examples/shared/package.json');
-    this.examplesSystemjsConfig = path.join(__dirname, '../examples/shared/boilerplate/src/systemjs.config.js');
-    this.examplesSystemjsLoaderConfig = path.join(__dirname, '../examples/shared/boilerplate/src/systemjs-angular-loader.js');
-    this.exampleTsconfig = path.join(__dirname, '../examples/shared/boilerplate/src/tsconfig.json');
+    this.examplesSystemjsConfig = path.join(__dirname, '../examples/shared/boilerplate/systemjs/src/systemjs.config.js');
+    this.examplesSystemjsLoaderConfig = path.join(__dirname, '../examples/shared/boilerplate/systemjs/src/systemjs-angular-loader.js');
+    this.exampleTsconfig = path.join(__dirname, '../examples/shared/boilerplate/systemjs/src/tsconfig.json');
    this.customizer = new PackageJsonCustomizer();

    let gpathPlnkr = path.join(sourceDirName, '**/*plnkr.json');
@@ -43,14 +45,22 @@ class ExampleZipper {
    return archive;
  }

+  _getExampleType(sourceFolder) {
+    const filePath = path.join(sourceFolder, EXAMPLE_CONFIG_NAME);
+    try {
+      return require(filePath, 'utf-8').projectType || 'cli';
+    } catch (err) { // empty file, so it is cli
+      return 'cli';
+    }
+  }
+
  _zipExample(configFileName, sourceDirName, outputDirName) {
    let json = require(configFileName, 'utf-8');
-    const exampleType = json.type || 'systemjs';
    const basePath = json.basePath || '';
    const jsonFileName = configFileName.replace(/^.*[\\\/]/, '');
    let relativeDirName = path.dirname(path.relative(sourceDirName, configFileName));
    let exampleZipName;
-
+    const exampleType = this._getExampleType(path.join(sourceDirName, relativeDirName));
    if (relativeDirName.indexOf('/') !== -1) { // Special example
      exampleZipName = relativeDirName.split('/')[0];
    } else {
@@ -60,7 +70,20 @@ class ExampleZipper {
    const exampleDirName = path.dirname(configFileName);
    const outputFileName = path.join(outputDirName, relativeDirName, exampleZipName + '.zip');
    let defaultIncludes = ['**/*.ts', '**/*.js', '**/*.es6', '**/*.css', '**/*.html', '**/*.md', '**/*.json', '**/*.png'];
-    let alwaysIncludes = ['bs-config.json', 'tslint.json', 'karma-test-shim.js', 'karma.conf.js', 'src/testing/**/*', 'src/.babelrc'];
+    let alwaysIncludes = [
+      'bs-config.json',
+      'protractor.conf.js',
+      '.angular-cli.json',
+      '.editorconfig',
+      '.gitignore',
+      'tslint.json',
+      'karma-test-shim.js',
+      'karma.conf.js',
+      'src/testing/**/*',
+      'src/.babelrc',
+      'src/favicon.ico',
+      'src/typings.d.ts'
+    ];
    var defaultExcludes = [
      '!**/bs-config.e2e.json',
      '!**/*plnkr.*',
@@ -70,7 +93,6 @@ class ExampleZipper {
      '!**/package.json',
      '!**/example-config.json',
      '!**/wallaby.js',
-      '!**/tsconfig.json',
      '!**/package.webpack.json',
      // AoT related files
      '!**/aot/**/*.*',
@@ -129,13 +151,13 @@ class ExampleZipper {
    // we need the package.json from _examples root, not the _boilerplate one
    zip.append(this.customizer.generate(exampleType), { name: 'package.json' });
    // also a systemjs config
-    if (!json.removeSystemJsConfig) {
+    if (exampleType === 'systemjs') {
      zip.append(fs.readFileSync(this.examplesSystemjsConfig, 'utf8'), { name: 'src/systemjs.config.js' });
      zip.append(fs.readFileSync(this.examplesSystemjsLoaderConfig, 'utf8'), { name: 'src/systemjs-angular-loader.js' });
+      // a modified tsconfig
+      let tsconfig = fs.readFileSync(this.exampleTsconfig, 'utf8');
+      zip.append(this._changeTypeRoots(tsconfig), {name: 'src/tsconfig.json'});
    }
-    // a modified tsconfig
-    let tsconfig = fs.readFileSync(this.exampleTsconfig, 'utf8');
-    zip.append(this._changeTypeRoots(tsconfig), {name: 'src/tsconfig.json'});

    zip.finalize();
  }
@@ -7,25 +7,44 @@ const yargs = require('yargs');
 const SHARED_PATH = path.resolve(__dirname, 'shared');
 const SHARED_NODE_MODULES_PATH = path.resolve(SHARED_PATH, 'node_modules');
 const BOILERPLATE_BASE_PATH = path.resolve(SHARED_PATH, 'boilerplate');
+const BOILERPLATE_COMMON_BASE_PATH = path.resolve(BOILERPLATE_BASE_PATH, 'common');
 const EXAMPLES_BASE_PATH = path.resolve(__dirname, '../../content/examples');
 const TESTING_BASE_PATH = path.resolve(EXAMPLES_BASE_PATH, 'testing');

-const BOILERPLATE_SRC_PATHS = [
-  'src/styles.css',
-  'src/systemjs-angular-loader.js',
-  'src/systemjs.config.js',
-  'src/tsconfig.json',
-  'bs-config.json',
-  'bs-config.e2e.json',
-  'package.json',
-  'tslint.json'
-];
-
-const BOILERPLATE_TEST_PATHS = [
-  'src/browser-test-shim.js',
-  'karma-test-shim.js',
-  'karma.conf.js'
-];
+const BOILERPLATE_PATHS = {
+  cli: [
+    'src/environments/environment.prod.ts',
+    'src/environments/environment.ts',
+    'src/assets/.gitkeep',
+    'src/favicon.ico',
+    'src/polyfills.ts',
+    'src/test.ts',
+    'src/tsconfig.app.json',
+    'src/tsconfig.spec.json',
+    'src/typings.d.ts',
+    'e2e/app.po.ts',
+    'e2e/tsconfig.e2e.json',
+    '.angular-cli.json',
+    '.editorconfig',
+    'karma.conf.js',
+    'package.json',
+    'protractor.conf.js',
+    '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'
+  ],
+  common: [
+    'src/styles.css'
+  ]
+};

 const ANGULAR_DIST_PATH = path.resolve(__dirname, '../../../dist');
 const ANGULAR_PACKAGES_PATH = path.resolve(ANGULAR_DIST_PATH, 'packages-dist');
@@ -64,19 +83,20 @@ class ExampleBoilerPlate {
    // 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));

      // Link the node modules - requires admin access (on Windows) because it adds symlinks
      const destinationNodeModules = path.resolve(exampleFolder, 'node_modules');
      fs.ensureSymlinkSync(SHARED_NODE_MODULES_PATH, destinationNodeModules);

-      // Copy the boilerplate source files
-      BOILERPLATE_SRC_PATHS.forEach(filePath => this.copyFile(BOILERPLATE_BASE_PATH, exampleFolder, filePath));
+      const boilerPlateType = exampleConfig.projectType || 'cli';
+      const boilerPlateBasePath = path.resolve(BOILERPLATE_BASE_PATH, boilerPlateType);

-      // Copy the boilerplate test files (if the example is configured to do unit testing)
-      const exampleConfig = this.loadJsonFile(path.resolve(exampleFolder, EXAMPLE_CONFIG_FILENAME));
-      if (exampleConfig.unittesting) {
-        BOILERPLATE_TEST_PATHS.forEach(filePath => this.copyFile(TESTING_BASE_PATH, exampleFolder, filePath));
-      }
+      // Copy the boilerplate specific files
+      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));
    });
  }

@@ -132,4 +152,4 @@ module.exports = new ExampleBoilerPlate();
 // If this file was run directly then run the main function,
 if (require.main === module) {
  module.exports.main();
-}
+}
@@ -6,8 +6,11 @@ const path = require('canonical-path');

 describe('example-boilerplate tool', () => {
  describe('add', () => {
-    const numberOfBoilerPlateFiles = 8;
-    const numberOfBoilerPlateTestFiles = 3;
+    const BPFiles = {
+      cli: 18,
+      systemjs: 7,
+      common: 1
+    };
    const exampleFolders = ['a/b', 'c/d'];

    beforeEach(() => {
@@ -45,11 +48,28 @@ describe('example-boilerplate tool', () => {
      expect(fs.ensureSymlinkSync).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/node_modules'), path.resolve('c/d/node_modules'));
    });

-    it('should copy all the source boilerplate files', () => {
+    it('should copy all the source boilerplate files for systemjs', () => {
+      exampleBoilerPlate.loadJsonFile.and.callFake(filePath => filePath.indexOf('a/b') !== -1 ? { projectType: 'systemjs' } : {})
      exampleBoilerPlate.add();
-      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes(numberOfBoilerPlateFiles * exampleFolders.length);
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes(
+        (BPFiles.cli) +
+        (BPFiles.systemjs) +
+        (BPFiles.common * exampleFolders.length)
+      );
      // for example
-      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/boilerplate'), 'a/b', 'package.json');
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/boilerplate/systemjs'), 'a/b', 'package.json');
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/boilerplate/common'), 'a/b', 'src/styles.css');
+    });
+
+    it('should copy all the source boilerplate files for cli', () => {
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes(
+        (BPFiles.cli * exampleFolders.length) +
+        (BPFiles.common * exampleFolders.length)
+      );
+      // for example
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/boilerplate/cli'), 'a/b', 'package.json');
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/boilerplate/common'), 'c/d', 'src/styles.css');
    });

    it('should try to load the example config file', () => {
@@ -58,16 +78,6 @@ 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'));
    });
-
-    it('should copy all the test boilerplate files if unit testing is configured', () => {
-      // configure unit testing for example a/b and not c/d
-      exampleBoilerPlate.loadJsonFile.and.callFake(filePath => filePath.indexOf('a/b') !== -1 ? { unittesting: true } : {});
-      exampleBoilerPlate.add();
-      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes((numberOfBoilerPlateFiles * 2) + numberOfBoilerPlateTestFiles);
-      // for example
-      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, '../../content/examples/testing'), 'a/b', 'karma.conf.js');
-      expect(exampleBoilerPlate.copyFile).not.toHaveBeenCalledWith(path.resolve(__dirname, '../../content/examples/testing'), 'c/d', 'karma.conf.js');
-    });
  });

  describe('remove', () => {
@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('canonical-path');
 const fs = require('fs-extra');
 const argv = require('yargs').argv;
 const globby = require('globby');
@@ -9,10 +9,17 @@ const AIO_PATH = path.join(__dirname, '../../');
 const SHARED_PATH = path.join(__dirname, '/shared');
 const EXAMPLES_PATH = path.join(AIO_PATH, './content/examples/');
 const PROTRACTOR_CONFIG_FILENAME = path.join(__dirname, './shared/protractor.config.js');
-const SPEC_FILENAME = 'e2e-spec.ts';
+const SJS_SPEC_FILENAME = 'e2e-spec.ts';
+const CLI_SPEC_FILENAME = 'e2e/app.e2e-spec.ts';
 const EXAMPLE_CONFIG_FILENAME = 'example-config.json';
-const IGNORED_EXAMPLES = [
-  'ts-to-js/'
+const IGNORED_EXAMPLES = [ // temporary ignores
+  'toh-',
+  'quickstart',
+  'http',
+  'setup',
+  'i18n',
+  'webpack',
+  'upgrade-p'
 ];

 /**
@@ -78,36 +85,50 @@ function findAndRunE2eTests(filter, outputFile, shard) {

  // Run the tests sequentially.
  const status = { passed: [], failed: [] };
-  return getE2eSpecPaths(EXAMPLES_PATH, filter)
-    .then(e2eSpecPaths => e2eSpecPaths
-      .filter((paths, index) => index % shardDivider === shardModulo)
-      .reduce((promise, specPath) => {
-      return promise.then(() => {
-        const examplePath = path.dirname(specPath);
-        return runE2eTests(examplePath, outputFile).then((ok) => {
-          const arr = ok ? status.passed : status.failed;
-          arr.push(examplePath);
-        });
+  return getE2eSpecs(EXAMPLES_PATH, filter)
+    .then(e2eSpecPaths => {
+      Object.keys(e2eSpecPaths).forEach(key => {
+        const value = e2eSpecPaths[key];
+        e2eSpecPaths[key] = value.filter((p, index) => index % shardDivider === shardModulo)
+      });
+
+      return e2eSpecPaths.systemjs.reduce((promise, specPath) => {
+        return promise.then(() => {
+          const examplePath = path.dirname(specPath);
+          return runE2eTestsSystemJS(examplePath, outputFile).then(ok => {
+            const arr = ok ? status.passed : status.failed;
+            arr.push(examplePath);
+          });
+        });
+      }, 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);
+            });
+          });
+        }, Promise.resolve())
+      })})
+      .then(() => {
+        const stopTime = new Date().getTime();
+        status.elapsedTime = (stopTime - startTime) / 1000;
+        return status;
      });
-    }, Promise.resolve()))
-    .then(function () {
-      const stopTime = new Date().getTime();
-      status.elapsedTime = (stopTime - startTime) / 1000;
-      return status;
-    });
 }

 // Start the example in appDir; then run protractor with the specified
 // fileName; then shut down the example.
 // All protractor output is appended to the outputFile.
-function runE2eTests(appDir, outputFile) {
-
+// SystemJS version
+function runE2eTestsSystemJS(appDir, outputFile) {
  const config = loadExampleConfig(appDir);

  const appBuildSpawnInfo = spawnExt('yarn', [config.build], { cwd: appDir });
  const appRunSpawnInfo = spawnExt('yarn', [config.run, '--', '-s'], { cwd: appDir }, true);

-  let run = runProtractor(appBuildSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile);
+  let run = runProtractorSystemJS(appBuildSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile);

  if (fs.existsSync(appDir + '/aot/index.html')) {
    run = run.then((ok) => ok && runProtractorAoT(appDir, outputFile));
@@ -115,8 +136,8 @@ function runE2eTests(appDir, outputFile) {
  return run;
 }

-function runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile) {
-  const specFilename = path.resolve(`${appDir}/${SPEC_FILENAME}`);
+function runProtractorSystemJS(prepPromise, appDir, appRunSpawnInfo, outputFile) {
+  const specFilename = path.resolve(`${appDir}/${SJS_SPEC_FILENAME}`);
  return prepPromise
    .catch(function () {
      const emsg = `Application at ${appDir} failed to transpile.\n\n`;
@@ -149,16 +170,16 @@ function runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile) {
      });
    })
    .then(
-    function () { return finish(true); },
-    function () { return finish(false); }
+    function () { return finish(appRunSpawnInfo.proc.pid, true); },
+    function () { return finish(appRunSpawnInfo.proc.pid, false); }
    )
+}

-  function finish(ok) {
-    // Ugh... proc.kill does not work properly on windows with child processes.
-    // appRun.proc.kill();
-    treeKill(appRunSpawnInfo.proc.pid);
-    return ok;
-  }
+function finish(spawnProcId, ok) {
+  // Ugh... proc.kill does not work properly on windows with child processes.
+  // appRun.proc.kill();
+  treeKill(spawnProcId);
+  return ok;
 }

 // Run e2e tests over the AOT build for projects that examples it.
@@ -172,7 +193,26 @@ function runProtractorAoT(appDir, outputFile) {
    promise = promise.then(() => spawnExt('node', [copyFileCmd], { cwd: appDir }).promise);
  }
  const aotRunSpawnInfo = spawnExt('yarn', ['serve:aot'], { cwd: appDir }, true);
-  return runProtractor(promise, appDir, aotRunSpawnInfo, outputFile);
+  return runProtractorSystemJS(promise, appDir, aotRunSpawnInfo, outputFile);
+}
+
+// Start the example in appDir; then run protractor with the specified
+// fileName; then shut down the example.
+// All protractor output is appended to the outputFile.
+// CLI version
+function runE2eTestsCLI(appDir, outputFile) {
+  // --preserve-symlinks is needed due the symlinked node_modules in each example
+  const e2eSpawn = spawnExt('ng', ['e2e', '--preserve-symlinks'], { cwd: appDir });
+  return e2eSpawn.promise.then(
+    function () {
+      fs.appendFileSync(outputFile, `Passed: ${appDir}\n\n`);
+      return finish(e2eSpawn.proc.pid, true);
+    },
+    function () {
+      fs.appendFileSync(outputFile, `Failed: ${appDir}\n\n`);
+      return finish(e2eSpawn.proc.pid, false);
+    }
+  );
 }

 // Report final status.
@@ -231,18 +271,34 @@ function spawnExt(command, args, options, ignoreClose = false) {
  return { proc, promise };
 }

+function getE2eSpecs(basePath, filter) {
+  let specs = {};
+
+  return getE2eSpecsFor(basePath, SJS_SPEC_FILENAME, filter).then(sjsPaths => {
+    specs.systemjs = sjsPaths;
+  }).then(() => {
+    return getE2eSpecsFor(basePath, CLI_SPEC_FILENAME, filter).then(cliPaths => {
+      return cliPaths.map(p => {
+        return p.replace(`${CLI_SPEC_FILENAME}`, '');
+      });
+    });
+  }).then(cliPaths => {
+    specs.cli = cliPaths;
+  }).then(() => specs);
+}
+
 // Find all e2e specs in a given example folder.
-function getE2eSpecPaths(basePath, filter) {
+function getE2eSpecsFor(basePath, specFile, filter) {
  // Only get spec file at the example root.
-  const e2eSpecGlob = `${filter ? `*${filter}*` : '*'}/${SPEC_FILENAME}`;
+  const e2eSpecGlob = `${filter ? `*${filter}*` : '*'}/${specFile}`;
  return globby(e2eSpecGlob, { cwd: basePath, nodir: true })
    .then(paths => paths
-      .filter(file => IGNORED_EXAMPLES.some(ignored => !file.startsWith(ignored)))
+      .filter(file => !IGNORED_EXAMPLES.some(ignored => file.startsWith(ignored)))
      .map(file => path.join(basePath, file))
    );
 }

-// Load configuration for an example.
+// Load configuration for an example. Used for SystemJS
 function loadExampleConfig(exampleFolder) {
  // Default config.
  let config = {
@@ -0,0 +1,60 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "angular.io-example"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
@@ -0,0 +1,43 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+yarn-error.log
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db
@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}
@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
@@ -0,0 +1,33 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
@@ -0,0 +1,50 @@
+{
+  "name": "angular.io-example",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^4.2.4",
+    "@angular/common": "^4.2.4",
+    "@angular/compiler": "^4.2.4",
+    "@angular/core": "^4.2.4",
+    "@angular/forms": "^4.2.4",
+    "@angular/http": "^4.2.4",
+    "@angular/platform-browser": "^4.2.4",
+    "@angular/platform-browser-dynamic": "^4.2.4",
+    "@angular/router": "^4.2.4",
+    "core-js": "^2.4.1",
+    "rxjs": "^5.4.2",
+    "web-animations-js": "^2.3.1",
+    "zone.js": "^0.8.14"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.3.1",
+    "@angular/compiler-cli": "^4.2.4",
+    "@angular/language-service": "^4.2.4",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "codelyzer": "~3.1.1",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.2",
+    "ts-node": "~3.2.0",
+    "tslint": "~5.3.2",
+    "typescript": "~2.3.3"
+  }
+}
@@ -0,0 +1,28 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false
+};
@@ -0,0 +1,72 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/animation`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+ import 'web-animations-js';
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import 'intl/locale-data/jsonp/en';
@@ -0,0 +1,32 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare const __karma__: any;
+declare const require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();
@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts",
+    "testing/**"
+  ]
+}
@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}
@@ -0,0 +1,19 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}
@@ -0,0 +1,142 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "arrow-return-shorthand": true,
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [
+      true,
+      "rxjs"
+    ],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-super": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-misused-new": true,
+    "no-non-null-assertion": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unnecessary-initializer": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "typeof-compare": true,
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "no-access-missing-member": true,
+    "templates-use-public": true,
+    "invoke-injectable": true
+  }
+}
@@ -1,4 +0,0 @@
-{
-  "build": "build",
-  "run": "serve"
-}
@@ -1,10 +0,0 @@
-{
-  "description": "QuickStart",
-  "basePath": "src/",
-  "files": [
-    "app/app.component.ts",
-    "index.html"
-  ],
-  "open": "app/app.component.ts",
-  "tags": ["quickstart"]
-}
@@ -28,10 +28,11 @@
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "systemjs": "0.19.39",
+    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
-    "@angular/cli": "^1.2.7",
+    "@angular/cli": "1.3.1",
    "@types/angular": "^1.5.16",
    "@types/angular-animate": "^1.5.5",
    "@types/angular-cookies": "^1.4.2",
@@ -39,20 +40,11 @@
    "@types/angular-resource": "^1.5.6",
    "@types/angular-route": "^1.3.2",
    "@types/angular-sanitize": "^1.3.3",
-    "@types/jasmine": "2.5.36",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^6.0.45",
-    "angular2-template-loader": "^0.6.0",
-    "awesome-typescript-loader": "^3.0.4",
-    "babel-cli": "^6.16.0",
-    "babel-preset-angular2": "^0.0.2",
-    "babel-preset-es2015": "^6.16.0",
    "canonical-path": "0.0.2",
    "concurrently": "^3.0.0",
-    "css-loader": "^0.26.1",
-    "extract-text-webpack-plugin": "2.0.0-beta.5",
-    "file-loader": "^0.9.0",
-    "html-loader": "^0.4.3",
-    "html-webpack-plugin": "^2.16.1",
    "http-server": "^0.9.0",
    "jasmine": "~2.4.1",
    "jasmine-core": "~2.4.1",
@@ -63,26 +55,19 @@
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.1",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.2",
-    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "protractor": "~5.1.0",
-    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.4",
    "rollup": "^0.41.6",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-node-resolve": "2.0.0",
    "rollup-plugin-uglify": "^1.0.1",
    "source-map-explorer": "^1.3.2",
-    "style-loader": "^0.13.1",
    "ts-node": "~3.0.4",
    "tslint": "^3.15.1",
-    "typescript": "~2.3.2",
-    "webpack": "2.2.1",
-    "webpack-dev-server": "2.4.1",
-    "webpack-merge": "^3.0.0"
+    "typescript": "~2.3.2"
  },
  "repository": {}
 }
@@ -11,6 +11,7 @@ var globby = require('globby');
 var fileTranslator = require('./translator/fileTranslator');
 var indexHtmlRules = require('./translator/rules/indexHtml');
 var systemjsConfigExtrasRules = require('./translator/rules/systemjsConfigExtras');
+var mainTsRules = require('./translator/rules/mainTs');
 var regionExtractor = require('../transforms/examples-package/services/region-parser');

 class PlunkerBuilder {
@@ -18,7 +19,7 @@ class PlunkerBuilder {
    this.basePath = basePath;
    this.destPath = destPath;
    this.options = options;
-    this.boilerplate = path.join(__dirname, '../examples/shared/boilerplate');
+    this.boilerplate = path.join(__dirname, '../examples/shared/boilerplate/systemjs');
    this.copyrights = {};

    this._buildCopyrightStrings();
@@ -148,6 +149,11 @@ class PlunkerBuilder {
        }
      }

+      // Matches main.ts or main.1.ts
+      if (/^main(?:[.-]\w+)?\.ts$/.test(relativeFileName)) {
+        content = fileTranslator.translate(content, mainTsRules);
+      }
+
      if (relativeFileName == 'systemjs.config.extras.js') {
        content = fileTranslator.translate(content, systemjsConfigExtrasRules);
      }
@@ -288,6 +294,10 @@ class PlunkerBuilder {
      '!**/wallaby.js',
      '!**/karma-test-shim.js',
      '!**/karma.conf.js',
+      '!**/test.ts',
+      '!**/polyfills.ts',
+      '!**/tsconfig.app.json',
+      '!**/environments/**',
      // AoT related files
      '!**/aot/**/*.*',
      '!**/*-aot.*'
@@ -5,6 +5,10 @@ function translate(html, rulesFile) {
    var rxRule = rulesFile.rules[rxDatum.pattern];
    // rxFrom is a rexexp
    var rxFrom = rxRule.from;
+    // check if there is an exception
+    if (rxDatum.exceptIf) {
+      if (html.indexOf(rxDatum.exceptIf) !== -1) return;
+    }
    if (rxDatum.from) {
      var from = rxDatum.from.replace('/', '\/');
      var rxTemp = rxFrom.toString();
@@ -35,9 +35,27 @@ var rules = {
    from: /src=".?node_modules\/zone.js\/dist\/(.*)"/g,
    to:   'src="https://unpkg.com/zone.js/dist/$1?main=browser"'
  },
+  system_js_header: {
+    from: '</head>',
+    to: `
+    <link rel="stylesheet" href="styles.css">
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+    </head>
+    `
+  }
 };

 var rulesToApply = [
+  {
+    pattern: 'system_js_header',
+    exceptIf: 'system.src.js'
+  },
  {
    pattern: 'basehref',
  },
@@ -0,0 +1,24 @@
+var rules = {
+  environment_import: {
+    from: `import { environment } from './environments/environment';`,
+    to: ''
+  },
+  environment_check: {
+    from: /if \(environment\.production\)\s*{\n*\s*enableProdMode\(\);\s*}/g,
+    to: ''
+  }
+};
+
+var rulesToApply = [
+  {
+    pattern: 'environment_import'
+  },
+  {
+    pattern: 'environment_check'
+  }
+];
+
+module.exports = {
+  rules: rules,
+  rulesToApply: rulesToApply
+};