Merge remote-tracking branch 'remotes/angular.io/master'

# Conflicts:
#	harp.json
#	public/_includes/_hero-home.jade
#	public/_includes/_scripts-include.jade
#	public/docs/_examples/quickstart/js/package.1.json
#	public/docs/_includes/_side-nav.jade
#	public/docs/js/latest/cookbook/ts-to-js.jade
#	public/docs/ts/latest/_data.json
#	public/docs/ts/latest/api/_data.json
#	public/docs/ts/latest/cookbook/_data.json
#	public/docs/ts/latest/cookbook/aot-compiler.jade
#	public/docs/ts/latest/cookbook/ngmodule-faq.jade
#	public/docs/ts/latest/cookbook/rc4-to-rc5.jade
#	public/docs/ts/latest/glossary.jade
#	public/docs/ts/latest/guide/_data.json
#	public/docs/ts/latest/guide/attribute-directives.jade
#	public/docs/ts/latest/guide/browser-support.jade
#	public/docs/ts/latest/guide/forms.jade
#	public/docs/ts/latest/guide/lifecycle-hooks.jade
#	public/docs/ts/latest/guide/ngmodule.jade
#	public/docs/ts/latest/guide/router.jade
#	public/docs/ts/latest/guide/style-guide.jade
#	public/docs/ts/latest/guide/template-syntax.jade
#	public/docs/ts/latest/guide/testing.jade
#	public/docs/ts/latest/guide/upgrade.jade
#	public/docs/ts/latest/quickstart.jade
#	public/docs/ts/latest/tutorial/_data.json
#	public/docs/ts/latest/tutorial/toh-pt5.jade
#	public/docs/ts/latest/tutorial/toh-pt6.jade

.travis.yml

@@ -11,7 +11,7 @@ env:
     - DISPLAY=:99.0
     - CHROME_BIN=chromium-browser
     # using SHA instead of version to fix build-compile issue
-    - LATEST_RELEASE=cfc12c653970c9ad6d807a6a8ebff58edbc568a0
+    - LATEST_RELEASE=2.1.0
     - TASK_FLAGS="--dgeni-log=warn"
   matrix:
     - TASK=lint

firebase.json

@@ -4,7 +4,7 @@
   "rewrites": [
     {
     "source": "/docs/dart/latest/testing",
-    "destination": "/docs/dart/latest/index.html"
+    "destination":"/docs/dart/latest/guide/testing.html"
     },
     {
       "source": "/docs/dart/latest/tutorial",
@@ -12,7 +12,7 @@
     },
     {
       "source": "/docs/js/latest/testing",
-      "destination": "/docs/js/latest/index.html"
+      "destination": "/docs/js/latest/guide/testing.html"
     },
     {
       "source": "/docs/js/latest/tutorial",

gulpfile.js

@@ -37,7 +37,7 @@ var TEMP_PATH = './_temp';
 var DOCS_PATH = path.join(PUBLIC_PATH, 'docs');
 
 var EXAMPLES_PATH = path.join(DOCS_PATH, '_examples');
-var EXAMPLES_PROTRACTOR_PATH = path.join(EXAMPLES_PATH, '_protractor');
+var BOILERPLATE_PATH = path.join(EXAMPLES_PATH, '_boilerplate');
 var EXAMPLES_TESTING_PATH = path.join(EXAMPLES_PATH, 'testing/ts');
 var NOT_API_DOCS_GLOB = path.join(PUBLIC_PATH, './{docs/*/latest/!(api),!(docs)}/**/*.*');
 var RESOURCES_PATH = path.join(PUBLIC_PATH, 'resources');
@@ -50,6 +50,8 @@ var regularPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/regularPl
 var embeddedPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/embeddedPlunker'));
 var fsUtils = require(path.resolve(TOOLS_PATH, 'fs-utils/fsUtils'));
 
+const WWW = argv.page ? 'www-pages' : 'www'
+
 const isSilent = !!argv.silent;
 if (isSilent) gutil.log = gutil.noop;
 const _dgeniLogLevel = argv.dgeniLog || (isSilent ? 'error' : 'info');
@@ -77,7 +79,7 @@ var _apiShredOptions =  {
 const relDartDocApiDir = path.join('doc', 'api');
 var _apiShredOptionsForDart =  {
   lang: 'dart',
-  examplesDir: path.resolve(ngPathFor('dart'), 'example'),
+  examplesDir: path.resolve(ANGULAR_PROJECT_PATH + '2_api_examples'),
   fragmentsDir: path.join(DOCS_PATH, '_fragments/_api'),
   zipDir: path.join(RESOURCES_PATH, 'zips/api'),
   logLevel: _dgeniLogLevel
@@ -90,22 +92,16 @@ var _excludeMatchers = _excludePatterns.map(function(excludePattern){
 });
 
 var _exampleBoilerplateFiles = [
-  '.editorconfig',
   'a2docs.css',
   'package.json',
   'styles.css',
   'systemjs.config.js',
   'tsconfig.json',
-  'tslint.json',
+  'tslint.json'
-  'typings.json'
 ];
 
 var _exampleDartWebBoilerPlateFiles = ['a2docs.css', 'styles.css'];
 
-var _exampleProtractorBoilerplateFiles = [
-  'tsconfig.json'
-];
-
 var _exampleUnitTestingBoilerplateFiles = [
   'karma-test-shim.js',
   'karma.conf.js'
@@ -203,18 +199,13 @@ function runE2e() {
     });
     */
     // Not 'fast'; do full setup
-    gutil.log('runE2e: install _protractor stuff');
+    gutil.log('runE2e: install _examples stuff');
-    var spawnInfo = spawnExt('npm', ['install'], { cwd: EXAMPLES_PROTRACTOR_PATH});
+    var spawnInfo = spawnExt('npm', ['install'], { cwd: EXAMPLES_PATH});
     promise = spawnInfo.promise
-      .then(function() {
-        gutil.log('runE2e: install _examples stuff');
-        spawnInfo = spawnExt('npm', ['install'], { cwd: EXAMPLES_PATH})
-        return spawnInfo.promise;
-      })
       .then(function() {
         buildStyles(copyExampleBoilerplate, _.noop);
         gutil.log('runE2e: update webdriver');
-        spawnInfo = spawnExt('npm', ['run', 'webdriver:update'], {cwd: EXAMPLES_PROTRACTOR_PATH});
+        spawnInfo = spawnExt('npm', ['run', 'webdriver:update'], {cwd: EXAMPLES_PATH});
         return spawnInfo.promise;
       });
   };
@@ -249,11 +240,10 @@ function findAndRunE2eTests(filter, outputFile) {
   fs.writeFileSync(outputFile, header);
 
   // create an array of combos where each
-  // combo consists of { examplePath: ... , protractorConfigFilename:  ... }
+  // combo consists of { examplePath: ... }
   var examplePaths = [];
   var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
    e2eSpecPaths.forEach(function(specPath) {
-    var destConfig = path.join(specPath, 'protractor.config.js');
     // get all of the examples under each dir where a pcFilename is found
     localExamplePaths = getExamplePaths(specPath, true);
     // Filter by language
@@ -306,7 +296,12 @@ function runE2eTsTests(appDir, outputFile) {
   var appBuildSpawnInfo = spawnExt('npm', ['run', config.build], { cwd: appDir });
   var appRunSpawnInfo = spawnExt('npm', ['run', config.run, '--', '-s'], { cwd: appDir });
 
-  return runProtractor(appBuildSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile);
+  var run = runProtractor(appBuildSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile);
+
+  if (fs.existsSync(appDir + '/aot/index.html')) {
+    run = run.then(() => runProtractorAoT(appDir, outputFile));
+  }
+  return run;
 }
 
 function runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile) {
@@ -324,7 +319,7 @@ function runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile) {
       // start protractor
 
       var spawnInfo = spawnExt('npm', [ 'run', 'protractor', '--', 'protractor.config.js',
-        `--specs=${specFilename}`, '--params.appDir=' + appDir, '--params.outputFile=' + outputFile], { cwd: EXAMPLES_PROTRACTOR_PATH });
+        `--specs=${specFilename}`, '--params.appDir=' + appDir, '--params.outputFile=' + outputFile], { cwd: EXAMPLES_PATH });
 
       spawnInfo.proc.stderr.on('data', function (data) {
         transpileError = transpileError || /npm ERR! Exit status 100/.test(data.toString());
@@ -351,6 +346,20 @@ function runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile) {
     }
 }
 
+function runProtractorAoT(appDir, outputFile) {
+  fs.appendFileSync(outputFile, '++ AoT version ++\n');
+  var aotBuildSpawnInfo = spawnExt('npm', ['run', 'build:aot'], { cwd: appDir });
+  var promise = aotBuildSpawnInfo.promise;
+
+  var copyFileCmd = 'copy-dist-files.js';
+  if (fs.existsSync(appDir + '/' + copyFileCmd)) {
+    promise = promise.then(() =>
+     spawnExt('node', [copyFileCmd], { cwd: appDir }).promise );
+  }
+  var aotRunSpawnInfo = spawnExt('npm', ['run', 'http-server:e2e', 'aot', '--', '-s'], { cwd: appDir });
+  return runProtractor(promise, appDir, aotRunSpawnInfo, outputFile);
+}
+
 // start the server in appDir/build/web; then run protractor with the specified
 // fileName; then shut down the example.  All protractor output is appended
 // to the outputFile.
@@ -475,7 +484,7 @@ gulp.task('_copy-example-boilerplate', function (done) {
 function buildStyles(cb, done){
   gulp.src(path.join(STYLES_SOURCE_PATH, _styleLessName))
     .pipe(less())
-    .pipe(gulp.dest(EXAMPLES_PATH)).on('end', function(){
+    .pipe(gulp.dest(BOILERPLATE_PATH)).on('end', function(){
       cb().then(function() { done(); });
     });
 }
@@ -486,12 +495,12 @@ function buildStyles(cb, done){
 function copyExampleBoilerplate() {
   gutil.log('Copying example boilerplate files');
   var sourceFiles = _exampleBoilerplateFiles.map(function(fn) {
-    return path.join(EXAMPLES_PATH, fn);
+    return path.join(BOILERPLATE_PATH, fn);
   });
   var examplePaths = excludeDartPaths(getExamplePaths(EXAMPLES_PATH));
 
   var dartWebSourceFiles = _exampleDartWebBoilerPlateFiles.map(function(fn){
-    return path.join(EXAMPLES_PATH, fn);
+    return path.join(BOILERPLATE_PATH, fn);
   });
   var dartExampleWebPaths = getDartExampleWebPaths(EXAMPLES_PATH);
 
@@ -501,14 +510,6 @@ function copyExampleBoilerplate() {
     .then(function() {
       return copyFiles(dartWebSourceFiles, dartExampleWebPaths, destFileMode);
     })
-    // copy certain files from _examples/_protractor dir to each subdir that contains an e2e-spec file.
-    .then(function() {
-      var protractorSourceFiles =
-        _exampleProtractorBoilerplateFiles
-          .map(function(name) {return path.join(EXAMPLES_PROTRACTOR_PATH, name); });
-      var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
-      return copyFiles(protractorSourceFiles, e2eSpecPaths, destFileMode);
-    })
     // copy the unit test boilerplate
     .then(function() {
       var unittestSourceFiles =
@@ -516,6 +517,10 @@ function copyExampleBoilerplate() {
           .map(function(name) { return path.join(EXAMPLES_TESTING_PATH, name); });
       var unittestPaths = getUnitTestingPaths(EXAMPLES_PATH);
       return copyFiles(unittestSourceFiles, unittestPaths, destFileMode);
+    })
+    .catch(function(err) {
+      gutil.log(err);
+      throw err;
     });
 }
 
@@ -594,11 +599,6 @@ function deleteExampleBoilerPlate() {
   return deleteFiles(_exampleBoilerplateFiles, examplePaths)
     .then(function() {
       return deleteFiles(_exampleDartWebBoilerPlateFiles, dartExampleWebPaths);
-    })
-    .then(function() {
-      var protractorFiles = _exampleProtractorBoilerplateFiles;
-      var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
-      return deleteFiles(protractorFiles, e2eSpecPaths);
     });
 }
 
@@ -747,7 +747,7 @@ gulp.task('harp-serve', () => {
 
 gulp.task('serve-www', () => {
   // Serve generated site.
-  return execPromise('npm run live-server ./www');
+  return execPromise(`npm run live-server ${WWW}`);
 });
 
 gulp.task('build-compile', ['build-docs'], function() {
@@ -758,7 +758,7 @@ gulp.task('check-deploy', ['build-docs'], function() {
   return harpCompile().then(function() {
     gutil.log('compile ok');
     gutil.log('running live server ...');
-    execPromise('npm run live-server ./www');
+    execPromise(`npm run live-server ${WWW}`);
     return askDeploy();
   }).then(function(shouldDeploy) {
     if (shouldDeploy) {
@@ -818,7 +818,7 @@ gulp.task('_harp-compile', function() {
 
 gulp.task('_shred-devguide-examples', ['_shred-clean-devguide', '_copy-example-boilerplate'], function() {
   // Split big shredding task into partials 2016-06-14
-  var examplePaths = globby.sync(EXAMPLES_PATH+'/*/', {ignore: ['/node_modules', 'typings/', '_protractor/']});
+  var examplePaths = globby.sync(EXAMPLES_PATH+'/*/', {ignore: ['/node_modules', 'typings/']});
   var promise = Promise.resolve(true);
   examplePaths.forEach(function (examplePath) {
     promise = promise.then(() => docShredder.shredSingleExampleDir(_devguideShredOptions, examplePath));
@@ -877,7 +877,6 @@ gulp.task('lint', function() {
       '!./public/docs/_examples/**/ts-snippets/*.ts',
       '!./public/docs/_examples/style-guide/ts/**/*.avoid.ts',
       '!./public/docs/_examples/**/node_modules/**/*',
-      '!./public/docs/_examples/_protractor/**/*',
       '!./public/docs/_examples/**/typings/**/*',
       '!./public/docs/_examples/**/typings-ng1/**/*',
       '!./public/docs/_examples/**/build/**/*',
@@ -902,11 +901,13 @@ function harpCompile() {
   env({ vars: { NODE_ENV: "production" } });
   gutil.log("NODE_ENV: " + process.env.NODE_ENV);
 
-  if(skipLangs && fs.existsSync('www') && backupApiHtmlFilesExist('www')) {
+  if(argv.page) harpJsonSetJade2NgTo(true);
+
+  if(skipLangs && fs.existsSync(WWW) && backupApiHtmlFilesExist(WWW)) {
     gutil.log(`Harp site recompile: skipping recompilation of API docs for [${skipLangs}]`);
-    gutil.log(`API docs will be copied from existing www folder.`)
+    gutil.log(`API docs will be copied from existing ${WWW} folder.`)
-    del.sync('www-backup'); // remove existing backup if it exists
+    del.sync(`${WWW}-backup`); // remove existing backup if it exists
-    renameIfExistsSync('www', 'www-backup');
+    renameIfExistsSync(WWW, `${WWW}-backup`);
   } else {
     gutil.log(`Harp full site compile, including API docs for all languages.`);
     if (skipLangs)
@@ -918,11 +919,12 @@ function harpCompile() {
   gutil.log('running harp compile...');
   showHideExampleNodeModules('hide');
   showHideApiDir('hide');
-  var spawnInfo = spawnExt('npm',['run','harp', '--', 'compile', '.', './www' ]);
+  var spawnInfo = spawnExt('npm',['run','harp', '--', 'compile', '.', WWW ]);
   spawnInfo.promise.then(function(x) {
     gutil.log("NODE_ENV: " + process.env.NODE_ENV);
     showHideExampleNodeModules('show');
     showHideApiDir('show');
+    harpJsonSetJade2NgTo(false);
     if (x !== 0) {
       deferred.reject(x)
     } else {
@@ -933,6 +935,7 @@ function harpCompile() {
     gutil.log("NODE_ENV: " + process.env.NODE_ENV);
     showHideExampleNodeModules('show');
     showHideApiDir('show');
+    harpJsonSetJade2NgTo(false);
     deferred.reject(e);
   });
   return deferred.promise;
@@ -1050,21 +1053,21 @@ function _showHideApiDir(lang, showOrHide) {
   renameIfExistsSync(...args);
 }
 
-// For each lang in skipLangs, copy the API dir from www-backup to www.
+// For each lang in skipLangs, copy the API dir from ${WWW}-backup to WWW.
 function restoreApiHtml() {
   const vers = 'latest';
   skipLangs.forEach(lang => {
     const relApiDir = path.join('docs', lang, vers, 'api');
-    const wwwApiSubdir = path.join('www', relApiDir);
+    const apiSubdir = path.join(WWW, relApiDir);
-    const backupApiSubdir = path.join('www-backup', relApiDir);
+    const backupApiSubdir = path.join(`${WWW}-backup`, relApiDir);
     if (fs.existsSync(backupApiSubdir) || argv.forceSkipApi !== true) {
-      gutil.log(`cp ${backupApiSubdir} ${wwwApiSubdir}`)
+      gutil.log(`cp ${backupApiSubdir} ${apiSubdir}`)
-      fs.copySync(backupApiSubdir, wwwApiSubdir);
+      fs.copySync(backupApiSubdir, apiSubdir);
     }
   });
 }
 
-// For each lang in skipLangs, ensure API dir exists in www-backup
+// For each lang in skipLangs, ensure API dir exists in folderName
 function backupApiHtmlFilesExist(folderName) {
   const vers = 'latest';
   var result = 1;
@@ -1079,6 +1082,14 @@ function backupApiHtmlFilesExist(folderName) {
   return result;
 }
 
+function harpJsonSetJade2NgTo(v) {
+  const execSync = require('child_process').execSync;
+  const harpJsonPath = path.join(ANGULAR_IO_PROJECT_PATH, 'harp.json');
+  execSync(`perl -pi -e 's/("jade2ng": *)\\w+/$1${v}/' ${harpJsonPath}`);
+  const harpJson = require(harpJsonPath);
+  gutil.log(`jade2ng: ${harpJson.globals.jade2ng}`);
+}
+
 // Copies fileNames into destPaths, setting the mode of the
 // files at the destination as optional_destFileMode if given.
 // returns a promise
@@ -1138,7 +1149,7 @@ function getTypingsPaths(basePath) {
 
 function getExamplePaths(basePath, includeBase) {
   // includeBase defaults to false
-  return getPaths(basePath, _exampleConfigFilename, includeBase)
+  return getPaths(basePath, _exampleConfigFilename, includeBase);
 }
 
 function getDartExampleWebPaths(basePath) {
@@ -1169,6 +1180,8 @@ function getFilenames(basePath, filename, includeBase) {
     // ignore (skip) the top level version.
     includePatterns.push("!" + path.join(basePath, "/" + filename));
   }
+  // ignore (skip) the files in BOILERPLATE_PATH.
+  includePatterns.push("!" + path.join(BOILERPLATE_PATH, "/" + filename));
   var nmPattern = path.join(basePath, "**/node_modules/**");
   var filenames = globby.sync(includePatterns, {ignore: [nmPattern]});
   return filenames;

harp.json

@@ -4,8 +4,9 @@
     "description": "Angular是用于构建移动应用和桌面Web应用的开发平台",
     "keywords": "Angular, 中文, 中文版, AngularJS, AngularDart, Javscript, Dart, Framework, JavaScript MVC, Google",
     "siteURL": "https://angular.cn",
-    "jsLatest": "2.0.0-RC.4",
+    "jsLatest": "2.0.0-beta.02",
-    "dartLatest": "2.0.0-RC.4",
+    "dartLatest": "2.0.0-beta.02",
+    "jade2ng": false,
 
     "bios": {
       "misko": {

package.json

@@ -71,6 +71,7 @@
     "q": "^1.4.1",
     "tree-kill": "^1.0.0",
     "tslint": "^3.15.1",
+    "typescript": "^2.0.3",
     "yargs": "^4.7.1"
   },
   "dependencies": {

public/_includes/_hero-home.jade

@@ -7,6 +7,6 @@ header(class="background-sky l-relative")
 
      announcement-bar
       .announcement-bar-slide.clearfix
-        img(src="/resources/images/logos/angular2/angular-logo-banner.png")
+        img(src="/resources/images/logos/anglebrackets/anglebrackets.png" width="64")
-        p Angular 2.0正式发布啦！
+        p 参加十月25号到28号的<strong>洛杉矶的Anglebrackets大会!</strong>
-        a(href="/translate/cn/blog.html" class="button " + "md-button") 了解更多    
+        a(href="https://anglebrackets.org/#!/" target="_blank" class="button md-button") 立即注册

public/_includes/_hero.jade

@@ -1,4 +1,4 @@
-// template: public/_includes/_hero
+//- template: public/_includes/_hero
 //- Refer to jade.template.html and addJadeDataDocsProcessor to figure out where the context of this jade file originates
 - var textFormat = '';
 - var headerTitle = title + (typeof varType !== 'undefined' ? (': ' + varType) : '');
@@ -24,16 +24,14 @@ header.hero.background-sky
       span(class="badge is-deprecated").
         安全风险
 
-  //CLEAR FLOAT ELEMENTS
+  //- CLEAR FLOAT ELEMENTS
   .clear
 
   if subtitle
     h2.hero-subtitle #{subtitle}
-
   else if docType
     h2.hero-subtitle #{renamer(capitalize(docType))}
 
-
+  if current.path[3] == 'api' && current.path[1] == 'dart'
-if current.path[3] == 'api' && current.path[1] == 'dart'
+    block breadcrumbs
-  block breadcrumbs
 

public/_includes/_scripts-include.jade

@@ -39,12 +39,3 @@ script(src="/resources/js/directives/if-docs.js")
 script(src="/resources/js/directives/live-example.js")
 script(src="/resources/js/directives/ngio-ex-path.js")
 script(src="/resources/js/directives/scroll-y-offset-element.js")
-
-script.
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-  
-  ga('create', 'UA-80456300-1', 'auto');
-  ga('send', 'pageview');

public/_includes/_scripts-minimum.jade

@@ -0,0 +1,27 @@
+<!-- GA -->
+script.
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-8594346-15', 'auto');
+  ga('send', 'pageview')
+
+<!-- SWIFTYPE -->
+if current.path[0] == "docs" || current.path[0] == "search"
+script.
+  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
+  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
+  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
+  })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');
+
+  _st('install','VsuU7kH5Hnnj9tfyNvfK','2.0.0');
+
+
+<!-- Google Feedback -->
+script(src="//www.gstatic.com/feedback/api.js" type="text/javascript")
+
+<!-- Twitter Widget -->
+script.
+  (function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}})(document,"script","twitter-wjs");

public/_includes/_util-fns.jade

@@ -302,7 +302,7 @@ if !jade2ng
 -   } else {
 -     // ``` gets translated to <pre><code>.....</code></pre> and we need
 -     // to remove this from the fragment prefix is 11 long and suffix is 13 long
--     frag = jade2ng ? frag : frag.substring(11, frag.length-13);
+-     frag = frag.substring(11, frag.length-13);
 -     // Uncomment next line for debugging.
 -     // frag = "FileName: " + fullFileName + "   Current path: " + current.path +  " PathToDocs: " + getPathToDocs() + "\n" + frag;
 -     return frag;

public/_layout.jade

@@ -19,4 +19,5 @@ html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Frame
       != yield
 
     != partial("/_includes/_footer")
-    != partial("/_includes/_scripts-include")
+    != partial("/_includes/_scripts-include")
+    != partial("/_includes/_scripts-minimum")

public/docs/_examples/.gitignore

@@ -10,7 +10,6 @@ tslint.json
 typings.json
 wallaby.js
 
-protractor.config.js
 _test-output
 **/ts/**/*.js
 **/ts-snippets/**/*.js
@@ -18,3 +17,5 @@ _test-output
 
 !**/*e2e-spec.js
 !systemjs.config.1.js
+!_boilerplate/*
+_boilerplate/a2docs.css

public/docs/_examples/_boilerplate/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "angular-examples",
+  "version": "1.0.0",
+  "description": "Example package.json, only contains needed scripts for examples. See _examples/package.json for master package.json.",
+  "scripts": {
+    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
+    "e2e": "tsc && concurrently \"http-server\" \"protractor protractor.config.js\"",
+    "http-server": "tsc && http-server",
+    "http-server:e2e": "http-server",
+    "http-server:cli": "http-server dist/",
+    "lite": "lite-server",
+    "lite:aot": "lite-server -c aot/bs-config.json",
+    "postinstall": "typings install",
+    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
+    "tsc": "tsc",
+    "tsc:w": "tsc -w",
+    "start:webpack": "webpack-dev-server --inline --progress --port 8080",
+    "test:webpack": "karma start karma.webpack.conf.js",
+    "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
+    "build:cli": "ng build",
+    "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+    "copy-dist-files": "node ./copy-dist-files.js",
+    "i18n": "ng-xi18n"
+  },
+  "keywords": [],
+  "author": "",
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
+    }
+  ],
+  "dependencies": {},
+  "devDependencies": {},
+  "repository": {}
+}

public/docs/_examples/_boilerplate/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es6",
+    "target": "es5",
     "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,
@@ -8,9 +8,11 @@
     "experimentalDecorators": true,
     "removeComments": false,
     "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true
+    "suppressImplicitAnyIndexErrors": true,
+    "types": []
   },
-  "files": [
+  "exclude": [
-    "e2e-spec.ts"
+    "node_modules/*",
+    "**/*-aot.ts"
   ]
 }

public/docs/_examples/_protractor/e2e.d.ts

@@ -1,14 +0,0 @@
-/// <reference path="typings/index.d.ts" />
-
-// Defined in protractor.config.js
-declare function setProtractorToNg1Mode(): void;
-declare function sendKeys(element: protractor.ElementFinder, str: string): webdriver.promise.Promise<void>;
-declare function describeIf(cond: boolean, name: string, func: Function): void;
-declare function itIf(cond: boolean, name: string, func: Function): void;
-
-declare namespace protractor {
-  interface IBrowser {
-    appIsTs: boolean;
-    appIsJs: boolean;
-  }
-}

public/docs/_examples/_protractor/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "angular2-examples-protractor",
-  "version": "1.0.0",
-  "description": "Manage _protractor folder installations",
-  "scripts": {
-    "postinstall": "typings install",
-    "typings": "typings",
-    "protractor": "protractor",
-    "webdriver:update": "webdriver-manager update"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "protractor": "^3.3.0",
-    "typings": "^1.0.4",
-    "ts-node": "^1.3.0",
-    "typescript": "^2.0.2"
-  },
-  "repository": {}
-}

public/docs/_examples/_protractor/typings.json

@@ -1,8 +0,0 @@
-{
-  "globalDependencies": {
-    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
-    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
-    "node": "registry:dt/node#6.0.0+20160621231320",
-    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
-  }
-}

public/docs/_examples/animations/e2e-spec.ts

@@ -1,5 +1,8 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by, ElementFinder } from 'protractor';
+import { logging, promise } from 'selenium-webdriver';
+
 /**
  * The tests here basically just checking that the end styles
  * of each animation are in effect.
@@ -23,7 +26,7 @@ describe('Animation Tests', () => {
 
   describe('basic states', () => {
 
-    let host: protractor.ElementFinder;
+    let host: ElementFinder;
 
     beforeEach(() => {
       host = element(by.css('hero-list-basic'));
@@ -52,7 +55,7 @@ describe('Animation Tests', () => {
 
   describe('styles inline in transitions', () => {
 
-    let host: protractor.ElementFinder;
+    let host: ElementFinder;
 
     beforeEach(function() {
       host = element(by.css('hero-list-inline-styles'));
@@ -73,7 +76,7 @@ describe('Animation Tests', () => {
 
   describe('combined transition syntax', () => {
 
-    let host: protractor.ElementFinder;
+    let host: ElementFinder;
 
     beforeEach(() => {
       host = element(by.css('hero-list-combined-transitions'));
@@ -102,7 +105,7 @@ describe('Animation Tests', () => {
 
   describe('two-way transition syntax', () => {
 
-    let host: protractor.ElementFinder;
+    let host: ElementFinder;
 
     beforeEach(() => {
       host = element(by.css('hero-list-twoway'));
@@ -131,7 +134,7 @@ describe('Animation Tests', () => {
 
   describe('enter & leave', () => {
 
-    let host: protractor.ElementFinder;
+    let host: ElementFinder;
 
     beforeEach(() => {
       host = element(by.css('hero-list-enter-leave'));
@@ -151,7 +154,7 @@ describe('Animation Tests', () => {
 
   describe('enter & leave & states', () => {
 
-    let host: protractor.ElementFinder;
+    let host: ElementFinder;
 
     beforeEach(function() {
       host = element(by.css('hero-list-enter-leave-states'));
@@ -180,7 +183,7 @@ describe('Animation Tests', () => {
 
   describe('auto style calc', () => {
 
-    let host: protractor.ElementFinder;
+    let host: ElementFinder;
 
     beforeEach(function() {
       host = element(by.css('hero-list-auto'));
@@ -200,7 +203,7 @@ describe('Animation Tests', () => {
 
   describe('different timings', () => {
 
-    let host: protractor.ElementFinder;
+    let host: ElementFinder;
 
     beforeEach(() => {
       host = element(by.css('hero-list-timings'));
@@ -221,7 +224,7 @@ describe('Animation Tests', () => {
 
   describe('multiple keyframes', () => {
 
-    let host: protractor.ElementFinder;
+    let host: ElementFinder;
 
     beforeEach(() => {
       host = element(by.css('hero-list-multistep'));
@@ -242,7 +245,7 @@ describe('Animation Tests', () => {
 
   describe('parallel groups', () => {
 
-    let host: protractor.ElementFinder;
+    let host: ElementFinder;
 
     beforeEach(() => {
       host = element(by.css('hero-list-groups'));
@@ -263,7 +266,7 @@ describe('Animation Tests', () => {
 
   describe('adding active heroes', () => {
 
-    let host: protractor.ElementFinder;
+    let host: ElementFinder;
 
     beforeEach(() => {
       host = element(by.css('hero-list-basic'));
@@ -292,13 +295,14 @@ describe('Animation Tests', () => {
   describe('callbacks', () => {
     it('fires a callback on start and done', () => {
       addActiveHero();
-      browser.manage().logs().get('browser').then((logs) => {
+      browser.manage().logs().get(logging.Type.BROWSER)
-        const animationMessages = logs.filter((log) => {
+        .then((logs: webdriver.logging.Entry[]) => {
-          return log.message.indexOf('Animation') !== -1 ? true : false;
+          const animationMessages = logs.filter((log) => {
-        });
+            return log.message.indexOf('Animation') !== -1 ? true : false;
+          });
 
-        expect(animationMessages.length).toBeGreaterThan(0);
+          expect(animationMessages.length).toBeGreaterThan(0);
-      });
+        });
     });
   });
 
@@ -320,8 +324,8 @@ describe('Animation Tests', () => {
     browser.driver.sleep(sleep);
   }
 
-  function getScaleX(el: protractor.ElementFinder) {
+  function getScaleX(el: ElementFinder) {
-    return protractor.promise.all([
+    return Promise.all([
       getBoundingClientWidth(el),
       getOffsetWidth(el)
     ]).then(function(promiseResolutions) {
@@ -331,18 +335,17 @@ describe('Animation Tests', () => {
     });
   }
 
-  function getBoundingClientWidth(el: protractor.ElementFinder): protractor.promise.Promise<number> {
+  function getBoundingClientWidth(el: ElementFinder): promise.Promise<number> {
     return browser.executeScript(
       'return arguments[0].getBoundingClientRect().width',
       el.getWebElement()
     );
   }
 
-  function getOffsetWidth(el: protractor.ElementFinder): protractor.promise.Promise<number> {
+  function getOffsetWidth(el: ElementFinder): promise.Promise<number> {
     return browser.executeScript(
       'return arguments[0].offsetWidth',
       el.getWebElement()
     );
   }
-
 });

public/docs/_examples/architecture/e2e-spec.ts

@@ -1,5 +1,6 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { protractor, browser, element, by, ElementFinder } from 'protractor';
 
 const nameSuffix = 'X';
 
@@ -20,7 +21,7 @@ describe('Architecture', () => {
   });
 
   it(`has h2 '${expectedH2}'`, () => {
-    let h2 = element.all(by.css('h2')).map((elt) => elt.getText());
+    let h2 = element.all(by.css('h2')).map((elt: any) => elt.getText());
     expect(h2).toEqual(expectedH2);
   });
 
@@ -52,7 +53,7 @@ function heroTests() {
 
   it(`shows updated hero name in details`, async () => {
     let input = element.all(by.css('input')).first();
-    await sendKeys(input, nameSuffix);
+    input.sendKeys(nameSuffix);
     let page = getPageElts();
     let hero = await heroFromDetail(page.heroDetail);
     let newName = targetHero.name + nameSuffix;
@@ -69,7 +70,7 @@ function salesTaxTests() {
 
   it('shows sales tax', async function () {
     let page = getPageElts();
-    await sendKeys(page.salesTaxAmountInput, '10');
+    page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER);
     // Note: due to Dart bug USD is shown instead of $
     let re = /The sales tax is (\$|USD)1.00/;
     expect(page.salesTaxDetail.getText()).toMatch(re);
@@ -87,10 +88,12 @@ function getPageElts() {
   };
 }
 
-async function heroFromDetail(detail: protractor.ElementFinder): Promise<Hero> {
+async function heroFromDetail(detail: ElementFinder): Promise<Hero> {
   // Get hero id from the first <div>
+  // let _id = await detail.all(by.css('div')).first().getText();
   let _id = await detail.all(by.css('div')).first().getText();
   // Get name from the h2
+  // let _name = await detail.element(by.css('h4')).getText();
   let _name = await detail.element(by.css('h4')).getText();
   return {
     id: +_id.substr(_id.indexOf(' ') + 1),

public/docs/_examples/attribute-directives/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('Attribute directives', function () {
 
   let _title = 'My First Attribute Directive';

public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('Angular 1 to 2 Quick Reference Tests', function () {
 
   beforeAll(function () {
@@ -100,15 +102,14 @@ describe('Angular 1 to 2 Quick Reference Tests', function () {
     let resultLabel = movieListComp.element(by.css('span > p'));
 
     heroInput.clear().then(function () {
-      sendKeys(heroInput, heroName || '').then(function () {
+      heroInput.sendKeys(heroName || '');
-        expect(resultLabel.getText()).toBe(expectedLabel);
+      expect(resultLabel.getText()).toBe(expectedLabel);
-        if (heroName) {
+      if (heroName) {
-          expect(favoriteHeroLabel.isDisplayed()).toBe(true);
+        expect(favoriteHeroLabel.isDisplayed()).toBe(true);
-          expect(favoriteHeroLabel.getText()).toContain(heroName);
+        expect(favoriteHeroLabel.getText()).toContain(heroName);
-        } else {
+      } else {
-          expect(favoriteHeroLabel.isDisplayed()).toBe(false);
+        expect(favoriteHeroLabel.isDisplayed()).toBe(false);
-        }
+      }
-      });
     });
   }
 });

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { ModuleWithProviders } from '@angular/core';
+import { NgModule } from '@angular/core';
 import { Routes, RouterModule }  from '@angular/router';
 
 import { MovieListComponent } from './movie-list.component';
@@ -9,4 +9,8 @@ const routes: Routes = [
   { path: 'movies', component: MovieListComponent }
 ];
 
-export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts

@@ -5,13 +5,13 @@ import { FormsModule }   from '@angular/forms';
 
 import { AppComponent }  from './app.component';
 import { MovieListComponent } from './movie-list.component';
-import { routing } from './app.routing';
+import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    routing
+    AppRoutingModule
   ],
   declarations: [
     AppComponent,

public/docs/_examples/cb-aot-compiler/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 /* tslint:disable:quotemark */
 describe('AOT Compilation', function () {
 

public/docs/_examples/cb-aot-compiler/ts/.gitignore

@@ -2,4 +2,4 @@
 **/*.metadata.json
 dist
 !app/tsconfig.json
-!rollup.js
+!rollup-config.js

public/docs/_examples/cb-aot-compiler/ts/app/app.component.ts

@@ -13,5 +13,4 @@ export class AppComponent {
   toggleHeading() {
     this.showHeading = !this.showHeading;
   }
-
 }

public/docs/_examples/cb-aot-compiler/ts/index.html

@@ -9,7 +9,6 @@
 
     <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/reflect-metadata/Reflect.js"></script>
 
   </head>
 

public/docs/_examples/cb-aot-compiler/ts/tsconfig-aot.json

@@ -8,7 +8,8 @@
     "experimentalDecorators": true,
     "removeComments": false,
     "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true
+    "suppressImplicitAnyIndexErrors": true,
+    "types": []
   },
 
   "files": [

public/docs/_examples/cb-component-communication/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('Component Communication Cookbook Tests', function () {
 
 

public/docs/_examples/cb-component-relative-paths/e2e-spec.ts

@@ -1,11 +1,13 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by, ElementFinder } from 'protractor';
+
 describe('Cookbook: component-relative paths', function () {
 
   interface Page {
-    title: protractor.ElementFinder;
+    title: ElementFinder;
-    absComp: protractor.ElementFinder;
+    absComp: ElementFinder;
-    relComp: protractor.ElementFinder;
+    relComp: ElementFinder;
 
   }
   function getPageStruct() {

public/docs/_examples/cb-dependency-injection/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('Dependency Injection Cookbook', function () {
 
     beforeAll(function () {
@@ -71,7 +73,7 @@ describe('Dependency Injection Cookbook', function () {
       let yellow = 'rgba(255, 255, 0, 1)';
 
       expect(target.getCssValue('background-color')).not.toEqual(yellow);
-      browser.actions().mouseMove(target as any as webdriver.WebElement).perform();
+      browser.actions().mouseMove(target.getWebElement()).perform();
       expect(target.getCssValue('background-color')).toEqual(yellow);
     });
 

public/docs/_examples/cb-dependency-injection/ts/app/app-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule }  from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  providers: [],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts

@@ -3,7 +3,7 @@ import { BrowserModule }                from '@angular/platform-browser';
 import { FormsModule }                  from '@angular/forms';
 import { HttpModule }                   from '@angular/http';
 
-/* import { routing }                   from './app.routing';*/
+// import { AppRoutingModule }             from './app-routing.module';
 import { LocationStrategy,
          HashLocationStrategy }         from '@angular/common';
 import { NgModule }                     from '@angular/core';
@@ -56,7 +56,7 @@ const c_components = [
     FormsModule,
     HttpModule,
     InMemoryWebApiModule.forRoot(HeroData)
-    // routing TODO: add routes
+    // AppRoutingModule TODO: add routes
   ],
   declarations: [
     declarations,

public/docs/_examples/cb-dependency-injection/ts/app/app.routing.ts

@@ -1,10 +0,0 @@
-import { ModuleWithProviders }   from '@angular/core';
-import { Routes, RouterModule }  from '@angular/router';
-
-const routes: Routes = [];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
-
-export const appRoutingProviders: any[] = [
-
-];

public/docs/_examples/cb-dynamic-form/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 /* tslint:disable:quotemark */
 describe('Dynamic Form', function () {
 

public/docs/_examples/cb-form-validation/e2e-spec.ts

@@ -1,8 +1,10 @@
-/// <reference path="../_protractor/e2e.d.ts" />
 'use strict'; // necessary for node!
 
+import { browser, element, by, protractor, ElementFinder, ElementArrayFinder } from 'protractor';
+import { appLang, describeIf } from '../protractor-helpers';
+
 // THESE TESTS ARE INCOMPLETE
-describeIf(browser.appIsTs || browser.appIsJs, 'Form Validation Tests', function () {
+describeIf(appLang.appIsTs || appLang.appIsJs, 'Form Validation Tests', function () {
 
   beforeAll(function () {
     browser.get('');
@@ -41,15 +43,15 @@ describeIf(browser.appIsTs || browser.appIsJs, 'Form Validation Tests', function
 const testName = 'Test Name';
 
 let page: {
-  section: protractor.ElementFinder,
+  section: ElementFinder,
-  form: protractor.ElementFinder,
+  form: ElementFinder,
-  title: protractor.ElementFinder,
+  title: ElementFinder,
-  nameInput: protractor.ElementFinder,
+  nameInput: ElementFinder,
-  alterEgoInput: protractor.ElementFinder,
+  alterEgoInput: ElementFinder,
-  powerSelect: protractor.ElementFinder,
+  powerSelect: ElementFinder,
-  errorMessages: protractor.ElementArrayFinder,
+  errorMessages: ElementArrayFinder,
-  heroFormButtons: protractor.ElementArrayFinder,
+  heroFormButtons: ElementArrayFinder,
-  heroSubmitted: protractor.ElementFinder
+  heroSubmitted: ElementFinder
 };
 
 function getPage(sectionTag: string) {

public/docs/_examples/cb-i18n/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('i18n E2E Tests', () => {
 
   beforeEach(function () {

public/docs/_examples/cb-i18n/ts/app/i18n-providers.ts

@@ -9,13 +9,13 @@ export function getTranslationProviders(): Promise<Object[]> {
   // return no providers if fail to get translation file for locale
   const noProviders: Object[] = [];
 
-  // No locale or English: no translation providers
+  // No locale or U.S. English: no translation providers
-  if (!locale || locale === 'en') {
+  if (!locale || locale === 'en-US') {
     return Promise.resolve(noProviders);
   }
 
-  // Ex: 'i18n/fr/messages.fr.xlf`
+  // Ex: 'locale/messages.fr.xlf`
-  const translationFile = `./i18n/${locale}/messages.${locale}.xlf`;
+  const translationFile = `./locale/messages.${locale}.xlf`;
 
   return getTranslationsWithSystemJs(translationFile)
     .then( (translations: string ) => [

public/docs/_examples/cb-i18n/ts/plnkr.json

@@ -4,8 +4,8 @@
     "app/**/*.css",
     "app/**/*.html",
     "app/**/*.ts",
-    "i18n/messages.xlf",
+    "locale/messages.xlf",
-    "i18n/fr/messages.fr.xlf",
+    "locale/messages.fr.xlf",
 
     "!**/*.[1].*",
 

public/docs/_examples/cb-set-document-title/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by, ElementFinder } from 'protractor';
+
 // gulp run-e2e-tests --filter=cb-set-document-title
 describe('Set Document Title', function () {
 
@@ -16,7 +18,7 @@ describe('Set Document Title', function () {
       ];
 
       element.all( by.css( 'ul li a' ) ).each(
-        function iterator( element, i ) {
+        function iterator( element: ElementFinder, i: number ) {
 
           element.click();
           expect( browser.getTitle() ).toEqual( titles[ i ] );

public/docs/_examples/cb-set-document-title/ts/sample.css

@@ -1,4 +0,0 @@
-a {
-	color: #607D8B ;
-	text-decoration: underline ;
-}

public/docs/_examples/cb-ts-to-js/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('TypeScript to Javascript tests', function () {
 
   beforeAll(function () {
@@ -54,7 +56,7 @@ describe('TypeScript to Javascript tests', function () {
     expect(h1.getAttribute('class')).toBe('active');
 
     h1.click();
-    browser.actions().doubleClick(h1 as any as webdriver.WebElement).perform();
+    browser.actions().doubleClick(h1.getWebElement()).perform();
     expect(h1.getAttribute('class')).toBe('active');
   });
 

public/docs/_examples/cli-quickstart/e2e-spec.ts.disabled

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('cli-quickstart App', () => {
   beforeEach(() => {
     return browser.get('/');

public/docs/_examples/component-styles/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('Component Style Tests', function () {
 
   beforeAll(function () {

public/docs/_examples/dependency-injection/e2e-spec.ts

@@ -1,7 +1,8 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
-describe('Dependency Injection Tests', function () {
 
+import { browser, element, by, ElementFinder } from 'protractor';
+
+describe('Dependency Injection Tests', function () {
 
   let expectedMsg: string;
   let expectedMsgRx: RegExp;
@@ -147,14 +148,13 @@ describe('Dependency Injection Tests', function () {
       let heroes = element.all(by.css('#unauthorized hero-list div'));
       expect(heroes.count()).toBeGreaterThan(0);
 
-      heroes.filter(function(elem, index){
+      let filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
-        return elem.getText().then(function(text) {
+        return elem.getText().then((text: string) => {
           return /secret/.test(text);
         });
-      }).then(function(filteredElements) {
-        // console.log("******Secret heroes count: "+filteredElements.length);
-        expect(filteredElements.length).toEqual(0);
       });
+
+      expect(filteredHeroes.count()).toEqual(0);
     });
 
     it('unauthorized user should have no authorized heroes listed', function () {
@@ -182,14 +182,13 @@ describe('Dependency Injection Tests', function () {
         let heroes = element.all(by.css('#authorized hero-list div'));
         expect(heroes.count()).toBeGreaterThan(0);
 
-        heroes.filter(function(elem, index){
+        let filteredHeroes = heroes.filter(function(elem: ElementFinder, index: number){
-         return elem.getText().then(function(text) {
+         return elem.getText().then(function(text: string) {
             return /secret/.test(text);
           });
-        }).then(function(filteredElements) {
-          // console.log("******Secret heroes count: "+filteredElements.length);
-          expect(filteredElements.length).toBeGreaterThan(0);
         });
+
+        expect(filteredHeroes.count()).toBeGreaterThan(0);
       });
 
       it('authorized user should have no unauthorized heroes listed', function () {

public/docs/_examples/displaying-data/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('Displaying Data Tests', function () {
   let _title = 'Tour of Heroes';
   let _defaultHero = 'Windstorm';

public/docs/_examples/forms/e2e-spec.ts

@@ -1,6 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+import { browser, element, by } from 'protractor';
-'use strict';
+import { appLang, describeIf } from '../protractor-helpers';
-describeIf(browser.appIsTs || browser.appIsJs, 'Forms Tests', function () {
+
+describeIf(appLang.appIsTs || appLang.appIsJs, 'Forms Tests', function () {
 
   beforeEach(function () {
     browser.get('');
@@ -45,12 +46,10 @@ describeIf(browser.appIsTs || browser.appIsJs, 'Forms Tests', function () {
     let test = 'testing 1 2 3';
     let newValue: string;
     let alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
-    alterEgoEle.getAttribute('value').then(function(value) {
+    alterEgoEle.getAttribute('value').then(function(value: string) {
-      // alterEgoEle.sendKeys(test);
+      alterEgoEle.sendKeys(test);
-      sendKeys(alterEgoEle, test);
       newValue = value + test;
       expect(alterEgoEle.getAttribute('value')).toEqual(newValue);
-    }).then(function() {
       let b = element.all(by.css('button[type=submit]')).get(0);
       return b.click();
     }).then(function() {

public/docs/_examples/hierarchical-dependency-injection/e2e-spec.ts

@@ -1,5 +1,5 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+import { browser, element, by } from 'protractor';
-'use strict';
+
 describe('Hierarchical dependency injection', function () {
 
   beforeEach(function () {
@@ -38,8 +38,7 @@ describe('Hierarchical dependency injection', function () {
     let editButtonEle = heroEle.element(by.cssContainingText('button', 'edit'));
     editButtonEle.click().then(function() {
       let inputEle = heroEle.element(by.css('hero-editor input'));
-      // return inputEle.sendKeys("foo");
+      return inputEle.sendKeys('foo');
-      return sendKeys(inputEle, 'foo');
     }).then(function() {
       let buttonName = shouldSave ? 'save' : 'cancel';
       let buttonEle = heroEle.element(by.cssContainingText('button', buttonName));

public/docs/_examples/homepage-hello-world/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('Homepage Hello World', function () {
 
   beforeAll(function () {
@@ -15,9 +17,8 @@ describe('Homepage Hello World', function () {
   it('should display entered name', function () {
     let testName = 'Bobby Joe';
     let nameEle = element.all(by.css('input')).get(0);
-    nameEle.getAttribute('value').then(function(value) {
+    nameEle.getAttribute('value').then(function(value: string) {
-      // nameEle.sendKeys(testName); // should work but doesn't
+      nameEle.sendKeys(testName);
-      sendKeys(nameEle, testName); // utility that does work
       let newValue = value + testName; // old input box value + new name
       expect(nameEle.getAttribute('value')).toEqual(newValue);
     }).then(function() {

public/docs/_examples/homepage-hello-world/ts/index.1.html

@@ -11,10 +11,10 @@
      <!-- Polyfill(s) for older browsers -->
     <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
 
-    <script src="https://unpkg.com/zone.js@0.6.23"></script>
+    <script src="https://unpkg.com/zone.js@0.6.25"></script>
-    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
+    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
     <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
-    <script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
+    <script src="https://unpkg.com/typescript@2.0.3/lib/typescript.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script src="systemjs.config.js"></script>

public/docs/_examples/homepage-tabs/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('Homepage Tabs', function () {
 
   beforeAll(function () {

public/docs/_examples/homepage-tabs/ts/index.1.html

@@ -12,10 +12,10 @@
      <!-- Polyfill(s) for older browsers -->
     <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
 
-    <script src="https://unpkg.com/zone.js@0.6.23"></script>
+    <script src="https://unpkg.com/zone.js@0.6.25"></script>
-    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
+    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
     <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
-    <script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
+    <script src="https://unpkg.com/typescript@2.0.3/lib/typescript.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script src="systemjs.config.js"></script>

public/docs/_examples/homepage-todo/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('Homepage Todo', function () {
 
   beforeAll(function () {

public/docs/_examples/homepage-todo/ts/index.1.html

@@ -12,10 +12,10 @@
      <!-- Polyfill(s) for older browsers -->
     <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
 
-    <script src="https://unpkg.com/zone.js@0.6.23"></script>
+    <script src="https://unpkg.com/zone.js@0.6.25"></script>
-    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
+    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
     <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
-    <script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
+    <script src="https://unpkg.com/typescript@2.0.3/lib/typescript.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script src="systemjs.config.js"></script>

public/docs/_examples/lifecycle-hooks/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('Lifecycle hooks', function () {
 
   beforeAll(function () {
@@ -41,18 +43,13 @@ describe('Lifecycle hooks', function () {
 
     expect(titleEle.getText()).toContain('Windstorm can sing');
     expect(changeLogEles.count()).toEqual(2, 'should start with 2 messages');
-    // heroNameInputEle.sendKeys('-foo-').then(function () {
+    heroNameInputEle.sendKeys('-foo-');
-    sendKeys(heroNameInputEle, '-foo-').then(function () {
+    expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
-      expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
+    expect(changeLogEles.count()).toEqual(2, 'should still have 2 messages');
-      expect(changeLogEles.count()).toEqual(2, 'should still have 2 messages');
+    powerInputEle.sendKeys('-bar-');
-      // protractor bug with sendKeys means that line below does not work.
+    expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
-      // return powerInputEle.sendKeys('-bar-');
+    // 7 == 2 previously + length of '-bar-'
-      return sendKeys(powerInputEle, '-bar-');
+    expect(changeLogEles.count()).toEqual(7, 'should have 7 messages now');
-    }).then(function () {
-      expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
-      // 7 == 2 previously + length of '-bar-'
-      expect(changeLogEles.count()).toEqual(7, 'should have 7 messages now');
-    });
   });
 
   it('should support DoCheck hook', function () {
@@ -65,21 +62,19 @@ describe('Lifecycle hooks', function () {
     let logCount: number;
 
     expect(titleEle.getText()).toContain('Windstorm can sing');
-    changeLogEles.count().then(function(count) {
+    changeLogEles.count().then(function(count: number) {
       // 3 messages to start
       expect(count).toEqual(3, 'should start with 3 messages');
       logCount = count;
-      // heroNameInputEle.sendKeys('-foo-').then(function () {
+      return heroNameInputEle.sendKeys('-foo-');
-      return sendKeys(heroNameInputEle, '-foo-');
     }).then(function () {
       expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
       return changeLogEles.count();
-    }).then(function (count) {
+    }).then(function(count: number) {
       // one more for each keystroke
       expect(count).toEqual(logCount + 5, 'should add 5 more messages');
       logCount = count;
-      // return powerInputEle.sendKeys('-bar-');
+      return powerInputEle.sendKeys('-bar-');
-      return sendKeys(powerInputEle, '-bar-');
     }).then(function () {
       expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
       expect(changeLogEles.count()).toEqual(logCount + 6, 'should add 6 more messages');
@@ -97,16 +92,16 @@ describe('Lifecycle hooks', function () {
     expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
     expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
 
-    logEles.count().then(function(count) {
+    logEles.count().then(function(count: number) {
       logCount = count;
-      return sendKeys(childViewInputEle, '-test-');
+      return childViewInputEle.sendKeys('-test-');
     }).then(function() {
       expect(childViewInputEle.getAttribute('value')).toContain('-test-');
       expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
       expect(commentEle.getText()).toContain('long name');
       return logEles.count();
-    }).then(function(count) {
+    }).then(function(count: number) {
-      expect(logCount + 6).toEqual(count, '6 additional log messages should have been added');
+      expect(logCount + 7).toEqual(count, '7 additional log messages should have been added');
       logCount = count;
       return buttonEle.click();
     }).then(function() {
@@ -126,15 +121,15 @@ describe('Lifecycle hooks', function () {
     expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
     expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
 
-    logEles.count().then(function(count) {
+    logEles.count().then(function(count: number) {
       logCount = count;
-      return sendKeys(childViewInputEle, '-test-');
+      return childViewInputEle.sendKeys('-test-');
     }).then(function() {
       expect(childViewInputEle.getAttribute('value')).toContain('-test-');
       expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
       expect(commentEle.getText()).toContain('long name');
       return logEles.count();
-    }).then(function(count) {
+    }).then(function(count: number) {
       expect(logCount + 5).toEqual(count, '5 additional log messages should have been added');
       logCount = count;
       return buttonEle.click();
@@ -151,7 +146,7 @@ describe('Lifecycle hooks', function () {
     let logEles = element.all(by.css('spy-parent h4 ~ div'));
     expect(heroEles.count()).toBe(2, 'should have two heroes displayed');
     expect(logEles.count()).toBe(2, 'should have two log entries');
-    sendKeys(inputEle, '-test-').then(function() {
+    inputEle.sendKeys('-test-').then(function() {
       return addHeroButtonEle.click();
     }).then(function() {
       expect(heroEles.count()).toBe(3, 'should have added one hero');

public/docs/_examples/ngmodule/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('NgModule', function () {
 
   // helpers

public/docs/_examples/ngmodule/ts/app/app-routing.module.3.ts

@@ -1,4 +1,4 @@
-import { ModuleWithProviders }  from '@angular/core';
+import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 export const routes: Routes = [
@@ -7,4 +7,8 @@ export const routes: Routes = [
   { path: 'heroes', loadChildren: 'app/hero/hero.module.3#HeroModule' }
 ];
 
-export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

public/docs/_examples/ngmodule/ts/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 // #docregion
-import { ModuleWithProviders }  from '@angular/core';
+import { NgModule }             from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 export const routes: Routes = [
@@ -11,5 +11,9 @@ export const routes: Routes = [
 ];
 
 // #docregion forRoot
-export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}
 // #enddocregion forRoot

public/docs/_examples/ngmodule/ts/app/app.module.3.ts

@@ -11,14 +11,16 @@ import { UserService }        from './user.service';
 
 /* Feature Modules */
 import { ContactModule }      from './contact/contact.module.3';
-import { routing }            from './app.routing.3';
+
+/* Routing Module */
+import { AppRoutingModule }   from './app-routing.module.3';
 
 @NgModule({
 // #docregion imports
   imports:      [
     BrowserModule,
     ContactModule,
-    routing
+    AppRoutingModule
   ],
 // #enddocregion imports
   providers:    [ UserService ],

public/docs/_examples/ngmodule/ts/app/app.module.ts

@@ -8,9 +8,11 @@ import { BrowserModule }  from '@angular/platform-browser';
 import { AppComponent }   from './app.component';
 
 /* Feature Modules */
-import { ContactModule }  from './contact/contact.module';
+import { ContactModule }    from './contact/contact.module';
-import { CoreModule }     from './core/core.module';
+import { CoreModule }       from './core/core.module';
-import { routing }        from './app.routing';
+
+/* Routing Module */
+import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
   // #docregion import-for-root
@@ -29,7 +31,7 @@ import { routing }        from './app.routing';
 // #docregion
     CoreModule.forRoot({userName: 'Miss Marple'}),
 // #docregion v4
-    routing
+    AppRoutingModule
   ],
   // #enddocregion import-for-root
   declarations: [ AppComponent ],

public/docs/_examples/ngmodule/ts/app/contact/contact-routing.module.3.ts

@@ -0,0 +1,12 @@
+import { NgModule }            from '@angular/core';
+import { RouterModule }        from '@angular/router';
+
+import { ContactComponent }    from './contact.component.3';
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    { path: 'contact', component: ContactComponent}
+  ])],
+  exports: [RouterModule]
+})
+export class ContactRoutingModule {}

public/docs/_examples/ngmodule/ts/app/contact/contact-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule }            from '@angular/core';
+import { RouterModule }        from '@angular/router';
+
+import { ContactComponent }    from './contact.component';
+
+// #docregion routing
+@NgModule({
+  imports: [RouterModule.forChild([
+    { path: 'contact', component: ContactComponent }
+  ])],
+  exports: [RouterModule]
+})
+export class ContactRoutingModule {}
+// #enddocregion

public/docs/_examples/ngmodule/ts/app/contact/contact.module.3.ts

@@ -9,11 +9,11 @@ import { ContactComponent }   from './contact.component.3';
 import { ContactService }     from './contact.service';
 import { HighlightDirective } from './highlight.directive';
 
-import { routing }            from './contact.routing.3';
+import { ContactRoutingModule }   from './contact-routing.module.3';
 
 // #docregion class
 @NgModule({
-  imports:      [ CommonModule, FormsModule, routing ],
+  imports:      [ CommonModule, FormsModule, ContactRoutingModule ],
   declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
   providers:    [ ContactService ]
 })

public/docs/_examples/ngmodule/ts/app/contact/contact.module.ts

@@ -2,13 +2,13 @@
 import { NgModule }           from '@angular/core';
 import { SharedModule }       from '../shared/shared.module';
 
-import { ContactComponent }   from './contact.component';
+import { ContactComponent }     from './contact.component';
-import { ContactService }     from './contact.service';
+import { ContactService }       from './contact.service';
-import { routing }            from './contact.routing';
+import { ContactRoutingModule } from './contact-routing.module';
 
 // #docregion class
 @NgModule({
-  imports:      [ SharedModule, routing ],
+  imports:      [ SharedModule, ContactRoutingModule ],
   declarations: [ ContactComponent ],
   providers:    [ ContactService ]
 })

public/docs/_examples/ngmodule/ts/app/contact/contact.routing.3.ts

@@ -1,8 +0,0 @@
-import { ModuleWithProviders } from '@angular/core';
-import { RouterModule }        from '@angular/router';
-
-import { ContactComponent }    from './contact.component.3';
-
-export const routing: ModuleWithProviders = RouterModule.forChild([
-  { path: 'contact', component: ContactComponent}
-]);

public/docs/_examples/ngmodule/ts/app/contact/contact.routing.ts

@@ -1,10 +0,0 @@
-import { ModuleWithProviders } from '@angular/core';
-import { RouterModule }        from '@angular/router';
-
-import { ContactComponent }    from './contact.component';
-
-// #docregion routing
-export const routing: ModuleWithProviders = RouterModule.forChild([
-  { path: 'contact', component: ContactComponent}
-]);
-// #enddocregion

public/docs/_examples/ngmodule/ts/app/crisis/crisis-routing.module.ts

@@ -1,4 +1,4 @@
-import { ModuleWithProviders } from '@angular/core';
+import { NgModule }            from '@angular/core';
 import { Routes,
          RouterModule }        from '@angular/router';
 
@@ -11,4 +11,8 @@ const routes: Routes = [
   { path: ':id', component: CrisisDetailComponent }
 ];
 
-export const routing: ModuleWithProviders = RouterModule.forChild(routes);
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CrisisRoutingModule {}

public/docs/_examples/ngmodule/ts/app/crisis/crisis.module.ts

@@ -3,11 +3,11 @@ import { CommonModule }  from '@angular/common';
 
 import { CrisisListComponent }    from './crisis-list.component';
 import { CrisisDetailComponent }  from './crisis-detail.component';
-import { CrisisService } from './crisis.service';
+import { CrisisService }          from './crisis.service';
-import { routing }       from './crisis.routing';
+import { CrisisRoutingModule }    from './crisis-routing.module';
 
 @NgModule({
-  imports:      [ CommonModule, routing ],
+  imports:      [ CommonModule, CrisisRoutingModule ],
   declarations: [ CrisisDetailComponent, CrisisListComponent ],
   providers:    [ CrisisService ]
 })

public/docs/_examples/ngmodule/ts/app/hero/hero-routing.module.3.ts

@@ -1,4 +1,4 @@
-import { ModuleWithProviders } from '@angular/core';
+import { NgModule }     from '@angular/core';
 import { Routes,
          RouterModule } from '@angular/router';
 
@@ -16,4 +16,8 @@ const routes: Routes = [
   }
 ];
 
-export const routing: ModuleWithProviders = RouterModule.forChild(routes);
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HeroRoutingModule {}

public/docs/_examples/ngmodule/ts/app/hero/hero-routing.module.ts

@@ -1,4 +1,4 @@
-import { ModuleWithProviders } from '@angular/core';
+import { NgModule }     from '@angular/core';
 import { Routes,
          RouterModule } from '@angular/router';
 
@@ -16,4 +16,8 @@ const routes: Routes = [
   }
 ];
 
-export const routing: ModuleWithProviders = RouterModule.forChild(routes);
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HeroRoutingModule {}

public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts

@@ -6,11 +6,11 @@ import { HeroComponent }       from './hero.component.3';
 import { HeroDetailComponent } from './hero-detail.component';
 import { HeroListComponent }   from './hero-list.component';
 import { HighlightDirective }  from './highlight.directive';
-import { routing }             from './hero.routing.3';
+import { HeroRoutingModule }   from './hero-routing.module.3';
 
 // #docregion class
 @NgModule({
-  imports: [ CommonModule, FormsModule, routing ],
+  imports: [ CommonModule, FormsModule, HeroRoutingModule ],
   declarations: [
     HeroComponent, HeroDetailComponent, HeroListComponent,
     HighlightDirective

public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts

@@ -5,10 +5,10 @@ import { SharedModule }        from '../shared/shared.module';
 import { HeroComponent }       from './hero.component';
 import { HeroDetailComponent } from './hero-detail.component';
 import { HeroListComponent }   from './hero-list.component';
-import { routing }             from './hero.routing';
+import { HeroRoutingModule }   from './hero-routing.module';
 
 @NgModule({
-  imports: [ SharedModule, routing ],
+  imports: [ SharedModule, HeroRoutingModule ],
   declarations: [
     HeroComponent, HeroDetailComponent, HeroListComponent,
   ]

public/docs/_examples/ngmodule/ts/plnkr.json

@@ -3,7 +3,7 @@
   "files": [
     "app/app.component.ts",
     "app/app.module.ts",
-    "app/app.routing.ts",
+    "app/app-routing.module.ts",
     "app/main.ts",
 
     "app/contact/contact.component.css",
@@ -12,7 +12,7 @@
 
     "app/contact/contact.component.ts",
     "app/contact/contact.module.ts",
-    "app/contact/contact.routing.ts",
+    "app/contact/contact-routing.module.ts",
 
     "app/crisis/*.ts",
 
@@ -22,7 +22,7 @@
 
     "app/hero/hero.component.ts",
     "app/hero/hero.module.ts",
-    "app/hero/hero.routing.ts",
+    "app/hero/hero-routing.module.ts",
 
     "app/core/*.css",
     "app/core/*.html",

public/docs/_examples/ngmodule/ts/pre-shared.3.plnkr.json

@@ -3,7 +3,7 @@
   "files": [
     "app/app.component.3.ts",
     "app/app.module.3.ts",
-    "app/app.routing.3.ts",
+    "app/app-routing.module.3.ts",
     "app/main.3.ts",
 
     "app/highlight.directive.ts",
@@ -18,7 +18,7 @@
     "app/contact/awesome.pipe.ts",
     "app/contact/contact.component.3.ts",
     "app/contact/contact.module.3.ts",
-    "app/contact/contact.routing.3.ts",
+    "app/contact/contact-routing.module.3.ts",
     "app/contact/highlight.directive.ts",
 
     "app/crisis/*.ts",
@@ -29,7 +29,7 @@
 
     "app/hero/hero.component.3.ts",
     "app/hero/hero.module.3.ts",
-    "app/hero/hero.routing.3.ts",
+    "app/hero/hero-routing.module.3.ts",
     "app/hero/highlight.directive.ts",
 
     "styles.css",

public/docs/_examples/package.json

@@ -1,47 +1,38 @@
 {
-  "name": "angular2-examples-master",
+  "name": "angular-examples-master",
   "version": "1.0.0",
-  "description": "Master package.json, the superset of all dependencies for all of the _example package.json files.",
+  "description": "Master package.json, the superset of all dependencies for all of the _example package.json files. See _boilerplate/package.json for example npm scripts.",
   "scripts": {
-    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
-    "e2e": "tsc && concurrently \"http-server\" \"protractor protractor.config.js\"",
-    "http-server": "tsc && http-server",
-    "http-server:e2e": "http-server",
-    "http-server:cli": "http-server dist/",
-    "lite": "lite-server",
     "postinstall": "typings install",
-    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
     "typings": "typings",
     "protractor": "protractor",
-    "webdriver:update": "webdriver-manager update",
+    "webdriver:update": "webdriver-manager update"
-    "start:webpack": "webpack-dev-server --inline --progress --port 8080",
-    "test:webpack": "karma start karma.webpack.conf.js",
-    "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
-    "build:cli": "ng build",
-    "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup.js",
-    "i18n": "ng-xi18n"
   },
   "keywords": [],
   "author": "",
-  "license": "ISC",
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
+    }
+  ],
   "dependencies": {
-    "@angular/common": "~2.0.1",
+    "@angular/common": "~2.1.0",
-    "@angular/compiler": "~2.0.1",
+    "@angular/compiler": "~2.1.0",
-    "@angular/compiler-cli": "~0.6.3",
+    "@angular/compiler-cli": "~2.1.0",
-    "@angular/core": "~2.0.1",
+    "@angular/core": "~2.1.0",
-    "@angular/forms": "~2.0.1",
+    "@angular/forms": "~2.1.0",
-    "@angular/http": "~2.0.1",
+    "@angular/http": "~2.1.0",
-    "@angular/platform-browser": "~2.0.1",
+    "@angular/platform-browser": "~2.1.0",
-    "@angular/platform-browser-dynamic": "~2.0.1",
+    "@angular/platform-browser-dynamic": "~2.1.0",
-    "@angular/platform-server": "~2.0.1",
+    "@angular/platform-server": "~2.1.0",
-    "@angular/router": "~3.0.1",
+    "@angular/router": "~3.1.0",
-    "@angular/upgrade": "~2.0.1",
+    "@angular/upgrade": "~2.1.0",
 
-    "angular-in-memory-web-api": "~0.1.1",
+    "angular-in-memory-web-api": "~0.1.5",
     "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",
+    "protractor": "^4.0.9",
     "reflect-metadata": "^0.1.8",
     "rollup": "^0.36.0",
     "rollup-plugin-node-resolve": "^2.0.0",
@@ -51,7 +42,9 @@
     "zone.js": "^0.6.25"
   },
   "devDependencies": {
-    "angular-cli": "^1.0.0-beta.5",
+    "@types/angular": "^1.5.15",
+    "@types/jasmine": "^2.2.34",
+    "@types/selenium-webdriver": "^2.53.32",
     "angular2-template-loader": "^0.4.0",
     "awesome-typescript-loader": "^2.2.4",
     "canonical-path": "0.0.2",
@@ -62,6 +55,7 @@
     "html-loader": "^0.4.3",
     "html-webpack-plugin": "^2.16.1",
     "http-server": "^0.9.0",
+    "jasmine": "^2.5.2",
     "jasmine-core": "^2.5.2",
     "karma": "^1.3.0",
     "karma-chrome-launcher": "^2.0.0",
@@ -76,10 +70,11 @@
     "lodash": "^4.16.2",
     "null-loader": "^0.1.1",
     "phantomjs-prebuilt": "^2.1.7",
-    "protractor": "^3.3.0",
+    "protractor": "^4.0.9",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.5.4",
     "rollup-plugin-commonjs": "^4.1.0",
+    "source-map-explorer": "^1.3.2",
     "style-loader": "^0.13.1",
     "ts-loader": "^0.8.2",
     "ts-node": "^1.3.0",

public/docs/_examples/pipes/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('Pipes', function () {
 
   beforeAll(function () {
@@ -53,12 +55,10 @@ describe('Pipes', function () {
     let factorInputEle = eles.get(1);
     let outputEle = element(by.css('power-boost-calculator p'));
     baseInputEle.clear().then(function() {
-      return sendKeys(baseInputEle, '7');
+      baseInputEle.sendKeys('7');
-    }).then(function() {
       return factorInputEle.clear();
     }).then(function() {
-      return sendKeys(factorInputEle, '3');
+      factorInputEle.sendKeys('3');
-    }).then(function() {
       expect(outputEle.getText()).toContain('343');
     });
   });
@@ -75,15 +75,10 @@ describe('Pipes', function () {
     expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');
     expect(flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly');
 
-    return sendKeys(nameEle, 'test1\n')
+    nameEle.sendKeys('test1\n');
-    .then(function(){
+    expect(flyingHeroesEle.count()).toEqual(2, 'no change while mutating array');
-       expect(flyingHeroesEle.count()).toEqual(2, 'no change while mutating array');
+    mutateCheckEle.click().then(function() {
-       return mutateCheckEle.click();
+      nameEle.sendKeys('test2\n');
-    })
-    .then(function() {
-      return sendKeys(nameEle, 'test2\n');
-    })
-    .then(function() {
       expect(flyingHeroesEle.count()).toEqual(4, 'not mutating; should see both adds');
       expect(flyingHeroesEle.get(2).getText()).toContain('test1');
       expect(flyingHeroesEle.get(3).getText()).toContain('test2');
@@ -105,10 +100,8 @@ describe('Pipes', function () {
     expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');
     expect(flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly');
 
-    return sendKeys(nameEle, 'test1\n')
+    nameEle.sendKeys('test1\n');
-    .then(function(){
+    expect(flyingHeroesEle.count()).toEqual(3, 'new flying hero should show in mutating array');
-       expect(flyingHeroesEle.count()).toEqual(3, 'new flying hero should show in mutating array');
-    });
   });
 
   it('should show an async hero message', function () {

public/docs/_examples/protractor-helpers.ts

@@ -0,0 +1,36 @@
+export var appLang = {
+  appIsTs: false,
+  appIsJs: false,
+  appIsDart: false,
+  appIsUnknown: false
+};
+
+export function describeIf(cond: boolean, name: string, func: () => void): void {
+  if (cond) {
+    describe(name, func);
+  } else {
+    xdescribe(name, func);
+  }
+}
+
+export function itIf(cond: boolean, name: string, func: (done: DoneFn) => void): void {
+  if (cond) {
+    it(name, func);
+  } else {
+    xit(name, func);
+  }
+}
+
+  // TODO Jesus - figure out what's needed here for the new upgrade chapters
+// Allow changing bootstrap mode to NG1 for upgrade tests
+export function setProtractorToNg1Mode(): void {
+  // browser.rootEl = 'body';
+
+  // let disableNgAnimate = function() {
+  //   angular.module('disableNgAnimate', []).run(['$animate', function($animate: any) {
+  //     $animate.enabled(false);
+  //   }]);
+  // };
+
+  // browser.addMockModule('disableNgAnimate', disableNgAnimate);
+}

public/docs/_examples/protractor.config.js

@@ -42,39 +42,23 @@ exports.config = {
 
     // debugging
     // console.log('browser.params:' + JSON.stringify(browser.params));
+    var protractorHelpers = require('./protractor-helpers.ts');
 
     var appDir = browser.params.appDir;
     if (appDir) {
       if (appDir.match('/ts') != null) {
-        browser.appIsTs = true;
+        protractorHelpers.appLang.appIsTs = true;
       } else if (appDir.match('/js') != null) {
-        browser.appIsJs = true;
+        protractorHelpers.appLang.appIsJs = true;
       } else if (appDir.match('/dart') != null) {
-        browser.appIsDart = true;
+        protractorHelpers.appLang.appIsDart = true;
       } else {
-        browser.appIsUnknown = true;
+        protractorHelpers.appLang.appIsUnknown = true;
       }
     } else {
-      browser.appIsUnknown = true;
+      protractorHelpers.appLang.appIsUnknown = true;
     }
-    jasmine.getEnv().addReporter(new Reporter( browser.params )) ;
+    jasmine.getEnv().addReporter(new Reporter( browser.params ));
-    global.describeIf = describeIf;
-    global.itIf = itIf;
-    global.sendKeys = sendKeys;
-
-    // Allow changing bootstrap mode to NG1 for upgrade tests
-    global.setProtractorToNg1Mode = function() {
-      browser.useAllAngular2AppRoots = false;
-      browser.rootEl = 'body';
-
-      var disableNgAnimate = function() {
-        angular.module('disableNgAnimate', []).run(['$animate', function($animate) {
-          $animate.enabled(false);
-        }]);
-      };
-
-      browser.addMockModule('disableNgAnimate', disableNgAnimate);
-    };
   },
 
   jasmineNodeOpts: {
@@ -86,40 +70,15 @@ exports.config = {
 
   beforeLaunch: function() {
     // add TS support for specs
-    require('ts-node').register();
+    require('ts-node').register({
+      project: './tsconfig.json'
+    });
   }
 };
 
-function describeIf(cond, name, func) {
-  if (cond) {
-    describe(name, func);
-  } else {
-    xdescribe(name, func);
-  }
-}
-
-function itIf(cond, name, func) {
-  if (cond) {
-    it(name, func);
-  } else {
-    xit(name, func);
-  }
-}
-
-// Hack - because of bug with protractor send keys
-// Hack - because of bug with send keys
-function sendKeys(element, str) {
-  return str.split('').reduce(function (promise, char) {
-    return promise.then(function () {
-      return element.sendKeys(char);
-    });
-  }, element.getAttribute('value'));
-  // better to create a resolved promise here but ... don't know how with protractor;
-  }
-
 // See http://jasmine.github.io/2.1/custom_reporter.html
 function Reporter(options) {
-  var _defaultOutputFile = path.resolve(process.cwd(), "../../../../", 'protractor-results.txt');
+  var _defaultOutputFile = path.resolve(process.cwd(), "../../../", 'protractor-results.txt');
   options.outputFile = options.outputFile || _defaultOutputFile;
 
   var _root = { appDir: options.appDir, suites: [] };

public/docs/_examples/quickstart/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by } from 'protractor';
+
 describe('QuickStart E2E Tests', function () {
 
   let expectedMsg = 'My First Angular App';

public/docs/_examples/quickstart/js/package.1.json

@@ -1,32 +1,36 @@
 {
-  "name": "angular2-quickstart",
+  "name": "angular-quickstart",
   "version": "1.0.0",
   "scripts": {
     "start": "npm run lite",
     "lite": "lite-server"
   },
-  "license": "ISC",
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
+    }
+  ],
   "dependencies": {
-    "@angular/common": "2.0.0",
+    "@angular/common": "~2.1.0",
-    "@angular/compiler": "2.0.0",
+    "@angular/compiler": "~2.1.0",
-    "@angular/core": "2.0.0",
+    "@angular/core": "~2.1.0",
-    "@angular/forms": "2.0.0",
+    "@angular/forms": "~2.1.0",
-    "@angular/http": "2.0.0",
+    "@angular/http": "~2.1.0",
-    "@angular/platform-browser": "2.0.0",
+    "@angular/platform-browser": "~2.1.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
+    "@angular/platform-browser-dynamic": "~2.1.0",
-    "@angular/router": "3.0.0",
+    "@angular/router": "~3.1.0",
-    "@angular/upgrade": "2.0.0",
+    "@angular/upgrade": "~2.1.0",
 
+    "angular-in-memory-web-api": "~0.1.5",
+    "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.3",
+    "reflect-metadata": "^0.1.8",
     "rxjs": "5.0.0-beta.12",
-    "zone.js": "^0.6.23",
+    "zone.js": "^0.6.25"
-
-    "angular-in-memory-web-api": "0.1.3",
-    "bootstrap": "^3.3.6"
   },
   "devDependencies": {
-    "concurrently": "^2.0.0",
+    "concurrently": "^3.0.0",
-    "lite-server": "^2.2.0"
+    "lite-server": "^2.2.2"
   }
 }

public/docs/_examples/quickstart/ts/package.1.json

@@ -9,19 +9,24 @@
     "tsc:w": "tsc -w",
     "typings": "typings"
   },
-  "license": "ISC",
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
+    }
+  ],
   "dependencies": {
-    "@angular/common": "~2.0.1",
+    "@angular/common": "~2.1.0",
-    "@angular/compiler": "~2.0.1",
+    "@angular/compiler": "~2.1.0",
-    "@angular/core": "~2.0.1",
+    "@angular/core": "~2.1.0",
-    "@angular/forms": "~2.0.1",
+    "@angular/forms": "~2.1.0",
-    "@angular/http": "~2.0.1",
+    "@angular/http": "~2.1.0",
-    "@angular/platform-browser": "~2.0.1",
+    "@angular/platform-browser": "~2.1.0",
-    "@angular/platform-browser-dynamic": "~2.0.1",
+    "@angular/platform-browser-dynamic": "~2.1.0",
-    "@angular/router": "~3.0.1",
+    "@angular/router": "~3.1.0",
-    "@angular/upgrade": "~2.0.1",
+    "@angular/upgrade": "~2.1.0",
 
-    "angular-in-memory-web-api": "~0.1.1",
+    "angular-in-memory-web-api": "~0.1.5",
     "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.8",

public/docs/_examples/router/e2e-spec.ts

@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
+'use strict'; // necessary for es6 output in node 
-'use strict';
+
+import { browser, element, by, ElementFinder } from 'protractor';
+
 describe('Router', function () {
 
   beforeAll(function () {
@@ -79,12 +81,12 @@ describe('Router', function () {
 
   it('should be able to edit and save details from the heroes view', function () {
     let page = getPageStruct();
-    let heroEle: protractor.ElementFinder;
+    let heroEle: ElementFinder;
     let heroText: string;
     page.heroesHref.click().then(function() {
       heroEle = page.heroesList.get(4);
       return heroEle.getText();
-    }).then(function(text) {
+    }).then(function(text: string) {
       expect(text.length).toBeGreaterThan(0, 'should have some text');
       // remove leading id from text
       heroText = text.substr(text.indexOf(' ')).trim();
@@ -94,8 +96,7 @@ describe('Router', function () {
       expect(page.heroDetail.isPresent()).toBe(true, 'should be able to see crisis detail');
       expect(page.heroDetailTitle.getText()).toContain(heroText);
       let inputEle = page.heroDetail.element(by.css('input'));
-      return sendKeys(inputEle, '-foo');
+      inputEle.sendKeys('-foo');
-    }).then(function() {
       expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo');
       let buttonEle = page.heroDetail.element(by.css('button'));
       return buttonEle.click();
@@ -106,13 +107,13 @@ describe('Router', function () {
 
   function crisisCenterEdit(index: number, shouldSave: boolean) {
     let page = getPageStruct();
-    let crisisEle: protractor.ElementFinder;
+    let crisisEle: ElementFinder;
     let crisisText: string;
     page.crisisHref.click()
     .then(function () {
       crisisEle = page.crisisList.get(index);
       return crisisEle.getText();
-    }).then(function (text) {
+    }).then(function(text: string) {
       expect(text.length).toBeGreaterThan(0, 'should have some text');
       // remove leading id from text
       crisisText = text.substr(text.indexOf(' ')).trim();
@@ -121,8 +122,7 @@ describe('Router', function () {
       expect(page.crisisDetail.isPresent()).toBe(true, 'should be able to see crisis detail');
       expect(page.crisisDetailTitle.getText()).toContain(crisisText);
       let inputEle = page.crisisDetail.element(by.css('input'));
-      return sendKeys(inputEle, '-foo');
+      inputEle.sendKeys('-foo');
-    }).then(function () {
       expect(page.crisisDetailTitle.getText()).toContain(crisisText + '-foo');
       let buttonEle = page.crisisDetail.element(by.cssContainingText('button', shouldSave ? 'Save' : 'Cancel'));
       return buttonEle.click();

public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts

@@ -0,0 +1,37 @@
+// #docplaster
+// #docregion
+import { NgModule }      from '@angular/core';
+import { RouterModule }  from '@angular/router';
+
+import { AdminComponent }           from './admin.component';
+import { AdminDashboardComponent }  from './admin-dashboard.component';
+import { ManageCrisesComponent }    from './manage-crises.component';
+import { ManageHeroesComponent }    from './manage-heroes.component';
+
+// #docregion admin-routes
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: 'admin',
+        component: AdminComponent,
+        children: [
+          {
+            path: '',
+            children: [
+              { path: 'crises', component: ManageCrisesComponent },
+              { path: 'heroes', component: ManageHeroesComponent },
+              { path: '', component: AdminDashboardComponent }
+            ]
+          }
+        ]
+      }
+    ])
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AdminRoutingModule {}
+// #enddocregion admin-routes
+// #enddocregion

public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts

@@ -0,0 +1,43 @@
+// #docplaster
+// #docregion
+import { NgModule }              from '@angular/core';
+import { RouterModule }  from '@angular/router';
+
+import { AdminComponent }           from './admin.component';
+import { AdminDashboardComponent }  from './admin-dashboard.component';
+import { ManageCrisesComponent }    from './manage-crises.component';
+import { ManageHeroesComponent }    from './manage-heroes.component';
+
+// #docregion admin-route, can-activate-child
+import { AuthGuard }                from '../auth-guard.service';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: 'admin',
+        component: AdminComponent,
+        canActivate: [AuthGuard],
+        children: [
+          {
+            path: '',
+            children: [
+              { path: 'crises', component: ManageCrisesComponent },
+              { path: 'heroes', component: ManageHeroesComponent },
+              { path: '', component: AdminDashboardComponent }
+            ],
+            // #enddocregion admin-route
+            // #docregion can-activate-child
+            canActivateChild: [AuthGuard]
+            // #docregion admin-route
+          }
+        ]
+      }
+    ])
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AdminRoutingModule {}
+// #enddocregion

public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts

@@ -0,0 +1,41 @@
+// #docplaster
+// #docregion
+import { NgModule }      from '@angular/core';
+import { RouterModule }  from '@angular/router';
+
+import { AdminComponent }           from './admin.component';
+import { AdminDashboardComponent }  from './admin-dashboard.component';
+import { ManageCrisesComponent }    from './manage-crises.component';
+import { ManageHeroesComponent }    from './manage-heroes.component';
+
+// #docregion admin-route
+import { AuthGuard }                from '../auth-guard.service';
+
+// #docregion can-activate-child
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: 'admin',
+        component: AdminComponent,
+        canActivate: [AuthGuard],
+        children: [
+          {
+            path: '',
+            canActivateChild: [AuthGuard],
+            children: [
+              { path: 'crises', component: ManageCrisesComponent },
+              { path: 'heroes', component: ManageHeroesComponent },
+              { path: '', component: AdminDashboardComponent }
+            ]
+          }
+        ]
+      }
+    ])
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AdminRoutingModule {}
+// #enddocregion

public/docs/_examples/router/ts/app/admin/admin-routing.module.ts

@@ -0,0 +1,40 @@
+// #docplaster
+// #docregion
+import { NgModule }     from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { AdminComponent }           from './admin.component';
+import { AdminDashboardComponent }  from './admin-dashboard.component';
+import { ManageCrisesComponent }    from './manage-crises.component';
+import { ManageHeroesComponent }    from './manage-heroes.component';
+
+// #docregion admin-route
+import { AuthGuard }                from '../auth-guard.service';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: AdminComponent,
+        canActivate: [AuthGuard],
+        children: [
+          {
+            path: '',
+            canActivateChild: [AuthGuard],
+            children: [
+              { path: 'crises', component: ManageCrisesComponent },
+              { path: 'heroes', component: ManageHeroesComponent },
+              { path: '', component: AdminDashboardComponent }
+            ]
+          }
+        ]
+      }
+    ])
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AdminRoutingModule {}
+// #enddocregion

public/docs/_examples/router/ts/app/admin/admin.module.ts

@@ -8,12 +8,12 @@ import { AdminDashboardComponent }  from './admin-dashboard.component';
 import { ManageCrisesComponent }    from './manage-crises.component';
 import { ManageHeroesComponent }    from './manage-heroes.component';
 
-import { adminRouting } from './admin.routing';
+import { AdminRoutingModule }       from './admin-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    adminRouting
+    AdminRoutingModule
   ],
   declarations: [
     AdminComponent,

public/docs/_examples/router/ts/app/admin/admin.routing.1.ts

@@ -1,31 +0,0 @@
-// #docplaster
-// #docregion
-import { ModuleWithProviders }   from '@angular/core';
-import { Routes, RouterModule }  from '@angular/router';
-
-import { AdminComponent }           from './admin.component';
-import { AdminDashboardComponent }  from './admin-dashboard.component';
-import { ManageCrisesComponent }    from './manage-crises.component';
-import { ManageHeroesComponent }    from './manage-heroes.component';
-
-// #docregion admin-routes
-const adminRoutes: Routes = [
-  {
-    path: 'admin',
-    component: AdminComponent,
-    children: [
-      {
-        path: '',
-        children: [
-          { path: 'crises', component: ManageCrisesComponent },
-          { path: 'heroes', component: ManageHeroesComponent },
-          { path: '', component: AdminDashboardComponent }
-        ]
-      }
-    ]
-  }
-];
-
-export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes);
-// #enddocregion admin-routes
-// #enddocregion

public/docs/_examples/router/ts/app/admin/admin.routing.2.ts

@@ -1,37 +0,0 @@
-// #docplaster
-// #docregion
-import { ModuleWithProviders }   from '@angular/core';
-import { Routes, RouterModule }  from '@angular/router';
-
-import { AdminComponent }           from './admin.component';
-import { AdminDashboardComponent }  from './admin-dashboard.component';
-import { ManageCrisesComponent }    from './manage-crises.component';
-import { ManageHeroesComponent }    from './manage-heroes.component';
-
-// #docregion admin-route, can-activate-child
-import { AuthGuard }                from '../auth-guard.service';
-
-const adminRoutes: Routes = [
-  {
-    path: 'admin',
-    component: AdminComponent,
-    canActivate: [AuthGuard],
-    children: [
-      {
-        path: '',
-        children: [
-          { path: 'crises', component: ManageCrisesComponent },
-          { path: 'heroes', component: ManageHeroesComponent },
-          { path: '', component: AdminDashboardComponent }
-        ],
-        // #enddocregion admin-route
-        // #docregion can-activate-child
-        canActivateChild: [AuthGuard]
-        // #docregion admin-route
-      }
-    ]
-  }
-];
-
-export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes);
-// #enddocregion