diff --git a/.travis.yml b/.travis.yml
index c8c12208bc..4be0d614e0 100644
--- a/.travis.yml
+++ b/.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
diff --git a/firebase.json b/firebase.json
index 069b61f208..90419f857a 100644
--- a/firebase.json
+++ b/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",
diff --git a/gulpfile.js b/gulpfile.js
index 0d137ded2e..b4ff433065 100644
--- a/gulpfile.js
+++ b/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',
-  'typings.json'
+  'tslint.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');
-    var spawnInfo = spawnExt('npm', ['install'], { cwd: EXAMPLES_PROTRACTOR_PATH});
+    gutil.log('runE2e: install _examples stuff');
+    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.`)
-    del.sync('www-backup'); // remove existing backup if it exists
-    renameIfExistsSync('www', 'www-backup');
+    gutil.log(`API docs will be copied from existing ${WWW} folder.`)
+    del.sync(`${WWW}-backup`); // remove existing backup if it exists
+    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 backupApiSubdir = path.join('www-backup', relApiDir);
+    const apiSubdir = path.join(WWW, relApiDir);
+    const backupApiSubdir = path.join(`${WWW}-backup`, relApiDir);
     if (fs.existsSync(backupApiSubdir) || argv.forceSkipApi !== true) {
-      gutil.log(`cp ${backupApiSubdir} ${wwwApiSubdir}`)
-      fs.copySync(backupApiSubdir, wwwApiSubdir);
+      gutil.log(`cp ${backupApiSubdir} ${apiSubdir}`)
+      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;
diff --git a/harp.json b/harp.json
index 0f38b0cec0..a4a2f0c878 100644
--- a/harp.json
+++ b/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",
-    "dartLatest": "2.0.0-RC.4",
+    "jsLatest": "2.0.0-beta.02",
+    "dartLatest": "2.0.0-beta.02",
+    "jade2ng": false,
 
     "bios": {
       "misko": {
diff --git a/package.json b/package.json
index 5ab4ceea6d..c15d92ecb3 100644
--- a/package.json
+++ b/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": {
diff --git a/public/_includes/_hero-home.jade b/public/_includes/_hero-home.jade
index 86426e4725..fc592781b2 100644
--- a/public/_includes/_hero-home.jade
+++ b/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")
-        p Angular 2.0正式发布啦！
-        a(href="/translate/cn/blog.html" class="button " + "md-button") 了解更多    
\ No newline at end of file
+        img(src="/resources/images/logos/anglebrackets/anglebrackets.png" width="64")
+        p 参加十月25号到28号的<strong>洛杉矶的Anglebrackets大会!</strong>
+        a(href="https://anglebrackets.org/#!/" target="_blank" class="button md-button") 立即注册
diff --git a/public/_includes/_hero.jade b/public/_includes/_hero.jade
index 5624ad9cff..87e6f96a5c 100644
--- a/public/_includes/_hero.jade
+++ b/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'
-  block breadcrumbs
+  if current.path[3] == 'api' && current.path[1] == 'dart'
+    block breadcrumbs
 
diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade
index 44dd1eccb6..af71717825 100644
--- a/public/_includes/_scripts-include.jade
+++ b/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');
diff --git a/public/_includes/_scripts-minimum.jade b/public/_includes/_scripts-minimum.jade
new file mode 100644
index 0000000000..a568f88d15
--- /dev/null
+++ b/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");
diff --git a/public/_includes/_util-fns.jade b/public/_includes/_util-fns.jade
index 7ccb87f237..29639891e5 100644
--- a/public/_includes/_util-fns.jade
+++ b/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;
diff --git a/public/_layout.jade b/public/_layout.jade
index aef7728caa..358f4c1ccd 100644
--- a/public/_layout.jade
+++ b/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")
\ No newline at end of file
+    != partial("/_includes/_scripts-include")
+    != partial("/_includes/_scripts-minimum")
\ No newline at end of file
diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore
index 768c5e9d97..3e900ec40a 100644
--- a/public/docs/_examples/.gitignore
+++ b/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
diff --git a/public/docs/_examples/example-config.json b/public/docs/_examples/_boilerplate/example-config.json
similarity index 100%
rename from public/docs/_examples/example-config.json
rename to public/docs/_examples/_boilerplate/example-config.json
diff --git a/public/docs/_examples/_boilerplate/package.json b/public/docs/_examples/_boilerplate/package.json
new file mode 100644
index 0000000000..758ff6f182
--- /dev/null
+++ b/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": {}
+}
diff --git a/public/docs/_examples/plunker.README.md b/public/docs/_examples/_boilerplate/plunker.README.md
similarity index 100%
rename from public/docs/_examples/plunker.README.md
rename to public/docs/_examples/_boilerplate/plunker.README.md
diff --git a/public/docs/_examples/styles.css b/public/docs/_examples/_boilerplate/styles.css
similarity index 100%
rename from public/docs/_examples/styles.css
rename to public/docs/_examples/_boilerplate/styles.css
diff --git a/public/docs/_examples/systemjs.config.js b/public/docs/_examples/_boilerplate/systemjs.config.js
similarity index 100%
rename from public/docs/_examples/systemjs.config.js
rename to public/docs/_examples/_boilerplate/systemjs.config.js
diff --git a/public/docs/_examples/systemjs.config.plunker.build.js b/public/docs/_examples/_boilerplate/systemjs.config.plunker.build.js
similarity index 100%
rename from public/docs/_examples/systemjs.config.plunker.build.js
rename to public/docs/_examples/_boilerplate/systemjs.config.plunker.build.js
diff --git a/public/docs/_examples/systemjs.config.plunker.js b/public/docs/_examples/_boilerplate/systemjs.config.plunker.js
similarity index 100%
rename from public/docs/_examples/systemjs.config.plunker.js
rename to public/docs/_examples/_boilerplate/systemjs.config.plunker.js
diff --git a/public/docs/_examples/_protractor/tsconfig.json b/public/docs/_examples/_boilerplate/tsconfig.json
similarity index 64%
rename from public/docs/_examples/_protractor/tsconfig.json
rename to public/docs/_examples/_boilerplate/tsconfig.json
index 8c87ff4f20..48dda0636f 100644
--- a/public/docs/_examples/_protractor/tsconfig.json
+++ b/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": [
-    "e2e-spec.ts"
+  "exclude": [
+    "node_modules/*",
+    "**/*-aot.ts"
   ]
 }
diff --git a/public/docs/_examples/tslint.json b/public/docs/_examples/_boilerplate/tslint.json
similarity index 100%
rename from public/docs/_examples/tslint.json
rename to public/docs/_examples/_boilerplate/tslint.json
diff --git a/public/docs/_examples/_protractor/e2e.d.ts b/public/docs/_examples/_protractor/e2e.d.ts
deleted file mode 100644
index ab91658443..0000000000
--- a/public/docs/_examples/_protractor/e2e.d.ts
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/public/docs/_examples/_protractor/package.json b/public/docs/_examples/_protractor/package.json
deleted file mode 100644
index 1e12742c38..0000000000
--- a/public/docs/_examples/_protractor/package.json
+++ /dev/null
@@ -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": {}
-}
diff --git a/public/docs/_examples/_protractor/typings.json b/public/docs/_examples/_protractor/typings.json
deleted file mode 100644
index a8a5da9134..0000000000
--- a/public/docs/_examples/_protractor/typings.json
+++ /dev/null
@@ -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"
-  }
-}
diff --git a/public/docs/_examples/animations/e2e-spec.ts b/public/docs/_examples/animations/e2e-spec.ts
index 31eefbf345..9e5d72a015 100644
--- a/public/docs/_examples/animations/e2e-spec.ts
+++ b/public/docs/_examples/animations/e2e-spec.ts
@@ -1,5 +1,8 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+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) => {
-        const animationMessages = logs.filter((log) => {
-          return log.message.indexOf('Animation') !== -1 ? true : false;
-        });
+      browser.manage().logs().get(logging.Type.BROWSER)
+        .then((logs: webdriver.logging.Entry[]) => {
+          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) {
-    return protractor.promise.all([
+  function getScaleX(el: ElementFinder) {
+    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()
     );
   }
-
 });
diff --git a/public/docs/_examples/architecture/e2e-spec.ts b/public/docs/_examples/architecture/e2e-spec.ts
index 0bdcdd0069..c1ee8cf00d 100644
--- a/public/docs/_examples/architecture/e2e-spec.ts
+++ b/public/docs/_examples/architecture/e2e-spec.ts
@@ -1,5 +1,6 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+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),
diff --git a/public/docs/_examples/attribute-directives/e2e-spec.ts b/public/docs/_examples/attribute-directives/e2e-spec.ts
index bf63294648..25a0cf258e 100644
--- a/public/docs/_examples/attribute-directives/e2e-spec.ts
+++ b/public/docs/_examples/attribute-directives/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 describe('Attribute directives', function () {
 
   let _title = 'My First Attribute Directive';
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.ts b/public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.ts
index 9af9b3f21d..8dac46ddd5 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.ts
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+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 () {
-        expect(resultLabel.getText()).toBe(expectedLabel);
-        if (heroName) {
-          expect(favoriteHeroLabel.isDisplayed()).toBe(true);
-          expect(favoriteHeroLabel.getText()).toContain(heroName);
-        } else {
-          expect(favoriteHeroLabel.isDisplayed()).toBe(false);
-        }
-      });
+      heroInput.sendKeys(heroName || '');
+      expect(resultLabel.getText()).toBe(expectedLabel);
+      if (heroName) {
+        expect(favoriteHeroLabel.isDisplayed()).toBe(true);
+        expect(favoriteHeroLabel.getText()).toContain(heroName);
+      } else {
+        expect(favoriteHeroLabel.isDisplayed()).toBe(false);
+      }
     });
   }
 });
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routing.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app-routing.module.ts
similarity index 63%
rename from public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routing.ts
rename to public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app-routing.module.ts
index fb042725eb..a7cbe8a74d 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.routing.ts
+++ b/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 {}
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts
index dec4a4e223..1dc46ad17c 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/app.module.ts
+++ b/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,
diff --git a/public/docs/_examples/cb-aot-compiler/e2e-spec.ts b/public/docs/_examples/cb-aot-compiler/e2e-spec.ts
index fe72681ee3..b03a771faf 100644
--- a/public/docs/_examples/cb-aot-compiler/e2e-spec.ts
+++ b/public/docs/_examples/cb-aot-compiler/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 /* tslint:disable:quotemark */
 describe('AOT Compilation', function () {
 
diff --git a/public/docs/_examples/cb-aot-compiler/ts/.gitignore b/public/docs/_examples/cb-aot-compiler/ts/.gitignore
index f2e297bbd3..2d0d839865 100644
--- a/public/docs/_examples/cb-aot-compiler/ts/.gitignore
+++ b/public/docs/_examples/cb-aot-compiler/ts/.gitignore
@@ -2,4 +2,4 @@
 **/*.metadata.json
 dist
 !app/tsconfig.json
-!rollup.js
\ No newline at end of file
+!rollup-config.js
\ No newline at end of file
diff --git a/public/docs/_examples/cb-aot-compiler/ts/app/app.component.ts b/public/docs/_examples/cb-aot-compiler/ts/app/app.component.ts
index 8352eb83f3..8a86e7d213 100644
--- a/public/docs/_examples/cb-aot-compiler/ts/app/app.component.ts
+++ b/public/docs/_examples/cb-aot-compiler/ts/app/app.component.ts
@@ -13,5 +13,4 @@ export class AppComponent {
   toggleHeading() {
     this.showHeading = !this.showHeading;
   }
-
 }
diff --git a/public/docs/_examples/cb-aot-compiler/ts/index.html b/public/docs/_examples/cb-aot-compiler/ts/index.html
index 5d3d6b68c4..3444e6bc45 100644
--- a/public/docs/_examples/cb-aot-compiler/ts/index.html
+++ b/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>
 
diff --git a/public/docs/_examples/cb-aot-compiler/ts/rollup.js b/public/docs/_examples/cb-aot-compiler/ts/rollup-config.js
similarity index 100%
rename from public/docs/_examples/cb-aot-compiler/ts/rollup.js
rename to public/docs/_examples/cb-aot-compiler/ts/rollup-config.js
diff --git a/public/docs/_examples/cb-aot-compiler/ts/tsconfig-aot.json b/public/docs/_examples/cb-aot-compiler/ts/tsconfig-aot.json
index 50cd4b53be..fd8b0617cc 100644
--- a/public/docs/_examples/cb-aot-compiler/ts/tsconfig-aot.json
+++ b/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": [
diff --git a/public/docs/_examples/cb-component-communication/e2e-spec.ts b/public/docs/_examples/cb-component-communication/e2e-spec.ts
index 586dfc94b7..75e319827e 100644
--- a/public/docs/_examples/cb-component-communication/e2e-spec.ts
+++ b/public/docs/_examples/cb-component-communication/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 describe('Component Communication Cookbook Tests', function () {
 
 
diff --git a/public/docs/_examples/cb-component-relative-paths/e2e-spec.ts b/public/docs/_examples/cb-component-relative-paths/e2e-spec.ts
index f3db3774e1..13e1636f2e 100644
--- a/public/docs/_examples/cb-component-relative-paths/e2e-spec.ts
+++ b/public/docs/_examples/cb-component-relative-paths/e2e-spec.ts
@@ -1,11 +1,13 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by, ElementFinder } from 'protractor';
+
 describe('Cookbook: component-relative paths', function () {
 
   interface Page {
-    title: protractor.ElementFinder;
-    absComp: protractor.ElementFinder;
-    relComp: protractor.ElementFinder;
+    title: ElementFinder;
+    absComp: ElementFinder;
+    relComp: ElementFinder;
 
   }
   function getPageStruct() {
diff --git a/public/docs/_examples/cb-dependency-injection/e2e-spec.ts b/public/docs/_examples/cb-dependency-injection/e2e-spec.ts
index d7ea6d4832..8c9d163d5e 100644
--- a/public/docs/_examples/cb-dependency-injection/e2e-spec.ts
+++ b/public/docs/_examples/cb-dependency-injection/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+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);
     });
 
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app-routing.module.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app-routing.module.ts
new file mode 100644
index 0000000000..09a0592d00
--- /dev/null
+++ b/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 {}
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts
index 5d7ca6ab97..a240e21f7c 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/app.module.ts
+++ b/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,
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.routing.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.routing.ts
deleted file mode 100644
index 2d3556371d..0000000000
--- a/public/docs/_examples/cb-dependency-injection/ts/app/app.routing.ts
+++ /dev/null
@@ -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[] = [
-
-];
diff --git a/public/docs/_examples/cb-dynamic-form/e2e-spec.ts b/public/docs/_examples/cb-dynamic-form/e2e-spec.ts
index b6c4a35e0a..408ac75766 100644
--- a/public/docs/_examples/cb-dynamic-form/e2e-spec.ts
+++ b/public/docs/_examples/cb-dynamic-form/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 /* tslint:disable:quotemark */
 describe('Dynamic Form', function () {
 
diff --git a/public/docs/_examples/cb-form-validation/e2e-spec.ts b/public/docs/_examples/cb-form-validation/e2e-spec.ts
index bbd4a7ff03..8ffc01e250 100644
--- a/public/docs/_examples/cb-form-validation/e2e-spec.ts
+++ b/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,
-  form: protractor.ElementFinder,
-  title: protractor.ElementFinder,
-  nameInput: protractor.ElementFinder,
-  alterEgoInput: protractor.ElementFinder,
-  powerSelect: protractor.ElementFinder,
-  errorMessages: protractor.ElementArrayFinder,
-  heroFormButtons: protractor.ElementArrayFinder,
-  heroSubmitted: protractor.ElementFinder
+  section: ElementFinder,
+  form: ElementFinder,
+  title: ElementFinder,
+  nameInput: ElementFinder,
+  alterEgoInput: ElementFinder,
+  powerSelect: ElementFinder,
+  errorMessages: ElementArrayFinder,
+  heroFormButtons: ElementArrayFinder,
+  heroSubmitted: ElementFinder
 };
 
 function getPage(sectionTag: string) {
diff --git a/public/docs/_examples/cb-i18n/e2e-spec.ts b/public/docs/_examples/cb-i18n/e2e-spec.ts
index 6606ca8878..f3249272af 100644
--- a/public/docs/_examples/cb-i18n/e2e-spec.ts
+++ b/public/docs/_examples/cb-i18n/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 describe('i18n E2E Tests', () => {
 
   beforeEach(function () {
diff --git a/public/docs/_examples/cb-i18n/ts/app/i18n-providers.ts b/public/docs/_examples/cb-i18n/ts/app/i18n-providers.ts
index c27afc88d7..84328f0d22 100644
--- a/public/docs/_examples/cb-i18n/ts/app/i18n-providers.ts
+++ b/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
-  if (!locale || locale === 'en') {
+  // No locale or U.S. English: no translation providers
+  if (!locale || locale === 'en-US') {
     return Promise.resolve(noProviders);
   }
 
-  // Ex: 'i18n/fr/messages.fr.xlf`
-  const translationFile = `./i18n/${locale}/messages.${locale}.xlf`;
+  // Ex: 'locale/messages.fr.xlf`
+  const translationFile = `./locale/messages.${locale}.xlf`;
 
   return getTranslationsWithSystemJs(translationFile)
     .then( (translations: string ) => [
diff --git a/public/docs/_examples/cb-i18n/ts/i18n/fr/messages.fr.xlf b/public/docs/_examples/cb-i18n/ts/locale/messages.fr.xlf
similarity index 100%
rename from public/docs/_examples/cb-i18n/ts/i18n/fr/messages.fr.xlf
rename to public/docs/_examples/cb-i18n/ts/locale/messages.fr.xlf
diff --git a/public/docs/_examples/cb-i18n/ts/i18n/fr/messages.fr.xlf.html b/public/docs/_examples/cb-i18n/ts/locale/messages.fr.xlf.html
similarity index 100%
rename from public/docs/_examples/cb-i18n/ts/i18n/fr/messages.fr.xlf.html
rename to public/docs/_examples/cb-i18n/ts/locale/messages.fr.xlf.html
diff --git a/public/docs/_examples/cb-i18n/ts/i18n/trans-unit.html b/public/docs/_examples/cb-i18n/ts/locale/trans-unit.html
similarity index 100%
rename from public/docs/_examples/cb-i18n/ts/i18n/trans-unit.html
rename to public/docs/_examples/cb-i18n/ts/locale/trans-unit.html
diff --git a/public/docs/_examples/cb-i18n/ts/plnkr.json b/public/docs/_examples/cb-i18n/ts/plnkr.json
index aa6421b303..e7074f222d 100644
--- a/public/docs/_examples/cb-i18n/ts/plnkr.json
+++ b/public/docs/_examples/cb-i18n/ts/plnkr.json
@@ -4,8 +4,8 @@
     "app/**/*.css",
     "app/**/*.html",
     "app/**/*.ts",
-    "i18n/messages.xlf",
-    "i18n/fr/messages.fr.xlf",
+    "locale/messages.xlf",
+    "locale/messages.fr.xlf",
 
     "!**/*.[1].*",
 
diff --git a/public/docs/_examples/cb-set-document-title/e2e-spec.ts b/public/docs/_examples/cb-set-document-title/e2e-spec.ts
index 135bfb1a88..801b732995 100644
--- a/public/docs/_examples/cb-set-document-title/e2e-spec.ts
+++ b/public/docs/_examples/cb-set-document-title/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+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 ] );
diff --git a/public/docs/_examples/cb-set-document-title/ts/sample.css b/public/docs/_examples/cb-set-document-title/ts/sample.css
deleted file mode 100644
index 13acd31061..0000000000
--- a/public/docs/_examples/cb-set-document-title/ts/sample.css
+++ /dev/null
@@ -1,4 +0,0 @@
-a {
-	color: #607D8B ;
-	text-decoration: underline ;
-}
diff --git a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
index 1fc5641bd3..5862beeebf 100644
--- a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
+++ b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+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');
   });
 
diff --git a/public/docs/_examples/cli-quickstart/e2e-spec.ts.disabled b/public/docs/_examples/cli-quickstart/e2e-spec.ts.disabled
index ef30b01ec1..fb133ce7ab 100644
--- a/public/docs/_examples/cli-quickstart/e2e-spec.ts.disabled
+++ b/public/docs/_examples/cli-quickstart/e2e-spec.ts.disabled
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 describe('cli-quickstart App', () => {
   beforeEach(() => {
     return browser.get('/');
diff --git a/public/docs/_examples/component-styles/e2e-spec.ts b/public/docs/_examples/component-styles/e2e-spec.ts
index 6a26fe0d67..28a44221a4 100644
--- a/public/docs/_examples/component-styles/e2e-spec.ts
+++ b/public/docs/_examples/component-styles/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 describe('Component Style Tests', function () {
 
   beforeAll(function () {
diff --git a/public/docs/_examples/dependency-injection/e2e-spec.ts b/public/docs/_examples/dependency-injection/e2e-spec.ts
index 4c702f8801..28fe22a9cb 100644
--- a/public/docs/_examples/dependency-injection/e2e-spec.ts
+++ b/public/docs/_examples/dependency-injection/e2e-spec.ts
@@ -1,7 +1,8 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
-describe('Dependency Injection Tests', function () {
+'use strict'; // necessary for es6 output in node 
 
+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){
-        return elem.getText().then(function(text) {
+      let filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
+        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){
-         return elem.getText().then(function(text) {
+        let filteredHeroes = heroes.filter(function(elem: ElementFinder, index: number){
+         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 () {
diff --git a/public/docs/_examples/displaying-data/e2e-spec.ts b/public/docs/_examples/displaying-data/e2e-spec.ts
index 5a2bd1c5ca..96c52c5d00 100644
--- a/public/docs/_examples/displaying-data/e2e-spec.ts
+++ b/public/docs/_examples/displaying-data/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node
+
+import { browser, element, by } from 'protractor';
+
 describe('Displaying Data Tests', function () {
   let _title = 'Tour of Heroes';
   let _defaultHero = 'Windstorm';
diff --git a/public/docs/_examples/forms/e2e-spec.ts b/public/docs/_examples/forms/e2e-spec.ts
index 87ab6ef904..2afd370103 100644
--- a/public/docs/_examples/forms/e2e-spec.ts
+++ b/public/docs/_examples/forms/e2e-spec.ts
@@ -1,6 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
-describeIf(browser.appIsTs || browser.appIsJs, 'Forms Tests', function () {
+import { browser, element, by } from 'protractor';
+import { appLang, describeIf } from '../protractor-helpers';
+
+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.sendKeys(test);
-      sendKeys(alterEgoEle, test);
+    alterEgoEle.getAttribute('value').then(function(value: string) {
+      alterEgoEle.sendKeys(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() {
diff --git a/public/docs/_examples/hierarchical-dependency-injection/e2e-spec.ts b/public/docs/_examples/hierarchical-dependency-injection/e2e-spec.ts
index 224d649cad..738e304d1b 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/e2e-spec.ts
+++ b/public/docs/_examples/hierarchical-dependency-injection/e2e-spec.ts
@@ -1,5 +1,5 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+import { browser, element, by } from 'protractor';
+
 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 sendKeys(inputEle, 'foo');
+      return inputEle.sendKeys('foo');
     }).then(function() {
       let buttonName = shouldSave ? 'save' : 'cancel';
       let buttonEle = heroEle.element(by.cssContainingText('button', buttonName));
diff --git a/public/docs/_examples/homepage-hello-world/e2e-spec.ts b/public/docs/_examples/homepage-hello-world/e2e-spec.ts
index 54d8f79532..c4c6464937 100644
--- a/public/docs/_examples/homepage-hello-world/e2e-spec.ts
+++ b/public/docs/_examples/homepage-hello-world/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+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.sendKeys(testName); // should work but doesn't
-      sendKeys(nameEle, testName); // utility that does work
+    nameEle.getAttribute('value').then(function(value: string) {
+      nameEle.sendKeys(testName);
       let newValue = value + testName; // old input box value + new name
       expect(nameEle.getAttribute('value')).toEqual(newValue);
     }).then(function() {
diff --git a/public/docs/_examples/homepage-hello-world/ts/index.1.html b/public/docs/_examples/homepage-hello-world/ts/index.1.html
index 5637880406..da3cd256c2 100644
--- a/public/docs/_examples/homepage-hello-world/ts/index.1.html
+++ b/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/reflect-metadata@0.1.3"></script>
+    <script src="https://unpkg.com/zone.js@0.6.25"></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>
diff --git a/public/docs/_examples/homepage-tabs/e2e-spec.ts b/public/docs/_examples/homepage-tabs/e2e-spec.ts
index 2ac27b289f..2131d75906 100644
--- a/public/docs/_examples/homepage-tabs/e2e-spec.ts
+++ b/public/docs/_examples/homepage-tabs/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 describe('Homepage Tabs', function () {
 
   beforeAll(function () {
diff --git a/public/docs/_examples/homepage-tabs/ts/index.1.html b/public/docs/_examples/homepage-tabs/ts/index.1.html
index 6ff25956dc..bd3342ee3f 100644
--- a/public/docs/_examples/homepage-tabs/ts/index.1.html
+++ b/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/reflect-metadata@0.1.3"></script>
+    <script src="https://unpkg.com/zone.js@0.6.25"></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>
diff --git a/public/docs/_examples/homepage-todo/e2e-spec.ts b/public/docs/_examples/homepage-todo/e2e-spec.ts
index f1dae917c6..fb74e4e70f 100644
--- a/public/docs/_examples/homepage-todo/e2e-spec.ts
+++ b/public/docs/_examples/homepage-todo/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 describe('Homepage Todo', function () {
 
   beforeAll(function () {
diff --git a/public/docs/_examples/homepage-todo/ts/index.1.html b/public/docs/_examples/homepage-todo/ts/index.1.html
index 26800d3e05..4ac9552d89 100644
--- a/public/docs/_examples/homepage-todo/ts/index.1.html
+++ b/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/reflect-metadata@0.1.3"></script>
+    <script src="https://unpkg.com/zone.js@0.6.25"></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>
diff --git a/public/docs/_examples/lifecycle-hooks/e2e-spec.ts b/public/docs/_examples/lifecycle-hooks/e2e-spec.ts
index 156ea3c3a9..8e9acb1c76 100644
--- a/public/docs/_examples/lifecycle-hooks/e2e-spec.ts
+++ b/public/docs/_examples/lifecycle-hooks/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+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 () {
-    sendKeys(heroNameInputEle, '-foo-').then(function () {
-      expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
-      expect(changeLogEles.count()).toEqual(2, 'should still have 2 messages');
-      // protractor bug with sendKeys means that line below does not work.
-      // return powerInputEle.sendKeys('-bar-');
-      return sendKeys(powerInputEle, '-bar-');
-    }).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');
-    });
+    heroNameInputEle.sendKeys('-foo-');
+    expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
+    expect(changeLogEles.count()).toEqual(2, 'should still have 2 messages');
+    powerInputEle.sendKeys('-bar-');
+    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 sendKeys(heroNameInputEle, '-foo-');
+      return heroNameInputEle.sendKeys('-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 sendKeys(powerInputEle, '-bar-');
+      return powerInputEle.sendKeys('-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) {
-      expect(logCount + 6).toEqual(count, '6 additional log messages should have been added');
+    }).then(function(count: number) {
+      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');
diff --git a/public/docs/_examples/ngmodule/e2e-spec.ts b/public/docs/_examples/ngmodule/e2e-spec.ts
index de8f4fa7e0..0fbce1213d 100644
--- a/public/docs/_examples/ngmodule/e2e-spec.ts
+++ b/public/docs/_examples/ngmodule/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 describe('NgModule', function () {
 
   // helpers
diff --git a/public/docs/_examples/ngmodule/ts/app/app.routing.3.ts b/public/docs/_examples/ngmodule/ts/app/app-routing.module.3.ts
similarity index 65%
rename from public/docs/_examples/ngmodule/ts/app/app.routing.3.ts
rename to public/docs/_examples/ngmodule/ts/app/app-routing.module.3.ts
index 9c9129023c..1d53b708f8 100644
--- a/public/docs/_examples/ngmodule/ts/app/app.routing.3.ts
+++ b/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 {}
diff --git a/public/docs/_examples/ngmodule/ts/app/app.routing.ts b/public/docs/_examples/ngmodule/ts/app/app-routing.module.ts
similarity index 70%
rename from public/docs/_examples/ngmodule/ts/app/app.routing.ts
rename to public/docs/_examples/ngmodule/ts/app/app-routing.module.ts
index f34498c4e1..c753dcd488 100644
--- a/public/docs/_examples/ngmodule/ts/app/app.routing.ts
+++ b/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
diff --git a/public/docs/_examples/ngmodule/ts/app/app.module.3.ts b/public/docs/_examples/ngmodule/ts/app/app.module.3.ts
index 8920c00b61..8ca0a46d9a 100644
--- a/public/docs/_examples/ngmodule/ts/app/app.module.3.ts
+++ b/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 ],
diff --git a/public/docs/_examples/ngmodule/ts/app/app.module.ts b/public/docs/_examples/ngmodule/ts/app/app.module.ts
index cccb49c981..549525df82 100644
--- a/public/docs/_examples/ngmodule/ts/app/app.module.ts
+++ b/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 { CoreModule }     from './core/core.module';
-import { routing }        from './app.routing';
+import { ContactModule }    from './contact/contact.module';
+import { CoreModule }       from './core/core.module';
+
+/* 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 ],
diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact-routing.module.3.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact-routing.module.3.ts
new file mode 100644
index 0000000000..27dfc232b7
--- /dev/null
+++ b/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 {}
diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact-routing.module.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact-routing.module.ts
new file mode 100644
index 0000000000..2fa81af5a9
--- /dev/null
+++ b/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
diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact.module.3.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact.module.3.ts
index 6f835635d0..ff70721b2f 100644
--- a/public/docs/_examples/ngmodule/ts/app/contact/contact.module.3.ts
+++ b/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 ]
 })
diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact.module.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact.module.ts
index fe4f0981f9..9456de7654 100644
--- a/public/docs/_examples/ngmodule/ts/app/contact/contact.module.ts
+++ b/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 { ContactService }     from './contact.service';
-import { routing }            from './contact.routing';
+import { ContactComponent }     from './contact.component';
+import { ContactService }       from './contact.service';
+import { ContactRoutingModule } from './contact-routing.module';
 
 // #docregion class
 @NgModule({
-  imports:      [ SharedModule, routing ],
+  imports:      [ SharedModule, ContactRoutingModule ],
   declarations: [ ContactComponent ],
   providers:    [ ContactService ]
 })
diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.3.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.3.ts
deleted file mode 100644
index 63d740d82e..0000000000
--- a/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.3.ts
+++ /dev/null
@@ -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}
-]);
diff --git a/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.ts b/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.ts
deleted file mode 100644
index 6b6534dfbc..0000000000
--- a/public/docs/_examples/ngmodule/ts/app/contact/contact.routing.ts
+++ /dev/null
@@ -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
diff --git a/public/docs/_examples/ngmodule/ts/app/crisis/crisis.routing.ts b/public/docs/_examples/ngmodule/ts/app/crisis/crisis-routing.module.ts
similarity index 69%
rename from public/docs/_examples/ngmodule/ts/app/crisis/crisis.routing.ts
rename to public/docs/_examples/ngmodule/ts/app/crisis/crisis-routing.module.ts
index 4d8d711d65..c60efa8cb4 100644
--- a/public/docs/_examples/ngmodule/ts/app/crisis/crisis.routing.ts
+++ b/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 {}
diff --git a/public/docs/_examples/ngmodule/ts/app/crisis/crisis.module.ts b/public/docs/_examples/ngmodule/ts/app/crisis/crisis.module.ts
index 40491985dc..f557bd6423 100644
--- a/public/docs/_examples/ngmodule/ts/app/crisis/crisis.module.ts
+++ b/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 { routing }       from './crisis.routing';
+import { CrisisService }          from './crisis.service';
+import { CrisisRoutingModule }    from './crisis-routing.module';
 
 @NgModule({
-  imports:      [ CommonModule, routing ],
+  imports:      [ CommonModule, CrisisRoutingModule ],
   declarations: [ CrisisDetailComponent, CrisisListComponent ],
   providers:    [ CrisisService ]
 })
diff --git a/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.3.ts b/public/docs/_examples/ngmodule/ts/app/hero/hero-routing.module.3.ts
similarity index 73%
rename from public/docs/_examples/ngmodule/ts/app/hero/hero.routing.3.ts
rename to public/docs/_examples/ngmodule/ts/app/hero/hero-routing.module.3.ts
index 132d21b29e..588ffd94be 100644
--- a/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.3.ts
+++ b/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 {}
diff --git a/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.ts b/public/docs/_examples/ngmodule/ts/app/hero/hero-routing.module.ts
similarity index 73%
rename from public/docs/_examples/ngmodule/ts/app/hero/hero.routing.ts
rename to public/docs/_examples/ngmodule/ts/app/hero/hero-routing.module.ts
index f1b4285ecd..d97aab3beb 100644
--- a/public/docs/_examples/ngmodule/ts/app/hero/hero.routing.ts
+++ b/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 {}
diff --git a/public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts b/public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts
index 319af623bb..c00f4eedd5 100644
--- a/public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts
+++ b/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
diff --git a/public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts b/public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts
index 57159ed533..98d7b76b00 100644
--- a/public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts
+++ b/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,
   ]
diff --git a/public/docs/_examples/ngmodule/ts/plnkr.json b/public/docs/_examples/ngmodule/ts/plnkr.json
index fbc92ce13b..3f10b446f9 100644
--- a/public/docs/_examples/ngmodule/ts/plnkr.json
+++ b/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",
diff --git a/public/docs/_examples/ngmodule/ts/pre-shared.3.plnkr.json b/public/docs/_examples/ngmodule/ts/pre-shared.3.plnkr.json
index 6a7b39e2a2..de789b4a58 100644
--- a/public/docs/_examples/ngmodule/ts/pre-shared.3.plnkr.json
+++ b/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",
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
index 980813eabd..871fba0218 100644
--- a/public/docs/_examples/package.json
+++ b/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",
-    "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"
+    "webdriver:update": "webdriver-manager update"
   },
   "keywords": [],
   "author": "",
-  "license": "ISC",
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
+    }
+  ],
   "dependencies": {
-    "@angular/common": "~2.0.1",
-    "@angular/compiler": "~2.0.1",
-    "@angular/compiler-cli": "~0.6.3",
-    "@angular/core": "~2.0.1",
-    "@angular/forms": "~2.0.1",
-    "@angular/http": "~2.0.1",
-    "@angular/platform-browser": "~2.0.1",
-    "@angular/platform-browser-dynamic": "~2.0.1",
-    "@angular/platform-server": "~2.0.1",
-    "@angular/router": "~3.0.1",
-    "@angular/upgrade": "~2.0.1",
+    "@angular/common": "~2.1.0",
+    "@angular/compiler": "~2.1.0",
+    "@angular/compiler-cli": "~2.1.0",
+    "@angular/core": "~2.1.0",
+    "@angular/forms": "~2.1.0",
+    "@angular/http": "~2.1.0",
+    "@angular/platform-browser": "~2.1.0",
+    "@angular/platform-browser-dynamic": "~2.1.0",
+    "@angular/platform-server": "~2.1.0",
+    "@angular/router": "~3.1.0",
+    "@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",
diff --git a/public/docs/_examples/pipes/e2e-spec.ts b/public/docs/_examples/pipes/e2e-spec.ts
index 5f9c4607dc..a2c4062dfd 100644
--- a/public/docs/_examples/pipes/e2e-spec.ts
+++ b/public/docs/_examples/pipes/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+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');
-    }).then(function() {
+      baseInputEle.sendKeys('7');
       return factorInputEle.clear();
     }).then(function() {
-      return sendKeys(factorInputEle, '3');
-    }).then(function() {
+      factorInputEle.sendKeys('3');
       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')
-    .then(function(){
-       expect(flyingHeroesEle.count()).toEqual(2, 'no change while mutating array');
-       return mutateCheckEle.click();
-    })
-    .then(function() {
-      return sendKeys(nameEle, 'test2\n');
-    })
-    .then(function() {
+    nameEle.sendKeys('test1\n');
+    expect(flyingHeroesEle.count()).toEqual(2, 'no change while mutating array');
+    mutateCheckEle.click().then(function() {
+      nameEle.sendKeys('test2\n');
       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')
-    .then(function(){
-       expect(flyingHeroesEle.count()).toEqual(3, 'new flying hero should show in mutating array');
-    });
+    nameEle.sendKeys('test1\n');
+    expect(flyingHeroesEle.count()).toEqual(3, 'new flying hero should show in mutating array');
   });
 
   it('should show an async hero message', function () {
diff --git a/public/docs/_examples/protractor-helpers.ts b/public/docs/_examples/protractor-helpers.ts
new file mode 100644
index 0000000000..f3f784e613
--- /dev/null
+++ b/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);
+}
diff --git a/public/docs/_examples/_protractor/protractor.config.js b/public/docs/_examples/protractor.config.js
similarity index 76%
rename from public/docs/_examples/_protractor/protractor.config.js
rename to public/docs/_examples/protractor.config.js
index 92bdbfeee2..eb3ab57c17 100644
--- a/public/docs/_examples/_protractor/protractor.config.js
+++ b/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 )) ;
-    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);
-    };
+    jasmine.getEnv().addReporter(new Reporter( browser.params ));
   },
 
   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: [] };
diff --git a/public/docs/_examples/quickstart/e2e-spec.ts b/public/docs/_examples/quickstart/e2e-spec.ts
index 5a1c683cfd..a548ec833a 100644
--- a/public/docs/_examples/quickstart/e2e-spec.ts
+++ b/public/docs/_examples/quickstart/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 describe('QuickStart E2E Tests', function () {
 
   let expectedMsg = 'My First Angular App';
diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json
index b352f645e3..5c88b0bb5e 100644
--- a/public/docs/_examples/quickstart/js/package.1.json
+++ b/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/compiler": "2.0.0",
-    "@angular/core": "2.0.0",
-    "@angular/forms": "2.0.0",
-    "@angular/http": "2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
-    "@angular/router": "3.0.0",
-    "@angular/upgrade": "2.0.0",
+    "@angular/common": "~2.1.0",
+    "@angular/compiler": "~2.1.0",
+    "@angular/core": "~2.1.0",
+    "@angular/forms": "~2.1.0",
+    "@angular/http": "~2.1.0",
+    "@angular/platform-browser": "~2.1.0",
+    "@angular/platform-browser-dynamic": "~2.1.0",
+    "@angular/router": "~3.1.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",
-
-    "angular-in-memory-web-api": "0.1.3",
-    "bootstrap": "^3.3.6"
+    "zone.js": "^0.6.25"
   },
   "devDependencies": {
-    "concurrently": "^2.0.0",
-    "lite-server": "^2.2.0"
+    "concurrently": "^3.0.0",
+    "lite-server": "^2.2.2"
   }
 }
diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json
index ea5d056bf4..29eb574dd9 100644
--- a/public/docs/_examples/quickstart/ts/package.1.json
+++ b/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/compiler": "~2.0.1",
-    "@angular/core": "~2.0.1",
-    "@angular/forms": "~2.0.1",
-    "@angular/http": "~2.0.1",
-    "@angular/platform-browser": "~2.0.1",
-    "@angular/platform-browser-dynamic": "~2.0.1",
-    "@angular/router": "~3.0.1",
-    "@angular/upgrade": "~2.0.1",
+    "@angular/common": "~2.1.0",
+    "@angular/compiler": "~2.1.0",
+    "@angular/core": "~2.1.0",
+    "@angular/forms": "~2.1.0",
+    "@angular/http": "~2.1.0",
+    "@angular/platform-browser": "~2.1.0",
+    "@angular/platform-browser-dynamic": "~2.1.0",
+    "@angular/router": "~3.1.0",
+    "@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",
diff --git a/public/docs/_examples/router/e2e-spec.ts b/public/docs/_examples/router/e2e-spec.ts
index a82ebd08a5..a3d6d9b926 100644
--- a/public/docs/_examples/router/e2e-spec.ts
+++ b/public/docs/_examples/router/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+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');
-    }).then(function() {
+      inputEle.sendKeys('-foo');
       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');
-    }).then(function () {
+      inputEle.sendKeys('-foo');
       expect(page.crisisDetailTitle.getText()).toContain(crisisText + '-foo');
       let buttonEle = page.crisisDetail.element(by.cssContainingText('button', shouldSave ? 'Save' : 'Cancel'));
       return buttonEle.click();
diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts
new file mode 100644
index 0000000000..0cb1d8f5c7
--- /dev/null
+++ b/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
diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts
new file mode 100644
index 0000000000..2087d7c913
--- /dev/null
+++ b/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
diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts
new file mode 100644
index 0000000000..92878febb2
--- /dev/null
+++ b/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
diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts
new file mode 100644
index 0000000000..b83a75945b
--- /dev/null
+++ b/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
diff --git a/public/docs/_examples/router/ts/app/admin/admin.module.ts b/public/docs/_examples/router/ts/app/admin/admin.module.ts
index dce2ce30e2..eb4cfdb0da 100644
--- a/public/docs/_examples/router/ts/app/admin/admin.module.ts
+++ b/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,
diff --git a/public/docs/_examples/router/ts/app/admin/admin.routing.1.ts b/public/docs/_examples/router/ts/app/admin/admin.routing.1.ts
deleted file mode 100644
index a620f3ba51..0000000000
--- a/public/docs/_examples/router/ts/app/admin/admin.routing.1.ts
+++ /dev/null
@@ -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
diff --git a/public/docs/_examples/router/ts/app/admin/admin.routing.2.ts b/public/docs/_examples/router/ts/app/admin/admin.routing.2.ts
deleted file mode 100644
index 9fa3f10e4a..0000000000
--- a/public/docs/_examples/router/ts/app/admin/admin.routing.2.ts
+++ /dev/null
@@ -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
diff --git a/public/docs/_examples/router/ts/app/admin/admin.routing.3.ts b/public/docs/_examples/router/ts/app/admin/admin.routing.3.ts
deleted file mode 100644
index 3b4051a819..0000000000
--- a/public/docs/_examples/router/ts/app/admin/admin.routing.3.ts
+++ /dev/null
@@ -1,35 +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
-import { AuthGuard }                from '../auth-guard.service';
-
-// #docregion can-activate-child
-const adminRoutes: Routes = [
-  {
-    path: 'admin',
-    component: AdminComponent,
-    canActivate: [AuthGuard],
-    children: [
-      {
-        path: '',
-        canActivateChild: [AuthGuard],
-        children: [
-          { path: 'crises', component: ManageCrisesComponent },
-          { path: 'heroes', component: ManageHeroesComponent },
-          { path: '', component: AdminDashboardComponent }
-        ]
-      }
-    ]
-  }
-];
-
-export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes);
-// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/admin/admin.routing.ts b/public/docs/_examples/router/ts/app/admin/admin.routing.ts
deleted file mode 100644
index bc5d13554c..0000000000
--- a/public/docs/_examples/router/ts/app/admin/admin.routing.ts
+++ /dev/null
@@ -1,34 +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
-import { AuthGuard }                from '../auth-guard.service';
-
-const adminRoutes: Routes = [
-  {
-    path: '',
-    component: AdminComponent,
-    canActivate: [AuthGuard],
-    children: [
-      {
-        path: '',
-        canActivateChild: [AuthGuard],
-        children: [
-          { path: 'crises', component: ManageCrisesComponent },
-          { path: 'heroes', component: ManageHeroesComponent },
-          { path: '', component: AdminDashboardComponent }
-        ]
-      }
-    ]
-  }
-];
-
-export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes);
-// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.1.ts b/public/docs/_examples/router/ts/app/app-routing.module.1.ts
new file mode 100644
index 0000000000..8be1df9926
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app-routing.module.1.ts
@@ -0,0 +1,20 @@
+// #docplaster
+// #docregion
+import { NgModule }     from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { CrisisListComponent }  from './crisis-list.component';
+import { HeroListComponent }    from './hero-list.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot([
+      { path: 'crisis-center', component: CrisisListComponent },
+      { path: 'heroes', component: HeroListComponent }
+    ])
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRoutingModule {}
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.2.ts b/public/docs/_examples/router/ts/app/app-routing.module.2.ts
new file mode 100644
index 0000000000..eed5688574
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app-routing.module.2.ts
@@ -0,0 +1,18 @@
+// #docplaster
+// #docregion
+import { NgModule }     from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { CrisisListComponent }  from './crisis-list.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot([
+      { path: 'crisis-center', component: CrisisListComponent },
+    ])
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRoutingModule {}
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.3.ts b/public/docs/_examples/router/ts/app/app-routing.module.3.ts
new file mode 100644
index 0000000000..a30d061dc3
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app-routing.module.3.ts
@@ -0,0 +1,16 @@
+// #docplaster
+// #docregion
+import { NgModule }     from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot([
+
+    ])
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRoutingModule {}
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.4.ts b/public/docs/_examples/router/ts/app/app-routing.module.4.ts
new file mode 100644
index 0000000000..2ce11b8105
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app-routing.module.4.ts
@@ -0,0 +1,21 @@
+// #docplaster
+// #docregion
+import { NgModule }     from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { CanDeactivateGuard } from './can-deactivate-guard.service';
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot([
+
+    ])
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    CanDeactivateGuard
+  ]
+})
+export class AppRoutingModule {}
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.ts b/public/docs/_examples/router/ts/app/app-routing.module.ts
new file mode 100644
index 0000000000..6e35f64f73
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app-routing.module.ts
@@ -0,0 +1,33 @@
+// #docplaster
+// #docregion
+import { NgModule }     from '@angular/core';
+// #docregion import-router
+import { RouterModule } from '@angular/router';
+// #enddocregion import-router
+
+import { CanDeactivateGuard } from './can-deactivate-guard.service';
+// #docregion can-load-guard
+import { AuthGuard }          from './auth-guard.service';
+// #enddocregion can-load-guard
+
+// #docregion lazy-load-admin, can-load-guard
+@NgModule({
+  imports: [
+    RouterModule.forRoot([
+      {
+        path: 'admin',
+        loadChildren: 'app/admin/admin.module#AdminModule',
+    // #enddocregion lazy-load-admin
+        canLoad: [AuthGuard]
+    // #docregion lazy-load-admin
+      }
+    ])
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    CanDeactivateGuard
+  ]
+})
+export class AppRoutingModule {}
diff --git a/public/docs/_examples/router/ts/app/app.module.0.ts b/public/docs/_examples/router/ts/app/app.module.0.ts
new file mode 100644
index 0000000000..df91982cd1
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app.module.0.ts
@@ -0,0 +1,51 @@
+// #docplaster
+// #docregion
+// #docregion router-basics
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+import { RouterModule }   from '@angular/router';
+
+import { AppComponent }           from './app.component';
+import { HeroListComponent }      from './hero-list.component';
+import { CrisisListComponent }    from './crisis-list.component';
+import { PageNotFoundComponent }  from './not-found.component';
+import { PageNotFoundComponent as HeroDetailComponent } from './not-found.component';
+import { PageNotFoundComponent as HomeComponent } from './not-found.component';
+
+// #docregion route-config
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    RouterModule.forRoot([
+      // #docregion route-defs
+      // #docregion hero-detail-route
+      { path: 'hero/:id', component: HeroDetailComponent },
+      // #enddocregion hero-detail-route
+      { path: 'crisis-center', component: CrisisListComponent },
+      {
+        path: 'heroes',
+        component: HeroListComponent,
+        data: {
+          title: 'Heroes List'
+        }
+      },
+      { path: '', component: HomeComponent },
+      // #enddocregion route-defs
+      { path: '**', component: PageNotFoundComponent }
+    ])
+  ],
+  declarations: [
+    AppComponent,
+    HeroListComponent,
+    HeroDetailComponent,
+    CrisisListComponent,
+    PageNotFoundComponent
+  ],
+  bootstrap: [ AppComponent ]
+})
+// #enddocregion router-basics
+export class AppModule {
+}
+// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/app.module.1.ts b/public/docs/_examples/router/ts/app/app.module.1.ts
index ea1edc36af..6338c9bca3 100644
--- a/public/docs/_examples/router/ts/app/app.module.1.ts
+++ b/public/docs/_examples/router/ts/app/app.module.1.ts
@@ -3,29 +3,31 @@
 import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
+// #docregion import-router, route-config
+import { RouterModule }   from '@angular/router';
+// #enddocregion import-router, route-config
 
 // #docregion router-basics
 import { AppComponent }         from './app.component';
-import { routing,
-         appRoutingProviders }  from './app.routing';
-
-import { HeroListComponent }    from './hero-list.component';
 import { CrisisListComponent }  from './crisis-list.component';
+import { HeroListComponent }    from './hero-list.component';
 
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    routing
+    // #docregion route-config
+    RouterModule.forRoot([
+      { path: 'crisis-center', component: CrisisListComponent },
+      { path: 'heroes', component: HeroListComponent }
+    ])
+    // #enddocregion route-config
   ],
   declarations: [
     AppComponent,
     HeroListComponent,
     CrisisListComponent
   ],
-  providers: [
-    appRoutingProviders
-  ],
   bootstrap: [ AppComponent ]
 })
 // #enddocregion router-basics
diff --git a/public/docs/_examples/router/ts/app/app.module.2.ts b/public/docs/_examples/router/ts/app/app.module.2.ts
index 3e1d42896c..2d82802253 100644
--- a/public/docs/_examples/router/ts/app/app.module.2.ts
+++ b/public/docs/_examples/router/ts/app/app.module.2.ts
@@ -5,28 +5,23 @@ import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
 
-import { AppComponent }         from './app.component';
-import { routing,
-         appRoutingProviders }  from './app.routing';
-
-import { HeroesModule }         from './heroes/heroes.module';
+import { AppComponent }     from './app.component';
+import { AppRoutingModule } from './app-routing.module';
 
 import { CrisisListComponent }  from './crisis-list.component';
+import { HeroListComponent }    from './hero-list.component';
 
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    routing,
-    HeroesModule
+    AppRoutingModule
   ],
   declarations: [
     AppComponent,
+    HeroListComponent,
     CrisisListComponent
   ],
-  providers: [
-    appRoutingProviders
-  ],
   bootstrap: [ AppComponent ]
 })
 // #enddocregion hero-import
diff --git a/public/docs/_examples/router/ts/app/app.module.3.ts b/public/docs/_examples/router/ts/app/app.module.3.ts
index 6ddd73ac3e..f7aeccae34 100644
--- a/public/docs/_examples/router/ts/app/app.module.3.ts
+++ b/public/docs/_examples/router/ts/app/app.module.3.ts
@@ -1,44 +1,31 @@
 // #docplaster
 // #docregion
-// #docregion crisis-center-module, admin-module
+// #docregion hero-import
 import { NgModule }       from '@angular/core';
-import { CommonModule }   from '@angular/common';
+import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
 
-import { AppComponent }           from './app.component';
-import { routing,
-         appRoutingProviders }    from './app.routing';
+import { AppComponent }      from './app.component';
+import { AppRoutingModule }  from './app-routing.module';
 
-import { HeroesModule }           from './heroes/heroes.module';
-// #docregion crisis-center-module
-import { CrisisCenterModule }     from './crisis-center/crisis-center.module';
-// #enddocregion crisis-center-module
-// #docregion admin-module
-import { AdminModule }            from './admin/admin.module';
-// #docregion crisis-center-module
+import { HeroesModule }         from './heroes/heroes.module';
 
-import { DialogService }          from './dialog.service';
+import { CrisisListComponent }  from './crisis-list.component';
 
 @NgModule({
   imports: [
-    CommonModule,
+    BrowserModule,
     FormsModule,
-    routing,
     HeroesModule,
-    CrisisCenterModule,
-// #enddocregion crisis-center-module
-    AdminModule
-// #docregion crisis-center-module
+    AppRoutingModule
   ],
   declarations: [
-    AppComponent
-  ],
-  providers: [
-    appRoutingProviders,
-    DialogService
+    AppComponent,
+    CrisisListComponent
   ],
   bootstrap: [ AppComponent ]
 })
+// #enddocregion hero-import
 export class AppModule {
 }
 // #enddocregion
diff --git a/public/docs/_examples/router/ts/app/app.module.4.ts b/public/docs/_examples/router/ts/app/app.module.4.ts
index 840ea422db..f30dfccd00 100644
--- a/public/docs/_examples/router/ts/app/app.module.4.ts
+++ b/public/docs/_examples/router/ts/app/app.module.4.ts
@@ -1,33 +1,42 @@
+// #docplaster
 // #docregion
+// #docregion crisis-center-module, admin-module
 import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
+import { CommonModule }   from '@angular/common';
 import { FormsModule }    from '@angular/forms';
 
-import { AppComponent }        from './app.component';
-import { routing,
-         appRoutingProviders } from './app.routing';
+import { AppComponent }         from './app.component';
+import { AppRoutingModule }     from './app-routing.module';
 
-import { HeroesModule }        from './heroes/heroes.module';
-import { CrisisCenterModule }  from './crisis-center/crisis-center.module';
+import { HeroesModule }           from './heroes/heroes.module';
+// #docregion crisis-center-module
+import { CrisisCenterModule }     from './crisis-center/crisis-center.module';
+// #enddocregion crisis-center-module
+// #docregion admin-module
+import { AdminModule }            from './admin/admin.module';
+// #docregion crisis-center-module
 
-import { DialogService }       from './dialog.service';
+import { DialogService }          from './dialog.service';
 
 @NgModule({
   imports: [
-    BrowserModule,
+    CommonModule,
     FormsModule,
-    routing,
     HeroesModule,
-    CrisisCenterModule
+    CrisisCenterModule,
+// #enddocregion crisis-center-module
+    AdminModule,
+// #docregion crisis-center-module
+    AppRoutingModule
   ],
   declarations: [
     AppComponent
   ],
   providers: [
-    appRoutingProviders,
     DialogService
   ],
   bootstrap: [ AppComponent ]
 })
 export class AppModule {
 }
+// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/app.module.5.ts b/public/docs/_examples/router/ts/app/app.module.5.ts
index b1ba4bd231..119d583578 100644
--- a/public/docs/_examples/router/ts/app/app.module.5.ts
+++ b/public/docs/_examples/router/ts/app/app.module.5.ts
@@ -1,26 +1,31 @@
 // #docregion
-import { NgModule }             from '@angular/core';
-import { BrowserModule }        from '@angular/platform-browser';
-import { FormsModule }          from '@angular/forms';
-import { Routes, RouterModule } from '@angular/router';
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
 
-import { AppComponent }  from './app.component';
+import { AppComponent }        from './app.component';
+import { AppRoutingModule }    from './app-routing.module';
 
-const routes: Routes = [
+import { HeroesModule }        from './heroes/heroes.module';
+import { CrisisCenterModule }  from './crisis-center/crisis-center.module';
+import { AdminModule }         from './admin/admin.module';
 
-];
+import { DialogService }       from './dialog.service';
 
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    RouterModule.forRoot(routes, { useHash: true })  // .../#/crisis-center/
+    HeroesModule,
+    CrisisCenterModule,
+    AdminModule,
+    AppRoutingModule
   ],
   declarations: [
     AppComponent
   ],
   providers: [
-
+    DialogService
   ],
   bootstrap: [ AppComponent ]
 })
diff --git a/public/docs/_examples/router/ts/app/app.module.6.ts b/public/docs/_examples/router/ts/app/app.module.6.ts
new file mode 100644
index 0000000000..b1ba4bd231
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app.module.6.ts
@@ -0,0 +1,28 @@
+// #docregion
+import { NgModule }             from '@angular/core';
+import { BrowserModule }        from '@angular/platform-browser';
+import { FormsModule }          from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AppComponent }  from './app.component';
+
+const routes: Routes = [
+
+];
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    RouterModule.forRoot(routes, { useHash: true })  // .../#/crisis-center/
+  ],
+  declarations: [
+    AppComponent
+  ],
+  providers: [
+
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
diff --git a/public/docs/_examples/router/ts/app/app.module.7.ts b/public/docs/_examples/router/ts/app/app.module.7.ts
new file mode 100644
index 0000000000..03f13cc432
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/app.module.7.ts
@@ -0,0 +1,32 @@
+// #docregion
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+
+import { AppComponent }        from './app.component';
+import { AppRoutingModule }    from './app-routing.module';
+
+import { HeroesModule }        from './heroes/heroes.module';
+import { CrisisCenterModule }  from './crisis-center/crisis-center.module';
+import { LoginRoutingModule }  from './login-routing.module';
+import { DialogService }       from './dialog.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HeroesModule,
+    CrisisCenterModule,
+    LoginRoutingModule,
+    AppRoutingModule
+  ],
+  declarations: [
+    AppComponent
+  ],
+  providers: [
+    DialogService
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
diff --git a/public/docs/_examples/router/ts/app/app.module.ts b/public/docs/_examples/router/ts/app/app.module.ts
index 87c031e2bb..e9b4726c74 100644
--- a/public/docs/_examples/router/ts/app/app.module.ts
+++ b/public/docs/_examples/router/ts/app/app.module.ts
@@ -4,8 +4,8 @@ import { BrowserModule }  from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
 
 import { AppComponent }         from './app.component';
-import { routing,
-         appRoutingProviders }  from './app.routing';
+import { AppRoutingModule }     from './app-routing.module';
+import { LoginRoutingModule }   from './login-routing.module';
 
 import { HeroesModule }         from './heroes/heroes.module';
 import { CrisisCenterModule }   from './crisis-center/crisis-center.module';
@@ -18,16 +18,16 @@ import { DialogService }        from './dialog.service';
   imports: [
     BrowserModule,
     FormsModule,
-    routing,
     HeroesModule,
-    CrisisCenterModule
+    CrisisCenterModule,
+    LoginRoutingModule,
+    AppRoutingModule
   ],
   declarations: [
     AppComponent,
     LoginComponent
   ],
   providers: [
-    appRoutingProviders,
     DialogService
   ],
   bootstrap: [ AppComponent ]
diff --git a/public/docs/_examples/router/ts/app/app.routing.5.ts b/public/docs/_examples/router/ts/app/app.routing.5.ts
index ce153c7b1f..8ce3e0a10f 100644
--- a/public/docs/_examples/router/ts/app/app.routing.5.ts
+++ b/public/docs/_examples/router/ts/app/app.routing.5.ts
@@ -1,16 +1,16 @@
-// #docregion
-import { ModuleWithProviders }   from '@angular/core';
-import { Routes, RouterModule }  from '@angular/router';
-
-import { loginRoutes,
-         authProviders }      from './login.routing';
-
-const appRoutes: Routes = [
-  ...loginRoutes
-];
-
-export const appRoutingProviders: any[] = [
-  authProviders
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
+// // #docregion
+// import { ModuleWithProviders }   from '@angular/core';
+// import { Routes, RouterModule }  from '@angular/router';
+//
+// import { loginRoutes,
+//          authProviders }      from './login.routing';
+//
+// const appRoutes: Routes = [
+//   ...loginRoutes
+// ];
+//
+// export const appRoutingProviders: any[] = [
+//   authProviders
+// ];
+//
+// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/app.routing.6.ts b/public/docs/_examples/router/ts/app/app.routing.6.ts
index 8dc92f9dc4..23e2897cf1 100644
--- a/public/docs/_examples/router/ts/app/app.routing.6.ts
+++ b/public/docs/_examples/router/ts/app/app.routing.6.ts
@@ -1,21 +1,21 @@
-// #docregion
-import { ModuleWithProviders } from '@angular/core';
-// #docregion import-router
-import { Routes, RouterModule }   from '@angular/router';
-// #enddocregion import-router
-
-import { loginRoutes,
-         authProviders }  from './login.routing';
-
-import { CanDeactivateGuard } from './can-deactivate-guard.service';
-
-const appRoutes: Routes = [
-  ...loginRoutes
-];
-
-export const appRoutingProviders: any[] = [
-  authProviders,
-  CanDeactivateGuard
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
+// // #docregion
+// import { ModuleWithProviders } from '@angular/core';
+// // #docregion import-router
+// import { Routes, RouterModule }   from '@angular/router';
+// // #enddocregion import-router
+//
+// import { loginRoutes,
+//          authProviders }  from './login.routing';
+//
+// import { CanDeactivateGuard } from './can-deactivate-guard.service';
+//
+// const appRoutes: Routes = [
+//   ...loginRoutes
+// ];
+//
+// export const appRoutingProviders: any[] = [
+//   authProviders,
+//   CanDeactivateGuard
+// ];
+// 
+// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/app.routing.ts b/public/docs/_examples/router/ts/app/app.routing.ts
deleted file mode 100644
index cd00b9bf0c..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-// #docplaster
-// #docregion
-import { ModuleWithProviders }  from '@angular/core';
-// #docregion import-router
-import { Routes, RouterModule } from '@angular/router';
-// #enddocregion import-router
-
-import { loginRoutes,
-         authProviders }      from './login.routing';
-
-import { CanDeactivateGuard } from './can-deactivate-guard.service';
-// #docregion can-load-guard
-import { AuthGuard }          from './auth-guard.service';
-// #enddocregion can-load-guard
-
-// #docregion lazy-load-admin, can-load-guard
-
-const adminRoutes: Routes = [
-  {
-    path: 'admin',
-    loadChildren: 'app/admin/admin.module#AdminModule',
-// #enddocregion lazy-load-admin
-    canLoad: [AuthGuard]
-// #docregion lazy-load-admin
-  }
-];
-// #enddocregion can-load-guard
-
-const appRoutes: Routes = [
-  ...loginRoutes,
-  ...adminRoutes
-];
-// #enddocregion lazy-load-admin
-
-export const appRoutingProviders: any[] = [
-  authProviders,
-  CanDeactivateGuard
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts
new file mode 100644
index 0000000000..829175cea6
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts
@@ -0,0 +1,42 @@
+// #docplaster
+// #docregion
+import { NgModule }     from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { CrisisCenterHomeComponent } from './crisis-center-home.component';
+import { CrisisListComponent }       from './crisis-list.component';
+import { CrisisCenterComponent }     from './crisis-center.component';
+import { CrisisDetailComponent }     from './crisis-detail.component';
+
+// #docregion routes
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: 'crisis-center',
+        component: CrisisCenterComponent,
+        children: [
+          {
+            path: '',
+            component: CrisisListComponent,
+            children: [
+              {
+                path: ':id',
+                component: CrisisDetailComponent
+              },
+              {
+                path: '',
+                component: CrisisCenterHomeComponent
+              }
+            ]
+          }
+        ]
+      }
+    ])
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class CrisisCenterRoutingModule { }
+// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts
new file mode 100644
index 0000000000..9c782edc0e
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts
@@ -0,0 +1,71 @@
+// #docplaster
+// #docregion routes
+import { NgModule }       from '@angular/core';
+import { RouterModule }   from '@angular/router';
+
+import { CrisisCenterHomeComponent } from './crisis-center-home.component';
+import { CrisisListComponent }       from './crisis-list.component';
+import { CrisisCenterComponent }     from './crisis-center.component';
+import { CrisisDetailComponent }     from './crisis-detail.component';
+// #enddocregion routes
+
+// #docregion can-deactivate-guard
+import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
+// #enddocregion can-deactivate-guard
+// #docregion crisis-detail-resolve
+import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
+
+// #enddocregion crisis-detail-resolve
+// #docregion routes
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+    // #enddocregion routes
+      // #docregion redirect, routes
+      {
+        path: '',
+        redirectTo: '/crisis-center',
+        pathMatch: 'full'
+      },
+      // #enddocregion redirect, routes
+      // #docregion routes
+      {
+        path: 'crisis-center',
+        component: CrisisCenterComponent,
+        children: [
+          {
+            path: '',
+            component: CrisisListComponent,
+            children: [
+              {
+                path: ':id',
+                component: CrisisDetailComponent,
+      // #enddocregion routes
+                // #docregion can-deactivate-guard
+                canDeactivate: [CanDeactivateGuard],
+                // #enddocregion can-deactivate-guard
+                // #docregion crisis-detail-resolve
+                resolve: {
+                  crisis: CrisisDetailResolve
+                }
+                // #enddocregion crisis-detail-resolve
+      // #docregion routes
+              },
+              {
+                path: '',
+                component: CrisisCenterHomeComponent
+              }
+            ]
+          }
+        ]
+      }
+      // #docregion routes
+    ])
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class CrisisCenterRoutingModule { }
+// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts
new file mode 100644
index 0000000000..693a72f8c2
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts
@@ -0,0 +1,50 @@
+// #docplaster
+// #docregion
+import { NgModule }     from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { CrisisCenterHomeComponent } from './crisis-center-home.component';
+import { CrisisListComponent }       from './crisis-list.component';
+import { CrisisCenterComponent }     from './crisis-center.component';
+import { CrisisDetailComponent }     from './crisis-detail.component';
+
+// #docregion can-deactivate-guard
+import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        redirectTo: '/crisis-center',
+        pathMatch: 'full'
+      },
+      {
+        path: 'crisis-center',
+        component: CrisisCenterComponent,
+        children: [
+          {
+            path: '',
+            component: CrisisListComponent,
+            children: [
+              {
+                path: ':id',
+                component: CrisisDetailComponent,
+                canDeactivate: [CanDeactivateGuard]
+              },
+              {
+                path: '',
+                component: CrisisCenterHomeComponent
+              }
+            ]
+          }
+        ]
+      }
+    ])
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class CrisisCenterRoutingModule { }
+// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts
new file mode 100644
index 0000000000..17843ace3e
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts
@@ -0,0 +1,60 @@
+// #docplaster
+// #docregion
+import { NgModule }     from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { CrisisCenterHomeComponent } from './crisis-center-home.component';
+import { CrisisListComponent }       from './crisis-list.component';
+import { CrisisCenterComponent }     from './crisis-center.component';
+import { CrisisDetailComponent }     from './crisis-detail.component';
+
+import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
+
+// #docregion crisis-detail-resolve
+import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      // #docregion redirect
+      {
+        path: '',
+        redirectTo: '/crisis-center',
+        pathMatch: 'full'
+      },
+      // #enddocregion redirect
+      {
+        path: 'crisis-center',
+        component: CrisisCenterComponent,
+        children: [
+          {
+            path: '',
+            component: CrisisListComponent,
+            children: [
+              {
+                path: ':id',
+                component: CrisisDetailComponent,
+                canDeactivate: [CanDeactivateGuard],
+                resolve: {
+                  crisis: CrisisDetailResolve
+                }
+              },
+              {
+                path: '',
+                component: CrisisCenterHomeComponent
+              }
+            ]
+          }
+        ]
+      }
+    ])
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    CrisisDetailResolve
+  ]
+})
+export class CrisisCenterRoutingModule { }
+// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.1.ts
index ab29a0ba22..5a3e45f58f 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.1.ts
@@ -6,18 +6,18 @@ import { CommonModule }   from '@angular/common';
 
 import { CrisisService }        from './crisis.service';
 
-import { CrisisCenterComponent } from './crisis-center.component';
-import { CrisisListComponent }       from './crisis-list.component';
-import { CrisisCenterHomeComponent } from './crisis-center-home.component';
-import { CrisisDetailComponent } from './crisis-detail.component';
+import { CrisisCenterComponent }      from './crisis-center.component';
+import { CrisisListComponent }        from './crisis-list.component';
+import { CrisisCenterHomeComponent }  from './crisis-center-home.component';
+import { CrisisDetailComponent }      from './crisis-detail.component';
 
-import { crisisCenterRouting } from './crisis-center.routing';
+import { CrisisCenterRoutingModule }  from './crisis-center-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
-    crisisCenterRouting
+    CrisisCenterRoutingModule
   ],
   declarations: [
     CrisisCenterComponent,
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.ts
index 3a66164607..fddf7ca421 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.module.ts
@@ -5,22 +5,19 @@ import { FormsModule }    from '@angular/forms';
 import { CommonModule }   from '@angular/common';
 
 import { CrisisService }        from './crisis.service';
-// #docregion crisis-detail-resolve
-import { CrisisDetailResolve }  from './crisis-detail-resolve.service';
-// #enddocregion crisis-detail-resolve
 
 import { CrisisCenterComponent }     from './crisis-center.component';
 import { CrisisListComponent }       from './crisis-list.component';
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisDetailComponent }     from './crisis-detail.component';
 
-import { crisisCenterRouting } from './crisis-center.routing';
+import { CrisisCenterRoutingModule } from './crisis-center-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
-    crisisCenterRouting
+    CrisisCenterRoutingModule
   ],
   declarations: [
     CrisisCenterComponent,
@@ -28,11 +25,8 @@ import { crisisCenterRouting } from './crisis-center.routing';
     CrisisCenterHomeComponent,
     CrisisDetailComponent
   ],
-  // #docregion crisis-detail-resolve
-
   providers: [
-    CrisisService,
-    CrisisDetailResolve
+    CrisisService
   ]
   // #enddocregion crisis-detail-resolve
 })
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.1.ts
deleted file mode 100644
index 8ef262c189..0000000000
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.1.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// #docplaster
-// #docregion
-import { ModuleWithProviders }   from '@angular/core';
-import { Routes, RouterModule }  from '@angular/router';
-
-import { CrisisCenterHomeComponent } from './crisis-center-home.component';
-import { CrisisListComponent }       from './crisis-list.component';
-import { CrisisCenterComponent }     from './crisis-center.component';
-import { CrisisDetailComponent }     from './crisis-detail.component';
-
-// #docregion routes
-const crisisCenterRoutes: Routes = [
-  {
-    path: 'crisis-center',
-    component: CrisisCenterComponent,
-    children: [
-      {
-        path: '',
-        component: CrisisListComponent,
-        children: [
-          {
-            path: ':id',
-            component: CrisisDetailComponent
-          },
-          {
-            path: '',
-            component: CrisisCenterHomeComponent
-          }
-        ]
-      }
-    ]
-  }
-];
-
-export const crisisCenterRouting: ModuleWithProviders = RouterModule.forChild(crisisCenterRoutes);
-// #docregion routes
-// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.2.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.2.ts
deleted file mode 100644
index aab186c878..0000000000
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.2.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-// #docplaster
-// #docregion routes
-import { ModuleWithProviders }   from '@angular/core';
-import { Routes, RouterModule }  from '@angular/router';
-
-import { CrisisCenterHomeComponent } from './crisis-center-home.component';
-import { CrisisListComponent }       from './crisis-list.component';
-import { CrisisCenterComponent }     from './crisis-center.component';
-import { CrisisDetailComponent }     from './crisis-detail.component';
-// #enddocregion routes
-
-// #docregion can-deactivate-guard
-import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
-// #enddocregion can-deactivate-guard
-// #docregion crisis-detail-resolve
-import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
-
-// #enddocregion crisis-detail-resolve
-// #docregion routes
-
-const crisisCenterRoutes: Routes = [
-// #enddocregion routes
-  // #docregion redirect, routes
-  {
-    path: '',
-    redirectTo: '/crisis-center',
-    pathMatch: 'full'
-  },
-  // #enddocregion redirect, routes
-  // #docregion routes
-  {
-    path: 'crisis-center',
-    component: CrisisCenterComponent,
-    children: [
-      {
-        path: '',
-        component: CrisisListComponent,
-        children: [
-          {
-            path: ':id',
-            component: CrisisDetailComponent,
-  // #enddocregion routes
-            // #docregion can-deactivate-guard
-            canDeactivate: [CanDeactivateGuard],
-            // #enddocregion can-deactivate-guard
-            // #docregion crisis-detail-resolve
-            resolve: {
-              crisis: CrisisDetailResolve
-            }
-            // #enddocregion crisis-detail-resolve
-  // #docregion routes
-          },
-          {
-            path: '',
-            component: CrisisCenterHomeComponent
-          }
-        ]
-      }
-    ]
-  }
-  // #docregion routes
-];
-
-export const crisisCenterRouting: ModuleWithProviders = RouterModule.forChild(crisisCenterRoutes);
-// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.3.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.3.ts
deleted file mode 100644
index e43119d517..0000000000
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.3.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// #docplaster
-// #docregion
-import { ModuleWithProviders }   from '@angular/core';
-import { Routes, RouterModule }  from '@angular/router';
-
-import { CrisisCenterHomeComponent } from './crisis-center-home.component';
-import { CrisisListComponent }       from './crisis-list.component';
-import { CrisisCenterComponent }     from './crisis-center.component';
-import { CrisisDetailComponent }     from './crisis-detail.component';
-
-// #docregion can-deactivate-guard
-import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
-
-const crisisCenterRoutes: Routes = [
-  {
-    path: '',
-    redirectTo: '/crisis-center',
-    pathMatch: 'full'
-  },
-  {
-    path: 'crisis-center',
-    component: CrisisCenterComponent,
-    children: [
-      {
-        path: '',
-        component: CrisisListComponent,
-        children: [
-          {
-            path: ':id',
-            component: CrisisDetailComponent,
-            canDeactivate: [CanDeactivateGuard]
-          },
-          {
-            path: '',
-            component: CrisisCenterHomeComponent
-          }
-        ]
-      }
-    ]
-  }
-];
-
-export const crisisCenterRouting: ModuleWithProviders = RouterModule.forChild(crisisCenterRoutes);
-// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.ts
deleted file mode 100644
index 6b4fccde4d..0000000000
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center.routing.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-// #docplaster
-// #docregion
-import { ModuleWithProviders }   from '@angular/core';
-import { Routes, RouterModule }  from '@angular/router';
-
-import { CrisisCenterHomeComponent } from './crisis-center-home.component';
-import { CrisisListComponent }       from './crisis-list.component';
-import { CrisisCenterComponent }     from './crisis-center.component';
-import { CrisisDetailComponent }     from './crisis-detail.component';
-
-import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
-
-// #docregion crisis-detail-resolve
-import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
-
-const crisisCenterRoutes: Routes = [
-  // #docregion redirect
-  {
-    path: '',
-    redirectTo: '/crisis-center',
-    pathMatch: 'full'
-  },
-  // #enddocregion redirect
-  {
-    path: 'crisis-center',
-    component: CrisisCenterComponent,
-    children: [
-      {
-        path: '',
-        component: CrisisListComponent,
-        children: [
-          {
-            path: ':id',
-            component: CrisisDetailComponent,
-            canDeactivate: [CanDeactivateGuard],
-            resolve: {
-              crisis: CrisisDetailResolve
-            }
-          },
-          {
-            path: '',
-            component: CrisisCenterHomeComponent
-          }
-        ]
-      }
-    ]
-  }
-];
-
-export const crisisCenterRouting: ModuleWithProviders = RouterModule.forChild(crisisCenterRoutes);
-// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts b/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts
new file mode 100644
index 0000000000..96bf339394
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { NgModule }     from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { HeroListComponent }    from './hero-list.component';
+import { HeroDetailComponent }  from './hero-detail.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      { path: 'heroes',  component: HeroListComponent },
+    // #docregion hero-detail-route
+      { path: 'hero/:id', component: HeroDetailComponent }
+    // #enddocregion hero-detail-route
+    ])
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class HeroRoutingModule { }
+// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/heroes/heroes.module.ts b/public/docs/_examples/router/ts/app/heroes/heroes.module.ts
index 1816ef1e56..72212dbd24 100644
--- a/public/docs/_examples/router/ts/app/heroes/heroes.module.ts
+++ b/public/docs/_examples/router/ts/app/heroes/heroes.module.ts
@@ -9,13 +9,13 @@ import { HeroDetailComponent }  from './hero-detail.component';
 import { HeroService } from './hero.service';
 
 // #docregion heroes-routes
-import { heroesRouting } from './heroes.routing';
+import { HeroRoutingModule } from './heroes-routing.module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
-    heroesRouting
+    HeroRoutingModule
   ],
   declarations: [
     HeroListComponent,
diff --git a/public/docs/_examples/router/ts/app/heroes/heroes.routing.ts b/public/docs/_examples/router/ts/app/heroes/heroes.routing.ts
deleted file mode 100644
index 4831fdd97b..0000000000
--- a/public/docs/_examples/router/ts/app/heroes/heroes.routing.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docregion
-import { ModuleWithProviders }  from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { HeroListComponent }    from './hero-list.component';
-import { HeroDetailComponent }  from './hero-detail.component';
-
-const heroesRoutes: Routes = [
-  { path: 'heroes',  component: HeroListComponent },
-// #docregion hero-detail-route
-  { path: 'hero/:id', component: HeroDetailComponent }
-// #enddocregion hero-detail-route
-];
-
-export const heroesRouting: ModuleWithProviders = RouterModule.forChild(heroesRoutes);
-// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/login-routing.module.ts b/public/docs/_examples/router/ts/app/login-routing.module.ts
new file mode 100644
index 0000000000..43c0e28a97
--- /dev/null
+++ b/public/docs/_examples/router/ts/app/login-routing.module.ts
@@ -0,0 +1,22 @@
+// #docregion
+import { NgModule }       from '@angular/core';
+import { RouterModule }   from '@angular/router';
+import { AuthGuard }      from './auth-guard.service';
+import { AuthService }    from './auth.service';
+import { LoginComponent } from './login.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      { path: 'login', component: LoginComponent }
+    ])
+  ],
+  exports: [
+    RouterModule
+  ],
+  providers: [
+    AuthGuard,
+    AuthService
+  ]
+})
+export class LoginRoutingModule {}
diff --git a/public/docs/_examples/router/ts/app/login.routing.ts b/public/docs/_examples/router/ts/app/login.routing.ts
deleted file mode 100644
index 9e3eaf2350..0000000000
--- a/public/docs/_examples/router/ts/app/login.routing.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import { Routes }         from '@angular/router';
-import { AuthGuard }      from './auth-guard.service';
-import { AuthService }    from './auth.service';
-import { LoginComponent } from './login.component';
-
-export const loginRoutes: Routes = [
-  { path: 'login', component: LoginComponent }
-];
-
-export const authProviders = [
-  AuthGuard,
-  AuthService
-];
diff --git a/public/docs/_examples/security/e2e-spec.ts b/public/docs/_examples/security/e2e-spec.ts
index d1a373a781..23d11cd12b 100644
--- a/public/docs/_examples/security/e2e-spec.ts
+++ b/public/docs/_examples/security/e2e-spec.ts
@@ -1,5 +1,6 @@
-/// <reference path="../_protractor/e2e.d.ts" />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, By } from 'protractor';
 
 describe('Security E2E Tests', () => {
   beforeAll(() => browser.get(''));
diff --git a/public/docs/_examples/server-communication/e2e-spec.ts b/public/docs/_examples/server-communication/e2e-spec.ts
index 3468d363a0..2b6571b039 100644
--- a/public/docs/_examples/server-communication/e2e-spec.ts
+++ b/public/docs/_examples/server-communication/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 describe('Server Communication', function () {
 
   beforeAll(function () {
@@ -35,7 +37,7 @@ describe('Server Communication', function () {
     it('should add a new hero to the list', function () {
       expect(heroNameInput).toBeDefined('<input> for hero name must exist');
       expect(addButton).toBeDefined('"Add Hero" button must be defined');
-      sendKeys(heroNameInput, newHeroName);
+      heroNameInput.sendKeys(newHeroName);
       addButton.click().then(function() {
         expect(heroTags.count()).toBe(heroCountAfterAdd, 'A new hero should be added');
         let newHeroInList = heroTags.get(heroCountAfterAdd - 1).getText();
diff --git a/public/docs/_examples/structural-directives/e2e-spec.ts b/public/docs/_examples/structural-directives/e2e-spec.ts
index 5f48b08835..335915eb86 100644
--- a/public/docs/_examples/structural-directives/e2e-spec.ts
+++ b/public/docs/_examples/structural-directives/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 describe('Structural Directives', function () {
 
   // tests interact - so we need beforeEach instead of beforeAll
@@ -34,7 +36,7 @@ describe('Structural Directives', function () {
     let cssButtonEle = element(by.cssContainingText('button', 'show | hide'));
     let cssSiblingEle = cssButtonEle.element(by.xpath('..')).element(by.css('heavy-loader'));
     let setConditionText: string;
-    setConditionButtonEle.getText().then(function(text) {
+    setConditionButtonEle.getText().then(function(text: string) {
       setConditionText = text;
       expect(ngIfButtonEle.isPresent()).toBe(true, 'should be able to find ngIfButton');
       expect(cssButtonEle.isPresent()).toBe(true, 'should be able to find cssButton');
diff --git a/public/docs/_examples/style-guide/e2e-spec.ts b/public/docs/_examples/style-guide/e2e-spec.ts
index 2809e65e44..d143ae5573 100644
--- a/public/docs/_examples/style-guide/e2e-spec.ts
+++ b/public/docs/_examples/style-guide/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 describe('Style Guide', function () {
   it('01-01', function () {
     browser.get('#/01-01');
diff --git a/public/docs/_examples/style-guide/ts/03-04/app/core/toast.service.avoid.ts b/public/docs/_examples/style-guide/ts/03-04/app/core/toast.service.avoid.ts
index e2e21b8e4c..0f3a7c25ea 100644
--- a/public/docs/_examples/style-guide/ts/03-04/app/core/toast.service.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/03-04/app/core/toast.service.avoid.ts
@@ -8,19 +8,19 @@ import { Injectable } from '@angular/core';
 export class ToastService {
   message: string;
 
-  private toastCount: number;
+  private _toastCount: number;
 
   hide() {
-    this.toastCount--;
-    this.log();
+    this._toastCount--;
+    this._log();
   }
 
   show() {
-    this.toastCount++;
-    this.log();
+    this._toastCount++;
+    this._log();
   }
 
-  private log() {
+  private _log() {
     console.log(this.message);
   }
 }
diff --git a/public/docs/_examples/styleguide/e2e-spec.ts b/public/docs/_examples/styleguide/e2e-spec.ts
index 321e86c8a1..af10d2b71d 100644
--- a/public/docs/_examples/styleguide/e2e-spec.ts
+++ b/public/docs/_examples/styleguide/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 describe('Documentation StyleGuide E2E Tests', function() {
 
   let expectedMsg = 'My First Angular App';
diff --git a/public/docs/_examples/styleguide/package.1.json b/public/docs/_examples/styleguide/package.1.json
index f4c2fdaef5..2aafb8b80a 100644
--- a/public/docs/_examples/styleguide/package.1.json
+++ b/public/docs/_examples/styleguide/package.1.json
@@ -7,7 +7,12 @@
     "lite": "lite-server",
     "start": "concurrently \"npm run tsc:w\" \"npm run lite\" "
   },
-  "license": "ISC",
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
+    }
+  ],
   "dependencies": {
     "angular2": "2.0.0-beta.0",
     "systemjs": "0.19.6",
diff --git a/public/docs/_examples/template-syntax/e2e-spec.ts b/public/docs/_examples/template-syntax/e2e-spec.ts
index 47cbce0d59..124f633280 100644
--- a/public/docs/_examples/template-syntax/e2e-spec.ts
+++ b/public/docs/_examples/template-syntax/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 // Not yet complete
 describe('Template Syntax', function () {
 
diff --git a/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.spec.ts b/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.spec.ts
index 0ae563a831..40c01571e6 100644
--- a/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.spec.ts
+++ b/public/docs/_examples/testing/ts/app/dashboard/dashboard-hero.component.spec.ts
@@ -19,7 +19,7 @@ describe('DashboardHeroComponent when tested directly', () => {
   let heroEl: DebugElement;
 
   // #docregion setup, compile-components
-  // asynch beforeEach
+  // async beforeEach
   beforeEach( async(() => {
     TestBed.configureTestingModule({
       declarations: [ DashboardHeroComponent ],
@@ -86,7 +86,7 @@ describe('DashboardHeroComponent when inside a test host', () => {
   }));
 
   beforeEach(() => {
-    // create TestHosComponent instead of DashboardHeroComponent
+    // create TestHostComponent instead of DashboardHeroComponent
     fixture  = TestBed.createComponent(TestHostComponent);
     testHost = fixture.componentInstance;
     heroEl   = fixture.debugElement.query(By.css('.hero')); // find hero
diff --git a/public/docs/_examples/testing/ts/app/hero/hero.routing.ts b/public/docs/_examples/testing/ts/app/hero/hero-routing.module.ts
similarity index 68%
rename from public/docs/_examples/testing/ts/app/hero/hero.routing.ts
rename to public/docs/_examples/testing/ts/app/hero/hero-routing.module.ts
index 9530bc3953..59ec14474c 100644
--- a/public/docs/_examples/testing/ts/app/hero/hero.routing.ts
+++ b/public/docs/_examples/testing/ts/app/hero/hero-routing.module.ts
@@ -1,3 +1,4 @@
+import { NgModule }             from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { HeroListComponent }    from './hero-list.component';
@@ -9,4 +10,9 @@ const routes: Routes =  [
 ];
 
 export const routedComponents = [HeroDetailComponent, HeroListComponent];
-export const routing = RouterModule.forChild(routes);
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HeroRoutingModule {}
diff --git a/public/docs/_examples/testing/ts/app/hero/hero.module.ts b/public/docs/_examples/testing/ts/app/hero/hero.module.ts
index 541d49103f..dfe33cc199 100644
--- a/public/docs/_examples/testing/ts/app/hero/hero.module.ts
+++ b/public/docs/_examples/testing/ts/app/hero/hero.module.ts
@@ -1,9 +1,9 @@
 import { NgModule }     from '@angular/core';
 import { SharedModule } from '../shared/shared.module';
-import { routedComponents, routing } from './hero.routing';
+import { routedComponents, HeroRoutingModule } from './hero-routing.module';
 
 @NgModule({
-  imports:      [ SharedModule, routing ],
+  imports:      [ SharedModule, HeroRoutingModule ],
   declarations: [ routedComponents ]
 })
 export class HeroModule { }
diff --git a/public/docs/_examples/toh-1/e2e-spec.ts b/public/docs/_examples/toh-1/e2e-spec.ts
index 11e51e4df9..75f99788a6 100644
--- a/public/docs/_examples/toh-1/e2e-spec.ts
+++ b/public/docs/_examples/toh-1/e2e-spec.ts
@@ -1,7 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
 
-type WPromise<T> = webdriver.promise.Promise<T>;
+import { browser, element, by, ElementFinder } from 'protractor';
+import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
 const expectedTitle = `Angular ${expectedH1}`;
@@ -12,7 +12,7 @@ class Hero {
 
   // Factory method
   // Get hero id and name from the given detail element.
-  static async fromDetail(detail: protractor.ElementFinder): Promise<Hero> {
+  static async fromDetail(detail: ElementFinder): Promise<Hero> {
     // Get hero id from the first <div>
     let _id = await detail.all(by.css('div')).first().getText();
     // Get name from the h2
@@ -25,9 +25,9 @@ class Hero {
 }
 
 const nameSuffix = 'X';
-function addToHeroName(text: string): WPromise<void> {
+function addToHeroName(text: string): promise.Promise<void> {
   let input = element(by.css('input'));
-  return sendKeys(input, text);
+  return input.sendKeys(text);
 }
 
 describe('Tutorial part 1', () => {
diff --git a/public/docs/_examples/toh-2/e2e-spec.ts b/public/docs/_examples/toh-2/e2e-spec.ts
index cde9e93edf..b5df938cd3 100644
--- a/public/docs/_examples/toh-2/e2e-spec.ts
+++ b/public/docs/_examples/toh-2/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by, ElementFinder } from 'protractor';
+import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
 const expectedTitle = `Angular ${expectedH1}`;
@@ -7,8 +9,6 @@ const expectedH2 = 'My Heroes';
 const targetHero = { id: 16, name: 'RubberMan' };
 const nameSuffix = 'X';
 
-type WPromise<T> = webdriver.promise.Promise<T>;
-
 class Hero {
     id: number;
     name: string;
@@ -24,7 +24,7 @@ class Hero {
     }
 
     // Get hero id and name from the given detail element.
-    static async fromDetail(detail: protractor.ElementFinder): Promise<Hero> {
+    static async fromDetail(detail: ElementFinder): Promise<Hero> {
         // Get hero id from the first <div>
         let _id = await detail.all(by.css('div')).first().getText();
         // Get name from the h2
@@ -113,9 +113,9 @@ function updateHeroTests() {
 
 }
 
-function addToHeroName(text: string): WPromise<void> {
+function addToHeroName(text: string): promise.Promise<void> {
   let input = element(by.css('input'));
-  return sendKeys(input, text);
+  return input.sendKeys(text);
 }
 
 function expectHeading(hLevel: number, expectedText: string): void {
diff --git a/public/docs/_examples/toh-3/e2e-spec.ts b/public/docs/_examples/toh-3/e2e-spec.ts
index f1e51f5b39..cce266dcaa 100644
--- a/public/docs/_examples/toh-3/e2e-spec.ts
+++ b/public/docs/_examples/toh-3/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by, ElementFinder } from 'protractor';
+import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
 const expectedTitle = `Angular ${expectedH1}`;
@@ -7,8 +9,6 @@ const expectedH2 = 'My Heroes';
 const targetHero = { id: 16, name: 'RubberMan' };
 const nameSuffix = 'X';
 
-type WPromise<T> = webdriver.promise.Promise<T>;
-
 class Hero {
     id: number;
     name: string;
@@ -24,7 +24,7 @@ class Hero {
     }
 
     // Get hero id and name from the given detail element.
-    static async fromDetail(detail: protractor.ElementFinder): Promise<Hero> {
+    static async fromDetail(detail: ElementFinder): Promise<Hero> {
         // Get hero id from the first <div>
         let _id = await detail.all(by.css('div')).first().getText();
         // Get name from the h2
@@ -113,9 +113,9 @@ function updateHeroTests() {
 
 }
 
-function addToHeroName(text: string): WPromise<void> {
+function addToHeroName(text: string): promise.Promise<void> {
   let input = element(by.css('input'));
-  return sendKeys(input, text);
+  return input.sendKeys(text);
 }
 
 function expectHeading(hLevel: number, expectedText: string): void {
diff --git a/public/docs/_examples/toh-4/e2e-spec.ts b/public/docs/_examples/toh-4/e2e-spec.ts
index 456297b6d2..2307ba17c9 100644
--- a/public/docs/_examples/toh-4/e2e-spec.ts
+++ b/public/docs/_examples/toh-4/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by, ElementFinder } from 'protractor';
+import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
 const expectedTitle = `Angular ${expectedH1}`;
@@ -7,8 +9,6 @@ const expectedH2 = 'My Heroes';
 const targetHero = { id: 16, name: 'RubberMan' };
 const nameSuffix = 'X';
 
-type WPromise<T> = webdriver.promise.Promise<T>;
-
 class Hero {
     id: number;
     name: string;
@@ -24,7 +24,7 @@ class Hero {
     }
 
     // Get hero id and name from the given detail element.
-    static async fromDetail(detail: protractor.ElementFinder): Promise<Hero> {
+    static async fromDetail(detail: ElementFinder): Promise<Hero> {
         // Get hero id from the first <div>
         let _id = await detail.all(by.css('div')).first().getText();
         // Get name from the h2
@@ -113,9 +113,9 @@ function updateHeroTests() {
 
 }
 
-function addToHeroName(text: string): WPromise<void> {
+function addToHeroName(text: string): promise.Promise<void> {
   let input = element(by.css('input'));
-  return sendKeys(input, text);
+  return input.sendKeys(text);
 }
 
 function expectHeading(hLevel: number, expectedText: string): void {
diff --git a/public/docs/_examples/toh-5/e2e-spec.ts b/public/docs/_examples/toh-5/e2e-spec.ts
index 6935ff19a2..1bb398b7f7 100644
--- a/public/docs/_examples/toh-5/e2e-spec.ts
+++ b/public/docs/_examples/toh-5/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by, ElementFinder } from 'protractor';
+import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
 const expectedTitle = `Angular ${expectedH1}`;
@@ -8,8 +10,6 @@ const targetHeroDashboardIndex = 3;
 const nameSuffix = 'X';
 const newHeroName = targetHero.name + nameSuffix;
 
-type WPromise<T> = webdriver.promise.Promise<T>;
-
 class Hero {
     id: number;
     name: string;
@@ -25,7 +25,7 @@ class Hero {
     }
 
     // Get hero id and name from the given detail element.
-    static async fromDetail(detail: protractor.ElementFinder): Promise<Hero> {
+    static async fromDetail(detail: ElementFinder): Promise<Hero> {
         // Get hero id from the first <div>
         let _id = await detail.all(by.css('div')).first().getText();
         // Get name from the h2
@@ -73,7 +73,7 @@ describe('Tutorial part 5', () => {
 
     const expectedViewNames = ['Dashboard', 'Heroes'];
     it(`has views ${expectedViewNames}`, () => {
-      let viewNames = getPageElts().hrefs.map(el => el.getText());
+      let viewNames = getPageElts().hrefs.map((el: ElementFinder) => el.getText());
       expect(viewNames).toEqual(expectedViewNames);
     });
 
@@ -173,9 +173,9 @@ describe('Tutorial part 5', () => {
 
 });
 
-function addToHeroName(text: string): WPromise<void> {
+function addToHeroName(text: string): promise.Promise<void> {
   let input = element(by.css('input'));
-  return sendKeys(input, text);
+  return input.sendKeys(text);
 }
 
 function expectHeading(hLevel: number, expectedText: string): void {
diff --git a/public/docs/_examples/toh-5/ts/app/app-routing.module.ts b/public/docs/_examples/toh-5/ts/app/app-routing.module.ts
new file mode 100644
index 0000000000..dfd957782b
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/app-routing.module.ts
@@ -0,0 +1,20 @@
+// #docregion
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { DashboardComponent }   from './dashboard.component';
+import { HeroesComponent }      from './heroes.component';
+import { HeroDetailComponent }  from './hero-detail.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+  { path: 'dashboard',  component: DashboardComponent },
+  { path: 'detail/:id', component: HeroDetailComponent },
+  { path: 'heroes',     component: HeroesComponent }
+];
+
+@NgModule({
+  imports: [ RouterModule.forRoot(routes) ],
+  exports: [ RouterModule ]
+})
+export class AppRoutingModule {}
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.ts b/public/docs/_examples/toh-5/ts/app/app.component.ts
index 12fe3bfd52..e0cb229f57 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.component.ts
@@ -2,6 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  moduleId: module.id,
   selector: 'my-app',
   // #docregion template
   template: `
@@ -14,7 +15,7 @@ import { Component } from '@angular/core';
   `,
   // #enddocregion template
   // #docregion styleUrls
-  styleUrls: ['app/app.component.css'],
+  styleUrls: ['app.component.css'],
   // #enddocregion styleUrls
 })
 export class AppComponent {
diff --git a/public/docs/_examples/toh-5/ts/app/app.module.2.ts b/public/docs/_examples/toh-5/ts/app/app.module.2.ts
new file mode 100644
index 0000000000..00876570f3
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/app.module.2.ts
@@ -0,0 +1,48 @@
+// #docplaster
+// #docregion
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+import { RouterModule }   from '@angular/router';
+
+import { AppComponent }        from './app.component';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroesComponent }     from './heroes.component';
+import { HeroService }         from './hero.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    RouterModule.forRoot([
+      {
+        path: 'heroes',
+        component: HeroesComponent
+      }
+    ])
+  ],
+  declarations: [
+    AppComponent,
+    HeroDetailComponent,
+    HeroesComponent
+  ],
+  providers: [
+    HeroService
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
+// #enddocregion
+/*
+// #docregion heroes, routing
+import { RouterModule }   from '@angular/router';
+
+RouterModule.forRoot([
+  {
+    path: 'heroes',
+    component: HeroesComponent
+  }
+])
+// #enddocregion heroes, routing
+*/
diff --git a/public/docs/_examples/toh-5/ts/app/app.module.3.ts b/public/docs/_examples/toh-5/ts/app/app.module.3.ts
new file mode 100644
index 0000000000..152401f132
--- /dev/null
+++ b/public/docs/_examples/toh-5/ts/app/app.module.3.ts
@@ -0,0 +1,59 @@
+// #docregion
+import { NgModule }       from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+import { FormsModule }    from '@angular/forms';
+import { RouterModule }   from '@angular/router';
+
+import { AppComponent }        from './app.component';
+import { HeroDetailComponent } from './hero-detail.component';
+import { DashboardComponent }  from './dashboard.component';
+import { HeroesComponent }     from './heroes.component';
+import { HeroService }         from './hero.service';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    RouterModule.forRoot([
+      // #docregion redirect
+      {
+        path: '',
+        redirectTo: '/dashboard',
+        pathMatch: 'full'
+      },
+      // #enddocregion redirect
+      // #docregion dashboard
+      {
+        path: 'dashboard',
+        component: DashboardComponent
+      },
+      // #enddocregion dashboard
+      // #docregion hero-detail
+      {
+        path: 'detail/:id',
+        component: HeroDetailComponent
+      },
+      // #enddocregion hero-detail
+      // #docregion heroes
+      // #docregion heroes, routing
+      {
+        path: 'heroes',
+        component: HeroesComponent
+      }
+      // #enddocregion heroes, routing
+    ])
+  ],
+  declarations: [
+    AppComponent,
+    DashboardComponent,
+    HeroDetailComponent,
+    HeroesComponent
+  ],
+  providers: [
+    HeroService
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {
+}
+// #enddocregion
diff --git a/public/docs/_examples/toh-5/ts/app/app.module.ts b/public/docs/_examples/toh-5/ts/app/app.module.ts
index 67bafebd38..b376d69aba 100644
--- a/public/docs/_examples/toh-5/ts/app/app.module.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.module.ts
@@ -1,4 +1,3 @@
-// #docplaster
 // #docregion
 import { NgModule }       from '@angular/core';
 import { BrowserModule }  from '@angular/platform-browser';
@@ -9,30 +8,28 @@ import { DashboardComponent }   from './dashboard.component';
 import { HeroDetailComponent }  from './hero-detail.component';
 import { HeroesComponent }      from './heroes.component';
 import { HeroService }          from './hero.service';
-// #docregion routing
-import { routing } from './app.routing';
-// #docregion routing
+
+// #docregion routing-module
+import { AppRoutingModule }     from './app-routing.module';
 
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    routing
+    AppRoutingModule
   ],
-  // #enddocregion routing
-  // #docregion dashboard, hero-detail
+// #enddocregion routing-module
+  // #docregion dashboard
   declarations: [
     AppComponent,
     DashboardComponent,
     HeroDetailComponent,
     HeroesComponent
   ],
-  // #enddocregion dashboard, hero-detail
-  providers: [
-    HeroService
-  ],
+  // #enddocregion dashboard
+  providers: [ HeroService ],
   bootstrap: [ AppComponent ]
-  // #docregion routing
+// #docregion routing-module
 })
-export class AppModule {
-}
+export class AppModule { }
+// #enddocregion routing-module
diff --git a/public/docs/_examples/toh-5/ts/app/app.routing.1.ts b/public/docs/_examples/toh-5/ts/app/app.routing.1.ts
deleted file mode 100644
index a69db4104b..0000000000
--- a/public/docs/_examples/toh-5/ts/app/app.routing.1.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// #docregion , heroes, routing
-import { ModuleWithProviders }  from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { HeroesComponent } from './heroes.component';
-
-const appRoutes: Routes = [
-  {
-    path: 'heroes',
-    component: HeroesComponent
-  }
-];
-// #enddocregion heroes, routing
-
-// #docregion routing-export
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
-// #enddocregion routing-export
diff --git a/public/docs/_examples/toh-5/ts/app/app.routing.ts b/public/docs/_examples/toh-5/ts/app/app.routing.ts
deleted file mode 100644
index 81f6d05ed2..0000000000
--- a/public/docs/_examples/toh-5/ts/app/app.routing.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// #docplaster
-// #docregion , heroes
-import { ModuleWithProviders }  from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-// #enddocregion heroes
-import { DashboardComponent }   from './dashboard.component';
-// #docregion heroes
-import { HeroesComponent }      from './heroes.component';
-// #enddocregion heroes
-import { HeroDetailComponent }  from './hero-detail.component';
-// #docregion heroes
-
-const appRoutes: Routes = [
-  // #enddocregion heroes
-  // #docregion redirect
-  {
-    path: '',
-    redirectTo: '/dashboard',
-    pathMatch: 'full'
-  },
-  // #enddocregion redirect
-  // #docregion dashboard
-  {
-    path: 'dashboard',
-    component: DashboardComponent
-  },
-  // #enddocregion dashboard
-  // #docregion hero-detail
-  {
-    path: 'detail/:id',
-    component: HeroDetailComponent
-  },
-  // #enddocregion hero-detail
-  // #docregion heroes
-  {
-    path: 'heroes',
-    component: HeroesComponent
-  }
-];
-// #enddocregion heroes
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
index 61a56463c5..f72a149c8c 100644
--- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
@@ -7,17 +7,18 @@ import { Router } from '@angular/router';
 
 import { Hero } from './hero';
 import { HeroService } from './hero.service';
-
+  // #docregion metadata
 @Component({
   moduleId: module.id,
   selector: 'my-dashboard',
-  // #docregion templateUrl
   templateUrl: 'dashboard.component.html',
-  // #enddocregion templateUrl
+  // #enddocregion metadata
   // #docregion css
   styleUrls: [ 'dashboard.component.css' ]
   // #enddocregion css
+  // #docregion metadata
 })
+// #enddocregion metadata
 // #docregion component
 export class DashboardComponent implements OnInit {
 
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
index 38b7384618..3ca01d2361 100644
--- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
@@ -6,16 +6,16 @@ import { Location }               from '@angular/common';
 
 import { Hero }         from './hero';
 import { HeroService }  from './hero.service';
-
+// #docregion metadata
 @Component({
   moduleId: module.id,
   selector: 'my-hero-detail',
-  // #docregion templateUrl
   templateUrl: 'hero-detail.component.html',
-  // #enddocregion templateUrl, v2
+  // #enddocregion metadata, v2
   styleUrls: [ 'hero-detail.component.css' ]
-  // #docregion v2
+  // #docregion metadata, v2
 })
+// #enddocregion metadata
 // #docregion implement
 export class HeroDetailComponent implements OnInit {
 // #enddocregion implement
diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
index 5fa50a3411..cbcb598ac2 100644
--- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
@@ -8,7 +8,9 @@ import { HeroService } from './hero.service';
 
 // #docregion renaming, metadata
 @Component({
+  // #enddocregion renaming
   moduleId: module.id,
+  // #docregion renaming
   selector: 'my-heroes',
   // #enddocregion renaming
   templateUrl: 'heroes.component.html',
diff --git a/public/docs/_examples/toh-6/e2e-spec.ts b/public/docs/_examples/toh-6/e2e-spec.ts
index 8152ac308c..814fa2004c 100644
--- a/public/docs/_examples/toh-6/e2e-spec.ts
+++ b/public/docs/_examples/toh-6/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by, ElementFinder, ElementArrayFinder } from 'protractor';
+import { promise } from 'selenium-webdriver';
 
 const expectedH1 = 'Tour of Heroes';
 const expectedTitle = `Angular ${expectedH1}`;
@@ -8,8 +10,6 @@ const targetHeroDashboardIndex = 3;
 const nameSuffix = 'X';
 const newHeroName = targetHero.name + nameSuffix;
 
-type WPromise<T> = webdriver.promise.Promise<T>;
-
 class Hero {
   id: number;
   name: string;
@@ -25,13 +25,13 @@ class Hero {
   }
 
   // Hero from hero list <li> element.
-  static async fromLi(li: protractor.ElementFinder): Promise<Hero> {
+  static async fromLi(li: ElementFinder): Promise<Hero> {
       let strings = await li.all(by.xpath('span')).getText();
       return { id: +strings[0], name: strings[1] };
   }
 
   // Hero id and name from the given detail element.
-  static async fromDetail(detail: protractor.ElementFinder): Promise<Hero> {
+  static async fromDetail(detail: ElementFinder): Promise<Hero> {
     // Get hero id from the first <div>
     let _id = await detail.all(by.css('div')).first().getText();
     // Get name from the h2
@@ -82,7 +82,7 @@ describe('Tutorial part 6', () => {
 
     const expectedViewNames = ['Dashboard', 'Heroes'];
     it(`has views ${expectedViewNames}`, () => {
-      let viewNames = getPageElts().hrefs.map(el => el.getText());
+      let viewNames = getPageElts().hrefs.map((el: ElementFinder) => el.getText());
       expect(viewNames).toEqual(expectedViewNames);
     });
 
@@ -188,7 +188,7 @@ describe('Tutorial part 6', () => {
       const heroesBefore = await toHeroArray(getPageElts().allHeroes);
       const numHeroes = heroesBefore.length;
 
-      sendKeys(element(by.css('input')), newHeroName);
+      element(by.css('input')).sendKeys(newHeroName);
       element(by.buttonText('Add')).click();
 
       let page = getPageElts();
@@ -207,19 +207,19 @@ describe('Tutorial part 6', () => {
     beforeAll(() => browser.get(''));
 
     it(`searches for 'Ma'`, async () => {
-      sendKeys(getPageElts().searchBox, 'Ma');
+      getPageElts().searchBox.sendKeys('Ma');
       browser.sleep(1000);
       expect(getPageElts().searchResults.count()).toBe(4);
     });
 
     it(`continues search with 'g'`, async () => {
-      sendKeys(getPageElts().searchBox, 'g');
+      getPageElts().searchBox.sendKeys('g');
       browser.sleep(1000);
       expect(getPageElts().searchResults.count()).toBe(2);
     });
 
     it(`continues search with 'n' and gets ${targetHero.name}`, async () => {
-      sendKeys(getPageElts().searchBox, 'n');
+      getPageElts().searchBox.sendKeys('n');
       browser.sleep(1000);
       let page = getPageElts();
       expect(page.searchResults.count()).toBe(1);
@@ -260,9 +260,9 @@ describe('Tutorial part 6', () => {
 
 });
 
-function addToHeroName(text: string): WPromise<void> {
+function addToHeroName(text: string): promise.Promise<void> {
   let input = element(by.css('input'));
-  return sendKeys(input, text);
+  return input.sendKeys(text);
 }
 
 function expectHeading(hLevel: number, expectedText: string): void {
@@ -271,13 +271,13 @@ function expectHeading(hLevel: number, expectedText: string): void {
     expect(hText).toEqual(expectedText, hTag);
 };
 
-function getHeroLiEltById(id: number): protractor.ElementFinder {
+function getHeroLiEltById(id: number): ElementFinder {
   let spanForId = element(by.cssContainingText('li span.badge', id.toString()));
   return spanForId.element(by.xpath('..'));
 }
 
-async function toHeroArray(allHeroes: protractor.ElementArrayFinder): Promise<Hero[]> {
-  let promisedHeroes: Array<Promise<Hero>> = await allHeroes.map(Hero.fromLi);
+async function toHeroArray(allHeroes: ElementArrayFinder): Promise<Hero[]> {
+  let promisedHeroes = await allHeroes.map(Hero.fromLi);
   // The cast is necessary to get around issuing with the signature of Promise.all()
   return <Promise<any>> Promise.all(promisedHeroes);
 }
diff --git a/public/docs/_examples/toh-6/ts/.gitignore b/public/docs/_examples/toh-6/ts/.gitignore
index 2cb7d2a2e9..316ea7d8ab 100644
--- a/public/docs/_examples/toh-6/ts/.gitignore
+++ b/public/docs/_examples/toh-6/ts/.gitignore
@@ -1 +1,3 @@
 **/*.js
+aot/**/*.ts
+!rollup-config.js
diff --git a/public/docs/_examples/toh-6/ts/aot/bs-config.json b/public/docs/_examples/toh-6/ts/aot/bs-config.json
new file mode 100644
index 0000000000..7c85d6eddd
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/aot/bs-config.json
@@ -0,0 +1,5 @@
+{
+  "port": 8000,
+  "files": ["./aot/**/*.{html,htm,css,js}"],
+  "server": { "baseDir": "./aot" }
+}
diff --git a/public/docs/_examples/toh-6/ts/aot/index.html b/public/docs/_examples/toh-6/ts/aot/index.html
new file mode 100644
index 0000000000..d42f3e0574
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/aot/index.html
@@ -0,0 +1,20 @@
+<!-- #docregion -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <title>Angular Tour of Heroes</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <script src="shim.min.js"></script>
+    <script src="zone.min.js"></script>
+    <!-- #docregion moduleId -->
+    <script>window.module = 'aot';</script>
+    <!-- #enddocregion moduleId -->
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+  <script src="dist/build.js"></script>
+</html>
diff --git a/public/docs/_examples/toh-6/ts/app/app-routing.module.ts b/public/docs/_examples/toh-6/ts/app/app-routing.module.ts
new file mode 100644
index 0000000000..bc070f6c31
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/app-routing.module.ts
@@ -0,0 +1,19 @@
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { DashboardComponent }   from './dashboard.component';
+import { HeroesComponent }      from './heroes.component';
+import { HeroDetailComponent }  from './hero-detail.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+  { path: 'dashboard',  component: DashboardComponent },
+  { path: 'detail/:id', component: HeroDetailComponent },
+  { path: 'heroes',     component: HeroesComponent }
+];
+
+@NgModule({
+  imports: [ RouterModule.forRoot(routes) ],
+  exports: [ RouterModule ]
+})
+export class AppRoutingModule {}
diff --git a/public/docs/_examples/toh-6/ts/app/app.component.ts b/public/docs/_examples/toh-6/ts/app/app.component.ts
index e55e09f661..c9bb797d62 100644
--- a/public/docs/_examples/toh-6/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/app.component.ts
@@ -3,8 +3,8 @@
 import { Component }          from '@angular/core';
 
 @Component({
+  moduleId: module.id,
   selector: 'my-app',
-
   template: `
     <h1>{{title}}</h1>
     <nav>
@@ -13,7 +13,7 @@ import { Component }          from '@angular/core';
     </nav>
     <router-outlet></router-outlet>
   `,
-  styleUrls: ['app/app.component.css']
+  styleUrls: ['app.component.css']
 })
 export class AppComponent {
   title = 'Tour of Heroes';
diff --git a/public/docs/_examples/toh-6/ts/app/app.module.ts b/public/docs/_examples/toh-6/ts/app/app.module.ts
index 2ab938b8eb..8ddf858972 100644
--- a/public/docs/_examples/toh-6/ts/app/app.module.ts
+++ b/public/docs/_examples/toh-6/ts/app/app.module.ts
@@ -10,9 +10,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule }   from '@angular/forms';
 import { HttpModule }    from '@angular/http';
 
+import { AppRoutingModule } from './app-routing.module';
+
 // #enddocregion v1
 // Imports for loading & configuring the in-memory web api
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module';
 import { InMemoryDataService }  from './in-memory-data.service';
 
 // #docregion v1
@@ -24,7 +26,6 @@ import { HeroService }          from './hero.service';
 // #enddocregion v1, v2
 import { HeroSearchComponent }  from './hero-search.component';
 // #docregion v1, v2
-import { routing }              from './app.routing';
 
 @NgModule({
   imports: [
@@ -36,7 +37,7 @@ import { routing }              from './app.routing';
     InMemoryWebApiModule.forRoot(InMemoryDataService),
     // #enddocregion in-mem-web-api
     // #docregion v1
-    routing
+    AppRoutingModule
   ],
   // #docregion search
   declarations: [
@@ -49,10 +50,7 @@ import { routing }              from './app.routing';
   // #docregion v1, v2
   ],
   // #enddocregion search
-  providers: [
-    HeroService,
-  ],
+  providers: [ HeroService ],
   bootstrap: [ AppComponent ]
 })
-export class AppModule {
-}
+export class AppModule { }
diff --git a/public/docs/_examples/toh-6/ts/app/app.routing.ts b/public/docs/_examples/toh-6/ts/app/app.routing.ts
deleted file mode 100644
index 7acd3b9863..0000000000
--- a/public/docs/_examples/toh-6/ts/app/app.routing.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// #docregion
-import { ModuleWithProviders }  from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { DashboardComponent }  from './dashboard.component';
-import { HeroesComponent }     from './heroes.component';
-import { HeroDetailComponent } from './hero-detail.component';
-
-const appRoutes: Routes = [
-  {
-    path: '',
-    redirectTo: '/dashboard',
-    pathMatch: 'full'
-  },
-  {
-    path: 'dashboard',
-    component: DashboardComponent
-  },
-  {
-    path: 'detail/:id',
-    component: HeroDetailComponent
-  },
-  {
-    path: 'heroes',
-    component: HeroesComponent
-  }
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/toh-6/ts/app/main-aot.ts b/public/docs/_examples/toh-6/ts/app/main-aot.ts
new file mode 100644
index 0000000000..f5a9e94209
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/main-aot.ts
@@ -0,0 +1,6 @@
+// #docregion
+import { platformBrowser }    from '@angular/platform-browser';
+
+import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
+
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
diff --git a/public/docs/_examples/toh-6/ts/copy-dist-files.js b/public/docs/_examples/toh-6/ts/copy-dist-files.js
new file mode 100644
index 0000000000..288e35a62c
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/copy-dist-files.js
@@ -0,0 +1,11 @@
+// #docregion
+var fs = require('fs');
+var resources = [
+  'node_modules/core-js/client/shim.min.js',
+  'node_modules/zone.js/dist/zone.min.js'
+];
+resources.map(function(f) {
+  var path = f.split('/');
+  var t = 'aot/' + path[path.length-1];
+  fs.createReadStream(f).pipe(fs.createWriteStream(t));
+});
diff --git a/public/docs/_examples/toh-6/ts/index.html b/public/docs/_examples/toh-6/ts/index.html
index 41faa36c28..12c9ee46df 100644
--- a/public/docs/_examples/toh-6/ts/index.html
+++ b/public/docs/_examples/toh-6/ts/index.html
@@ -1,3 +1,4 @@
+<!-- #docregion -->
 <!DOCTYPE html>
 <html>
   <head>
diff --git a/public/docs/_examples/toh-6/ts/rollup-config.js b/public/docs/_examples/toh-6/ts/rollup-config.js
new file mode 100644
index 0000000000..4b42351c50
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/rollup-config.js
@@ -0,0 +1,24 @@
+// #docregion
+import rollup      from 'rollup'
+import nodeResolve from 'rollup-plugin-node-resolve'
+import commonjs    from 'rollup-plugin-commonjs';
+import uglify      from 'rollup-plugin-uglify'
+
+//paths are relative to the execution path
+export default {
+  entry: 'app/main-aot.js',
+  dest: 'aot/dist/build.js', // output a single application bundle
+  sourceMap: true,
+  sourceMapFile: 'aot/dist/build.js.map',
+  format: 'iife',
+  plugins: [
+      nodeResolve({jsnext: true, module: true}),
+      commonjs({
+        include: [
+          'node_modules/rxjs/**',
+          'node_modules/angular-in-memory-web-api/**'
+          ],
+      }),
+      uglify()
+  ]
+}
diff --git a/public/docs/_examples/toh-6/ts/tsconfig-aot.json b/public/docs/_examples/toh-6/ts/tsconfig-aot.json
new file mode 100644
index 0000000000..1d1983af4c
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/tsconfig-aot.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "types": []
+  },
+
+  "files": [
+    "app/app.module.ts",
+    "app/main-aot.ts",
+    "typings/index.d.ts"
+  ],
+
+  "angularCompilerOptions": {
+   "genDir": "aot",
+   "skipMetadataEmit" : true
+ }
+}
diff --git a/public/docs/_examples/tsconfig.json b/public/docs/_examples/tsconfig.json
index fd1d10190d..ba08b1131d 100644
--- a/public/docs/_examples/tsconfig.json
+++ b/public/docs/_examples/tsconfig.json
@@ -1,6 +1,8 @@
+// this tsconfig is used for protractor tests
+// see _boilerplate/tsconfig.json for the the tsconfig used in examples
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,
@@ -8,6 +10,15 @@
     "experimentalDecorators": true,
     "removeComments": false,
     "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true
-  }
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "node_modules/@types"
+    ]
+  },
+  "files": [
+    "protractor-helpers.ts"
+  ],
+  "include": [
+    "*/e2e-spec.ts"
+  ]
 }
diff --git a/public/docs/_examples/typings.json b/public/docs/_examples/typings.json
index 7da31ca0af..ac640054e5 100644
--- a/public/docs/_examples/typings.json
+++ b/public/docs/_examples/typings.json
@@ -1,7 +1,13 @@
 {
   "globalDependencies": {
+    "angular": "registry:dt/angular#1.5.0+20160829152510",
+    "angular-animate": "registry:dt/angular-animate#1.5.0+20160709061515",
+    "angular-mocks": "registry:dt/angular-mocks#1.5.0+20160608104721",
+    "angular-resource": "registry:dt/angular-resource#1.5.0+20160613142217",
+    "angular-route": "registry:dt/angular-route#1.3.0+20160317120654",
     "core-js": "registry:dt/core-js#0.0.0+20160725163759",
     "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
+    "jquery": "registry:dt/jquery#1.10.0+20160704162008",
     "node": "registry:dt/node#6.0.0+20160909174046"
   }
 }
diff --git a/public/docs/_examples/upgrade-adapter/e2e-spec.ts.disabled b/public/docs/_examples/upgrade-adapter/e2e-spec.ts.disabled
index de7ffa68cc..271224cccc 100644
--- a/public/docs/_examples/upgrade-adapter/e2e-spec.ts.disabled
+++ b/public/docs/_examples/upgrade-adapter/e2e-spec.ts.disabled
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 describe('Upgrade Tests', function () {
 
   // Protractor doesn't support the UpgradeAdapter's asynchronous
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/README.md b/public/docs/_examples/upgrade-phonecat-1-typescript/README.md
index dafa67ece9..5770656e86 100644
--- a/public/docs/_examples/upgrade-phonecat-1-typescript/README.md
+++ b/public/docs/_examples/upgrade-phonecat-1-typescript/README.md
@@ -12,9 +12,6 @@ The following changes from vanilla Phonecat are applied:
   in index.html and karma.conf.ng1.js.
 * E2E tests have been moved to the parent directory, where `gulp run-e2e-tests` can
   discover and run them along with all the other examples.
-* Angular 1 typings (from DefinitelyTyped) are added to typings-ng1 so that
-  TypeScript can recognize Angular 1 code. (typings.json comes from boilerplate
-  so we can't add them there).
 * Most of the phone JSON and image data removed in the interest of keeping
   repo weight down. Keeping enough to retain testability of the app.
 
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.ts b/public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.ts.disabled
similarity index 92%
rename from public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.ts
rename to public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.ts.disabled
index 48b0f9baa9..4598a7f6dc 100644
--- a/public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.ts
+++ b/public/docs/_examples/upgrade-phonecat-1-typescript/e2e-spec.ts.disabled
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by, ElementFinder } from 'protractor';
+import { setProtractorToNg1Mode } from '../protractor-helpers';
 
 // Angular E2E Testing Guide:
 // https://docs.angularjs.org/guide/e2e-testing
@@ -43,7 +45,7 @@ describe('PhoneCat Application', function() {
       let phoneNameColumn = element.all(by.repeater('phone in $ctrl.phones').column('phone.name'));
 
       function getNames() {
-        return phoneNameColumn.map(function(elem) {
+        return phoneNameColumn.map(function(elem: ElementFinder) {
           return elem.getText();
         });
       }
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-animate/index.d.ts b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-animate/index.d.ts
deleted file mode 100644
index c720d9293a..0000000000
--- a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-animate/index.d.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-// Generated by typings
-// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/f0b2681b481397d0c03557ac2ac4d70c1c61c464/angularjs/angular-animate.d.ts
-declare module "angular-animate" {
-    var _: string;
-    export = _;
-}
-
-/**
- * ngAnimate module (angular-animate.js)
- */
-declare namespace angular.animate {
-    interface IAnimateFactory {
-        (...args: any[]): IAnimateCallbackObject;
-    }
-
-    interface IAnimateCallbackObject {
-        eventFn?: (element: IAugmentedJQuery, doneFunction: Function, options: IAnimationOptions) => any;
-        setClass?: (element: IAugmentedJQuery, addedClasses: string, removedClasses: string, doneFunction: Function, options: IAnimationOptions) => any;
-        addClass?: (element: IAugmentedJQuery, addedClasses: string, doneFunction: Function, options: IAnimationOptions) => any;
-        removeClass?: (element: IAugmentedJQuery, removedClasses: string, doneFunction: Function, options: IAnimationOptions) => any;
-        enter?: (element: IAugmentedJQuery, doneFunction: Function, options: IAnimationOptions) => any;
-        leave?: (element: IAugmentedJQuery, doneFunction: Function, options: IAnimationOptions) => any;
-        move?: (element: IAugmentedJQuery, doneFunction: Function, options: IAnimationOptions) => any;
-        animate?: (element: IAugmentedJQuery, fromStyles: string, toStyles: string, doneFunction: Function, options: IAnimationOptions) => any;
-    }
-
-    interface IAnimationPromise extends IPromise<void> {}
-
-    /**
-     * AnimateService
-     * see http://docs.angularjs.org/api/ngAnimate/service/$animate
-     */
-    interface IAnimateService {
-        /**
-         * Sets up an event listener to fire whenever the animation event has fired on the given element or among any of its children.
-         *
-         * @param event the animation event that will be captured (e.g. enter, leave, move, addClass, removeClass, etc...)
-         * @param container the container element that will capture each of the animation events that are fired on itself as well as among its children
-         * @param callback the callback function that will be fired when the listener is triggered
-         */
-        on(event: string, container: JQuery, callback: Function): void;
-
-        /**
-         * Deregisters an event listener based on the event which has been associated with the provided element.
-         *
-         * @param event the animation event (e.g. enter, leave, move, addClass, removeClass, etc...)
-         * @param container the container element the event listener was placed on
-         * @param callback the callback function that was registered as the listener
-         */
-        off(event: string, container?: JQuery, callback?: Function): void;
-
-        /**
-         * Associates the provided element with a host parent element to allow the element to be animated even if it exists outside of the DOM structure of the Angular application.
-         *
-         * @param element the external element that will be pinned
-         * @param parentElement the host parent element that will be associated with the external element
-         */
-        pin(element: JQuery, parentElement: JQuery): void;
-
-        /**
-        * Globally enables / disables animations.
-        *
-        * @param element If provided then the element will be used to represent the enable/disable operation.
-        * @param value If provided then set the animation on or off.
-        * @returns current animation state
-        */
-        enabled(element: JQuery, value?: boolean): boolean;
-        enabled(value: boolean): boolean;
-
-        /**
-         * Cancels the provided animation.
-         */
-        cancel(animationPromise: IAnimationPromise): void;
-
-        /**
-         * Performs an inline animation on the element.
-         *
-         * @param element the element that will be the focus of the animation
-         * @param from a collection of CSS styles that will be applied to the element at the start of the animation
-         * @param to a collection of CSS styles that the element will animate towards
-         * @param className an optional CSS class that will be added to the element for the duration of the animation (the default class is 'ng-inline-animate')
-         * @param options an optional collection of styles that will be picked up by the CSS transition/animation
-         * @returns the animation callback promise
-         */
-        animate(element: JQuery, from: any, to: any, className?: string, options?: IAnimationOptions): IAnimationPromise;
-
-        /**
-         * Appends the element to the parentElement element that resides in the document and then runs the enter animation.
-         *
-         * @param element the element that will be the focus of the enter animation
-         * @param parentElement the parent element of the element that will be the focus of the enter animation
-         * @param afterElement the sibling element (which is the previous element) of the element that will be the focus of the enter animation
-         * @param options an optional collection of styles that will be picked up by the CSS transition/animation
-         * @returns the animation callback promise
-         */
-        enter(element: JQuery, parentElement: JQuery, afterElement?: JQuery, options?: IAnimationOptions): IAnimationPromise;
-
-        /**
-         * Runs the leave animation operation and, upon completion, removes the element from the DOM.
-         *
-         * @param element the element that will be the focus of the leave animation
-         * @param options an optional collection of styles that will be picked up by the CSS transition/animation
-         * @returns the animation callback promise
-         */
-        leave(element: JQuery, options?: IAnimationOptions): IAnimationPromise;
-
-        /**
-         * Fires the move DOM operation. Just before the animation starts, the animate service will either append
-         * it into the parentElement container or add the element directly after the afterElement element if present.
-         * Then the move animation will be run.
-         *
-         * @param element the element that will be the focus of the move animation
-         * @param parentElement the parent element of the element that will be the focus of the move animation
-         * @param afterElement the sibling element (which is the previous element) of the element that will be the focus of the move animation
-         * @returns the animation callback promise
-         */
-        move(element: JQuery, parentElement: JQuery, afterElement?: JQuery): IAnimationPromise;
-
-        /**
-         * Triggers a custom animation event based off the className variable and then attaches the className
-         * value to the element as a CSS class.
-         *
-         * @param element the element that will be animated
-         * @param className the CSS class that will be added to the element and then animated
-         * @param options an optional collection of styles that will be picked up by the CSS transition/animation
-         * @returns the animation callback promise
-         */
-        addClass(element: JQuery, className: string, options?: IAnimationOptions): IAnimationPromise;
-
-        /**
-         * Triggers a custom animation event based off the className variable and then removes the CSS class
-         * provided by the className value from the element.
-         *
-         * @param element the element that will be animated
-         * @param className the CSS class that will be animated and then removed from the element
-         * @param options an optional collection of styles that will be picked up by the CSS transition/animation
-         * @returns the animation callback promise
-         */
-        removeClass(element: JQuery, className: string, options?: IAnimationOptions): IAnimationPromise;
-
-        /**
-         * Adds and/or removes the given CSS classes to and from the element. Once complete, the done() callback
-         * will be fired (if provided).
-         *
-         * @param element the element which will have its CSS classes changed removed from it
-         * @param add the CSS classes which will be added to the element
-         * @param remove the CSS class which will be removed from the element CSS classes have been set on the element
-         * @param options an optional collection of styles that will be picked up by the CSS transition/animation
-         * @returns the animation callback promise
-         */
-        setClass(element: JQuery, add: string, remove: string, options?: IAnimationOptions): IAnimationPromise;
-    }
-
-    /**
-     * AnimateProvider
-     * see http://docs.angularjs.org/api/ngAnimate/provider/$animateProvider
-     */
-    interface IAnimateProvider {
-        /**
-         * Registers a new injectable animation factory function.
-         *
-         * @param name The name of the animation.
-         * @param factory The factory function that will be executed to return the animation object.
-         */
-        register(name: string, factory: IAnimateFactory): void;
-
-        /**
-         * Gets and/or sets the CSS class expression that is checked when performing an animation.
-         *
-         * @param expression The className expression which will be checked against all animations.
-         * @returns The current CSS className expression value. If null then there is no expression value.
-         */
-        classNameFilter(expression?: RegExp): RegExp;
-    }
-
-    /**
-     * Angular Animation Options
-     * see https://docs.angularjs.org/api/ngAnimate/#applying-directive-specific-styles-to-an-animation
-     */
-    interface IAnimationOptions {
-        /**
-         * The ending CSS styles (a key/value object) that will be applied across the animation via a CSS transition.
-         */
-        to?: Object;
-
-        /**
-         * The starting CSS styles (a key/value object) that will be applied at the start of the animation.
-         */
-        from?: Object;
-
-        /**
-         * The DOM event (e.g. enter, leave, move). When used, a generated CSS class of ng-EVENT and
-         * ng-EVENT-active will be applied to the element during the animation. Multiple events can be provided when
-         * spaces are used as a separator. (Note that this will not perform any DOM operation.)
-         */
-        event?: string;
-
-        /**
-         * The CSS easing value that will be applied to the transition or keyframe animation (or both).
-         */
-        easing?: string;
-
-        /**
-         * The raw CSS transition style that will be used (e.g. 1s linear all).
-         */
-        transition?: string;
-
-        /**
-         * The raw CSS keyframe animation style that will be used (e.g. 1s my_animation linear).
-         */
-        keyframe?: string;
-
-        /**
-         * A space separated list of CSS classes that will be added to the element and spread across the animation.
-         */
-        addClass?: string;
-
-        /**
-         * A space separated list of CSS classes that will be removed from the element and spread across
-         * the animation.
-         */
-        removeClass?: string;
-
-        /**
-         * A number value representing the total duration of the transition and/or keyframe (note that a value
-         * of 1 is 1000ms). If a value of 0 is provided then the animation will be skipped entirely.
-         */
-        duration?: number;
-
-        /**
-         * A number value representing the total delay of the transition and/or keyframe (note that a value of
-         * 1 is 1000ms). If a value of true is used then whatever delay value is detected from the CSS classes will be
-         * mirrored on the elements styles (e.g. by setting delay true then the style value of the element will be
-         * transition-delay: DETECTED_VALUE). Using true is useful when you want the CSS classes and inline styles to
-         * all share the same CSS delay value.
-         */
-        delay?: number;
-
-        /**
-         * A numeric time value representing the delay between successively animated elements (Click here to
-         * learn how CSS-based staggering works in ngAnimate.)
-         */
-        stagger?: number;
-
-        /**
-         * The numeric index representing the stagger item (e.g. a value of 5 is equal to the sixth item
-         * in the stagger; therefore when a stagger option value of 0.1 is used then there will be a stagger delay of 600ms)
-         * applyClassesEarly - Whether or not the classes being added or removed will be used when detecting the animation.
-         * This is set by $animate when enter/leave/move animations are fired to ensure that the CSS classes are resolved in time.
-         * (Note that this will prevent any transitions from occuring on the classes being added and removed.)
-         */
-        staggerIndex?: number;
-    }
-
-    interface IAnimateCssRunner {
-        /**
-         * Starts the animation
-         *
-         * @returns The animation runner with a done function for supplying a callback.
-         */
-        start(): IAnimateCssRunnerStart;
-
-        /**
-         * Ends (aborts) the animation
-         */
-        end(): void;
-    }
-
-    interface IAnimateCssRunnerStart extends IPromise<void> {
-        /**
-         * Allows you to add done callbacks to the running animation
-         *
-         * @param callbackFn: the callback function to be run
-         */
-        done(callbackFn: (animationFinished: boolean) => void): void;
-    }
-
-    /**
-     * AnimateCssService
-     * see http://docs.angularjs.org/api/ngAnimate/service/$animateCss
-     */
-    interface IAnimateCssService {
-        (element: JQuery, animateCssOptions: IAnimationOptions): IAnimateCssRunner;
-    }
-}
-
-declare module angular {
-    interface IModule {
-        animation(name: string, animationFactory: angular.animate.IAnimateFactory): IModule;
-        animation(name: string, inlineAnnotatedFunction: any[]): IModule;
-        animation(object: Object): IModule;
-    }
-
-}
\ No newline at end of file
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-animate/typings.json b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-animate/typings.json
deleted file mode 100644
index ea2467c89a..0000000000
--- a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-animate/typings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "resolution": "main",
-  "tree": {
-    "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/f0b2681b481397d0c03557ac2ac4d70c1c61c464/angularjs/angular-animate.d.ts",
-    "raw": "registry:dt/angular-animate#1.5.0+20160407085121",
-    "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/f0b2681b481397d0c03557ac2ac4d70c1c61c464/angularjs/angular-animate.d.ts"
-  }
-}
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-mocks/index.d.ts b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-mocks/index.d.ts
deleted file mode 100644
index fd6e92534b..0000000000
--- a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-mocks/index.d.ts
+++ /dev/null
@@ -1,339 +0,0 @@
-// Generated by typings
-// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/5b7257019ae959533341a715b339d2562bbf9b85/angularjs/angular-mocks.d.ts
-declare module "angular-mocks/ngMock" {
-    var _: string;
-    export = _;
-}
-
-declare module "angular-mocks/ngMockE2E" {
-    var _: string;
-    export = _;
-}
-
-declare module "angular-mocks/ngAnimateMock" {
-    var _: string;
-    export = _;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// ngMock module (angular-mocks.js)
-///////////////////////////////////////////////////////////////////////////////
-declare namespace angular {
-
-    ///////////////////////////////////////////////////////////////////////////
-    // AngularStatic
-    // We reopen it to add the MockStatic definition
-    ///////////////////////////////////////////////////////////////////////////
-    interface IAngularStatic {
-        mock: IMockStatic;
-    }
-
-    // see https://docs.angularjs.org/api/ngMock/function/angular.mock.inject
-    interface IInjectStatic {
-        (...fns: Function[]): any;
-        (...inlineAnnotatedConstructor: any[]): any; // this overload is undocumented, but works
-        strictDi(val?: boolean): void;
-    }
-
-    interface IMockStatic {
-        // see https://docs.angularjs.org/api/ngMock/function/angular.mock.dump
-        dump(obj: any): string;
-
-        inject: IInjectStatic
-
-        // see https://docs.angularjs.org/api/ngMock/function/angular.mock.module
-        module: {
-          (...modules: any[]): any;
-          sharedInjector(): void;
-        }
-
-        // see https://docs.angularjs.org/api/ngMock/type/angular.mock.TzDate
-        TzDate(offset: number, timestamp: number): Date;
-        TzDate(offset: number, timestamp: string): Date;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // ExceptionHandlerService
-    // see https://docs.angularjs.org/api/ngMock/service/$exceptionHandler
-    // see https://docs.angularjs.org/api/ngMock/provider/$exceptionHandlerProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface IExceptionHandlerProvider extends IServiceProvider {
-        mode(mode: string): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // TimeoutService
-    // see https://docs.angularjs.org/api/ngMock/service/$timeout
-    // Augments the original service
-    ///////////////////////////////////////////////////////////////////////////
-    interface ITimeoutService {
-        flush(delay?: number): void;
-        flushNext(expectedDelay?: number): void;
-        verifyNoPendingTasks(): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // IntervalService
-    // see https://docs.angularjs.org/api/ngMock/service/$interval
-    // Augments the original service
-    ///////////////////////////////////////////////////////////////////////////
-    interface IIntervalService {
-        flush(millis?: number): number;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // LogService
-    // see https://docs.angularjs.org/api/ngMock/service/$log
-    // Augments the original service
-    ///////////////////////////////////////////////////////////////////////////
-    interface ILogService {
-        assertEmpty(): void;
-        reset(): void;
-    }
-
-    interface ILogCall {
-        logs: string[];
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // ControllerService mock
-    // see https://docs.angularjs.org/api/ngMock/service/$controller
-    // This interface extends http://docs.angularjs.org/api/ng.$controller
-    ///////////////////////////////////////////////////////////////////////////
-    interface IControllerService {
-      // Although the documentation doesn't state this, locals are optional
-      <T>(controllerConstructor: new (...args: any[]) => T, locals?: any, bindings?: any): T;
-      <T>(controllerConstructor: Function, locals?: any, bindings?: any): T;
-      <T>(controllerName: string, locals?: any, bindings?: any): T;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // ComponentControllerService
-    // see https://docs.angularjs.org/api/ngMock/service/$componentController
-    ///////////////////////////////////////////////////////////////////////////
-    interface IComponentControllerService {
-      // TBinding is an interface exposed by a component as per John Papa's style guide
-      // https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#accessible-members-up-top
-      <T, TBinding>(componentName: string, locals: { $scope: IScope, [key: string]: any }, bindings?: TBinding, ident?: string): T;
-    }
-
-
-    ///////////////////////////////////////////////////////////////////////////
-    // HttpBackendService
-    // see https://docs.angularjs.org/api/ngMock/service/$httpBackend
-    ///////////////////////////////////////////////////////////////////////////
-    interface IHttpBackendService {
-        /**
-          * Flushes all pending requests using the trained responses.
-          * @param count Number of responses to flush (in the order they arrived). If undefined, all pending requests will be flushed.
-          */
-        flush(count?: number): void;
-
-        /**
-          * Resets all request expectations, but preserves all backend definitions.
-          */
-        resetExpectations(): void;
-
-        /**
-          * Verifies that all of the requests defined via the expect api were made. If any of the requests were not made, verifyNoOutstandingExpectation throws an exception.
-          */
-        verifyNoOutstandingExpectation(): void;
-
-        /**
-          * Verifies that there are no outstanding requests that need to be flushed.
-          */
-        verifyNoOutstandingRequest(): void;
-
-        /**
-          * Creates a new request expectation.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, object, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param method HTTP method.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        expect(method: string, url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object | ((object: Object) => boolean)) :mock.IRequestHandler;
-
-        /**
-          * Creates a new request expectation for DELETE requests.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, object, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url is as expected.
-          * @param headers HTTP headers object to be compared with the HTTP headers in the request.
-        */
-        expectDELETE(url: string | RegExp | ((url: string) => boolean), headers?: Object): mock.IRequestHandler;
-
-        /**
-          * Creates a new request expectation for GET requests.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, object, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param headers HTTP headers object to be compared with the HTTP headers in the request.
-          */
-        expectGET(url: string | RegExp | ((url: string) => boolean), headers?: Object): mock.IRequestHandler;
-
-        /**
-          * Creates a new request expectation for HEAD requests.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, object, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param headers HTTP headers object to be compared with the HTTP headers in the request.
-          */
-        expectHEAD(url: string | RegExp | ((url: string) => boolean), headers?: Object): mock.IRequestHandler;
-
-        /**
-          * Creates a new request expectation for JSONP requests.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          */
-        expectJSONP(url: string | RegExp | ((url: string) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new request expectation for PATCH requests.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, object, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        expectPATCH(url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object): mock.IRequestHandler;
-
-        /**
-          * Creates a new request expectation for POST requests.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, object, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        expectPOST(url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object): mock.IRequestHandler;
-
-        /**
-          * Creates a new request expectation for PUT requests.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, object, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        expectPUT(url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param method HTTP method.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        when(method: string, url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object | ((object: Object) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition for DELETE requests.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        whenDELETE(url: string | RegExp | ((url: string) => boolean), headers?: Object | ((object: Object) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition for GET requests.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        whenGET(url: string | RegExp | ((url: string) => boolean), headers?: Object | ((object: Object) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition for HEAD requests.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        whenHEAD(url: string | RegExp | ((url: string) => boolean), headers?: Object | ((object: Object) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition for JSONP requests.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        whenJSONP(url: string | RegExp | ((url: string) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition for PATCH requests.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        whenPATCH(url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object | ((object: Object) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition for POST requests.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        whenPOST(url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object | ((object: Object) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition for PUT requests.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        whenPUT(url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object | ((object: Object) => boolean)): mock.IRequestHandler;
-    }
-
-    export module mock {
-        // returned interface by the the mocked HttpBackendService expect/when methods
-        interface IRequestHandler {
-
-            /**
-              * Controls the response for a matched request using a function to construct the response.
-              * Returns the RequestHandler object for possible overrides.
-              * @param func Function that receives the request HTTP method, url, data, and headers and returns an array containing response status (number), data, headers, and status text.
-              */
-            respond(func: ((method: string, url: string, data: string | Object, headers: Object) => [number, string | Object, Object, string])): IRequestHandler;
-
-            /**
-              * Controls the response for a matched request using supplied static data to construct the response.
-              * Returns the RequestHandler object for possible overrides.
-              * @param status HTTP status code to add to the response.
-              * @param data Data to add to the response.
-              * @param headers Headers object to add to the response.
-              * @param responseText Response text to add to the response.
-              */
-            respond(status: number, data: string | Object, headers?: Object, responseText?: string): IRequestHandler;
-
-            /**
-              * Controls the response for a matched request using the HTTP status code 200 and supplied static data to construct the response.
-              * Returns the RequestHandler object for possible overrides.
-              * @param data Data to add to the response.
-              * @param headers Headers object to add to the response.
-              * @param responseText Response text to add to the response.
-              */
-            respond(data: string | Object, headers?: Object, responseText?: string): IRequestHandler;
-
-            // Available when ngMockE2E is loaded
-            /**
-              * Any request matching a backend definition or expectation with passThrough handler will be passed through to the real backend (an XHR request will be made to the server.)
-              */
-            passThrough(): IRequestHandler;
-        }
-
-    }
-
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// functions attached to global object (window)
-///////////////////////////////////////////////////////////////////////////////
-//Use `angular.mock.module` instead of `module`, as `module` conflicts with commonjs.
-//declare var module: (...modules: any[]) => any;
-declare var inject: angular.IInjectStatic;
\ No newline at end of file
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-mocks/typings.json b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-mocks/typings.json
deleted file mode 100644
index 4e51b0e278..0000000000
--- a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-mocks/typings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "resolution": "main",
-  "tree": {
-    "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/5b7257019ae959533341a715b339d2562bbf9b85/angularjs/angular-mocks.d.ts",
-    "raw": "registry:dt/angular-mocks#1.3.0+20160425155016",
-    "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/5b7257019ae959533341a715b339d2562bbf9b85/angularjs/angular-mocks.d.ts"
-  }
-}
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-resource/index.d.ts b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-resource/index.d.ts
deleted file mode 100644
index 3735f9430c..0000000000
--- a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-resource/index.d.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-// Generated by typings
-// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/e684481e0cd360db62fd6213ca7248245315e8a2/angularjs/angular-resource.d.ts
-declare module 'angular-resource' {
-    var _: string;
-    export = _;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// ngResource module (angular-resource.js)
-///////////////////////////////////////////////////////////////////////////////
-declare namespace angular.resource {
-
-    /**
-     * Currently supported options for the $resource factory options argument.
-     */
-    interface IResourceOptions {
-        /**
-         * If true then the trailing slashes from any calculated URL will be stripped (defaults to true)
-         */
-        stripTrailingSlashes?: boolean;
-        /**
-         * If true, the request made by a "non-instance" call will be cancelled (if not already completed) by calling
-         * $cancelRequest() on the call's return value. This can be overwritten per action. (Defaults to false.)
-         */
-        cancellable?: boolean;
-    }
-
-
-    ///////////////////////////////////////////////////////////////////////////
-    // ResourceService
-    // see http://docs.angularjs.org/api/ngResource.$resource
-    // Most part of the following definitions were achieved by analyzing the
-    // actual implementation, since the documentation doesn't seem to cover
-    // that deeply.
-    ///////////////////////////////////////////////////////////////////////////
-    interface IResourceService {
-        (url: string, paramDefaults?: any,
-            /** example:  {update: { method: 'PUT' }, delete: deleteDescriptor }
-             where deleteDescriptor : IActionDescriptor */
-            actions?: any, options?: IResourceOptions): IResourceClass<IResource<any>>;
-        <T, U>(url: string, paramDefaults?: any,
-            /** example:  {update: { method: 'PUT' }, delete: deleteDescriptor }
-             where deleteDescriptor : IActionDescriptor */
-            actions?: any, options?: IResourceOptions): U;
-        <T>(url: string, paramDefaults?: any,
-            /** example:  {update: { method: 'PUT' }, delete: deleteDescriptor }
-             where deleteDescriptor : IActionDescriptor */
-            actions?: any, options?: IResourceOptions): IResourceClass<T>;
-    }
-
-    // Just a reference to facilitate describing new actions
-    interface IActionDescriptor {
-        method: string;
-        params?: any;
-        url?: string;
-        isArray?: boolean;
-        transformRequest?: angular.IHttpRequestTransformer | angular.IHttpRequestTransformer[];
-        transformResponse?: angular.IHttpResponseTransformer | angular.IHttpResponseTransformer[];
-        headers?: any;
-        cache?: boolean | angular.ICacheObject;
-        /**
-         * Note: In contrast to $http.config, promises are not supported in $resource, because the same value
-         * would be used for multiple requests. If you are looking for a way to cancel requests, you should
-         * use the cancellable option.
-         */
-        timeout?: number
-        cancellable?: boolean;
-        withCredentials?: boolean;
-        responseType?: string;
-        interceptor?: IHttpInterceptor;
-    }
-
-    // Allow specify more resource methods
-    // No need to add duplicates for all four overloads.
-    interface IResourceMethod<T> {
-        (): T;
-        (params: Object): T;
-        (success: Function, error?: Function): T;
-        (params: Object, success: Function, error?: Function): T;
-        (params: Object, data: Object, success?: Function, error?: Function): T;
-    }
-
-    // Allow specify resource moethod which returns the array
-    // No need to add duplicates for all four overloads.
-    interface IResourceArrayMethod<T> {
-        (): IResourceArray<T>;
-        (params: Object): IResourceArray<T>;
-        (success: Function, error?: Function): IResourceArray<T>;
-        (params: Object, success: Function, error?: Function): IResourceArray<T>;
-        (params: Object, data: Object, success?: Function, error?: Function): IResourceArray<T>;
-    }
-
-    // Baseclass for everyresource with default actions.
-    // If you define your new actions for the resource, you will need
-    // to extend this interface and typecast the ResourceClass to it.
-    //
-    // In case of passing the first argument as anything but a function,
-    // it's gonna be considered data if the action method is POST, PUT or
-    // PATCH (in other words, methods with body). Otherwise, it's going
-    // to be considered as parameters to the request.
-    // https://github.com/angular/angular.js/blob/v1.2.0/src/ngResource/resource.js#L461-L465
-    //
-    // Only those methods with an HTTP body do have 'data' as first parameter:
-    // https://github.com/angular/angular.js/blob/v1.2.0/src/ngResource/resource.js#L463
-    // More specifically, those methods are POST, PUT and PATCH:
-    // https://github.com/angular/angular.js/blob/v1.2.0/src/ngResource/resource.js#L432
-    //
-    // Also, static calls always return the IResource (or IResourceArray) retrieved
-    // https://github.com/angular/angular.js/blob/v1.2.0/src/ngResource/resource.js#L538-L549
-    interface IResourceClass<T> {
-        new(dataOrParams? : any) : T;
-        get: IResourceMethod<T>;
-
-        query: IResourceArrayMethod<T>;
-
-        save: IResourceMethod<T>;
-
-        remove: IResourceMethod<T>;
-
-        delete: IResourceMethod<T>;
-    }
-
-    // Instance calls always return the the promise of the request which retrieved the object
-    // https://github.com/angular/angular.js/blob/v1.2.0/src/ngResource/resource.js#L538-L546
-    interface IResource<T> {
-        $get(): angular.IPromise<T>;
-        $get(params?: Object, success?: Function, error?: Function): angular.IPromise<T>;
-        $get(success: Function, error?: Function): angular.IPromise<T>;
-
-        $query(): angular.IPromise<IResourceArray<T>>;
-        $query(params?: Object, success?: Function, error?: Function): angular.IPromise<IResourceArray<T>>;
-        $query(success: Function, error?: Function): angular.IPromise<IResourceArray<T>>;
-
-        $save(): angular.IPromise<T>;
-        $save(params?: Object, success?: Function, error?: Function): angular.IPromise<T>;
-        $save(success: Function, error?: Function): angular.IPromise<T>;
-
-        $remove(): angular.IPromise<T>;
-        $remove(params?: Object, success?: Function, error?: Function): angular.IPromise<T>;
-        $remove(success: Function, error?: Function): angular.IPromise<T>;
-
-        $delete(): angular.IPromise<T>;
-        $delete(params?: Object, success?: Function, error?: Function): angular.IPromise<T>;
-        $delete(success: Function, error?: Function): angular.IPromise<T>;
-
-        $cancelRequest(): void;
-
-        /** the promise of the original server interaction that created this instance. **/
-        $promise : angular.IPromise<T>;
-        $resolved : boolean;
-        toJSON(): T;
-    }
-
-    /**
-     * Really just a regular Array object with $promise and $resolve attached to it
-     */
-    interface IResourceArray<T> extends Array<T & IResource<T>> {
-        /** the promise of the original server interaction that created this collection. **/
-        $promise : angular.IPromise<IResourceArray<T>>;
-        $resolved : boolean;
-    }
-
-    /** when creating a resource factory via IModule.factory */
-    interface IResourceServiceFactoryFunction<T> {
-        ($resource: angular.resource.IResourceService): IResourceClass<T>;
-        <U extends IResourceClass<T>>($resource: angular.resource.IResourceService): U;
-    }
-
-    // IResourceServiceProvider used to configure global settings
-    interface IResourceServiceProvider extends angular.IServiceProvider {
-
-        defaults: IResourceOptions;
-    }
-
-}
-
-/** extensions to base ng based on using angular-resource */
-declare namespace angular {
-
-    interface IModule {
-        /** creating a resource service factory */
-        factory(name: string, resourceServiceFactoryFunction: angular.resource.IResourceServiceFactoryFunction<any>): IModule;
-    }
-}
-
-interface Array<T>
-{
-    /** the promise of the original server interaction that created this collection. **/
-    $promise : angular.IPromise<Array<T>>;
-    $resolved : boolean;
-}
\ No newline at end of file
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-resource/typings.json b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-resource/typings.json
deleted file mode 100644
index b60eafd673..0000000000
--- a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-resource/typings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "resolution": "main",
-  "tree": {
-    "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/e684481e0cd360db62fd6213ca7248245315e8a2/angularjs/angular-resource.d.ts",
-    "raw": "registry:dt/angular-resource#1.5.0+20160412142209",
-    "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/e684481e0cd360db62fd6213ca7248245315e8a2/angularjs/angular-resource.d.ts"
-  }
-}
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-route/index.d.ts b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-route/index.d.ts
deleted file mode 100644
index 5fad393d0a..0000000000
--- a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-route/index.d.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-// Generated by typings
-// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/7de6c3dd94feaeb21f20054b9f30d5dabc5efabd/angularjs/angular-route.d.ts
-declare module "angular-route" {
-    var _: string;
-    export = _;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// ngRoute module (angular-route.js)
-///////////////////////////////////////////////////////////////////////////////
-declare namespace angular.route {
-
-    ///////////////////////////////////////////////////////////////////////////
-    // RouteParamsService
-    // see http://docs.angularjs.org/api/ngRoute.$routeParams
-    ///////////////////////////////////////////////////////////////////////////
-    interface IRouteParamsService {
-        [key: string]: any;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // RouteService
-    // see http://docs.angularjs.org/api/ngRoute.$route
-    // see http://docs.angularjs.org/api/ngRoute.$routeProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface IRouteService {
-        reload(): void;
-        routes: any;
-
-        // May not always be available. For instance, current will not be available
-        // to a controller that was not initialized as a result of a route maching.
-        current?: ICurrentRoute;
-
-        /**
-         * Causes $route service to update the current URL, replacing current route parameters with those specified in newParams.
-         * Provided property names that match the route's path segment definitions will be interpolated into the
-         * location's path, while remaining properties will be treated as query params.
-         *
-         * @param newParams Object.<string, string> mapping of URL parameter names to values
-         */
-        updateParams(newParams:{[key:string]:string}): void;
-
-    }
-
-    type InlineAnnotatedFunction = Function|Array<string|Function>
-
-    /**
-     * see http://docs.angularjs.org/api/ngRoute/provider/$routeProvider#when for API documentation
-     */
-    interface IRoute {
-        /**
-         * {(string|function()=}
-         * Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.
-         */
-        controller?: string|InlineAnnotatedFunction;
-        /**
-         * A controller alias name. If present the controller will be published to scope under the controllerAs name.
-         */
-        controllerAs?: string;
-        /**
-         * Undocumented?
-         */
-        name?: string;
-        /**
-         * {string=|function()=}
-         * Html template as a string or a function that returns an html template as a string which should be used by ngView or ngInclude directives. This property takes precedence over templateUrl.
-         *
-         * If template is a function, it will be called with the following parameters:
-         *
-         * {Array.<Object>} - route parameters extracted from the current $location.path() by applying the current route
-         */
-        template?: string|{($routeParams?: angular.route.IRouteParamsService) : string;}
-        /**
-         * {string=|function()=}
-         * Path or function that returns a path to an html template that should be used by ngView.
-         *
-         * If templateUrl is a function, it will be called with the following parameters:
-         *
-         * {Array.<Object>} - route parameters extracted from the current $location.path() by applying the current route
-         */
-        templateUrl?: string|{ ($routeParams?: angular.route.IRouteParamsService): string; }
-        /**
-         * {Object.<string, function>=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired. If any of the promises are rejected the $routeChangeError event is fired. The map object is:
-         *
-         * - key - {string}: a name of a dependency to be injected into the controller.
-         * - factory - {string|function}: If string then it is an alias for a service. Otherwise if function, then it is injected and the return value is treated as the dependency. If the result is a promise, it is resolved before its value is injected into the controller. Be aware that ngRoute.$routeParams will still refer to the previous route within these resolve functions. Use $route.current.params to access the new route parameters, instead.
-         */
-        resolve?: {[key: string]: any};
-        /**
-         * {(string|function())=}
-         * Value to update $location path with and trigger route redirection.
-         *
-         * If redirectTo is a function, it will be called with the following parameters:
-         *
-         * - {Object.<string>} - route parameters extracted from the current $location.path() by applying the current route templateUrl.
-         * - {string} - current $location.path()
-         * - {Object} - current $location.search()
-         * - The custom redirectTo function is expected to return a string which will be used to update $location.path() and $location.search().
-         */
-        redirectTo?: string|{($routeParams?: angular.route.IRouteParamsService, $locationPath?: string, $locationSearch?: any) : string};
-        /**
-         * Reload route when only $location.search() or $location.hash() changes.
-         *
-         * This option defaults to true. If the option is set to false and url in the browser changes, then $routeUpdate event is broadcasted on the root scope.
-         */
-        reloadOnSearch?: boolean;
-        /**
-         * Match routes without being case sensitive
-         *
-         * This option defaults to false. If the option is set to true, then the particular route can be matched without being case sensitive
-         */
-        caseInsensitiveMatch?: boolean;
-    }
-
-    // see http://docs.angularjs.org/api/ng.$route#current
-    interface ICurrentRoute extends IRoute {
-        locals: {
-            [index: string]: any;
-            $scope: IScope;
-            $template: string;
-        };
-
-        params: any;
-    }
-
-    interface IRouteProvider extends IServiceProvider {
-		/**
-         * Match routes without being case sensitive
-         *
-         * This option defaults to false. If the option is set to true, then the particular route can be matched without being case sensitive
-         */
-        caseInsensitiveMatch?: boolean;
-        /**
-         * Sets route definition that will be used on route change when no other route definition is matched.
-         *
-         * @params Mapping information to be assigned to $route.current.
-         */
-        otherwise(params: IRoute): IRouteProvider;
-        /**
-         * Adds a new route definition to the $route service.
-         *
-         * @param path Route path (matched against $location.path). If $location.path contains redundant trailing slash or is missing one, the route will still match and the $location.path will be updated to add or drop the trailing slash to exactly match the route definition.
-         *
-         * - path can contain named groups starting with a colon: e.g. :name. All characters up to the next slash are matched and stored in $routeParams under the given name when the route matches.
-         * - path can contain named groups starting with a colon and ending with a star: e.g.:name*. All characters are eagerly stored in $routeParams under the given name when the route matches.
-         * - path can contain optional named groups with a question mark: e.g.:name?.
-         *
-         * For example, routes like /color/:color/largecode/:largecode*\/edit will match /color/brown/largecode/code/with/slashes/edit and extract: color: brown and largecode: code/with/slashes.
-         *
-         * @param route Mapping information to be assigned to $route.current on route match.
-         */
-        when(path: string, route: IRoute): IRouteProvider;
-    }
-}
\ No newline at end of file
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-route/typings.json b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-route/typings.json
deleted file mode 100644
index 4c4677f34f..0000000000
--- a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular-route/typings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "resolution": "main",
-  "tree": {
-    "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/7de6c3dd94feaeb21f20054b9f30d5dabc5efabd/angularjs/angular-route.d.ts",
-    "raw": "registry:dt/angular-route#1.3.0+20160317120654",
-    "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/7de6c3dd94feaeb21f20054b9f30d5dabc5efabd/angularjs/angular-route.d.ts"
-  }
-}
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular/index.d.ts b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular/index.d.ts
deleted file mode 100644
index dfde81e26b..0000000000
--- a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular/index.d.ts
+++ /dev/null
@@ -1,1953 +0,0 @@
-// Generated by typings
-// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/b76dd8a7f95b71696982befbb7589940d27e940b/angularjs/angular.d.ts
-declare var angular: angular.IAngularStatic;
-
-// Support for painless dependency injection
-interface Function {
-    $inject?: string[];
-}
-
-// Collapse angular into ng
-import ng = angular;
-// Support AMD require
-declare module 'angular' {
-    export = angular;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// ng module (angular.js)
-///////////////////////////////////////////////////////////////////////////////
-declare namespace angular {
-
-    // not directly implemented, but ensures that constructed class implements $get
-    interface IServiceProviderClass {
-        new (...args: any[]): IServiceProvider;
-    }
-
-    interface IServiceProviderFactory {
-        (...args: any[]): IServiceProvider;
-    }
-
-    // All service providers extend this interface
-    interface IServiceProvider {
-        $get: any;
-    }
-
-    interface IAngularBootstrapConfig {
-        strictDi?: boolean;
-        debugInfoEnabled?: boolean;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // AngularStatic
-    // see http://docs.angularjs.org/api
-    ///////////////////////////////////////////////////////////////////////////
-    interface IAngularStatic {
-        bind(context: any, fn: Function, ...args: any[]): Function;
-
-        /**
-         * Use this function to manually start up angular application.
-         *
-         * @param element DOM element which is the root of angular application.
-         * @param modules An array of modules to load into the application.
-         *     Each item in the array should be the name of a predefined module or a (DI annotated)
-         *     function that will be invoked by the injector as a config block.
-         * @param config an object for defining configuration options for the application. The following keys are supported:
-         *     - `strictDi`: disable automatic function annotation for the application. This is meant to assist in finding bugs which break minified code.
-         */
-        bootstrap(element: string|Element|JQuery|Document, modules?: (string|Function|any[])[], config?: IAngularBootstrapConfig): auto.IInjectorService;
-
-        /**
-         * Creates a deep copy of source, which should be an object or an array.
-         *
-         * - If no destination is supplied, a copy of the object or array is created.
-         * - If a destination is provided, all of its elements (for array) or properties (for objects) are deleted and then all elements/properties from the source are copied to it.
-         * - If source is not an object or array (inc. null and undefined), source is returned.
-         * - If source is identical to 'destination' an exception will be thrown.
-         *
-         * @param source The source that will be used to make a copy. Can be any type, including primitives, null, and undefined.
-         * @param destination Destination into which the source is copied. If provided, must be of the same type as source.
-         */
-        copy<T>(source: T, destination?: T): T;
-
-        /**
-         * Wraps a raw DOM element or HTML string as a jQuery element.
-         *
-         * If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite."
-         */
-        element: IAugmentedJQueryStatic;
-        equals(value1: any, value2: any): boolean;
-        extend(destination: any, ...sources: any[]): any;
-
-        /**
-         * Invokes the iterator function once for each item in obj collection, which can be either an object or an array. The iterator function is invoked with iterator(value, key), where value is the value of an object property or an array element and key is the object property key or array element index. Specifying a context for the function is optional.
-         *
-         * It is worth noting that .forEach does not iterate over inherited properties because it filters using the hasOwnProperty method.
-         *
-         * @param obj Object to iterate over.
-         * @param iterator Iterator function.
-         * @param context Object to become context (this) for the iterator function.
-         */
-        forEach<T>(obj: T[], iterator: (value: T, key: number) => any, context?: any): any;
-        /**
-         * Invokes the iterator function once for each item in obj collection, which can be either an object or an array. The iterator function is invoked with iterator(value, key), where value is the value of an object property or an array element and key is the object property key or array element index. Specifying a context for the function is optional.
-         *
-         * It is worth noting that .forEach does not iterate over inherited properties because it filters using the hasOwnProperty method.
-         *
-         * @param obj Object to iterate over.
-         * @param iterator Iterator function.
-         * @param context Object to become context (this) for the iterator function.
-         */
-        forEach<T>(obj: { [index: string]: T; }, iterator: (value: T, key: string) => any, context?: any): any;
-        /**
-         * Invokes the iterator function once for each item in obj collection, which can be either an object or an array. The iterator function is invoked with iterator(value, key), where value is the value of an object property or an array element and key is the object property key or array element index. Specifying a context for the function is optional.
-         *
-         * It is worth noting that .forEach does not iterate over inherited properties because it filters using the hasOwnProperty method.
-         *
-         * @param obj Object to iterate over.
-         * @param iterator Iterator function.
-         * @param context Object to become context (this) for the iterator function.
-         */
-        forEach(obj: any, iterator: (value: any, key: any) => any, context?: any): any;
-
-        fromJson(json: string): any;
-        identity<T>(arg?: T): T;
-        injector(modules?: any[], strictDi?: boolean): auto.IInjectorService;
-        isArray(value: any): boolean;
-        isDate(value: any): boolean;
-        isDefined(value: any): boolean;
-        isElement(value: any): boolean;
-        isFunction(value: any): boolean;
-        isNumber(value: any): boolean;
-        isObject(value: any): boolean;
-        isString(value: any): boolean;
-        isUndefined(value: any): boolean;
-        lowercase(str: string): string;
-
-        /**
-         * Deeply extends the destination object dst by copying own enumerable properties from the src object(s) to dst. You can specify multiple src objects. If you want to preserve original objects, you can do so by passing an empty object as the target: var object = angular.merge({}, object1, object2).
-         *
-         * Unlike extend(), merge() recursively descends into object properties of source objects, performing a deep copy.
-         *
-         * @param dst Destination object.
-         * @param src Source object(s).
-         */
-        merge(dst: any, ...src: any[]): any;
-
-        /**
-         * The angular.module is a global place for creating, registering and retrieving Angular modules. All modules (angular core or 3rd party) that should be available to an application must be registered using this mechanism.
-         *
-         * When passed two or more arguments, a new module is created. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved.
-         *
-         * @param name The name of the module to create or retrieve.
-         * @param requires The names of modules this module depends on. If specified then new module is being created. If unspecified then the module is being retrieved for further configuration.
-         * @param configFn Optional configuration function for the module.
-         */
-        module(
-            name: string,
-            requires?: string[],
-            configFn?: Function): IModule;
-
-        noop(...args: any[]): void;
-        reloadWithDebugInfo(): void;
-        toJson(obj: any, pretty?: boolean): string;
-        uppercase(str: string): string;
-        version: {
-            full: string;
-            major: number;
-            minor: number;
-            dot: number;
-            codeName: string;
-        };
-
-        /**
-         * If window.name contains prefix NG_DEFER_BOOTSTRAP! when angular.bootstrap is called, the bootstrap process will be paused until angular.resumeBootstrap() is called.
-         * @param extraModules An optional array of modules that should be added to the original list of modules that the app was about to be bootstrapped with.
-         */
-        resumeBootstrap?(extraModules?: string[]): ng.auto.IInjectorService;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // Module
-    // see http://docs.angularjs.org/api/angular.Module
-    ///////////////////////////////////////////////////////////////////////////
-    interface IModule {
-        /**
-         * Use this method to register a component.
-         *
-         * @param name The name of the component.
-         * @param options A definition object passed into the component.
-         */
-        component(name: string, options: IComponentOptions): IModule;
-        /**
-         * Use this method to register work which needs to be performed on module loading.
-         *
-         * @param configFn Execute this function on module load. Useful for service configuration.
-         */
-        config(configFn: Function): IModule;
-        /**
-         * Use this method to register work which needs to be performed on module loading.
-         *
-         * @param inlineAnnotatedFunction Execute this function on module load. Useful for service configuration.
-         */
-        config(inlineAnnotatedFunction: any[]): IModule;
-        config(object: Object): IModule;
-        /**
-         * Register a constant service, such as a string, a number, an array, an object or a function, with the $injector. Unlike value it can be injected into a module configuration function (see config) and it cannot be overridden by an Angular decorator.
-         *
-         * @param name The name of the constant.
-         * @param value The constant value.
-         */
-        constant<T>(name: string, value: T): IModule;
-        constant(object: Object): IModule;
-        /**
-         * The $controller service is used by Angular to create new controllers.
-         *
-         * This provider allows controller registration via the register method.
-         *
-         * @param name Controller name, or an object map of controllers where the keys are the names and the values are the constructors.
-         * @param controllerConstructor Controller constructor fn (optionally decorated with DI annotations in the array notation).
-         */
-        controller(name: string, controllerConstructor: Function): IModule;
-        /**
-         * The $controller service is used by Angular to create new controllers.
-         *
-         * This provider allows controller registration via the register method.
-         *
-         * @param name Controller name, or an object map of controllers where the keys are the names and the values are the constructors.
-         * @param controllerConstructor Controller constructor fn (optionally decorated with DI annotations in the array notation).
-         */
-        controller(name: string, inlineAnnotatedConstructor: any[]): IModule;
-        controller(object: Object): IModule;
-        /**
-         * Register a new directive with the compiler.
-         *
-         * @param name Name of the directive in camel-case (i.e. ngBind which will match as ng-bind)
-         * @param directiveFactory An injectable directive factory function.
-         */
-        directive(name: string, directiveFactory: IDirectiveFactory): IModule;
-        /**
-         * Register a new directive with the compiler.
-         *
-         * @param name Name of the directive in camel-case (i.e. ngBind which will match as ng-bind)
-         * @param directiveFactory An injectable directive factory function.
-         */
-        directive(name: string, inlineAnnotatedFunction: any[]): IModule;
-        directive(object: Object): IModule;
-        /**
-         * Register a service factory, which will be called to return the service instance. This is short for registering a service where its provider consists of only a $get property, which is the given service factory function. You should use $provide.factory(getFn) if you do not need to configure your service in a provider.
-         *
-         * @param name The name of the instance.
-         * @param $getFn The $getFn for the instance creation. Internally this is a short hand for $provide.provider(name, {$get: $getFn}).
-         */
-        factory(name: string, $getFn: Function): IModule;
-        /**
-         * Register a service factory, which will be called to return the service instance. This is short for registering a service where its provider consists of only a $get property, which is the given service factory function. You should use $provide.factory(getFn) if you do not need to configure your service in a provider.
-         *
-         * @param name The name of the instance.
-         * @param inlineAnnotatedFunction The $getFn for the instance creation. Internally this is a short hand for $provide.provider(name, {$get: $getFn}).
-         */
-        factory(name: string, inlineAnnotatedFunction: any[]): IModule;
-        factory(object: Object): IModule;
-        filter(name: string, filterFactoryFunction: Function): IModule;
-        filter(name: string, inlineAnnotatedFunction: any[]): IModule;
-        filter(object: Object): IModule;
-        provider(name: string, serviceProviderFactory: IServiceProviderFactory): IModule;
-        provider(name: string, serviceProviderConstructor: IServiceProviderClass): IModule;
-        provider(name: string, inlineAnnotatedConstructor: any[]): IModule;
-        provider(name: string, providerObject: IServiceProvider): IModule;
-        provider(object: Object): IModule;
-        /**
-         * Run blocks are the closest thing in Angular to the main method. A run block is the code which needs to run to kickstart the application. It is executed after all of the service have been configured and the injector has been created. Run blocks typically contain code which is hard to unit-test, and for this reason should be declared in isolated modules, so that they can be ignored in the unit-tests.
-         */
-        run(initializationFunction: Function): IModule;
-        /**
-         * Run blocks are the closest thing in Angular to the main method. A run block is the code which needs to run to kickstart the application. It is executed after all of the service have been configured and the injector has been created. Run blocks typically contain code which is hard to unit-test, and for this reason should be declared in isolated modules, so that they can be ignored in the unit-tests.
-         */
-        run(inlineAnnotatedFunction: any[]): IModule;
-        /**
-         * Register a service constructor, which will be invoked with new to create the service instance. This is short for registering a service where its provider's $get property is a factory function that returns an instance instantiated by the injector from the service constructor function.
-         *
-         * @param name The name of the instance.
-         * @param serviceConstructor An injectable class (constructor function) that will be instantiated.
-         */
-        service(name: string, serviceConstructor: Function): IModule;
-        /**
-         * Register a service constructor, which will be invoked with new to create the service instance. This is short for registering a service where its provider's $get property is a factory function that returns an instance instantiated by the injector from the service constructor function.
-         *
-         * @param name The name of the instance.
-         * @param inlineAnnotatedConstructor An injectable class (constructor function) that will be instantiated.
-         */
-        service(name: string, inlineAnnotatedConstructor: any[]): IModule;
-        service(object: Object): IModule;
-        /**
-         * Register a value service with the $injector, such as a string, a number, an array, an object or a function. This is short for registering a service where its provider's $get property is a factory function that takes no arguments and returns the value service.
-
-           Value services are similar to constant services, except that they cannot be injected into a module configuration function (see config) but they can be overridden by an Angular decorator.
-         *
-         * @param name The name of the instance.
-         * @param value The value.
-         */
-        value<T>(name: string, value: T): IModule;
-        value(object: Object): IModule;
-
-        /**
-         * Register a service decorator with the $injector. A service decorator intercepts the creation of a service, allowing it to override or modify the behaviour of the service. The object returned by the decorator may be the original service, or a new service object which replaces or wraps and delegates to the original service.
-         * @param name The name of the service to decorate
-         * @param decorator This function will be invoked when the service needs to be instantiated and should return the decorated service instance. The function is called using the injector.invoke method and is therefore fully injectable. Local injection arguments: $delegate - The original service instance, which can be monkey patched, configured, decorated or delegated to.
-         */
-        decorator(name:string, decoratorConstructor: Function): IModule;
-        decorator(name:string, inlineAnnotatedConstructor: any[]): IModule;
-
-        // Properties
-        name: string;
-        requires: string[];
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // Attributes
-    // see http://docs.angularjs.org/api/ng.$compile.directive.Attributes
-    ///////////////////////////////////////////////////////////////////////////
-    interface IAttributes {
-        /**
-         * this is necessary to be able to access the scoped attributes. it's not very elegant
-         * because you have to use attrs['foo'] instead of attrs.foo but I don't know of a better way
-         * this should really be limited to return string but it creates this problem: http://stackoverflow.com/q/17201854/165656
-         */
-        [name: string]: any;
-
-        /**
-         * Converts an attribute name (e.g. dash/colon/underscore-delimited string, optionally prefixed with x- or data-) to its normalized, camelCase form.
-         *
-         * Also there is special case for Moz prefix starting with upper case letter.
-         *
-         * For further information check out the guide on @see https://docs.angularjs.org/guide/directive#matching-directives
-         */
-        $normalize(name: string): string;
-
-        /**
-         * Adds the CSS class value specified by the classVal parameter to the
-         * element. If animations are enabled then an animation will be triggered
-         * for the class addition.
-         */
-        $addClass(classVal: string): void;
-
-        /**
-         * Removes the CSS class value specified by the classVal parameter from the
-         * element. If animations are enabled then an animation will be triggered for
-         * the class removal.
-         */
-        $removeClass(classVal: string): void;
-
-        /**
-         * Adds and removes the appropriate CSS class values to the element based on the difference between
-         * the new and old CSS class values (specified as newClasses and oldClasses).
-         */
-        $updateClass(newClasses: string, oldClasses: string): void;
-
-        /**
-         * Set DOM element attribute value.
-         */
-        $set(key: string, value: any): void;
-
-        /**
-         * Observes an interpolated attribute.
-         * The observer function will be invoked once during the next $digest
-         * following compilation. The observer is then invoked whenever the
-         * interpolated value changes.
-         */
-        $observe<T>(name: string, fn: (value?: T) => any): Function;
-
-        /**
-         * A map of DOM element attribute names to the normalized name. This is needed
-         * to do reverse lookup from normalized name back to actual name.
-         */
-        $attr: Object;
-    }
-
-    /**
-     * form.FormController - type in module ng
-     * see https://docs.angularjs.org/api/ng/type/form.FormController
-     */
-    interface IFormController {
-
-        /**
-         * Indexer which should return ng.INgModelController for most properties but cannot because of "All named properties must be assignable to string indexer type" constraint - see https://github.com/Microsoft/TypeScript/issues/272
-         */
-        [name: string]: any;
-
-        $pristine: boolean;
-        $dirty: boolean;
-        $valid: boolean;
-        $invalid: boolean;
-        $submitted: boolean;
-        $error: any;
-        $pending: any;
-        $addControl(control: INgModelController | IFormController): void;
-        $removeControl(control: INgModelController | IFormController): void;
-        $setValidity(validationErrorKey: string, isValid: boolean, control: INgModelController | IFormController): void;
-        $setDirty(): void;
-        $setPristine(): void;
-        $commitViewValue(): void;
-        $rollbackViewValue(): void;
-        $setSubmitted(): void;
-        $setUntouched(): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // NgModelController
-    // see http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
-    ///////////////////////////////////////////////////////////////////////////
-    interface INgModelController {
-        $render(): void;
-        $setValidity(validationErrorKey: string, isValid: boolean): void;
-        // Documentation states viewValue and modelValue to be a string but other
-        // types do work and it's common to use them.
-        $setViewValue(value: any, trigger?: string): void;
-        $setPristine(): void;
-        $setDirty(): void;
-        $validate(): void;
-        $setTouched(): void;
-        $setUntouched(): void;
-        $rollbackViewValue(): void;
-        $commitViewValue(): void;
-        $isEmpty(value: any): boolean;
-
-        $viewValue: any;
-
-        $modelValue: any;
-
-        $parsers: IModelParser[];
-        $formatters: IModelFormatter[];
-        $viewChangeListeners: IModelViewChangeListener[];
-        $error: any;
-        $name: string;
-
-        $touched: boolean;
-        $untouched: boolean;
-
-        $validators: IModelValidators;
-        $asyncValidators: IAsyncModelValidators;
-
-        $pending: any;
-        $pristine: boolean;
-        $dirty: boolean;
-        $valid: boolean;
-        $invalid: boolean;
-    }
-
-    //Allows tuning how model updates are done.
-    //https://docs.angularjs.org/api/ng/directive/ngModelOptions
-    interface INgModelOptions {
-        updateOn?: string;
-        debounce?: any;
-        allowInvalid?: boolean;
-        getterSetter?: boolean;
-        timezone?: string;
-    }
-
-    interface IModelValidators {
-        /**
-         * viewValue is any because it can be an object that is called in the view like $viewValue.name:$viewValue.subName
-         */
-        [index: string]: (modelValue: any, viewValue: any) => boolean;
-    }
-
-    interface IAsyncModelValidators {
-        [index: string]: (modelValue: any, viewValue: any) => IPromise<any>;
-    }
-
-    interface IModelParser {
-        (value: any): any;
-    }
-
-    interface IModelFormatter {
-        (value: any): any;
-    }
-
-    interface IModelViewChangeListener {
-        (): void;
-    }
-
-    /**
-     * $rootScope - $rootScopeProvider - service in module ng
-     * see https://docs.angularjs.org/api/ng/type/$rootScope.Scope and https://docs.angularjs.org/api/ng/service/$rootScope
-     */
-    interface IRootScopeService {
-        [index: string]: any;
-
-        $apply(): any;
-        $apply(exp: string): any;
-        $apply(exp: (scope: IScope) => any): any;
-
-        $applyAsync(): any;
-        $applyAsync(exp: string): any;
-        $applyAsync(exp: (scope: IScope) => any): any;
-
-        /**
-         * Dispatches an event name downwards to all child scopes (and their children) notifying the registered $rootScope.Scope listeners.
-         *
-         * The event life cycle starts at the scope on which $broadcast was called. All listeners listening for name event on this scope get notified. Afterwards, the event propagates to all direct and indirect scopes of the current scope and calls all registered listeners along the way. The event cannot be canceled.
-         *
-         * Any exception emitted from the listeners will be passed onto the $exceptionHandler service.
-         *
-         * @param name Event name to broadcast.
-         * @param args Optional one or more arguments which will be passed onto the event listeners.
-         */
-        $broadcast(name: string, ...args: any[]): IAngularEvent;
-        $destroy(): void;
-        $digest(): void;
-        /**
-         * Dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners.
-         *
-         * The event life cycle starts at the scope on which $emit was called. All listeners listening for name event on this scope get notified. Afterwards, the event traverses upwards toward the root scope and calls all registered listeners along the way. The event will stop propagating if one of the listeners cancels it.
-         *
-         * Any exception emitted from the listeners will be passed onto the $exceptionHandler service.
-         *
-         * @param name Event name to emit.
-         * @param args Optional one or more arguments which will be passed onto the event listeners.
-         */
-        $emit(name: string, ...args: any[]): IAngularEvent;
-
-        $eval(): any;
-        $eval(expression: string, locals?: Object): any;
-        $eval(expression: (scope: IScope) => any, locals?: Object): any;
-
-        $evalAsync(): void;
-        $evalAsync(expression: string): void;
-        $evalAsync(expression: (scope: IScope) => any): void;
-
-        // Defaults to false by the implementation checking strategy
-        $new(isolate?: boolean, parent?: IScope): IScope;
-
-        /**
-         * Listens on events of a given type. See $emit for discussion of event life cycle.
-         *
-         * The event listener function format is: function(event, args...).
-         *
-         * @param name Event name to listen on.
-         * @param listener Function to call when the event is emitted.
-         */
-        $on(name: string, listener: (event: IAngularEvent, ...args: any[]) => any): () => void;
-
-        $watch(watchExpression: string, listener?: string, objectEquality?: boolean): () => void;
-        $watch<T>(watchExpression: string, listener?: (newValue: T, oldValue: T, scope: IScope) => any, objectEquality?: boolean): () => void;
-        $watch(watchExpression: (scope: IScope) => any, listener?: string, objectEquality?: boolean): () => void;
-        $watch<T>(watchExpression: (scope: IScope) => T, listener?: (newValue: T, oldValue: T, scope: IScope) => any, objectEquality?: boolean): () => void;
-
-        $watchCollection<T>(watchExpression: string, listener: (newValue: T, oldValue: T, scope: IScope) => any): () => void;
-        $watchCollection<T>(watchExpression: (scope: IScope) => T, listener: (newValue: T, oldValue: T, scope: IScope) => any): () => void;
-
-        $watchGroup(watchExpressions: any[], listener: (newValue: any, oldValue: any, scope: IScope) => any): () => void;
-        $watchGroup(watchExpressions: { (scope: IScope): any }[], listener: (newValue: any, oldValue: any, scope: IScope) => any): () => void;
-
-        $parent: IScope;
-        $root: IRootScopeService;
-        $id: number;
-
-        // Hidden members
-        $$isolateBindings: any;
-        $$phase: any;
-    }
-
-    interface IScope extends IRootScopeService { }
-
-    /**
-     * $scope for ngRepeat directive.
-     * see https://docs.angularjs.org/api/ng/directive/ngRepeat
-     */
-    interface IRepeatScope extends IScope {
-
-        /**
-         * iterator offset of the repeated element (0..length-1).
-         */
-        $index: number;
-
-        /**
-         * true if the repeated element is first in the iterator.
-         */
-        $first: boolean;
-
-        /**
-         * true if the repeated element is between the first and last in the iterator.
-         */
-        $middle: boolean;
-
-        /**
-         * true if the repeated element is last in the iterator.
-         */
-        $last: boolean;
-
-        /**
-         * true if the iterator position $index is even (otherwise false).
-         */
-        $even: boolean;
-
-        /**
-         * true if the iterator position $index is odd (otherwise false).
-         */
-        $odd: boolean;
-
-    }
-
-    interface IAngularEvent {
-        /**
-         * the scope on which the event was $emit-ed or $broadcast-ed.
-         */
-        targetScope: IScope;
-        /**
-         * the scope that is currently handling the event. Once the event propagates through the scope hierarchy, this property is set to null.
-         */
-        currentScope: IScope;
-        /**
-         * name of the event.
-         */
-        name: string;
-        /**
-         * calling stopPropagation function will cancel further event propagation (available only for events that were $emit-ed).
-         */
-        stopPropagation?: Function;
-        /**
-         * calling preventDefault sets defaultPrevented flag to true.
-         */
-        preventDefault: Function;
-        /**
-         * true if preventDefault was called.
-         */
-        defaultPrevented: boolean;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // WindowService
-    // see http://docs.angularjs.org/api/ng.$window
-    ///////////////////////////////////////////////////////////////////////////
-    interface IWindowService extends Window {
-        [key: string]: any;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // TimeoutService
-    // see http://docs.angularjs.org/api/ng.$timeout
-    ///////////////////////////////////////////////////////////////////////////
-    interface ITimeoutService {
-        (delay?: number, invokeApply?: boolean): IPromise<void>;
-        <T>(fn: (...args: any[]) => T, delay?: number, invokeApply?: boolean, ...args: any[]): IPromise<T>;
-        cancel(promise?: IPromise<any>): boolean;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // IntervalService
-    // see http://docs.angularjs.org/api/ng.$interval
-    ///////////////////////////////////////////////////////////////////////////
-    interface IIntervalService {
-        (func: Function, delay: number, count?: number, invokeApply?: boolean, ...args: any[]): IPromise<any>;
-        cancel(promise: IPromise<any>): boolean;
-    }
-
-    /**
-     * $filter - $filterProvider - service in module ng
-     *
-     * Filters are used for formatting data displayed to the user.
-     *
-     * see https://docs.angularjs.org/api/ng/service/$filter
-     */
-    interface IFilterService {
-        (name: 'filter'): IFilterFilter;
-        (name: 'currency'): IFilterCurrency;
-        (name: 'number'): IFilterNumber;
-        (name: 'date'): IFilterDate;
-        (name: 'json'): IFilterJson;
-        (name: 'lowercase'): IFilterLowercase;
-        (name: 'uppercase'): IFilterUppercase;
-        (name: 'limitTo'): IFilterLimitTo;
-        (name: 'orderBy'): IFilterOrderBy;
-        /**
-         * Usage:
-         * $filter(name);
-         *
-         * @param name Name of the filter function to retrieve
-         */
-        <T>(name: string): T;
-    }
-
-    interface IFilterFilter {
-        <T>(array: T[], expression: string | IFilterFilterPatternObject | IFilterFilterPredicateFunc<T>, comparator?: IFilterFilterComparatorFunc<T>|boolean): T[];
-    }
-
-    interface IFilterFilterPatternObject {
-        [name: string]: any;
-    }
-
-    interface IFilterFilterPredicateFunc<T> {
-        (value: T, index: number, array: T[]): boolean;
-    }
-
-    interface IFilterFilterComparatorFunc<T> {
-        (actual: T, expected: T): boolean;
-    }
-
-    interface IFilterCurrency {
-        /**
-         * Formats a number as a currency (ie $1,234.56). When no currency symbol is provided, default symbol for current locale is used.
-         * @param amount Input to filter.
-         * @param symbol Currency symbol or identifier to be displayed.
-         * @param fractionSize Number of decimal places to round the amount to, defaults to default max fraction size for current locale
-         * @return Formatted number
-         */
-        (amount: number, symbol?: string, fractionSize?: number): string;
-    }
-
-    interface IFilterNumber {
-        /**
-         * Formats a number as text.
-         * @param number Number to format.
-         * @param fractionSize Number of decimal places to round the number to. If this is not provided then the fraction size is computed from the current locale's number formatting pattern. In the case of the default locale, it will be 3.
-         * @return Number rounded to decimalPlaces and places a “,” after each third digit.
-         */
-        (value: number|string, fractionSize?: number|string): string;
-    }
-
-    interface IFilterDate {
-        /**
-         * Formats date to a string based on the requested format.
-         *
-         * @param date Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.
-         * @param format Formatting rules (see Description). If not specified, mediumDate is used.
-         * @param timezone Timezone to be used for formatting. It understands UTC/GMT and the continental US time zone abbreviations, but for general use, use a time zone offset, for example, '+0430' (4 hours, 30 minutes east of the Greenwich meridian) If not specified, the timezone of the browser will be used.
-         * @return Formatted string or the input if input is not recognized as date/millis.
-         */
-        (date: Date | number | string, format?: string, timezone?: string): string;
-    }
-
-    interface IFilterJson {
-        /**
-         * Allows you to convert a JavaScript object into JSON string.
-         * @param object Any JavaScript object (including arrays and primitive types) to filter.
-         * @param spacing The number of spaces to use per indentation, defaults to 2.
-         * @return JSON string.
-         */
-        (object: any, spacing?: number): string;
-    }
-
-    interface IFilterLowercase {
-        /**
-         * Converts string to lowercase.
-         */
-        (value: string): string;
-    }
-
-    interface IFilterUppercase {
-        /**
-         * Converts string to uppercase.
-         */
-        (value: string): string;
-    }
-
-    interface IFilterLimitTo {
-        /**
-         * Creates a new array containing only a specified number of elements. The elements are taken from either the beginning or the end of the source array, string or number, as specified by the value and sign (positive or negative) of limit.
-         * @param input Source array to be limited.
-         * @param limit The length of the returned array. If the limit number is positive, limit number of items from the beginning of the source array/string are copied. If the number is negative, limit number of items from the end of the source array are copied. The limit will be trimmed if it exceeds array.length. If limit is undefined, the input will be returned unchanged.
-         * @param begin Index at which to begin limitation. As a negative index, begin indicates an offset from the end of input. Defaults to 0.
-         * @return A new sub-array of length limit or less if input array had less than limit elements.
-         */
-        <T>(input: T[], limit: string|number, begin?: string|number): T[];
-        /**
-         * Creates a new string containing only a specified number of elements. The elements are taken from either the beginning or the end of the source string or number, as specified by the value and sign (positive or negative) of limit. If a number is used as input, it is converted to a string.
-         * @param input Source string or number to be limited.
-         * @param limit The length of the returned string. If the limit number is positive, limit number of items from the beginning of the source string are copied. If the number is negative, limit number of items from the end of the source string are copied. The limit will be trimmed if it exceeds input.length. If limit is undefined, the input will be returned unchanged.
-         * @param begin Index at which to begin limitation. As a negative index, begin indicates an offset from the end of input. Defaults to 0.
-         * @return A new substring of length limit or less if input had less than limit elements.
-         */
-        (input: string|number, limit: string|number, begin?: string|number): string;
-    }
-
-    interface IFilterOrderBy {
-        /**
-         * Orders a specified array by the expression predicate. It is ordered alphabetically for strings and numerically for numbers. Note: if you notice numbers are not being sorted as expected, make sure they are actually being saved as numbers and not strings.
-         * @param array The array to sort.
-         * @param expression A predicate to be used by the comparator to determine the order of elements.
-         * @param reverse Reverse the order of the array.
-         * @return Reverse the order of the array.
-         */
-        <T>(array: T[], expression: string|((value: T) => any)|(((value: T) => any)|string)[], reverse?: boolean): T[];
-    }
-
-    /**
-     * $filterProvider - $filter - provider in module ng
-     *
-     * Filters are just functions which transform input to an output. However filters need to be Dependency Injected. To achieve this a filter definition consists of a factory function which is annotated with dependencies and is responsible for creating a filter function.
-     *
-     * see https://docs.angularjs.org/api/ng/provider/$filterProvider
-     */
-    interface IFilterProvider extends IServiceProvider {
-        /**
-         * register(name);
-         *
-         * @param name Name of the filter function, or an object map of filters where the keys are the filter names and the values are the filter factories. Note: Filter names must be valid angular Expressions identifiers, such as uppercase or orderBy. Names with special characters, such as hyphens and dots, are not allowed. If you wish to namespace your filters, then you can use capitalization (myappSubsectionFilterx) or underscores (myapp_subsection_filterx).
-         */
-        register(name: string | {}): IServiceProvider;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // LocaleService
-    // see http://docs.angularjs.org/api/ng.$locale
-    ///////////////////////////////////////////////////////////////////////////
-    interface ILocaleService {
-        id: string;
-
-        // These are not documented
-        // Check angular's i18n files for exemples
-        NUMBER_FORMATS: ILocaleNumberFormatDescriptor;
-        DATETIME_FORMATS: ILocaleDateTimeFormatDescriptor;
-        pluralCat: (num: any) => string;
-    }
-
-    interface ILocaleNumberFormatDescriptor {
-        DECIMAL_SEP: string;
-        GROUP_SEP: string;
-        PATTERNS: ILocaleNumberPatternDescriptor[];
-        CURRENCY_SYM: string;
-    }
-
-    interface ILocaleNumberPatternDescriptor {
-        minInt: number;
-        minFrac: number;
-        maxFrac: number;
-        posPre: string;
-        posSuf: string;
-        negPre: string;
-        negSuf: string;
-        gSize: number;
-        lgSize: number;
-    }
-
-    interface ILocaleDateTimeFormatDescriptor {
-        MONTH: string[];
-        SHORTMONTH: string[];
-        DAY: string[];
-        SHORTDAY: string[];
-        AMPMS: string[];
-        medium: string;
-        short: string;
-        fullDate: string;
-        longDate: string;
-        mediumDate: string;
-        shortDate: string;
-        mediumTime: string;
-        shortTime: string;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // LogService
-    // see http://docs.angularjs.org/api/ng.$log
-    // see http://docs.angularjs.org/api/ng.$logProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface ILogService {
-        debug: ILogCall;
-        error: ILogCall;
-        info: ILogCall;
-        log: ILogCall;
-        warn: ILogCall;
-    }
-
-    interface ILogProvider extends IServiceProvider {
-        debugEnabled(): boolean;
-        debugEnabled(enabled: boolean): ILogProvider;
-    }
-
-    // We define this as separate interface so we can reopen it later for
-    // the ngMock module.
-    interface ILogCall {
-        (...args: any[]): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // ParseService
-    // see http://docs.angularjs.org/api/ng.$parse
-    // see http://docs.angularjs.org/api/ng.$parseProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface IParseService {
-        (expression: string): ICompiledExpression;
-    }
-
-    interface IParseProvider {
-        logPromiseWarnings(): boolean;
-        logPromiseWarnings(value: boolean): IParseProvider;
-
-        unwrapPromises(): boolean;
-        unwrapPromises(value: boolean): IParseProvider;
-    }
-
-    interface ICompiledExpression {
-        (context: any, locals?: any): any;
-
-        literal: boolean;
-        constant: boolean;
-
-        // If value is not provided, undefined is gonna be used since the implementation
-        // does not check the parameter. Let's force a value for consistency. If consumer
-        // whants to undefine it, pass the undefined value explicitly.
-        assign(context: any, value: any): any;
-    }
-
-    /**
-     * $location - $locationProvider - service in module ng
-     * see https://docs.angularjs.org/api/ng/service/$location
-     */
-    interface ILocationService {
-        absUrl(): string;
-        hash(): string;
-        hash(newHash: string): ILocationService;
-        host(): string;
-
-        /**
-         * Return path of current url
-         */
-        path(): string;
-
-        /**
-         * Change path when called with parameter and return $location.
-         * Note: Path should always begin with forward slash (/), this method will add the forward slash if it is missing.
-         *
-         * @param path New path
-         */
-        path(path: string): ILocationService;
-
-        port(): number;
-        protocol(): string;
-        replace(): ILocationService;
-
-        /**
-         * Return search part (as object) of current url
-         */
-        search(): any;
-
-        /**
-         * Change search part when called with parameter and return $location.
-         *
-         * @param search When called with a single argument the method acts as a setter, setting the search component of $location to the specified value.
-         *
-         * If the argument is a hash object containing an array of values, these values will be encoded as duplicate search parameters in the url.
-         */
-        search(search: any): ILocationService;
-
-        /**
-         * Change search part when called with parameter and return $location.
-         *
-         * @param search New search params
-         * @param paramValue If search is a string or a Number, then paramValue will override only a single search property. If paramValue is null, the property specified via the first argument will be deleted. If paramValue is an array, it will override the property of the search component of $location specified via the first argument. If paramValue is true, the property specified via the first argument will be added with no value nor trailing equal sign.
-         */
-        search(search: string, paramValue: string|number|string[]|boolean): ILocationService;
-
-        state(): any;
-        state(state: any): ILocationService;
-        url(): string;
-        url(url: string): ILocationService;
-    }
-
-    interface ILocationProvider extends IServiceProvider {
-        hashPrefix(): string;
-        hashPrefix(prefix: string): ILocationProvider;
-        html5Mode(): boolean;
-
-        // Documentation states that parameter is string, but
-        // implementation tests it as boolean, which makes more sense
-        // since this is a toggler
-        html5Mode(active: boolean): ILocationProvider;
-        html5Mode(mode: { enabled?: boolean; requireBase?: boolean; rewriteLinks?: boolean; }): ILocationProvider;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // DocumentService
-    // see http://docs.angularjs.org/api/ng.$document
-    ///////////////////////////////////////////////////////////////////////////
-    interface IDocumentService extends IAugmentedJQuery {}
-
-    ///////////////////////////////////////////////////////////////////////////
-    // ExceptionHandlerService
-    // see http://docs.angularjs.org/api/ng.$exceptionHandler
-    ///////////////////////////////////////////////////////////////////////////
-    interface IExceptionHandlerService {
-        (exception: Error, cause?: string): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // RootElementService
-    // see http://docs.angularjs.org/api/ng.$rootElement
-    ///////////////////////////////////////////////////////////////////////////
-    interface IRootElementService extends JQuery {}
-
-    interface IQResolveReject<T> {
-        (): void;
-        (value: T): void;
-    }
-    /**
-     * $q - service in module ng
-     * A promise/deferred implementation inspired by Kris Kowal's Q.
-     * See http://docs.angularjs.org/api/ng/service/$q
-     */
-    interface IQService {
-        new <T>(resolver: (resolve: IQResolveReject<T>) => any): IPromise<T>;
-        new <T>(resolver: (resolve: IQResolveReject<T>, reject: IQResolveReject<any>) => any): IPromise<T>;
-        <T>(resolver: (resolve: IQResolveReject<T>) => any): IPromise<T>;
-        <T>(resolver: (resolve: IQResolveReject<T>, reject: IQResolveReject<any>) => any): IPromise<T>;
-
-        /**
-         * Combines multiple promises into a single promise that is resolved when all of the input promises are resolved.
-         *
-         * Returns a single promise that will be resolved with an array of values, each value corresponding to the promise at the same index in the promises array. If any of the promises is resolved with a rejection, this resulting promise will be rejected with the same rejection value.
-         *
-         * @param promises An array of promises.
-         */
-        all<T1, T2, T3, T4, T5, T6, T7, T8, T9, T10>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>, T4 | IPromise <T4>, T5 | IPromise<T5>, T6 | IPromise<T6>, T7 | IPromise<T7>, T8 | IPromise<T8>, T9 | IPromise<T9>, T10 | IPromise<T10>]): IPromise<[T1, T2, T3, T4, T5, T6, T7, T8, T9, T10]>;
-        all<T1, T2, T3, T4, T5, T6, T7, T8, T9>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>, T4 | IPromise <T4>, T5 | IPromise<T5>, T6 | IPromise<T6>, T7 | IPromise<T7>, T8 | IPromise<T8>, T9 | IPromise<T9>]): IPromise<[T1, T2, T3, T4, T5, T6, T7, T8, T9]>;
-        all<T1, T2, T3, T4, T5, T6, T7, T8>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>, T4 | IPromise <T4>, T5 | IPromise<T5>, T6 | IPromise<T6>, T7 | IPromise<T7>, T8 | IPromise<T8>]): IPromise<[T1, T2, T3, T4, T5, T6, T7, T8]>;
-        all<T1, T2, T3, T4, T5, T6, T7>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>, T4 | IPromise <T4>, T5 | IPromise<T5>, T6 | IPromise<T6>, T7 | IPromise<T7>]): IPromise<[T1, T2, T3, T4, T5, T6, T7]>;
-        all<T1, T2, T3, T4, T5, T6>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>, T4 | IPromise <T4>, T5 | IPromise<T5>, T6 | IPromise<T6>]): IPromise<[T1, T2, T3, T4, T5, T6]>;
-        all<T1, T2, T3, T4, T5>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>, T4 | IPromise <T4>, T5 | IPromise<T5>]): IPromise<[T1, T2, T3, T4, T5]>;
-        all<T1, T2, T3, T4>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>, T4 | IPromise <T4>]): IPromise<[T1, T2, T3, T4]>;
-        all<T1, T2, T3>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>]): IPromise<[T1, T2, T3]>;
-        all<T1, T2>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>]): IPromise<[T1, T2]>;
-        all<TAll>(promises: IPromise<TAll>[]): IPromise<TAll[]>;
-        /**
-         * Combines multiple promises into a single promise that is resolved when all of the input promises are resolved.
-         *
-         * Returns a single promise that will be resolved with a hash of values, each value corresponding to the promise at the same key in the promises hash. If any of the promises is resolved with a rejection, this resulting promise will be rejected with the same rejection value.
-         *
-         * @param promises A hash of promises.
-         */
-        all(promises: { [id: string]: IPromise<any>; }): IPromise<{ [id: string]: any; }>;
-        all<T extends {}>(promises: { [id: string]: IPromise<any>; }): IPromise<T>;
-        /**
-         * Creates a Deferred object which represents a task which will finish in the future.
-         */
-        defer<T>(): IDeferred<T>;
-        /**
-         * Creates a promise that is resolved as rejected with the specified reason. This api should be used to forward rejection in a chain of promises. If you are dealing with the last promise in a promise chain, you don't need to worry about it.
-         *
-         * When comparing deferreds/promises to the familiar behavior of try/catch/throw, think of reject as the throw keyword in JavaScript. This also means that if you "catch" an error via a promise error callback and you want to forward the error to the promise derived from the current promise, you have to "rethrow" the error by returning a rejection constructed via reject.
-         *
-         * @param reason Constant, message, exception or an object representing the rejection reason.
-         */
-        reject(reason?: any): IPromise<any>;
-        /**
-         * Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.
-         *
-         * @param value Value or a promise
-         */
-        resolve<T>(value: IPromise<T>|T): IPromise<T>;
-        /**
-         * Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.
-         */
-        resolve(): IPromise<void>;
-        /**
-         * Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.
-         *
-         * @param value Value or a promise
-         */
-        when<T>(value: IPromise<T>|T): IPromise<T>;
-        /**
-         * Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.
-         */
-        when(): IPromise<void>;
-    }
-
-    interface IPromise<T> {
-        /**
-         * Regardless of when the promise was or will be resolved or rejected, then calls one of the success or error callbacks asynchronously as soon as the result is available. The callbacks are called with a single argument: the result or rejection reason. Additionally, the notify callback may be called zero or more times to provide a progress indication, before the promise is resolved or rejected.
-         * The successCallBack may return IPromise<void> for when a $q.reject() needs to be returned
-         * This method returns a new promise which is resolved or rejected via the return value of the successCallback, errorCallback. It also notifies via the return value of the notifyCallback method. The promise can not be resolved or rejected from the notifyCallback method.
-         */
-        then<TResult>(successCallback: (promiseValue: T) => IPromise<TResult>|TResult, errorCallback?: (reason: any) => any, notifyCallback?: (state: any) => any): IPromise<TResult>;
-
-        /**
-         * Shorthand for promise.then(null, errorCallback)
-         */
-        catch<TResult>(onRejected: (reason: any) => IPromise<TResult>|TResult): IPromise<TResult>;
-
-        /**
-         * Allows you to observe either the fulfillment or rejection of a promise, but to do so without modifying the final value. This is useful to release resources or do some clean-up that needs to be done whether the promise was rejected or resolved. See the full specification for more information.
-         *
-         * Because finally is a reserved word in JavaScript and reserved keywords are not supported as property names by ES3, you'll need to invoke the method like promise['finally'](callback) to make your code IE8 and Android 2.x compatible.
-         */
-        finally(finallyCallback: () => any): IPromise<T>;
-    }
-
-    interface IDeferred<T> {
-        resolve(value?: T|IPromise<T>): void;
-        reject(reason?: any): void;
-        notify(state?: any): void;
-        promise: IPromise<T>;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // AnchorScrollService
-    // see http://docs.angularjs.org/api/ng.$anchorScroll
-    ///////////////////////////////////////////////////////////////////////////
-    interface IAnchorScrollService {
-        (): void;
-        (hash: string): void;
-        yOffset: any;
-    }
-
-    interface IAnchorScrollProvider extends IServiceProvider {
-        disableAutoScrolling(): void;
-    }
-
-    /**
-     * $cacheFactory - service in module ng
-     *
-     * Factory that constructs Cache objects and gives access to them.
-     *
-     * see https://docs.angularjs.org/api/ng/service/$cacheFactory
-     */
-    interface ICacheFactoryService {
-        /**
-         * Factory that constructs Cache objects and gives access to them.
-         *
-         * @param cacheId Name or id of the newly created cache.
-         * @param optionsMap Options object that specifies the cache behavior. Properties:
-         *
-         * capacity — turns the cache into LRU cache.
-         */
-        (cacheId: string, optionsMap?: { capacity?: number; }): ICacheObject;
-
-        /**
-         * Get information about all the caches that have been created.
-         * @returns key-value map of cacheId to the result of calling cache#info
-         */
-        info(): any;
-
-        /**
-         * Get access to a cache object by the cacheId used when it was created.
-         *
-         * @param cacheId Name or id of a cache to access.
-         */
-        get(cacheId: string): ICacheObject;
-    }
-
-    /**
-     * $cacheFactory.Cache - type in module ng
-     *
-     * A cache object used to store and retrieve data, primarily used by $http and the script directive to cache templates and other data.
-     *
-     * see https://docs.angularjs.org/api/ng/type/$cacheFactory.Cache
-     */
-    interface ICacheObject {
-        /**
-         * Retrieve information regarding a particular Cache.
-         */
-        info(): {
-            /**
-             * the id of the cache instance
-             */
-            id: string;
-
-            /**
-             * the number of entries kept in the cache instance
-             */
-            size: number;
-
-            //...: any additional properties from the options object when creating the cache.
-        };
-
-        /**
-         * Inserts a named entry into the Cache object to be retrieved later, and incrementing the size of the cache if the key was not already present in the cache. If behaving like an LRU cache, it will also remove stale entries from the set.
-         *
-         * It will not insert undefined values into the cache.
-         *
-         * @param key the key under which the cached data is stored.
-         * @param value the value to store alongside the key. If it is undefined, the key will not be stored.
-         */
-        put<T>(key: string, value?: T): T;
-
-        /**
-         * Retrieves named data stored in the Cache object.
-         *
-         * @param key the key of the data to be retrieved
-         */
-        get<T>(key: string): T;
-
-        /**
-         * Removes an entry from the Cache object.
-         *
-         * @param key the key of the entry to be removed
-         */
-        remove(key: string): void;
-
-        /**
-         * Clears the cache object of any entries.
-         */
-        removeAll(): void;
-
-        /**
-         * Destroys the Cache object entirely, removing it from the $cacheFactory set.
-         */
-        destroy(): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // CompileService
-    // see http://docs.angularjs.org/api/ng.$compile
-    // see http://docs.angularjs.org/api/ng.$compileProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface ICompileService {
-        (element: string, transclude?: ITranscludeFunction, maxPriority?: number): ITemplateLinkingFunction;
-        (element: Element, transclude?: ITranscludeFunction, maxPriority?: number): ITemplateLinkingFunction;
-        (element: JQuery, transclude?: ITranscludeFunction, maxPriority?: number): ITemplateLinkingFunction;
-    }
-
-    interface ICompileProvider extends IServiceProvider {
-        directive(name: string, directiveFactory: Function): ICompileProvider;
-        directive(directivesMap: Object, directiveFactory: Function): ICompileProvider;
-        directive(name: string, inlineAnnotatedFunction: any[]): ICompileProvider;
-        directive(directivesMap: Object, inlineAnnotatedFunction: any[]): ICompileProvider;
-
-        // Undocumented, but it is there...
-        directive(directivesMap: any): ICompileProvider;
-
-        component(name: string, options: IComponentOptions): ICompileProvider;
-
-        aHrefSanitizationWhitelist(): RegExp;
-        aHrefSanitizationWhitelist(regexp: RegExp): ICompileProvider;
-
-        imgSrcSanitizationWhitelist(): RegExp;
-        imgSrcSanitizationWhitelist(regexp: RegExp): ICompileProvider;
-
-        debugInfoEnabled(enabled?: boolean): any;
-    }
-
-    interface ICloneAttachFunction {
-        // Let's hint but not force cloneAttachFn's signature
-        (clonedElement?: JQuery, scope?: IScope): any;
-    }
-
-    // This corresponds to the "publicLinkFn" returned by $compile.
-    interface ITemplateLinkingFunction {
-        (scope: IScope, cloneAttachFn?: ICloneAttachFunction): IAugmentedJQuery;
-    }
-
-    // This corresponds to $transclude (and also the transclude function passed to link).
-    interface ITranscludeFunction {
-        // If the scope is provided, then the cloneAttachFn must be as well.
-        (scope: IScope, cloneAttachFn: ICloneAttachFunction): IAugmentedJQuery;
-        // If one argument is provided, then it's assumed to be the cloneAttachFn.
-        (cloneAttachFn?: ICloneAttachFunction): IAugmentedJQuery;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // ControllerService
-    // see http://docs.angularjs.org/api/ng.$controller
-    // see http://docs.angularjs.org/api/ng.$controllerProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface IControllerService {
-        // Although the documentation doesn't state this, locals are optional
-        <T>(controllerConstructor: new (...args: any[]) => T, locals?: any, later?: boolean, ident?: string): T;
-        <T>(controllerConstructor: Function, locals?: any, later?: boolean, ident?: string): T;
-        <T>(controllerName: string, locals?: any, later?: boolean, ident?: string): T;
-    }
-
-    interface IControllerProvider extends IServiceProvider {
-        register(name: string, controllerConstructor: Function): void;
-        register(name: string, dependencyAnnotatedConstructor: any[]): void;
-        allowGlobals(): void;
-    }
-
-    /**
-     * xhrFactory
-     * Replace or decorate this service to create your own custom XMLHttpRequest objects.
-     * see https://docs.angularjs.org/api/ng/service/$xhrFactory
-     */
-    interface IXhrFactory<T> {
-        (method: string, url: string): T;
-    }
-
-    /**
-     * HttpService
-     * see http://docs.angularjs.org/api/ng/service/$http
-     */
-    interface IHttpService {
-        /**
-         * Object describing the request to be made and how it should be processed.
-         */
-        <T>(config: IRequestConfig): IHttpPromise<T>;
-
-        /**
-         * Shortcut method to perform GET request.
-         *
-         * @param url Relative or absolute URL specifying the destination of the request
-         * @param config Optional configuration object
-         */
-        get<T>(url: string, config?: IRequestShortcutConfig): IHttpPromise<T>;
-
-        /**
-         * Shortcut method to perform DELETE request.
-         *
-         * @param url Relative or absolute URL specifying the destination of the request
-         * @param config Optional configuration object
-         */
-        delete<T>(url: string, config?: IRequestShortcutConfig): IHttpPromise<T>;
-
-        /**
-         * Shortcut method to perform HEAD request.
-         *
-         * @param url Relative or absolute URL specifying the destination of the request
-         * @param config Optional configuration object
-         */
-        head<T>(url: string, config?: IRequestShortcutConfig): IHttpPromise<T>;
-
-        /**
-         * Shortcut method to perform JSONP request.
-         *
-         * @param url Relative or absolute URL specifying the destination of the request
-         * @param config Optional configuration object
-         */
-        jsonp<T>(url: string, config?: IRequestShortcutConfig): IHttpPromise<T>;
-
-        /**
-         * Shortcut method to perform POST request.
-         *
-         * @param url Relative or absolute URL specifying the destination of the request
-         * @param data Request content
-         * @param config Optional configuration object
-         */
-        post<T>(url: string, data: any, config?: IRequestShortcutConfig): IHttpPromise<T>;
-
-        /**
-         * Shortcut method to perform PUT request.
-         *
-         * @param url Relative or absolute URL specifying the destination of the request
-         * @param data Request content
-         * @param config Optional configuration object
-         */
-        put<T>(url: string, data: any, config?: IRequestShortcutConfig): IHttpPromise<T>;
-
-        /**
-         * Shortcut method to perform PATCH request.
-         *
-         * @param url Relative or absolute URL specifying the destination of the request
-         * @param data Request content
-         * @param config Optional configuration object
-         */
-        patch<T>(url: string, data: any, config?: IRequestShortcutConfig): IHttpPromise<T>;
-
-        /**
-         * Runtime equivalent of the $httpProvider.defaults property. Allows configuration of default headers, withCredentials as well as request and response transformations.
-         */
-        defaults: IHttpProviderDefaults;
-
-        /**
-         * Array of config objects for currently pending requests. This is primarily meant to be used for debugging purposes.
-         */
-        pendingRequests: IRequestConfig[];
-    }
-
-    /**
-     * Object describing the request to be made and how it should be processed.
-     * see http://docs.angularjs.org/api/ng/service/$http#usage
-     */
-    interface IRequestShortcutConfig extends IHttpProviderDefaults {
-        /**
-         * {Object.<string|Object>}
-         * Map of strings or objects which will be turned to ?key1=value1&key2=value2 after the url. If the value is not a string, it will be JSONified.
-         */
-        params?: any;
-
-        /**
-         * {string|Object}
-         * Data to be sent as the request message data.
-         */
-        data?: any;
-
-        /**
-         * Timeout in milliseconds, or promise that should abort the request when resolved.
-         */
-        timeout?: number|IPromise<any>;
-
-        /**
-         * See [XMLHttpRequest.responseType]https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#xmlhttprequest-responsetype
-         */
-        responseType?: string;
-    }
-
-    /**
-     * Object describing the request to be made and how it should be processed.
-     * see http://docs.angularjs.org/api/ng/service/$http#usage
-     */
-    interface IRequestConfig extends IRequestShortcutConfig {
-        /**
-         * HTTP method (e.g. 'GET', 'POST', etc)
-         */
-        method: string;
-        /**
-         * Absolute or relative URL of the resource that is being requested.
-         */
-        url: string;
-    }
-
-    interface IHttpHeadersGetter {
-        (): { [name: string]: string; };
-        (headerName: string): string;
-    }
-
-    interface IHttpPromiseCallback<T> {
-        (data: T, status: number, headers: IHttpHeadersGetter, config: IRequestConfig): void;
-    }
-
-    interface IHttpPromiseCallbackArg<T> {
-        data?: T;
-        status?: number;
-        headers?: IHttpHeadersGetter;
-        config?: IRequestConfig;
-        statusText?: string;
-    }
-
-    interface IHttpPromise<T> extends IPromise<IHttpPromiseCallbackArg<T>> {
-        /**
-         * The $http legacy promise methods success and error have been deprecated. Use the standard then method instead.
-         * If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.
-         * @deprecated
-         */
-        success?(callback: IHttpPromiseCallback<T>): IHttpPromise<T>;
-        /**
-         * The $http legacy promise methods success and error have been deprecated. Use the standard then method instead.
-         * If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.
-         * @deprecated
-         */
-        error?(callback: IHttpPromiseCallback<any>): IHttpPromise<T>;
-    }
-
-    // See the jsdoc for transformData() at https://github.com/angular/angular.js/blob/master/src/ng/http.js#L228
-    interface IHttpRequestTransformer {
-        (data: any, headersGetter: IHttpHeadersGetter): any;
-    }
-
-    // The definition of fields are the same as IHttpPromiseCallbackArg
-    interface IHttpResponseTransformer {
-        (data: any, headersGetter: IHttpHeadersGetter, status: number): any;
-    }
-
-    type HttpHeaderType = {[requestType: string]:string|((config:IRequestConfig) => string)};
-
-    interface IHttpRequestConfigHeaders {
-        [requestType: string]: any;
-        common?: any;
-        get?: any;
-        post?: any;
-        put?: any;
-        patch?: any;
-    }
-
-    /**
-    * Object that controls the defaults for $http provider. Not all fields of IRequestShortcutConfig can be configured
-    * via defaults and the docs do not say which. The following is based on the inspection of the source code.
-    * https://docs.angularjs.org/api/ng/service/$http#defaults
-    * https://docs.angularjs.org/api/ng/service/$http#usage
-    * https://docs.angularjs.org/api/ng/provider/$httpProvider The properties section
-    */
-    interface IHttpProviderDefaults {
-        /**
-         * {boolean|Cache}
-         * If true, a default $http cache will be used to cache the GET request, otherwise if a cache instance built with $cacheFactory, this cache will be used for caching.
-         */
-        cache?: any;
-
-        /**
-         * Transform function or an array of such functions. The transform function takes the http request body and
-         * headers and returns its transformed (typically serialized) version.
-         * @see {@link https://docs.angularjs.org/api/ng/service/$http#transforming-requests-and-responses}
-         */
-        transformRequest?: IHttpRequestTransformer |IHttpRequestTransformer[];
-
-        /**
-         * Transform function or an array of such functions. The transform function takes the http response body and
-         * headers and returns its transformed (typically deserialized) version.
-         */
-        transformResponse?: IHttpResponseTransformer | IHttpResponseTransformer[];
-
-        /**
-         * Map of strings or functions which return strings representing HTTP headers to send to the server. If the
-         * return value of a function is null, the header will not be sent.
-         * The key of the map is the request verb in lower case. The "common" key applies to all requests.
-         * @see {@link https://docs.angularjs.org/api/ng/service/$http#setting-http-headers}
-         */
-        headers?: IHttpRequestConfigHeaders;
-
-        /** Name of HTTP header to populate with the XSRF token. */
-        xsrfHeaderName?: string;
-
-        /** Name of cookie containing the XSRF token. */
-        xsrfCookieName?: string;
-
-        /**
-         * whether to to set the withCredentials flag on the XHR object. See [requests with credentials]https://developer.mozilla.org/en/http_access_control#section_5 for more information.
-         */
-        withCredentials?: boolean;
-
-        /**
-        * A function used to the prepare string representation of request parameters (specified as an object). If
-        * specified as string, it is interpreted as a function registered with the $injector. Defaults to
-        * $httpParamSerializer.
-        */
-        paramSerializer?: string | ((obj: any) => string);
-    }
-
-    interface IHttpInterceptor {
-        request?: (config: IRequestConfig) => IRequestConfig|IPromise<IRequestConfig>;
-        requestError?: (rejection: any) => any;
-        response?: <T>(response: IHttpPromiseCallbackArg<T>) => IPromise<IHttpPromiseCallbackArg<T>>|IHttpPromiseCallbackArg<T>;
-        responseError?: (rejection: any) => any;
-    }
-
-    interface IHttpInterceptorFactory {
-        (...args: any[]): IHttpInterceptor;
-    }
-
-    interface IHttpProvider extends IServiceProvider {
-        defaults: IHttpProviderDefaults;
-
-        /**
-         * Register service factories (names or implementations) for interceptors which are called before and after
-         * each request.
-         */
-        interceptors: (string|IHttpInterceptorFactory|(string|IHttpInterceptorFactory)[])[];
-        useApplyAsync(): boolean;
-        useApplyAsync(value: boolean): IHttpProvider;
-
-        /**
-         *
-         * @param {boolean=} value If true, `$http` will return a normal promise without the `success` and `error` methods.
-         * @returns {boolean|Object} If a value is specified, returns the $httpProvider for chaining.
-         *    otherwise, returns the current configured value.
-         */
-        useLegacyPromiseExtensions(value:boolean) : boolean | IHttpProvider;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // HttpBackendService
-    // see http://docs.angularjs.org/api/ng.$httpBackend
-    // You should never need to use this service directly.
-    ///////////////////////////////////////////////////////////////////////////
-    interface IHttpBackendService {
-        // XXX Perhaps define callback signature in the future
-        (method: string, url: string, post?: any, callback?: Function, headers?: any, timeout?: number, withCredentials?: boolean): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // InterpolateService
-    // see http://docs.angularjs.org/api/ng.$interpolate
-    // see http://docs.angularjs.org/api/ng.$interpolateProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface IInterpolateService {
-        (text: string, mustHaveExpression?: boolean, trustedContext?: string, allOrNothing?: boolean): IInterpolationFunction;
-        endSymbol(): string;
-        startSymbol(): string;
-    }
-
-    interface IInterpolationFunction {
-        (context: any): string;
-    }
-
-    interface IInterpolateProvider extends IServiceProvider {
-        startSymbol(): string;
-        startSymbol(value: string): IInterpolateProvider;
-        endSymbol(): string;
-        endSymbol(value: string): IInterpolateProvider;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // TemplateCacheService
-    // see http://docs.angularjs.org/api/ng.$templateCache
-    ///////////////////////////////////////////////////////////////////////////
-    interface ITemplateCacheService extends ICacheObject {}
-
-    ///////////////////////////////////////////////////////////////////////////
-    // SCEService
-    // see http://docs.angularjs.org/api/ng.$sce
-    ///////////////////////////////////////////////////////////////////////////
-    interface ISCEService {
-        getTrusted(type: string, mayBeTrusted: any): any;
-        getTrustedCss(value: any): any;
-        getTrustedHtml(value: any): any;
-        getTrustedJs(value: any): any;
-        getTrustedResourceUrl(value: any): any;
-        getTrustedUrl(value: any): any;
-        parse(type: string, expression: string): (context: any, locals: any) => any;
-        parseAsCss(expression: string): (context: any, locals: any) => any;
-        parseAsHtml(expression: string): (context: any, locals: any) => any;
-        parseAsJs(expression: string): (context: any, locals: any) => any;
-        parseAsResourceUrl(expression: string): (context: any, locals: any) => any;
-        parseAsUrl(expression: string): (context: any, locals: any) => any;
-        trustAs(type: string, value: any): any;
-        trustAsHtml(value: any): any;
-        trustAsJs(value: any): any;
-        trustAsResourceUrl(value: any): any;
-        trustAsUrl(value: any): any;
-        isEnabled(): boolean;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // SCEProvider
-    // see http://docs.angularjs.org/api/ng.$sceProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface ISCEProvider extends IServiceProvider {
-        enabled(value: boolean): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // SCEDelegateService
-    // see http://docs.angularjs.org/api/ng.$sceDelegate
-    ///////////////////////////////////////////////////////////////////////////
-    interface ISCEDelegateService {
-        getTrusted(type: string, mayBeTrusted: any): any;
-        trustAs(type: string, value: any): any;
-        valueOf(value: any): any;
-    }
-
-
-    ///////////////////////////////////////////////////////////////////////////
-    // SCEDelegateProvider
-    // see http://docs.angularjs.org/api/ng.$sceDelegateProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface ISCEDelegateProvider extends IServiceProvider {
-        resourceUrlBlacklist(blacklist: any[]): void;
-        resourceUrlWhitelist(whitelist: any[]): void;
-        resourceUrlBlacklist(): any[];
-        resourceUrlWhitelist(): any[];
-    }
-
-    /**
-     * $templateRequest service
-     * see http://docs.angularjs.org/api/ng/service/$templateRequest
-     */
-    interface ITemplateRequestService {
-        /**
-         * Downloads a template using $http and, upon success, stores the
-         * contents inside of $templateCache.
-         *
-         * If the HTTP request fails or the response data of the HTTP request is
-         * empty then a $compile error will be thrown (unless
-         * {ignoreRequestError} is set to true).
-         *
-         * @param tpl                  The template URL.
-         * @param ignoreRequestError   Whether or not to ignore the exception
-         *                             when the request fails or the template is
-         *                             empty.
-         *
-         * @return   A promise whose value is the template content.
-         */
-        (tpl: string, ignoreRequestError?: boolean): IPromise<string>;
-        /**
-         * total amount of pending template requests being downloaded.
-         * @type {number}
-         */
-        totalPendingRequests: number;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // Component
-    // see http://angularjs.blogspot.com.br/2015/11/angularjs-15-beta2-and-14-releases.html
-    // and http://toddmotto.com/exploring-the-angular-1-5-component-method/
-    ///////////////////////////////////////////////////////////////////////////
-    /**
-     * Runtime representation a type that a Component or other object is instances of.
-     *
-     * An example of a `Type` is `MyCustomComponent` class, which in JavaScript is be represented by
-     * the `MyCustomComponent` constructor function.
-     */
-    interface Type extends Function {
-    }
-
-    /**
-     * `RouteDefinition` defines a route within a {@link RouteConfig} decorator.
-     *
-     * Supported keys:
-     * - `path` or `aux` (requires exactly one of these)
-     * - `component`, `loader`,  `redirectTo` (requires exactly one of these)
-     * - `name` or `as` (optional) (requires exactly one of these)
-     * - `data` (optional)
-     *
-     * See also {@link Route}, {@link AsyncRoute}, {@link AuxRoute}, and {@link Redirect}.
-     */
-    interface RouteDefinition {
-        path?: string;
-        aux?: string;
-        component?: Type | ComponentDefinition | string;
-        loader?: Function;
-        redirectTo?: any[];
-        as?: string;
-        name?: string;
-        data?: any;
-        useAsDefault?: boolean;
-    }
-
-    /**
-     * Represents either a component type (`type` is `component`) or a loader function
-     * (`type` is `loader`).
-     *
-     * See also {@link RouteDefinition}.
-     */
-    interface ComponentDefinition {
-        type: string;
-        loader?: Function;
-        component?: Type;
-    }
-
-    /**
-     * Component definition object (a simplified directive definition object)
-     */
-    interface IComponentOptions {
-        /**
-         * Controller constructor function that should be associated with newly created scope or the name of a registered
-         * controller if passed as a string. Empty function by default.
-         * Use the array form to define dependencies (necessary if strictDi is enabled and you require dependency injection)
-         */
-        controller?: string | Function | (string | Function)[];
-        /**
-         * An identifier name for a reference to the controller. If present, the controller will be published to scope under
-         * the controllerAs name. If not present, this will default to be the same as the component name.
-         * @default "$ctrl"
-         */
-        controllerAs?: string;
-        /**
-         * html template as a string or a function that returns an html template as a string which should be used as the
-         * contents of this component. Empty string by default.
-         * If template is a function, then it is injected with the following locals:
-         * $element - Current element
-         * $attrs - Current attributes object for the element
-         * Use the array form to define dependencies (necessary if strictDi is enabled and you require dependency injection)
-         */
-        template?: string | Function | (string | Function)[];
-        /**
-         * path or function that returns a path to an html template that should be used as the contents of this component.
-         * If templateUrl is a function, then it is injected with the following locals:
-         * $element - Current element
-         * $attrs - Current attributes object for the element
-         * Use the array form to define dependencies (necessary if strictDi is enabled and you require dependency injection)
-         */
-        templateUrl?: string | Function | (string | Function)[];
-        /**
-         * Define DOM attribute binding to component properties. Component properties are always bound to the component
-         * controller and not to the scope.
-         */
-        bindings?: {[binding: string]: string};
-        /**
-         * Whether transclusion is enabled. Enabled by default.
-         */
-        transclude?: boolean | string | {[slot: string]: string};
-        require?: string | string[] | {[controller: string]: string};
-    }
-
-    interface IComponentTemplateFn {
-        ( $element?: IAugmentedJQuery, $attrs?: IAttributes ): string;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // Directive
-    // see http://docs.angularjs.org/api/ng.$compileProvider#directive
-    // and http://docs.angularjs.org/guide/directive
-    ///////////////////////////////////////////////////////////////////////////
-
-    interface IDirectiveFactory {
-        (...args: any[]): IDirective;
-    }
-
-    interface IDirectiveLinkFn {
-        (
-            scope: IScope,
-            instanceElement: IAugmentedJQuery,
-            instanceAttributes: IAttributes,
-            controller: {},
-            transclude: ITranscludeFunction
-        ): void;
-    }
-
-    interface IDirectivePrePost {
-        pre?: IDirectiveLinkFn;
-        post?: IDirectiveLinkFn;
-    }
-
-    interface IDirectiveCompileFn {
-        (
-            templateElement: IAugmentedJQuery,
-            templateAttributes: IAttributes,
-            /**
-             * @deprecated
-             * Note: The transclude function that is passed to the compile function is deprecated,
-             * as it e.g. does not know about the right outer scope. Please use the transclude function
-             * that is passed to the link function instead.
-             */
-            transclude: ITranscludeFunction
-        ): IDirectivePrePost;
-    }
-
-    interface IDirective {
-        compile?: IDirectiveCompileFn;
-        controller?: any;
-        controllerAs?: string;
-        /**
-         * @deprecated
-         * Deprecation warning: although bindings for non-ES6 class controllers are currently bound to this before
-         * the controller constructor is called, this use is now deprecated. Please place initialization code that
-         * relies upon bindings inside a $onInit method on the controller, instead.
-         */
-        bindToController?: boolean | Object;
-        link?: IDirectiveLinkFn | IDirectivePrePost;
-        multiElement?: boolean;
-        name?: string;
-        priority?: number;
-        /**
-         * @deprecated
-         */
-        replace?: boolean;
-        require?: string | string[] | {[controller: string]: string};
-        restrict?: string;
-        scope?: boolean | Object;
-        template?: string | Function;
-        templateNamespace?: string;
-        templateUrl?: string | Function;
-        terminal?: boolean;
-        transclude?: boolean | string | {[slot: string]: string};
-    }
-
-    /**
-     * angular.element
-     * when calling angular.element, angular returns a jQuery object,
-     * augmented with additional methods like e.g. scope.
-     * see: http://docs.angularjs.org/api/angular.element
-     */
-    interface IAugmentedJQueryStatic extends JQueryStatic {
-        (selector: string, context?: any): IAugmentedJQuery;
-        (element: Element): IAugmentedJQuery;
-        (object: {}): IAugmentedJQuery;
-        (elementArray: Element[]): IAugmentedJQuery;
-        (object: JQuery): IAugmentedJQuery;
-        (func: Function): IAugmentedJQuery;
-        (array: any[]): IAugmentedJQuery;
-        (): IAugmentedJQuery;
-    }
-
-    interface IAugmentedJQuery extends JQuery {
-        // TODO: events, how to define?
-        //$destroy
-
-        find(selector: string): IAugmentedJQuery;
-        find(element: any): IAugmentedJQuery;
-        find(obj: JQuery): IAugmentedJQuery;
-        controller(): any;
-        controller(name: string): any;
-        injector(): any;
-        scope(): IScope;
-
-        /**
-        *   Overload for custom scope interfaces
-        */
-        scope<T extends IScope>(): T;
-        isolateScope(): IScope;
-
-        inheritedData(key: string, value: any): JQuery;
-        inheritedData(obj: { [key: string]: any; }): JQuery;
-        inheritedData(key?: string): any;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // AUTO module (angular.js)
-    ///////////////////////////////////////////////////////////////////////////
-    export module auto {
-
-        ///////////////////////////////////////////////////////////////////////
-        // InjectorService
-        // see http://docs.angularjs.org/api/AUTO.$injector
-        ///////////////////////////////////////////////////////////////////////
-        interface IInjectorService {
-            annotate(fn: Function, strictDi?: boolean): string[];
-            annotate(inlineAnnotatedFunction: any[]): string[];
-            get<T>(name: string, caller?: string): T;
-            get(name: '$anchorScroll'): IAnchorScrollService
-            get(name: '$cacheFactory'): ICacheFactoryService
-            get(name: '$compile'): ICompileService
-            get(name: '$controller'): IControllerService
-            get(name: '$document'): IDocumentService
-            get(name: '$exceptionHandler'): IExceptionHandlerService
-            get(name: '$filter'): IFilterService
-            get(name: '$http'): IHttpService
-            get(name: '$httpBackend'): IHttpBackendService
-            get(name: '$httpParamSerializer'): IHttpParamSerializer
-            get(name: '$httpParamSerializerJQLike'): IHttpParamSerializer
-            get(name: '$interpolate'): IInterpolateService
-            get(name: '$interval'): IIntervalService
-            get(name: '$locale'): ILocaleService
-            get(name: '$location'): ILocationService
-            get(name: '$log'): ILogService
-            get(name: '$parse'): IParseService
-            get(name: '$q'): IQService
-            get(name: '$rootElement'): IRootElementService
-            get(name: '$rootScope'): IRootScopeService
-            get(name: '$sce'): ISCEService
-            get(name: '$sceDelegate'): ISCEDelegateService
-            get(name: '$templateCache'): ITemplateCacheService
-            get(name: '$templateRequest'): ITemplateRequestService
-            get(name: '$timeout'): ITimeoutService
-            get(name: '$window'): IWindowService
-            get<T>(name: '$xhrFactory'): IXhrFactory<T>
-            has(name: string): boolean;
-            instantiate<T>(typeConstructor: Function, locals?: any): T;
-            invoke(inlineAnnotatedFunction: any[]): any;
-            invoke(func: Function, context?: any, locals?: any): any;
-            strictDi: boolean;
-        }
-
-        ///////////////////////////////////////////////////////////////////////
-        // ProvideService
-        // see http://docs.angularjs.org/api/AUTO.$provide
-        ///////////////////////////////////////////////////////////////////////
-        interface IProvideService {
-            // Documentation says it returns the registered instance, but actual
-            // implementation does not return anything.
-            // constant(name: string, value: any): any;
-            /**
-             * Register a constant service, such as a string, a number, an array, an object or a function, with the $injector. Unlike value it can be injected into a module configuration function (see config) and it cannot be overridden by an Angular decorator.
-             *
-             * @param name The name of the constant.
-             * @param value The constant value.
-             */
-            constant(name: string, value: any): void;
-
-            /**
-             * Register a service decorator with the $injector. A service decorator intercepts the creation of a service, allowing it to override or modify the behaviour of the service. The object returned by the decorator may be the original service, or a new service object which replaces or wraps and delegates to the original service.
-             *
-             * @param name The name of the service to decorate.
-             * @param decorator This function will be invoked when the service needs to be instantiated and should return the decorated service instance. The function is called using the injector.invoke method and is therefore fully injectable. Local injection arguments:
-             *
-             * $delegate - The original service instance, which can be monkey patched, configured, decorated or delegated to.
-             */
-            decorator(name: string, decorator: Function): void;
-            /**
-             * Register a service decorator with the $injector. A service decorator intercepts the creation of a service, allowing it to override or modify the behaviour of the service. The object returned by the decorator may be the original service, or a new service object which replaces or wraps and delegates to the original service.
-             *
-             * @param name The name of the service to decorate.
-             * @param inlineAnnotatedFunction This function will be invoked when the service needs to be instantiated and should return the decorated service instance. The function is called using the injector.invoke method and is therefore fully injectable. Local injection arguments:
-             *
-             * $delegate - The original service instance, which can be monkey patched, configured, decorated or delegated to.
-             */
-            decorator(name: string, inlineAnnotatedFunction: any[]): void;
-            factory(name: string, serviceFactoryFunction: Function): IServiceProvider;
-            factory(name: string, inlineAnnotatedFunction: any[]): IServiceProvider;
-            provider(name: string, provider: IServiceProvider): IServiceProvider;
-            provider(name: string, serviceProviderConstructor: Function): IServiceProvider;
-            service(name: string, constructor: Function): IServiceProvider;
-            service(name: string, inlineAnnotatedFunction: any[]): IServiceProvider;
-            value(name: string, value: any): IServiceProvider;
-        }
-
-    }
-
-    /**
-     * $http params serializer that converts objects to strings
-     * see https://docs.angularjs.org/api/ng/service/$httpParamSerializer
-     */
-    interface IHttpParamSerializer {
-        (obj: Object): string;
-    }
-}
\ No newline at end of file
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular/typings.json b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular/typings.json
deleted file mode 100644
index c974311fa7..0000000000
--- a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/angular/typings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "resolution": "main",
-  "tree": {
-    "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/b76dd8a7f95b71696982befbb7589940d27e940b/angularjs/angular.d.ts",
-    "raw": "registry:dt/angular#1.5.0+20160517064839",
-    "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/b76dd8a7f95b71696982befbb7589940d27e940b/angularjs/angular.d.ts"
-  }
-}
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/jquery/index.d.ts b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/jquery/index.d.ts
deleted file mode 100644
index b4208b3b82..0000000000
--- a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/jquery/index.d.ts
+++ /dev/null
@@ -1,3199 +0,0 @@
-// Generated by typings
-// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/4cdfbe96b666eec5e1defbb519a62abf04e96764/jquery/jquery.d.ts
-interface JQueryAjaxSettings {
-    /**
-     * The content type sent in the request header that tells the server what kind of response it will accept in return. If the accepts setting needs modification, it is recommended to do so once in the $.ajaxSetup() method.
-     */
-    accepts?: any;
-    /**
-     * By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().
-     */
-    async?: boolean;
-    /**
-     * A pre-request callback function that can be used to modify the jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object before it is sent. Use this to set custom headers, etc. The jqXHR and settings objects are passed as arguments. This is an Ajax Event. Returning false in the beforeSend function will cancel the request. As of jQuery 1.5, the beforeSend option will be called regardless of the type of request.
-     */
-    beforeSend? (jqXHR: JQueryXHR, settings: JQueryAjaxSettings): any;
-    /**
-     * If set to false, it will force requested pages not to be cached by the browser. Note: Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.
-     */
-    cache?: boolean;
-    /**
-     * A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string categorizing the status of the request ("success", "notmodified", "error", "timeout", "abort", or "parsererror"). As of jQuery 1.5, the complete setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.
-     */
-    complete? (jqXHR: JQueryXHR, textStatus: string): any;
-    /**
-     * An object of string/regular-expression pairs that determine how jQuery will parse the response, given its content type. (version added: 1.5)
-     */
-    contents?: { [key: string]: any; };
-    //According to jQuery.ajax source code, ajax's option actually allows contentType to set to "false"
-    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/742
-    /**
-     * When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding.
-     */
-    contentType?: any;
-    /**
-     * This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax).
-     */
-    context?: any;
-    /**
-     * An object containing dataType-to-dataType converters. Each converter's value is a function that returns the transformed value of the response. (version added: 1.5)
-     */
-    converters?: { [key: string]: any; };
-    /**
-     * If you wish to force a crossDomain request (such as JSONP) on the same domain, set the value of crossDomain to true. This allows, for example, server-side redirection to another domain. (version added: 1.5)
-     */
-    crossDomain?: boolean;
-    /**
-     * Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).
-     */
-    data?: any;
-    /**
-     * A function to be used to handle the raw response data of XMLHttpRequest.This is a pre-filtering function to sanitize the response. You should return the sanitized data. The function accepts two arguments: The raw data returned from the server and the 'dataType' parameter.
-     */
-    dataFilter? (data: any, ty: any): any;
-    /**
-     * The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string). 
-     */
-    dataType?: string;
-    /**
-     * A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "abort", and "parsererror". When an HTTP error occurs, errorThrown receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." As of jQuery 1.5, the error setting can accept an array of functions. Each function will be called in turn. Note: This handler is not called for cross-domain script and cross-domain JSONP requests. This is an Ajax Event.
-     */
-    error? (jqXHR: JQueryXHR, textStatus: string, errorThrown: string): any;
-    /**
-     * Whether to trigger global Ajax event handlers for this request. The default is true. Set to false to prevent the global handlers like ajaxStart or ajaxStop from being triggered. This can be used to control various Ajax Events.
-     */
-    global?: boolean;
-    /**
-     * An object of additional header key/value pairs to send along with requests using the XMLHttpRequest transport. The header X-Requested-With: XMLHttpRequest is always added, but its default XMLHttpRequest value can be changed here. Values in the headers setting can also be overwritten from within the beforeSend function. (version added: 1.5)
-     */
-    headers?: { [key: string]: any; };
-    /**
-     * Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header. In jQuery 1.4 this technique also checks the 'etag' specified by the server to catch unmodified data.
-     */
-    ifModified?: boolean;
-    /**
-     * Allow the current environment to be recognized as "local," (e.g. the filesystem), even if jQuery does not recognize it as such by default. The following protocols are currently recognized as local: file, *-extension, and widget. If the isLocal setting needs modification, it is recommended to do so once in the $.ajaxSetup() method. (version added: 1.5.1)
-     */
-    isLocal?: boolean;
-    /**
-     * Override the callback function name in a jsonp request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url. So {jsonp:'onJSONPLoad'} would result in 'onJSONPLoad=?' passed to the server. As of jQuery 1.5, setting the jsonp option to false prevents jQuery from adding the "?callback" string to the URL or attempting to use "=?" for transformation. In this case, you should also explicitly set the jsonpCallback setting. For example, { jsonp: false, jsonpCallback: "callbackName" }
-     */
-    jsonp?: any;
-    /**
-     * Specify the callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests. As of jQuery 1.5, you can also use a function for this setting, in which case the value of jsonpCallback is set to the return value of that function.
-     */
-    jsonpCallback?: any;
-    /**
-     * The HTTP method to use for the request (e.g. "POST", "GET", "PUT"). (version added: 1.9.0)
-     */
-    method?: string;
-    /**
-     * A mime type to override the XHR mime type. (version added: 1.5.1)
-     */
-    mimeType?: string;
-    /**
-     * A password to be used with XMLHttpRequest in response to an HTTP access authentication request.
-     */
-    password?: string;
-    /**
-     * By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.
-     */
-    processData?: boolean;
-    /**
-     * Only applies when the "script" transport is used (e.g., cross-domain requests with "jsonp" or "script" dataType and "GET" type). Sets the charset attribute on the script tag used in the request. Used when the character set on the local page is not the same as the one on the remote script.
-     */
-    scriptCharset?: string;
-    /**
-     * An object of numeric HTTP codes and functions to be called when the response has the corresponding code. f the request is successful, the status code functions take the same parameters as the success callback; if it results in an error (including 3xx redirect), they take the same parameters as the error callback. (version added: 1.5)
-     */
-    statusCode?: { [key: string]: any; };
-    /**
-     * A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.
-     */
-    success? (data: any, textStatus: string, jqXHR: JQueryXHR): any;
-    /**
-     * Set a timeout (in milliseconds) for the request. This will override any global timeout set with $.ajaxSetup(). The timeout period starts at the point the $.ajax call is made; if several other requests are in progress and the browser has no connections available, it is possible for a request to time out before it can be sent. In jQuery 1.4.x and below, the XMLHttpRequest object will be in an invalid state if the request times out; accessing any object members may throw an exception. In Firefox 3.0+ only, script and JSONP requests cannot be cancelled by a timeout; the script will run even if it arrives after the timeout period.
-     */
-    timeout?: number;
-    /**
-     * Set this to true if you wish to use the traditional style of param serialization.
-     */
-    traditional?: boolean;
-    /**
-     * The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.
-     */
-    type?: string;
-    /**
-     * A string containing the URL to which the request is sent.
-     */
-    url?: string;
-    /**
-     * A username to be used with XMLHttpRequest in response to an HTTP access authentication request.
-     */
-    username?: string;
-    /**
-     * Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise. Override to provide your own implementation for XMLHttpRequest or enhancements to the factory.
-     */
-    xhr?: any;
-    /**
-     * An object of fieldName-fieldValue pairs to set on the native XHR object. For example, you can use it to set withCredentials to true for cross-domain requests if needed. In jQuery 1.5, the withCredentials property was not propagated to the native XHR and thus CORS requests requiring it would ignore this flag. For this reason, we recommend using jQuery 1.5.1+ should you require the use of it. (version added: 1.5.1)
-     */
-    xhrFields?: { [key: string]: any; };
-}
-
-/**
- * Interface for the jqXHR object
- */
-interface JQueryXHR extends XMLHttpRequest, JQueryPromise<any> {
-    /**
-     * The .overrideMimeType() method may be used in the beforeSend() callback function, for example, to modify the response content-type header. As of jQuery 1.5.1, the jqXHR object also contains the overrideMimeType() method (it was available in jQuery 1.4.x, as well, but was temporarily removed in jQuery 1.5). 
-     */
-    overrideMimeType(mimeType: string): any;
-    /**
-     * Cancel the request. 
-     *
-     * @param statusText A string passed as the textStatus parameter for the done callback. Default value: "canceled"
-     */
-    abort(statusText?: string): void;
-    /**
-     * Incorporates the functionality of the .done() and .fail() methods, allowing (as of jQuery 1.8) the underlying Promise to be manipulated. Refer to deferred.then() for implementation details.
-     */
-    then<R>(doneCallback: (data: any, textStatus: string, jqXHR: JQueryXHR) => R, failCallback?: (jqXHR: JQueryXHR, textStatus: string, errorThrown: any) => void): JQueryPromise<R>;
-    /**
-     * Property containing the parsed response if the response Content-Type is json
-     */
-    responseJSON?: any;
-    /**
-     * A function to be called if the request fails.
-     */
-    error(xhr: JQueryXHR, textStatus: string, errorThrown: string): void;
-}
-
-/**
- * Interface for the JQuery callback
- */
-interface JQueryCallback {
-    /**
-     * Add a callback or a collection of callbacks to a callback list.
-     * 
-     * @param callbacks A function, or array of functions, that are to be added to the callback list.
-     */
-    add(callbacks: Function): JQueryCallback;
-    /**
-     * Add a callback or a collection of callbacks to a callback list.
-     * 
-     * @param callbacks A function, or array of functions, that are to be added to the callback list.
-     */
-    add(callbacks: Function[]): JQueryCallback;
-
-    /**
-     * Disable a callback list from doing anything more.
-     */
-    disable(): JQueryCallback;
-
-    /**
-     * Determine if the callbacks list has been disabled.
-     */
-    disabled(): boolean;
-
-    /**
-     * Remove all of the callbacks from a list.
-     */
-    empty(): JQueryCallback;
-
-    /**
-     * Call all of the callbacks with the given arguments
-     * 
-     * @param arguments The argument or list of arguments to pass back to the callback list.
-     */
-    fire(...arguments: any[]): JQueryCallback;
-
-    /**
-     * Determine if the callbacks have already been called at least once.
-     */
-    fired(): boolean;
-
-    /**
-     * Call all callbacks in a list with the given context and arguments.
-     * 
-     * @param context A reference to the context in which the callbacks in the list should be fired.
-     * @param arguments An argument, or array of arguments, to pass to the callbacks in the list.
-     */
-    fireWith(context?: any, args?: any[]): JQueryCallback;
-
-    /**
-     * Determine whether a supplied callback is in a list
-     * 
-     * @param callback The callback to search for.
-     */
-    has(callback: Function): boolean;
-
-    /**
-     * Lock a callback list in its current state.
-     */
-    lock(): JQueryCallback;
-
-    /**
-     * Determine if the callbacks list has been locked.
-     */
-    locked(): boolean;
-
-    /**
-     * Remove a callback or a collection of callbacks from a callback list.
-     * 
-     * @param callbacks A function, or array of functions, that are to be removed from the callback list.
-     */
-    remove(callbacks: Function): JQueryCallback;
-    /**
-     * Remove a callback or a collection of callbacks from a callback list.
-     * 
-     * @param callbacks A function, or array of functions, that are to be removed from the callback list.
-     */
-    remove(callbacks: Function[]): JQueryCallback;
-}
-
-/**
- * Allows jQuery Promises to interop with non-jQuery promises
- */
-interface JQueryGenericPromise<T> {
-    /**
-     * Add handlers to be called when the Deferred object is resolved, rejected, or still in progress.
-     * 
-     * @param doneFilter A function that is called when the Deferred is resolved.
-     * @param failFilter An optional function that is called when the Deferred is rejected.
-     */
-    then<U>(doneFilter: (value?: T, ...values: any[]) => U|JQueryPromise<U>, failFilter?: (...reasons: any[]) => any, progressFilter?: (...progression: any[]) => any): JQueryPromise<U>;
-
-    /**
-     * Add handlers to be called when the Deferred object is resolved, rejected, or still in progress.
-     * 
-     * @param doneFilter A function that is called when the Deferred is resolved.
-     * @param failFilter An optional function that is called when the Deferred is rejected.
-     */
-    then(doneFilter: (value?: T, ...values: any[]) => void, failFilter?: (...reasons: any[]) => any, progressFilter?: (...progression: any[]) => any): JQueryPromise<void>;
-}
-
-/**
- * Interface for the JQuery promise/deferred callbacks
- */
-interface JQueryPromiseCallback<T> {
-    (value?: T, ...args: any[]): void;
-}
-
-interface JQueryPromiseOperator<T, U> {
-    (callback1: JQueryPromiseCallback<T>|JQueryPromiseCallback<T>[], ...callbacksN: Array<JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[]>): JQueryPromise<U>;
-}
-
-/**
- * Interface for the JQuery promise, part of callbacks
- */
-interface JQueryPromise<T> extends JQueryGenericPromise<T> {
-    /**
-     * Determine the current state of a Deferred object.
-     */
-    state(): string;
-    /**
-     * Add handlers to be called when the Deferred object is either resolved or rejected.
-     * 
-     * @param alwaysCallbacks1 A function, or array of functions, that is called when the Deferred is resolved or rejected.
-     * @param alwaysCallbacks2 Optional additional functions, or arrays of functions, that are called when the Deferred is resolved or rejected.
-     */
-    always(alwaysCallback1?: JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[], ...alwaysCallbacksN: Array<JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[]>): JQueryPromise<T>;
-    /**
-     * Add handlers to be called when the Deferred object is resolved.
-     * 
-     * @param doneCallbacks1 A function, or array of functions, that are called when the Deferred is resolved.
-     * @param doneCallbacks2 Optional additional functions, or arrays of functions, that are called when the Deferred is resolved.
-     */
-    done(doneCallback1?: JQueryPromiseCallback<T>|JQueryPromiseCallback<T>[], ...doneCallbackN: Array<JQueryPromiseCallback<T>|JQueryPromiseCallback<T>[]>): JQueryPromise<T>;
-    /**
-     * Add handlers to be called when the Deferred object is rejected.
-     * 
-     * @param failCallbacks1 A function, or array of functions, that are called when the Deferred is rejected.
-     * @param failCallbacks2 Optional additional functions, or arrays of functions, that are called when the Deferred is rejected.
-     */
-    fail(failCallback1?: JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[], ...failCallbacksN: Array<JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[]>): JQueryPromise<T>;
-    /**
-     * Add handlers to be called when the Deferred object generates progress notifications.
-     * 
-     * @param progressCallbacks A function, or array of functions, to be called when the Deferred generates progress notifications.
-     */
-    progress(progressCallback1?: JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[], ...progressCallbackN: Array<JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[]>): JQueryPromise<T>;
-
-    // Deprecated - given no typings
-    pipe(doneFilter?: (x: any) => any, failFilter?: (x: any) => any, progressFilter?: (x: any) => any): JQueryPromise<any>;
-}
-
-/**
- * Interface for the JQuery deferred, part of callbacks
- */
-interface JQueryDeferred<T> extends JQueryGenericPromise<T> {
-    /**
-     * Determine the current state of a Deferred object.
-     */
-    state(): string;
-    /**
-     * Add handlers to be called when the Deferred object is either resolved or rejected.
-     * 
-     * @param alwaysCallbacks1 A function, or array of functions, that is called when the Deferred is resolved or rejected.
-     * @param alwaysCallbacks2 Optional additional functions, or arrays of functions, that are called when the Deferred is resolved or rejected.
-     */
-    always(alwaysCallback1?: JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[], ...alwaysCallbacksN: Array<JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[]>): JQueryDeferred<T>;
-    /**
-     * Add handlers to be called when the Deferred object is resolved.
-     * 
-     * @param doneCallbacks1 A function, or array of functions, that are called when the Deferred is resolved.
-     * @param doneCallbacks2 Optional additional functions, or arrays of functions, that are called when the Deferred is resolved.
-     */
-    done(doneCallback1?: JQueryPromiseCallback<T>|JQueryPromiseCallback<T>[], ...doneCallbackN: Array<JQueryPromiseCallback<T>|JQueryPromiseCallback<T>[]>): JQueryDeferred<T>;
-    /**
-     * Add handlers to be called when the Deferred object is rejected.
-     * 
-     * @param failCallbacks1 A function, or array of functions, that are called when the Deferred is rejected.
-     * @param failCallbacks2 Optional additional functions, or arrays of functions, that are called when the Deferred is rejected.
-     */
-    fail(failCallback1?: JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[], ...failCallbacksN: Array<JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[]>): JQueryDeferred<T>;
-    /**
-     * Add handlers to be called when the Deferred object generates progress notifications.
-     * 
-     * @param progressCallbacks A function, or array of functions, to be called when the Deferred generates progress notifications.
-     */
-    progress(progressCallback1?: JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[], ...progressCallbackN: Array<JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[]>): JQueryDeferred<T>;
-
-    /**
-     * Call the progressCallbacks on a Deferred object with the given args.
-     * 
-     * @param args Optional arguments that are passed to the progressCallbacks.
-     */
-    notify(value?: any, ...args: any[]): JQueryDeferred<T>;
-
-    /**
-     * Call the progressCallbacks on a Deferred object with the given context and args.
-     * 
-     * @param context Context passed to the progressCallbacks as the this object.
-     * @param args Optional arguments that are passed to the progressCallbacks.
-     */
-    notifyWith(context: any, value?: any[]): JQueryDeferred<T>;
-
-    /**
-     * Reject a Deferred object and call any failCallbacks with the given args.
-     * 
-     * @param args Optional arguments that are passed to the failCallbacks.
-     */
-    reject(value?: any, ...args: any[]): JQueryDeferred<T>;
-    /**
-     * Reject a Deferred object and call any failCallbacks with the given context and args.
-     * 
-     * @param context Context passed to the failCallbacks as the this object.
-     * @param args An optional array of arguments that are passed to the failCallbacks.
-     */
-    rejectWith(context: any, value?: any[]): JQueryDeferred<T>;
-
-    /**
-     * Resolve a Deferred object and call any doneCallbacks with the given args.
-     * 
-     * @param value First argument passed to doneCallbacks.
-     * @param args Optional subsequent arguments that are passed to the doneCallbacks.
-     */
-    resolve(value?: T, ...args: any[]): JQueryDeferred<T>;
-
-    /**
-     * Resolve a Deferred object and call any doneCallbacks with the given context and args.
-     * 
-     * @param context Context passed to the doneCallbacks as the this object.
-     * @param args An optional array of arguments that are passed to the doneCallbacks.
-     */
-    resolveWith(context: any, value?: T[]): JQueryDeferred<T>;
-
-    /**
-     * Return a Deferred's Promise object.
-     * 
-     * @param target Object onto which the promise methods have to be attached
-     */
-    promise(target?: any): JQueryPromise<T>;
-
-    // Deprecated - given no typings
-    pipe(doneFilter?: (x: any) => any, failFilter?: (x: any) => any, progressFilter?: (x: any) => any): JQueryPromise<any>;
-}
-
-/**
- * Interface of the JQuery extension of the W3C event object
- */
-interface BaseJQueryEventObject extends Event {
-    data: any;
-    delegateTarget: Element;
-    isDefaultPrevented(): boolean;
-    isImmediatePropagationStopped(): boolean;
-    isPropagationStopped(): boolean;
-    namespace: string;
-    originalEvent: Event;
-    preventDefault(): any;
-    relatedTarget: Element;
-    result: any;
-    stopImmediatePropagation(): void;
-    stopPropagation(): void;
-    target: Element;
-    pageX: number;
-    pageY: number;
-    which: number;
-    metaKey: boolean;
-}
-
-interface JQueryInputEventObject extends BaseJQueryEventObject {
-    altKey: boolean;
-    ctrlKey: boolean;
-    metaKey: boolean;
-    shiftKey: boolean;
-}
-
-interface JQueryMouseEventObject extends JQueryInputEventObject {
-    button: number;
-    clientX: number;
-    clientY: number;
-    offsetX: number;
-    offsetY: number;
-    pageX: number;
-    pageY: number;
-    screenX: number;
-    screenY: number;
-}
-
-interface JQueryKeyEventObject extends JQueryInputEventObject {
-    char: any;
-    charCode: number;
-    key: any;
-    keyCode: number;
-}
-
-interface JQueryEventObject extends BaseJQueryEventObject, JQueryInputEventObject, JQueryMouseEventObject, JQueryKeyEventObject{
-}
-
-/*
-    Collection of properties of the current browser
-*/
-
-interface JQuerySupport {
-    ajax?: boolean;
-    boxModel?: boolean;
-    changeBubbles?: boolean;
-    checkClone?: boolean;
-    checkOn?: boolean;
-    cors?: boolean;
-    cssFloat?: boolean;
-    hrefNormalized?: boolean;
-    htmlSerialize?: boolean;
-    leadingWhitespace?: boolean;
-    noCloneChecked?: boolean;
-    noCloneEvent?: boolean;
-    opacity?: boolean;
-    optDisabled?: boolean;
-    optSelected?: boolean;
-    scriptEval? (): boolean;
-    style?: boolean;
-    submitBubbles?: boolean;
-    tbody?: boolean;
-}
-
-interface JQueryParam {
-    /**
-     * Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.
-     * 
-     * @param obj An array or object to serialize.
-     */
-    (obj: any): string;
-
-    /**
-     * Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.
-     * 
-     * @param obj An array or object to serialize.
-     * @param traditional A Boolean indicating whether to perform a traditional "shallow" serialization.
-     */
-    (obj: any, traditional: boolean): string;
-}
-
-/**
- * The interface used to construct jQuery events (with $.Event). It is
- * defined separately instead of inline in JQueryStatic to allow
- * overriding the construction function with specific strings
- * returning specific event objects.
- */
-interface JQueryEventConstructor {
-    (name: string, eventProperties?: any): JQueryEventObject;
-    new (name: string, eventProperties?: any): JQueryEventObject;
-}
-
-/**
- * The interface used to specify coordinates.
- */
-interface JQueryCoordinates {
-    left: number;
-    top: number;
-}
-
-/**
- * Elements in the array returned by serializeArray()
- */
-interface JQuerySerializeArrayElement {
-    name: string;
-    value: string;
-}
-
-interface JQueryAnimationOptions { 
-    /**
-     * A string or number determining how long the animation will run.
-     */
-    duration?: any; 
-    /**
-     * A string indicating which easing function to use for the transition.
-     */
-    easing?: string; 
-    /**
-     * A function to call once the animation is complete.
-     */
-    complete?: Function; 
-    /**
-     * A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
-     */
-    step?: (now: number, tween: any) => any; 
-    /**
-     * A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties. (version added: 1.8)
-     */
-    progress?: (animation: JQueryPromise<any>, progress: number, remainingMs: number) => any; 
-    /**
-     * A function to call when the animation begins. (version added: 1.8)
-     */
-    start?: (animation: JQueryPromise<any>) => any; 
-    /**
-     * A function to be called when the animation completes (its Promise object is resolved). (version added: 1.8)
-     */
-    done?: (animation: JQueryPromise<any>, jumpedToEnd: boolean) => any; 
-    /**
-     * A function to be called when the animation fails to complete (its Promise object is rejected). (version added: 1.8)
-     */
-    fail?: (animation: JQueryPromise<any>, jumpedToEnd: boolean) => any; 
-    /**
-     * A function to be called when the animation completes or stops without completing (its Promise object is either resolved or rejected). (version added: 1.8)
-     */
-    always?: (animation: JQueryPromise<any>, jumpedToEnd: boolean) => any; 
-    /**
-     * A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it.
-     */
-    queue?: any; 
-    /**
-     * A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions. (version added: 1.4)
-     */
-    specialEasing?: Object;
-}
-
-interface JQueryEasingFunction {
-    ( percent: number ): number;
-}
-
-interface JQueryEasingFunctions {
-    [ name: string ]: JQueryEasingFunction;
-    linear: JQueryEasingFunction;
-    swing: JQueryEasingFunction;
-}
-
-/**
- * Static members of jQuery (those on $ and jQuery themselves)
- */
-interface JQueryStatic {
-
-    /**
-     * Perform an asynchronous HTTP (Ajax) request.
-     *
-     * @param settings A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with $.ajaxSetup().
-     */
-    ajax(settings: JQueryAjaxSettings): JQueryXHR;
-    /**
-     * Perform an asynchronous HTTP (Ajax) request.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param settings A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with $.ajaxSetup().
-     */
-    ajax(url: string, settings?: JQueryAjaxSettings): JQueryXHR;
-
-    /**
-     * Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax().
-     *
-     * @param dataTypes An optional string containing one or more space-separated dataTypes
-     * @param handler A handler to set default values for future Ajax requests.
-     */
-    ajaxPrefilter(dataTypes: string, handler: (opts: any, originalOpts: JQueryAjaxSettings, jqXHR: JQueryXHR) => any): void;
-    /**
-     * Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax().
-     *
-     * @param handler A handler to set default values for future Ajax requests.
-     */
-    ajaxPrefilter(handler: (opts: any, originalOpts: JQueryAjaxSettings, jqXHR: JQueryXHR) => any): void;
-
-    ajaxSettings: JQueryAjaxSettings;
-
-     /**
-      * Set default values for future Ajax requests. Its use is not recommended.
-      *
-      * @param options A set of key/value pairs that configure the default Ajax request. All options are optional.
-      */
-    ajaxSetup(options: JQueryAjaxSettings): void;
-
-    /**
-     * Load data from the server using a HTTP GET request.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param success A callback function that is executed if the request succeeds.
-     * @param dataType The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html).
-     */
-    get(url: string, success?: (data: any, textStatus: string, jqXHR: JQueryXHR) => any, dataType?: string): JQueryXHR;
-    /**
-     * Load data from the server using a HTTP GET request.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param data A plain object or string that is sent to the server with the request.
-     * @param success A callback function that is executed if the request succeeds.
-     * @param dataType The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html).
-     */
-    get(url: string, data?: Object|string, success?: (data: any, textStatus: string, jqXHR: JQueryXHR) => any, dataType?: string): JQueryXHR;
-    /**
-     * Load data from the server using a HTTP GET request.
-     *
-     * @param settings The JQueryAjaxSettings to be used for the request
-     */
-    get(settings : JQueryAjaxSettings): JQueryXHR;
-    /**
-     * Load JSON-encoded data from the server using a GET HTTP request.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param success A callback function that is executed if the request succeeds.
-     */
-    getJSON(url: string, success?: (data: any, textStatus: string, jqXHR: JQueryXHR) => any): JQueryXHR;
-    /**
-     * Load JSON-encoded data from the server using a GET HTTP request.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param data A plain object or string that is sent to the server with the request.
-     * @param success A callback function that is executed if the request succeeds.
-     */
-    getJSON(url: string, data?: Object|string, success?: (data: any, textStatus: string, jqXHR: JQueryXHR) => any): JQueryXHR;
-    /**
-     * Load a JavaScript file from the server using a GET HTTP request, then execute it.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param success A callback function that is executed if the request succeeds.
-     */
-    getScript(url: string, success?: (script: string, textStatus: string, jqXHR: JQueryXHR) => any): JQueryXHR;
-
-    /**
-     * Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.
-     */
-    param: JQueryParam;
-
-    /**
-     * Load data from the server using a HTTP POST request.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param success A callback function that is executed if the request succeeds. Required if dataType is provided, but can be null in that case.
-     * @param dataType The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).
-     */
-    post(url: string, success?: (data: any, textStatus: string, jqXHR: JQueryXHR) => any, dataType?: string): JQueryXHR;
-    /**
-     * Load data from the server using a HTTP POST request.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param data A plain object or string that is sent to the server with the request.
-     * @param success A callback function that is executed if the request succeeds. Required if dataType is provided, but can be null in that case.
-     * @param dataType The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).
-     */
-    post(url: string, data?: Object|string, success?: (data: any, textStatus: string, jqXHR: JQueryXHR) => any, dataType?: string): JQueryXHR;
-    /**
-     * Load data from the server using a HTTP POST request.
-     *
-     * @param settings The JQueryAjaxSettings to be used for the request
-     */
-    post(settings : JQueryAjaxSettings): JQueryXHR;
-    /**
-     * A multi-purpose callbacks list object that provides a powerful way to manage callback lists.
-     *
-     * @param flags An optional list of space-separated flags that change how the callback list behaves.
-     */
-    Callbacks(flags?: string): JQueryCallback;
-
-    /**
-     * Holds or releases the execution of jQuery's ready event.
-     *
-     * @param hold Indicates whether the ready hold is being requested or released
-     */
-    holdReady(hold: boolean): void;
-
-    /**
-     * Accepts a string containing a CSS selector which is then used to match a set of elements.
-     *
-     * @param selector A string containing a selector expression
-     * @param context A DOM Element, Document, or jQuery to use as context
-     */
-    (selector: string, context?: Element|JQuery): JQuery;
-
-    /**
-     * Accepts a string containing a CSS selector which is then used to match a set of elements.
-     *
-     * @param element A DOM element to wrap in a jQuery object.
-     */
-    (element: Element): JQuery;
-
-    /**
-     * Accepts a string containing a CSS selector which is then used to match a set of elements.
-     *
-     * @param elementArray An array containing a set of DOM elements to wrap in a jQuery object.
-     */
-    (elementArray: Element[]): JQuery;
-
-    /**
-     * Binds a function to be executed when the DOM has finished loading.
-     *
-     * @param callback A function to execute after the DOM is ready.
-     */
-    (callback: (jQueryAlias?: JQueryStatic) => any): JQuery;
-
-    /**
-     * Accepts a string containing a CSS selector which is then used to match a set of elements.
-     *
-     * @param object A plain object to wrap in a jQuery object.
-     */
-    (object: {}): JQuery;
-
-    /**
-     * Accepts a string containing a CSS selector which is then used to match a set of elements.
-     *
-     * @param object An existing jQuery object to clone.
-     */
-    (object: JQuery): JQuery;
-
-    /**
-     * Specify a function to execute when the DOM is fully loaded.
-     */
-    (): JQuery;
-
-    /**
-     * Creates DOM elements on the fly from the provided string of raw HTML.
-     *
-     * @param html A string of HTML to create on the fly. Note that this parses HTML, not XML.
-     * @param ownerDocument A document in which the new elements will be created.
-     */
-    (html: string, ownerDocument?: Document): JQuery;
-
-    /**
-     * Creates DOM elements on the fly from the provided string of raw HTML.
-     *
-     * @param html A string defining a single, standalone, HTML element (e.g. <div/> or <div></div>).
-     * @param attributes An object of attributes, events, and methods to call on the newly-created element.
-     */
-    (html: string, attributes: Object): JQuery;
-
-    /**
-     * Relinquish jQuery's control of the $ variable.
-     *
-     * @param removeAll A Boolean indicating whether to remove all jQuery variables from the global scope (including jQuery itself).
-     */
-    noConflict(removeAll?: boolean): JQueryStatic;
-
-    /**
-     * Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.
-     *
-     * @param deferreds One or more Deferred objects, or plain JavaScript objects.
-     */
-    when<T>(...deferreds: Array<T|JQueryPromise<T>/* as JQueryDeferred<T> */>): JQueryPromise<T>;
-
-    /**
-     * Hook directly into jQuery to override how particular CSS properties are retrieved or set, normalize CSS property naming, or create custom properties.
-     */
-    cssHooks: { [key: string]: any; };
-    cssNumber: any;
-
-    /**
-     * Store arbitrary data associated with the specified element. Returns the value that was set.
-     *
-     * @param element The DOM element to associate with the data.
-     * @param key A string naming the piece of data to set.
-     * @param value The new data value.
-     */
-    data<T>(element: Element, key: string, value: T): T;
-    /**
-     * Returns value at named data store for the element, as set by jQuery.data(element, name, value), or the full data store for the element.
-     *
-     * @param element The DOM element to associate with the data.
-     * @param key A string naming the piece of data to set.
-     */
-    data(element: Element, key: string): any;
-    /**
-     * Returns value at named data store for the element, as set by jQuery.data(element, name, value), or the full data store for the element.
-     *
-     * @param element The DOM element to associate with the data.
-     */
-    data(element: Element): any;
-
-    /**
-     * Execute the next function on the queue for the matched element.
-     *
-     * @param element A DOM element from which to remove and execute a queued function.
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     */
-    dequeue(element: Element, queueName?: string): void;
-
-    /**
-     * Determine whether an element has any jQuery data associated with it.
-     *
-     * @param element A DOM element to be checked for data.
-     */
-    hasData(element: Element): boolean;
-
-    /**
-     * Show the queue of functions to be executed on the matched element.
-     *
-     * @param element A DOM element to inspect for an attached queue.
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     */
-    queue(element: Element, queueName?: string): any[];
-    /**
-     * Manipulate the queue of functions to be executed on the matched element.
-     *
-     * @param element A DOM element where the array of queued functions is attached.
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     * @param newQueue An array of functions to replace the current queue contents.
-     */
-    queue(element: Element, queueName: string, newQueue: Function[]): JQuery;
-    /**
-     * Manipulate the queue of functions to be executed on the matched element.
-     *
-     * @param element A DOM element on which to add a queued function.
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     * @param callback The new function to add to the queue.
-     */
-    queue(element: Element, queueName: string, callback: Function): JQuery;
-
-    /**
-     * Remove a previously-stored piece of data.
-     *
-     * @param element A DOM element from which to remove data.
-     * @param name A string naming the piece of data to remove.
-     */
-    removeData(element: Element, name?: string): JQuery;
-
-    /**
-     * A constructor function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.
-     *
-     * @param beforeStart A function that is called just before the constructor returns.
-     */
-    Deferred<T>(beforeStart?: (deferred: JQueryDeferred<T>) => any): JQueryDeferred<T>;
-
-    /**
-     * Effects
-     */
-
-    easing: JQueryEasingFunctions;
-
-    fx: {
-        tick: () => void;
-        /**
-         * The rate (in milliseconds) at which animations fire.
-         */
-        interval: number;
-        stop: () => void;
-        speeds: { slow: number; fast: number; };
-        /**
-         * Globally disable all animations.
-         */
-        off: boolean;
-        step: any;
-    };
-
-    /**
-     * Takes a function and returns a new one that will always have a particular context.
-     *
-     * @param fnction The function whose context will be changed.
-     * @param context The object to which the context (this) of the function should be set.
-     * @param additionalArguments Any number of arguments to be passed to the function referenced in the function argument.
-     */
-    proxy(fnction: (...args: any[]) => any, context: Object, ...additionalArguments: any[]): any;
-    /**
-     * Takes a function and returns a new one that will always have a particular context.
-     *
-     * @param context The object to which the context (this) of the function should be set.
-     * @param name The name of the function whose context will be changed (should be a property of the context object).
-     * @param additionalArguments Any number of arguments to be passed to the function named in the name argument.
-     */
-    proxy(context: Object, name: string, ...additionalArguments: any[]): any;
-
-    Event: JQueryEventConstructor;
-
-    /**
-     * Takes a string and throws an exception containing it.
-     *
-     * @param message The message to send out.
-     */
-    error(message: any): JQuery;
-
-    expr: any;
-    fn: any;  //TODO: Decide how we want to type this
-
-    isReady: boolean;
-
-    // Properties
-    support: JQuerySupport;
-
-    /**
-     * Check to see if a DOM element is a descendant of another DOM element.
-     * 
-     * @param container The DOM element that may contain the other element.
-     * @param contained The DOM element that may be contained by (a descendant of) the other element.
-     */
-    contains(container: Element, contained: Element): boolean;
-
-    /**
-     * A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.
-     * 
-     * @param collection The object or array to iterate over.
-     * @param callback The function that will be executed on every object.
-     */
-    each<T>(
-        collection: T[],
-        callback: (indexInArray: number, valueOfElement: T) => any
-        ): any;
-
-    /**
-     * A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.
-     * 
-     * @param collection The object or array to iterate over.
-     * @param callback The function that will be executed on every object.
-     */
-    each(
-        collection: any,
-        callback: (indexInArray: any, valueOfElement: any) => any
-        ): any;
-
-    /**
-     * Merge the contents of two or more objects together into the first object.
-     *
-     * @param target An object that will receive the new properties if additional objects are passed in or that will extend the jQuery namespace if it is the sole argument.
-     * @param object1 An object containing additional properties to merge in.
-     * @param objectN Additional objects containing properties to merge in.
-     */
-    extend(target: any, object1?: any, ...objectN: any[]): any;
-    /**
-     * Merge the contents of two or more objects together into the first object.
-     *
-     * @param deep If true, the merge becomes recursive (aka. deep copy).
-     * @param target The object to extend. It will receive the new properties.
-     * @param object1 An object containing additional properties to merge in.
-     * @param objectN Additional objects containing properties to merge in.
-     */
-    extend(deep: boolean, target: any, object1?: any, ...objectN: any[]): any;
-
-    /**
-     * Execute some JavaScript code globally.
-     *
-     * @param code The JavaScript code to execute.
-     */
-    globalEval(code: string): any;
-
-    /**
-     * Finds the elements of an array which satisfy a filter function. The original array is not affected.
-     *
-     * @param array The array to search through.
-     * @param func The function to process each item against. The first argument to the function is the item, and the second argument is the index. The function should return a Boolean value.  this will be the global window object.
-     * @param invert If "invert" is false, or not provided, then the function returns an array consisting of all elements for which "callback" returns true. If "invert" is true, then the function returns an array consisting of all elements for which "callback" returns false.
-     */
-    grep<T>(array: T[], func: (elementOfArray: T, indexInArray: number) => boolean, invert?: boolean): T[];
-
-    /**
-     * Search for a specified value within an array and return its index (or -1 if not found).
-     *
-     * @param value The value to search for.
-     * @param array An array through which to search.
-     * @param fromIndex he index of the array at which to begin the search. The default is 0, which will search the whole array.
-     */
-    inArray<T>(value: T, array: T[], fromIndex?: number): number;
-
-    /**
-     * Determine whether the argument is an array.
-     *
-     * @param obj Object to test whether or not it is an array.
-     */
-    isArray(obj: any): boolean;
-    /**
-     * Check to see if an object is empty (contains no enumerable properties).
-     *
-     * @param obj The object that will be checked to see if it's empty.
-     */
-    isEmptyObject(obj: any): boolean;
-    /**
-     * Determine if the argument passed is a Javascript function object.
-     *
-     * @param obj Object to test whether or not it is a function.
-     */
-    isFunction(obj: any): boolean;
-    /**
-     * Determines whether its argument is a number.
-     *
-     * @param obj The value to be tested.
-     */
-    isNumeric(value: any): boolean;
-    /**
-     * Check to see if an object is a plain object (created using "{}" or "new Object").
-     *
-     * @param obj The object that will be checked to see if it's a plain object.
-     */
-    isPlainObject(obj: any): boolean;
-    /**
-     * Determine whether the argument is a window.
-     *
-     * @param obj Object to test whether or not it is a window.
-     */
-    isWindow(obj: any): boolean;
-    /**
-     * Check to see if a DOM node is within an XML document (or is an XML document).
-     *
-     * @param node he DOM node that will be checked to see if it's in an XML document.
-     */
-    isXMLDoc(node: Node): boolean;
-
-    /**
-     * Convert an array-like object into a true JavaScript array.
-     * 
-     * @param obj Any object to turn into a native Array.
-     */
-    makeArray(obj: any): any[];
-
-    /**
-     * Translate all items in an array or object to new array of items.
-     * 
-     * @param array The Array to translate.
-     * @param callback The function to process each item against. The first argument to the function is the array item, the second argument is the index in array The function can return any value. Within the function, this refers to the global (window) object.
-     */
-    map<T, U>(array: T[], callback: (elementOfArray: T, indexInArray: number) => U): U[];
-    /**
-     * Translate all items in an array or object to new array of items.
-     * 
-     * @param arrayOrObject The Array or Object to translate.
-     * @param callback The function to process each item against. The first argument to the function is the value; the second argument is the index or key of the array or object property. The function can return any value to add to the array. A returned array will be flattened into the resulting array. Within the function, this refers to the global (window) object.
-     */
-    map(arrayOrObject: any, callback: (value: any, indexOrKey: any) => any): any;
-
-    /**
-     * Merge the contents of two arrays together into the first array.
-     * 
-     * @param first The first array to merge, the elements of second added.
-     * @param second The second array to merge into the first, unaltered.
-     */
-    merge<T>(first: T[], second: T[]): T[];
-
-    /**
-     * An empty function.
-     */
-    noop(): any;
-
-    /**
-     * Return a number representing the current time.
-     */
-    now(): number;
-
-    /**
-     * Takes a well-formed JSON string and returns the resulting JavaScript object.
-     * 
-     * @param json The JSON string to parse.
-     */
-    parseJSON(json: string): any;
-
-    /**
-     * Parses a string into an XML document.
-     *
-     * @param data a well-formed XML string to be parsed
-     */
-    parseXML(data: string): XMLDocument;
-
-    /**
-     * Remove the whitespace from the beginning and end of a string.
-     * 
-     * @param str Remove the whitespace from the beginning and end of a string.
-     */
-    trim(str: string): string;
-
-    /**
-     * Determine the internal JavaScript [[Class]] of an object.
-     * 
-     * @param obj Object to get the internal JavaScript [[Class]] of.
-     */
-    type(obj: any): string;
-
-    /**
-     * Sorts an array of DOM elements, in place, with the duplicates removed. Note that this only works on arrays of DOM elements, not strings or numbers.
-     * 
-     * @param array The Array of DOM elements.
-     */
-    unique(array: Element[]): Element[];
-
-    /**
-     * Parses a string into an array of DOM nodes.
-     *
-     * @param data HTML string to be parsed
-     * @param context DOM element to serve as the context in which the HTML fragment will be created
-     * @param keepScripts A Boolean indicating whether to include scripts passed in the HTML string
-     */
-    parseHTML(data: string, context?: HTMLElement, keepScripts?: boolean): any[];
-
-    /**
-     * Parses a string into an array of DOM nodes.
-     *
-     * @param data HTML string to be parsed
-     * @param context DOM element to serve as the context in which the HTML fragment will be created
-     * @param keepScripts A Boolean indicating whether to include scripts passed in the HTML string
-     */
-    parseHTML(data: string, context?: Document, keepScripts?: boolean): any[];
-}
-
-/**
- * The jQuery instance members
- */
-interface JQuery {
-    /**
-     * Register a handler to be called when Ajax requests complete. This is an AjaxEvent.
-     *
-     * @param handler The function to be invoked.
-     */
-    ajaxComplete(handler: (event: JQueryEventObject, XMLHttpRequest: XMLHttpRequest, ajaxOptions: any) => any): JQuery;
-    /**
-     * Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.
-     *
-     * @param handler The function to be invoked.
-     */
-    ajaxError(handler: (event: JQueryEventObject, jqXHR: JQueryXHR, ajaxSettings: JQueryAjaxSettings, thrownError: any) => any): JQuery;
-    /**
-     * Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.
-     *
-     * @param handler The function to be invoked.
-     */
-    ajaxSend(handler: (event: JQueryEventObject, jqXHR: JQueryXHR, ajaxOptions: JQueryAjaxSettings) => any): JQuery;
-    /**
-     * Register a handler to be called when the first Ajax request begins. This is an Ajax Event.
-     *
-     * @param handler The function to be invoked.
-     */
-    ajaxStart(handler: () => any): JQuery;
-    /**
-     * Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.
-     *
-     * @param handler The function to be invoked.
-     */
-    ajaxStop(handler: () => any): JQuery;
-    /**
-     * Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event.
-     *
-     * @param handler The function to be invoked.
-     */
-    ajaxSuccess(handler: (event: JQueryEventObject, XMLHttpRequest: XMLHttpRequest, ajaxOptions: JQueryAjaxSettings) => any): JQuery;
-
-    /**
-     * Load data from the server and place the returned HTML into the matched element.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param data A plain object or string that is sent to the server with the request.
-     * @param complete A callback function that is executed when the request completes.
-     */
-    load(url: string, data?: string|Object, complete?: (responseText: string, textStatus: string, XMLHttpRequest: XMLHttpRequest) => any): JQuery;
-
-    /**
-     * Encode a set of form elements as a string for submission.
-     */
-    serialize(): string;
-    /**
-     * Encode a set of form elements as an array of names and values.
-     */
-    serializeArray(): JQuerySerializeArrayElement[];
-
-    /**
-     * Adds the specified class(es) to each of the set of matched elements.
-     *
-     * @param className One or more space-separated classes to be added to the class attribute of each matched element.
-     */
-    addClass(className: string): JQuery;
-    /**
-     * Adds the specified class(es) to each of the set of matched elements.
-     *
-     * @param function A function returning one or more space-separated class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, this refers to the current element in the set.
-     */
-    addClass(func: (index: number, className: string) => string): JQuery;
-
-    /**
-     * Add the previous set of elements on the stack to the current set, optionally filtered by a selector.
-     */
-    addBack(selector?: string): JQuery;
-
-    /**
-     * Get the value of an attribute for the first element in the set of matched elements.
-     *
-     * @param attributeName The name of the attribute to get.
-     */
-    attr(attributeName: string): string;
-    /**
-     * Set one or more attributes for the set of matched elements.
-     *
-     * @param attributeName The name of the attribute to set.
-     * @param value A value to set for the attribute.
-     */
-    attr(attributeName: string, value: string|number): JQuery;
-    /**
-     * Set one or more attributes for the set of matched elements.
-     *
-     * @param attributeName The name of the attribute to set.
-     * @param func A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old attribute value as arguments.
-     */
-    attr(attributeName: string, func: (index: number, attr: string) => string|number): JQuery;
-    /**
-     * Set one or more attributes for the set of matched elements.
-     *
-     * @param attributes An object of attribute-value pairs to set.
-     */
-    attr(attributes: Object): JQuery;
-    
-    /**
-     * Determine whether any of the matched elements are assigned the given class.
-     *
-     * @param className The class name to search for.
-     */
-    hasClass(className: string): boolean;
-
-    /**
-     * Get the HTML contents of the first element in the set of matched elements.
-     */
-    html(): string;
-    /**
-     * Set the HTML contents of each element in the set of matched elements.
-     *
-     * @param htmlString A string of HTML to set as the content of each matched element.
-     */
-    html(htmlString: string): JQuery;
-    /**
-     * Set the HTML contents of each element in the set of matched elements.
-     *
-     * @param func A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments. jQuery empties the element before calling the function; use the oldhtml argument to reference the previous content. Within the function, this refers to the current element in the set.
-     */
-    html(func: (index: number, oldhtml: string) => string): JQuery;
-    /**
-     * Set the HTML contents of each element in the set of matched elements.
-     *
-     * @param func A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments. jQuery empties the element before calling the function; use the oldhtml argument to reference the previous content. Within the function, this refers to the current element in the set.
-     */
-
-    /**
-     * Get the value of a property for the first element in the set of matched elements.
-     *
-     * @param propertyName The name of the property to get.
-     */
-    prop(propertyName: string): any;
-    /**
-     * Set one or more properties for the set of matched elements.
-     *
-     * @param propertyName The name of the property to set.
-     * @param value A value to set for the property.
-     */
-    prop(propertyName: string, value: string|number|boolean): JQuery;
-    /**
-     * Set one or more properties for the set of matched elements.
-     *
-     * @param properties An object of property-value pairs to set.
-     */
-    prop(properties: Object): JQuery;
-    /**
-     * Set one or more properties for the set of matched elements.
-     *
-     * @param propertyName The name of the property to set.
-     * @param func A function returning the value to set. Receives the index position of the element in the set and the old property value as arguments. Within the function, the keyword this refers to the current element.
-     */
-    prop(propertyName: string, func: (index: number, oldPropertyValue: any) => any): JQuery;
-
-    /**
-     * Remove an attribute from each element in the set of matched elements.
-     *
-     * @param attributeName An attribute to remove; as of version 1.7, it can be a space-separated list of attributes.
-     */
-    removeAttr(attributeName: string): JQuery;
-
-    /**
-     * Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
-     *
-     * @param className One or more space-separated classes to be removed from the class attribute of each matched element.
-     */
-    removeClass(className?: string): JQuery;
-    /**
-     * Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
-     *
-     * @param function A function returning one or more space-separated class names to be removed. Receives the index position of the element in the set and the old class value as arguments.
-     */
-    removeClass(func: (index: number, className: string) => string): JQuery;
-
-    /**
-     * Remove a property for the set of matched elements.
-     *
-     * @param propertyName The name of the property to remove.
-     */
-    removeProp(propertyName: string): JQuery;
-
-    /**
-     * Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
-     *
-     * @param className One or more class names (separated by spaces) to be toggled for each element in the matched set.
-     * @param swtch A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.
-     */
-    toggleClass(className: string, swtch?: boolean): JQuery;
-    /**
-     * Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
-     *
-     * @param swtch A boolean value to determine whether the class should be added or removed.
-     */
-    toggleClass(swtch?: boolean): JQuery;
-    /**
-     * Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
-     *
-     * @param func A function that returns class names to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set, the old class value, and the switch as arguments.
-     * @param swtch A boolean value to determine whether the class should be added or removed.
-     */
-    toggleClass(func: (index: number, className: string, swtch: boolean) => string, swtch?: boolean): JQuery;
-
-    /**
-     * Get the current value of the first element in the set of matched elements.
-     */
-    val(): any;
-    /**
-     * Set the value of each element in the set of matched elements.
-     *
-     * @param value A string of text, an array of strings or number corresponding to the value of each matched element to set as selected/checked.
-     */
-    val(value: string|string[]|number): JQuery;
-    /**
-     * Set the value of each element in the set of matched elements.
-     *
-     * @param func A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.
-     */
-    val(func: (index: number, value: string) => string): JQuery;
-
-
-    /**
-     * Get the value of style properties for the first element in the set of matched elements.
-     *
-     * @param propertyName A CSS property.
-     */
-    css(propertyName: string): string;
-    /**
-     * Set one or more CSS properties for the set of matched elements.
-     *
-     * @param propertyName A CSS property name.
-     * @param value A value to set for the property.
-     */
-    css(propertyName: string, value: string|number): JQuery;
-    /**
-     * Set one or more CSS properties for the set of matched elements.
-     *
-     * @param propertyName A CSS property name.
-     * @param value A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.
-     */
-    css(propertyName: string, value: (index: number, value: string) => string|number): JQuery;
-    /**
-     * Set one or more CSS properties for the set of matched elements.
-     *
-     * @param properties An object of property-value pairs to set.
-     */
-    css(properties: Object): JQuery;
-
-    /**
-     * Get the current computed height for the first element in the set of matched elements.
-     */
-    height(): number;
-    /**
-     * Set the CSS height of every matched element.
-     *
-     * @param value An integer representing the number of pixels, or an integer with an optional unit of measure appended (as a string).
-     */
-    height(value: number|string): JQuery;
-    /**
-     * Set the CSS height of every matched element.
-     *
-     * @param func A function returning the height to set. Receives the index position of the element in the set and the old height as arguments. Within the function, this refers to the current element in the set.
-     */
-    height(func: (index: number, height: number) => number|string): JQuery;
-
-    /**
-     * Get the current computed height for the first element in the set of matched elements, including padding but not border.
-     */
-    innerHeight(): number;
-
-    /**
-     * Sets the inner height on elements in the set of matched elements, including padding but not border.
-     *
-     * @param value An integer representing the number of pixels, or an integer along with an optional unit of measure appended (as a string).
-     */
-    innerHeight(height: number|string): JQuery;
-    
-    /**
-     * Get the current computed width for the first element in the set of matched elements, including padding but not border.
-     */
-    innerWidth(): number;
-
-    /**
-     * Sets the inner width on elements in the set of matched elements, including padding but not border.
-     *
-     * @param value An integer representing the number of pixels, or an integer along with an optional unit of measure appended (as a string).
-     */
-    innerWidth(width: number|string): JQuery;
-    
-    /**
-     * Get the current coordinates of the first element in the set of matched elements, relative to the document.
-     */
-    offset(): JQueryCoordinates;
-    /**
-     * An object containing the properties top and left, which are integers indicating the new top and left coordinates for the elements.
-     *
-     * @param coordinates An object containing the properties top and left, which are integers indicating the new top and left coordinates for the elements.
-     */
-    offset(coordinates: JQueryCoordinates): JQuery;
-    /**
-     * An object containing the properties top and left, which are integers indicating the new top and left coordinates for the elements.
-     *
-     * @param func A function to return the coordinates to set. Receives the index of the element in the collection as the first argument and the current coordinates as the second argument. The function should return an object with the new top and left properties.
-     */
-    offset(func: (index: number, coords: JQueryCoordinates) => JQueryCoordinates): JQuery;
-
-    /**
-     * Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns an integer (without "px") representation of the value or null if called on an empty set of elements.
-     *
-     * @param includeMargin A Boolean indicating whether to include the element's margin in the calculation.
-     */
-    outerHeight(includeMargin?: boolean): number;
-
-    /**
-     * Sets the outer height on elements in the set of matched elements, including padding and border.
-     *
-     * @param value An integer representing the number of pixels, or an integer along with an optional unit of measure appended (as a string).
-     */
-    outerHeight(height: number|string): JQuery;
-
-    /**
-     * Get the current computed width for the first element in the set of matched elements, including padding and border.
-     *
-     * @param includeMargin A Boolean indicating whether to include the element's margin in the calculation.
-     */
-    outerWidth(includeMargin?: boolean): number;
-
-    /**
-     * Sets the outer width on elements in the set of matched elements, including padding and border.
-     *
-     * @param value An integer representing the number of pixels, or an integer along with an optional unit of measure appended (as a string).
-     */
-    outerWidth(width: number|string): JQuery;
-
-    /**
-     * Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
-     */
-    position(): JQueryCoordinates;
-
-    /**
-     * Get the current horizontal position of the scroll bar for the first element in the set of matched elements or set the horizontal position of the scroll bar for every matched element.
-     */
-    scrollLeft(): number;
-    /**
-     * Set the current horizontal position of the scroll bar for each of the set of matched elements.
-     *
-     * @param value An integer indicating the new position to set the scroll bar to.
-     */
-    scrollLeft(value: number): JQuery;
-
-    /**
-     * Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.
-     */
-    scrollTop(): number;
-    /**
-     * Set the current vertical position of the scroll bar for each of the set of matched elements.
-     *
-     * @param value An integer indicating the new position to set the scroll bar to.
-     */
-    scrollTop(value: number): JQuery;
-
-    /**
-     * Get the current computed width for the first element in the set of matched elements.
-     */
-    width(): number;
-    /**
-     * Set the CSS width of each element in the set of matched elements.
-     *
-     * @param value An integer representing the number of pixels, or an integer along with an optional unit of measure appended (as a string).
-     */
-    width(value: number|string): JQuery;
-    /**
-     * Set the CSS width of each element in the set of matched elements.
-     *
-     * @param func A function returning the width to set. Receives the index position of the element in the set and the old width as arguments. Within the function, this refers to the current element in the set.
-     */
-    width(func: (index: number, width: number) => number|string): JQuery;
-
-    /**
-     * Remove from the queue all items that have not yet been run.
-     *
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     */
-    clearQueue(queueName?: string): JQuery;
-
-    /**
-     * Store arbitrary data associated with the matched elements.
-     *
-     * @param key A string naming the piece of data to set.
-     * @param value The new data value; it can be any Javascript type including Array or Object.
-     */
-    data(key: string, value: any): JQuery;
-    /**
-     * Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.
-     *
-     * @param key Name of the data stored.
-     */
-    data(key: string): any;
-    /**
-     * Store arbitrary data associated with the matched elements.
-     *
-     * @param obj An object of key-value pairs of data to update.
-     */
-    data(obj: { [key: string]: any; }): JQuery;
-    /**
-     * Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.
-     */
-    data(): any;
-
-    /**
-     * Execute the next function on the queue for the matched elements.
-     *
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     */
-    dequeue(queueName?: string): JQuery;
-
-    /**
-     * Remove a previously-stored piece of data.
-     *
-     * @param name A string naming the piece of data to delete or space-separated string naming the pieces of data to delete.
-     */
-    removeData(name: string): JQuery;
-    /**
-     * Remove a previously-stored piece of data.
-     *
-     * @param list An array of strings naming the pieces of data to delete.
-     */
-    removeData(list: string[]): JQuery;
-    /**
-     * Remove all previously-stored piece of data.
-     */
-    removeData(): JQuery;
-
-    /**
-     * Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.
-     *
-     * @param type The type of queue that needs to be observed. (default: fx)
-     * @param target Object onto which the promise methods have to be attached
-     */
-    promise(type?: string, target?: Object): JQueryPromise<any>;
-
-    /**
-     * Perform a custom animation of a set of CSS properties.
-     *
-     * @param properties An object of CSS properties and values that the animation will move toward.
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    animate(properties: Object, duration?: string|number, complete?: Function): JQuery;
-    /**
-     * Perform a custom animation of a set of CSS properties.
-     *
-     * @param properties An object of CSS properties and values that the animation will move toward.
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition. (default: swing)
-     * @param complete A function to call once the animation is complete.
-     */
-    animate(properties: Object, duration?: string|number, easing?: string, complete?: Function): JQuery;
-    /**
-     * Perform a custom animation of a set of CSS properties.
-     *
-     * @param properties An object of CSS properties and values that the animation will move toward.
-     * @param options A map of additional options to pass to the method.
-     */
-    animate(properties: Object, options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Set a timer to delay execution of subsequent items in the queue.
-     *
-     * @param duration An integer indicating the number of milliseconds to delay execution of the next item in the queue.
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     */
-    delay(duration: number, queueName?: string): JQuery;
-
-    /**
-     * Display the matched elements by fading them to opaque.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeIn(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Display the matched elements by fading them to opaque.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeIn(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Display the matched elements by fading them to opaque.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    fadeIn(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Hide the matched elements by fading them to transparent.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeOut(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Hide the matched elements by fading them to transparent.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeOut(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Hide the matched elements by fading them to transparent.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    fadeOut(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Adjust the opacity of the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param opacity A number between 0 and 1 denoting the target opacity.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeTo(duration: string|number, opacity: number, complete?: Function): JQuery;
-    /**
-     * Adjust the opacity of the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param opacity A number between 0 and 1 denoting the target opacity.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeTo(duration: string|number, opacity: number, easing?: string, complete?: Function): JQuery;
-
-    /**
-     * Display or hide the matched elements by animating their opacity.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeToggle(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Display or hide the matched elements by animating their opacity.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeToggle(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Display or hide the matched elements by animating their opacity.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    fadeToggle(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.
-     *
-     * @param queue The name of the queue in which to stop animations.
-     */
-    finish(queue?: string): JQuery;
-
-    /**
-     * Hide the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    hide(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Hide the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    hide(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Hide the matched elements.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    hide(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Display the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    show(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Display the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    show(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Display the matched elements.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    show(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Display the matched elements with a sliding motion.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    slideDown(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Display the matched elements with a sliding motion.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    slideDown(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Display the matched elements with a sliding motion.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    slideDown(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Display or hide the matched elements with a sliding motion.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    slideToggle(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Display or hide the matched elements with a sliding motion.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    slideToggle(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Display or hide the matched elements with a sliding motion.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    slideToggle(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Hide the matched elements with a sliding motion.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    slideUp(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Hide the matched elements with a sliding motion.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    slideUp(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Hide the matched elements with a sliding motion.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    slideUp(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Stop the currently-running animation on the matched elements.
-     *
-     * @param clearQueue A Boolean indicating whether to remove queued animation as well. Defaults to false.
-     * @param jumpToEnd A Boolean indicating whether to complete the current animation immediately. Defaults to false.
-     */
-    stop(clearQueue?: boolean, jumpToEnd?: boolean): JQuery;
-    /**
-     * Stop the currently-running animation on the matched elements.
-     *
-     * @param queue The name of the queue in which to stop animations.
-     * @param clearQueue A Boolean indicating whether to remove queued animation as well. Defaults to false.
-     * @param jumpToEnd A Boolean indicating whether to complete the current animation immediately. Defaults to false.
-     */
-    stop(queue?: string, clearQueue?: boolean, jumpToEnd?: boolean): JQuery;
-
-    /**
-     * Display or hide the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    toggle(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Display or hide the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    toggle(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Display or hide the matched elements.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    toggle(options: JQueryAnimationOptions): JQuery;
-    /**
-     * Display or hide the matched elements.
-     *
-     * @param showOrHide A Boolean indicating whether to show or hide the elements.
-     */
-    toggle(showOrHide: boolean): JQuery;
-
-    /**
-     * Attach a handler to an event for the elements.
-     * 
-     * @param eventType A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    bind(eventType: string, eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Attach a handler to an event for the elements.
-     * 
-     * @param eventType A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    bind(eventType: string, handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Attach a handler to an event for the elements.
-     * 
-     * @param eventType A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param preventBubble Setting the third argument to false will attach a function that prevents the default action from occurring and stops the event from bubbling. The default is true.
-     */
-    bind(eventType: string, eventData: any, preventBubble: boolean): JQuery;
-    /**
-     * Attach a handler to an event for the elements.
-     * 
-     * @param eventType A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
-     * @param preventBubble Setting the third argument to false will attach a function that prevents the default action from occurring and stops the event from bubbling. The default is true.
-     */
-    bind(eventType: string, preventBubble: boolean): JQuery;
-    /**
-     * Attach a handler to an event for the elements.
-     * 
-     * @param events An object containing one or more DOM event types and functions to execute for them.
-     */
-    bind(events: any): JQuery;
-
-    /**
-     * Trigger the "blur" event on an element
-     */
-    blur(): JQuery;
-    /**
-     * Bind an event handler to the "blur" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    blur(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "blur" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    blur(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "change" event on an element.
-     */
-    change(): JQuery;
-    /**
-     * Bind an event handler to the "change" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    change(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "change" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    change(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "click" event on an element.
-     */
-    click(): JQuery;
-    /**
-     * Bind an event handler to the "click" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     */
-    click(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "click" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    click(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "dblclick" event on an element.
-     */
-    dblclick(): JQuery;
-    /**
-     * Bind an event handler to the "dblclick" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    dblclick(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "dblclick" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    dblclick(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    delegate(selector: any, eventType: string, handler: (eventObject: JQueryEventObject) => any): JQuery;
-    delegate(selector: any, eventType: string, eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "focus" event on an element.
-     */
-    focus(): JQuery;
-    /**
-     * Bind an event handler to the "focus" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    focus(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "focus" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    focus(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "focusin" event on an element.
-     */
-    focusin(): JQuery;
-    /**
-     * Bind an event handler to the "focusin" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    focusin(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "focusin" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    focusin(eventData: Object, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "focusout" event on an element.
-     */
-    focusout(): JQuery;
-    /**
-     * Bind an event handler to the "focusout" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    focusout(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "focusout" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    focusout(eventData: Object, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
-     *
-     * @param handlerIn A function to execute when the mouse pointer enters the element.
-     * @param handlerOut A function to execute when the mouse pointer leaves the element.
-     */
-    hover(handlerIn: (eventObject: JQueryEventObject) => any, handlerOut: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind a single handler to the matched elements, to be executed when the mouse pointer enters or leaves the elements.
-     *
-     * @param handlerInOut A function to execute when the mouse pointer enters or leaves the element.
-     */
-    hover(handlerInOut: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "keydown" event on an element.
-     */
-    keydown(): JQuery;
-    /**
-     * Bind an event handler to the "keydown" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    keydown(handler: (eventObject: JQueryKeyEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "keydown" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    keydown(eventData?: any, handler?: (eventObject: JQueryKeyEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "keypress" event on an element.
-     */
-    keypress(): JQuery;
-    /**
-     * Bind an event handler to the "keypress" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    keypress(handler: (eventObject: JQueryKeyEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "keypress" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    keypress(eventData?: any, handler?: (eventObject: JQueryKeyEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "keyup" event on an element.
-     */
-    keyup(): JQuery;
-    /**
-     * Bind an event handler to the "keyup" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    keyup(handler: (eventObject: JQueryKeyEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "keyup" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    keyup(eventData?: any, handler?: (eventObject: JQueryKeyEventObject) => any): JQuery;
-
-    /**
-     * Bind an event handler to the "load" JavaScript event.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    load(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "load" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    load(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "mousedown" event on an element.
-     */
-    mousedown(): JQuery;
-    /**
-     * Bind an event handler to the "mousedown" JavaScript event.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    mousedown(handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "mousedown" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    mousedown(eventData: Object, handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "mouseenter" event on an element.
-     */
-    mouseenter(): JQuery;
-    /**
-     * Bind an event handler to be fired when the mouse enters an element.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseenter(handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to be fired when the mouse enters an element.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseenter(eventData: Object, handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "mouseleave" event on an element.
-     */
-    mouseleave(): JQuery;
-    /**
-     * Bind an event handler to be fired when the mouse leaves an element.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseleave(handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to be fired when the mouse leaves an element.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseleave(eventData: Object, handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "mousemove" event on an element.
-     */
-    mousemove(): JQuery;
-    /**
-     * Bind an event handler to the "mousemove" JavaScript event.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    mousemove(handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "mousemove" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    mousemove(eventData: Object, handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "mouseout" event on an element.
-     */
-    mouseout(): JQuery;
-    /**
-     * Bind an event handler to the "mouseout" JavaScript event.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseout(handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "mouseout" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseout(eventData: Object, handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "mouseover" event on an element.
-     */
-    mouseover(): JQuery;
-    /**
-     * Bind an event handler to the "mouseover" JavaScript event.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseover(handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "mouseover" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseover(eventData: Object, handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "mouseup" event on an element.
-     */
-    mouseup(): JQuery;
-    /**
-     * Bind an event handler to the "mouseup" JavaScript event.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseup(handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "mouseup" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseup(eventData: Object, handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-
-    /**
-     * Remove an event handler.
-     */
-    off(): JQuery;
-    /**
-     * Remove an event handler.
-     *
-     * @param events One or more space-separated event types and optional namespaces, or just namespaces, such as "click", "keydown.myPlugin", or ".myPlugin".
-     * @param selector A selector which should match the one originally passed to .on() when attaching event handlers.
-     * @param handler A handler function previously attached for the event(s), or the special value false.
-     */
-    off(events: string, selector?: string, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Remove an event handler.
-     *
-     * @param events One or more space-separated event types and optional namespaces, or just namespaces, such as "click", "keydown.myPlugin", or ".myPlugin".
-     * @param handler A handler function previously attached for the event(s), or the special value false. Takes handler with extra args that can be attached with on().
-     */
-    off(events: string, handler: (eventObject: JQueryEventObject, ...args: any[]) => any): JQuery;
-    /**
-     * Remove an event handler.
-     *
-     * @param events One or more space-separated event types and optional namespaces, or just namespaces, such as "click", "keydown.myPlugin", or ".myPlugin".
-     * @param handler A handler function previously attached for the event(s), or the special value false.
-     */
-    off(events: string, handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Remove an event handler.
-     *
-     * @param events An object where the string keys represent one or more space-separated event types and optional namespaces, and the values represent handler functions previously attached for the event(s).
-     * @param selector A selector which should match the one originally passed to .on() when attaching event handlers.
-     */
-    off(events: { [key: string]: any; }, selector?: string): JQuery;
-
-    /**
-     * Attach an event handler function for one or more events to the selected elements.
-     *
-     * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
-     * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false. Rest parameter args is for optional parameters passed to jQuery.trigger(). Note that the actual parameters on the event handler function must be marked as optional (? syntax).
-     */
-    on(events: string, handler: (eventObject: JQueryEventObject, ...args: any[]) => any): JQuery;
-    /**
-     * Attach an event handler function for one or more events to the selected elements.
-     *
-     * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
-     * @param data Data to be passed to the handler in event.data when an event is triggered.
-     * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.
-    */
-    on(events: string, data : any, handler: (eventObject: JQueryEventObject, ...args: any[]) => any): JQuery;
-    /**
-     * Attach an event handler function for one or more events to the selected elements.
-     *
-     * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
-     * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
-     * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.
-     */
-    on(events: string, selector: string, handler: (eventObject: JQueryEventObject, ...eventData: any[]) => any): JQuery;
-    /**
-     * Attach an event handler function for one or more events to the selected elements.
-     *
-     * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
-     * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
-     * @param data Data to be passed to the handler in event.data when an event is triggered.
-     * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.
-     */
-    on(events: string, selector: string, data: any, handler: (eventObject: JQueryEventObject, ...eventData: any[]) => any): JQuery;
-    /**
-     * Attach an event handler function for one or more events to the selected elements.
-     *
-     * @param events An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
-     * @param selector A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.
-     * @param data Data to be passed to the handler in event.data when an event occurs.
-     */
-    on(events: { [key: string]: any; }, selector?: string, data?: any): JQuery;
-    /**
-     * Attach an event handler function for one or more events to the selected elements.
-     *
-     * @param events An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
-     * @param data Data to be passed to the handler in event.data when an event occurs.
-     */
-    on(events: { [key: string]: any; }, data?: any): JQuery;
-
-    /**
-     * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
-     *
-     * @param events A string containing one or more JavaScript event types, such as "click" or "submit," or custom event names.
-     * @param handler A function to execute at the time the event is triggered.
-     */
-    one(events: string, handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
-     *
-     * @param events A string containing one or more JavaScript event types, such as "click" or "submit," or custom event names.
-     * @param data An object containing data that will be passed to the event handler.
-     * @param handler A function to execute at the time the event is triggered.
-     */
-    one(events: string, data: Object, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
-     *
-     * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
-     * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
-     * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.
-     */
-    one(events: string, selector: string, handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
-     *
-     * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
-     * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
-     * @param data Data to be passed to the handler in event.data when an event is triggered.
-     * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.
-     */
-    one(events: string, selector: string, data: any, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
-     *
-     * @param events An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
-     * @param selector A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.
-     * @param data Data to be passed to the handler in event.data when an event occurs.
-     */
-    one(events: { [key: string]: any; }, selector?: string, data?: any): JQuery;
-
-    /**
-     * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
-     *
-     * @param events An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
-     * @param data Data to be passed to the handler in event.data when an event occurs.
-     */
-    one(events: { [key: string]: any; }, data?: any): JQuery;
-
-
-    /**
-     * Specify a function to execute when the DOM is fully loaded.
-     *
-     * @param handler A function to execute after the DOM is ready.
-     */
-    ready(handler: (jQueryAlias?: JQueryStatic) => any): JQuery;
-
-    /**
-     * Trigger the "resize" event on an element.
-     */
-    resize(): JQuery;
-    /**
-     * Bind an event handler to the "resize" JavaScript event.
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    resize(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "resize" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    resize(eventData: Object, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "scroll" event on an element.
-     */
-    scroll(): JQuery;
-    /**
-     * Bind an event handler to the "scroll" JavaScript event.
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    scroll(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "scroll" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    scroll(eventData: Object, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "select" event on an element.
-     */
-    select(): JQuery;
-    /**
-     * Bind an event handler to the "select" JavaScript event.
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    select(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "select" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    select(eventData: Object, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "submit" event on an element.
-     */
-    submit(): JQuery;
-    /**
-     * Bind an event handler to the "submit" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    submit(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "submit" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    submit(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Execute all handlers and behaviors attached to the matched elements for the given event type.
-     * 
-     * @param eventType A string containing a JavaScript event type, such as click or submit.
-     * @param extraParameters Additional parameters to pass along to the event handler.
-     */
-    trigger(eventType: string, extraParameters?: any[]|Object): JQuery;
-    /**
-     * Execute all handlers and behaviors attached to the matched elements for the given event type.
-     * 
-     * @param event A jQuery.Event object.
-     * @param extraParameters Additional parameters to pass along to the event handler.
-     */
-    trigger(event: JQueryEventObject, extraParameters?: any[]|Object): JQuery;
-
-    /**
-     * Execute all handlers attached to an element for an event.
-     * 
-     * @param eventType A string containing a JavaScript event type, such as click or submit.
-     * @param extraParameters An array of additional parameters to pass along to the event handler.
-     */
-    triggerHandler(eventType: string, ...extraParameters: any[]): Object;
-
-    /**
-     * Execute all handlers attached to an element for an event.
-     * 
-     * @param event A jQuery.Event object.
-     * @param extraParameters An array of additional parameters to pass along to the event handler.
-     */
-    triggerHandler(event: JQueryEventObject, ...extraParameters: any[]): Object;
-
-    /**
-     * Remove a previously-attached event handler from the elements.
-     * 
-     * @param eventType A string containing a JavaScript event type, such as click or submit.
-     * @param handler The function that is to be no longer executed.
-     */
-    unbind(eventType?: string, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Remove a previously-attached event handler from the elements.
-     * 
-     * @param eventType A string containing a JavaScript event type, such as click or submit.
-     * @param fls Unbinds the corresponding 'return false' function that was bound using .bind( eventType, false ).
-     */
-    unbind(eventType: string, fls: boolean): JQuery;
-    /**
-     * Remove a previously-attached event handler from the elements.
-     * 
-     * @param evt A JavaScript event object as passed to an event handler.
-     */
-    unbind(evt: any): JQuery;
-
-    /**
-     * Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
-     */
-    undelegate(): JQuery;
-    /**
-     * Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
-     * 
-     * @param selector A selector which will be used to filter the event results.
-     * @param eventType A string containing a JavaScript event type, such as "click" or "keydown"
-     * @param handler A function to execute at the time the event is triggered.
-     */
-    undelegate(selector: string, eventType: string, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
-     * 
-     * @param selector A selector which will be used to filter the event results.
-     * @param events An object of one or more event types and previously bound functions to unbind from them.
-     */
-    undelegate(selector: string, events: Object): JQuery;
-    /**
-     * Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
-     * 
-     * @param namespace A string containing a namespace to unbind all events from.
-     */
-    undelegate(namespace: string): JQuery;
-
-    /**
-     * Bind an event handler to the "unload" JavaScript event. (DEPRECATED from v1.8)
-     * 
-     * @param handler A function to execute when the event is triggered.
-     */
-    unload(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "unload" JavaScript event. (DEPRECATED from v1.8)
-     * 
-     * @param eventData A plain object of data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    unload(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * The DOM node context originally passed to jQuery(); if none was passed then context will likely be the document. (DEPRECATED from v1.10)
-     */
-    context: Element;
-
-    jquery: string;
-
-    /**
-     * Bind an event handler to the "error" JavaScript event. (DEPRECATED from v1.8)
-     * 
-     * @param handler A function to execute when the event is triggered.
-     */
-    error(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "error" JavaScript event. (DEPRECATED from v1.8)
-     * 
-     * @param eventData A plain object of data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    error(eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Add a collection of DOM elements onto the jQuery stack.
-     * 
-     * @param elements An array of elements to push onto the stack and make into a new jQuery object.
-     */
-    pushStack(elements: any[]): JQuery;
-    /**
-     * Add a collection of DOM elements onto the jQuery stack.
-     * 
-     * @param elements An array of elements to push onto the stack and make into a new jQuery object.
-     * @param name The name of a jQuery method that generated the array of elements.
-     * @param arguments The arguments that were passed in to the jQuery method (for serialization).
-     */
-    pushStack(elements: any[], name: string, arguments: any[]): JQuery;
-
-    /**
-     * Insert content, specified by the parameter, after each element in the set of matched elements.
-     * 
-     * param content1 HTML string, DOM element, array of elements, or jQuery object to insert after each element in the set of matched elements.
-     * param content2 One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert after each element in the set of matched elements.
-     */
-    after(content1: JQuery|any[]|Element|Text|string, ...content2: any[]): JQuery;
-    /**
-     * Insert content, specified by the parameter, after each element in the set of matched elements.
-     * 
-     * param func A function that returns an HTML string, DOM element(s), or jQuery object to insert after each element in the set of matched elements. Receives the index position of the element in the set as an argument. Within the function, this refers to the current element in the set.
-     */
-    after(func: (index: number, html: string) => string|Element|JQuery): JQuery;
-
-    /**
-     * Insert content, specified by the parameter, to the end of each element in the set of matched elements.
-     * 
-     * param content1 DOM element, array of elements, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.
-     * param content2 One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert at the end of each element in the set of matched elements.
-     */
-    append(content1: JQuery|any[]|Element|Text|string, ...content2: any[]): JQuery;
-    /**
-     * Insert content, specified by the parameter, to the end of each element in the set of matched elements.
-     * 
-     * param func A function that returns an HTML string, DOM element(s), or jQuery object to insert at the end of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, this refers to the current element in the set.
-     */
-    append(func: (index: number, html: string) => string|Element|JQuery): JQuery;
-
-    /**
-     * Insert every element in the set of matched elements to the end of the target.
-     * 
-     * @param target A selector, element, HTML string, array of elements, or jQuery object; the matched set of elements will be inserted at the end of the element(s) specified by this parameter.
-     */
-    appendTo(target: JQuery|any[]|Element|string): JQuery;
-
-    /**
-     * Insert content, specified by the parameter, before each element in the set of matched elements.
-     * 
-     * param content1 HTML string, DOM element, array of elements, or jQuery object to insert before each element in the set of matched elements.
-     * param content2 One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert before each element in the set of matched elements.
-     */
-    before(content1: JQuery|any[]|Element|Text|string, ...content2: any[]): JQuery;
-    /**
-     * Insert content, specified by the parameter, before each element in the set of matched elements.
-     * 
-     * param func A function that returns an HTML string, DOM element(s), or jQuery object to insert before each element in the set of matched elements. Receives the index position of the element in the set as an argument. Within the function, this refers to the current element in the set.
-     */
-    before(func: (index: number, html: string) => string|Element|JQuery): JQuery;
-
-    /**
-     * Create a deep copy of the set of matched elements.
-     * 
-     * param withDataAndEvents A Boolean indicating whether event handlers and data should be copied along with the elements. The default value is false.
-     * param deepWithDataAndEvents A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to false).
-     */
-    clone(withDataAndEvents?: boolean, deepWithDataAndEvents?: boolean): JQuery;
-
-    /**
-     * Remove the set of matched elements from the DOM.
-     * 
-     * param selector A selector expression that filters the set of matched elements to be removed.
-     */
-    detach(selector?: string): JQuery;
-
-    /**
-     * Remove all child nodes of the set of matched elements from the DOM.
-     */
-    empty(): JQuery;
-
-    /**
-     * Insert every element in the set of matched elements after the target.
-     * 
-     * param target A selector, element, array of elements, HTML string, or jQuery object; the matched set of elements will be inserted after the element(s) specified by this parameter.
-     */
-    insertAfter(target: JQuery|any[]|Element|Text|string): JQuery;
-
-    /**
-     * Insert every element in the set of matched elements before the target.
-     * 
-     * param target A selector, element, array of elements, HTML string, or jQuery object; the matched set of elements will be inserted before the element(s) specified by this parameter.
-     */
-    insertBefore(target: JQuery|any[]|Element|Text|string): JQuery;
-
-    /**
-     * Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
-     * 
-     * param content1 DOM element, array of elements, HTML string, or jQuery object to insert at the beginning of each element in the set of matched elements.
-     * param content2 One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert at the beginning of each element in the set of matched elements.
-     */
-    prepend(content1: JQuery|any[]|Element|Text|string, ...content2: any[]): JQuery;
-    /**
-     * Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
-     * 
-     * param func A function that returns an HTML string, DOM element(s), or jQuery object to insert at the beginning of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, this refers to the current element in the set.
-     */
-    prepend(func: (index: number, html: string) => string|Element|JQuery): JQuery;
-
-    /**
-     * Insert every element in the set of matched elements to the beginning of the target.
-     * 
-     * @param target A selector, element, HTML string, array of elements, or jQuery object; the matched set of elements will be inserted at the beginning of the element(s) specified by this parameter.
-     */
-    prependTo(target: JQuery|any[]|Element|string): JQuery;
-
-    /**
-     * Remove the set of matched elements from the DOM.
-     * 
-     * @param selector A selector expression that filters the set of matched elements to be removed.
-     */
-    remove(selector?: string): JQuery;
-
-    /**
-     * Replace each target element with the set of matched elements.
-     * 
-     * @param target A selector string, jQuery object, DOM element, or array of elements indicating which element(s) to replace.
-     */
-    replaceAll(target: JQuery|any[]|Element|string): JQuery;
-
-    /**
-     * Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.
-     * 
-     * param newContent The content to insert. May be an HTML string, DOM element, array of DOM elements, or jQuery object.
-     */
-    replaceWith(newContent: JQuery|any[]|Element|Text|string): JQuery;
-    /**
-     * Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.
-     * 
-     * param func A function that returns content with which to replace the set of matched elements.
-     */
-    replaceWith(func: () => Element|JQuery): JQuery;
-
-    /**
-     * Get the combined text contents of each element in the set of matched elements, including their descendants.
-     */
-    text(): string;
-    /**
-     * Set the content of each element in the set of matched elements to the specified text.
-     * 
-     * @param text The text to set as the content of each matched element. When Number or Boolean is supplied, it will be converted to a String representation.
-     */
-    text(text: string|number|boolean): JQuery;
-    /**
-     * Set the content of each element in the set of matched elements to the specified text.
-     * 
-     * @param func A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.
-     */
-    text(func: (index: number, text: string) => string): JQuery;
-
-    /**
-     * Retrieve all the elements contained in the jQuery set, as an array.
-     */
-    toArray(): any[];
-
-    /**
-     * Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.
-     */
-    unwrap(): JQuery;
-
-    /**
-     * Wrap an HTML structure around each element in the set of matched elements.
-     * 
-     * @param wrappingElement A selector, element, HTML string, or jQuery object specifying the structure to wrap around the matched elements.
-     */
-    wrap(wrappingElement: JQuery|Element|string): JQuery;
-    /**
-     * Wrap an HTML structure around each element in the set of matched elements.
-     * 
-     * @param func A callback function returning the HTML content or jQuery object to wrap around the matched elements. Receives the index position of the element in the set as an argument. Within the function, this refers to the current element in the set.
-     */
-    wrap(func: (index: number) => string|JQuery): JQuery;
-
-    /**
-     * Wrap an HTML structure around all elements in the set of matched elements.
-     * 
-     * @param wrappingElement A selector, element, HTML string, or jQuery object specifying the structure to wrap around the matched elements.
-     */
-    wrapAll(wrappingElement: JQuery|Element|string): JQuery;
-    wrapAll(func: (index: number) => string): JQuery;
-
-    /**
-     * Wrap an HTML structure around the content of each element in the set of matched elements.
-     * 
-     * @param wrappingElement An HTML snippet, selector expression, jQuery object, or DOM element specifying the structure to wrap around the content of the matched elements.
-     */
-    wrapInner(wrappingElement: JQuery|Element|string): JQuery;
-    /**
-     * Wrap an HTML structure around the content of each element in the set of matched elements.
-     * 
-     * @param func A callback function which generates a structure to wrap around the content of the matched elements. Receives the index position of the element in the set as an argument. Within the function, this refers to the current element in the set.
-     */
-    wrapInner(func: (index: number) => string): JQuery;
-
-    /**
-     * Iterate over a jQuery object, executing a function for each matched element.
-     * 
-     * @param func A function to execute for each matched element.
-     */
-    each(func: (index: number, elem: Element) => any): JQuery;
-
-    /**
-     * Retrieve one of the elements matched by the jQuery object.
-     * 
-     * @param index A zero-based integer indicating which element to retrieve.
-     */
-    get(index: number): HTMLElement;
-    /**
-     * Retrieve the elements matched by the jQuery object.
-     */
-    get(): any[];
-
-    /**
-     * Search for a given element from among the matched elements.
-     */
-    index(): number;
-    /**
-     * Search for a given element from among the matched elements.
-     * 
-     * @param selector A selector representing a jQuery collection in which to look for an element.
-     */
-    index(selector: string|JQuery|Element): number;
-
-    /**
-     * The number of elements in the jQuery object.
-     */
-    length: number;
-    /**
-     * A selector representing selector passed to jQuery(), if any, when creating the original set.
-     * version deprecated: 1.7, removed: 1.9
-     */
-    selector: string;
-    [index: string]: any;
-    [index: number]: HTMLElement;
-
-    /**
-     * Add elements to the set of matched elements.
-     * 
-     * @param selector A string representing a selector expression to find additional elements to add to the set of matched elements.
-     * @param context The point in the document at which the selector should begin matching; similar to the context argument of the $(selector, context) method.
-     */
-    add(selector: string, context?: Element): JQuery;
-    /**
-     * Add elements to the set of matched elements.
-     * 
-     * @param elements One or more elements to add to the set of matched elements.
-     */
-    add(...elements: Element[]): JQuery;
-    /**
-     * Add elements to the set of matched elements.
-     * 
-     * @param html An HTML fragment to add to the set of matched elements.
-     */
-    add(html: string): JQuery;
-    /**
-     * Add elements to the set of matched elements.
-     * 
-     * @param obj An existing jQuery object to add to the set of matched elements.
-     */
-    add(obj: JQuery): JQuery;
-
-    /**
-     * Get the children of each element in the set of matched elements, optionally filtered by a selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    children(selector?: string): JQuery;
-
-    /**
-     * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    closest(selector: string): JQuery;
-    /**
-     * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     * @param context A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.
-     */
-    closest(selector: string, context?: Element): JQuery;
-    /**
-     * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
-     * 
-     * @param obj A jQuery object to match elements against.
-     */
-    closest(obj: JQuery): JQuery;
-    /**
-     * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
-     * 
-     * @param element An element to match elements against.
-     */
-    closest(element: Element): JQuery;
-
-    /**
-     * Get an array of all the elements and selectors matched against the current element up through the DOM tree.
-     * 
-     * @param selectors An array or string containing a selector expression to match elements against (can also be a jQuery object).
-     * @param context A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.
-     */
-    closest(selectors: any, context?: Element): any[];
-
-    /**
-     * Get the children of each element in the set of matched elements, including text and comment nodes.
-     */
-    contents(): JQuery;
-
-    /**
-     * End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.
-     */
-    end(): JQuery;
-
-    /**
-     * Reduce the set of matched elements to the one at the specified index.
-     * 
-     * @param index An integer indicating the 0-based position of the element. OR An integer indicating the position of the element, counting backwards from the last element in the set.
-     *  
-     */
-    eq(index: number): JQuery;
-
-    /**
-     * Reduce the set of matched elements to those that match the selector or pass the function's test.
-     * 
-     * @param selector A string containing a selector expression to match the current set of elements against.
-     */
-    filter(selector: string): JQuery;
-    /**
-     * Reduce the set of matched elements to those that match the selector or pass the function's test.
-     * 
-     * @param func A function used as a test for each element in the set. this is the current DOM element.
-     */
-    filter(func: (index: number, element: Element) => any): JQuery;
-    /**
-     * Reduce the set of matched elements to those that match the selector or pass the function's test.
-     * 
-     * @param element An element to match the current set of elements against.
-     */
-    filter(element: Element): JQuery;
-    /**
-     * Reduce the set of matched elements to those that match the selector or pass the function's test.
-     * 
-     * @param obj An existing jQuery object to match the current set of elements against.
-     */
-    filter(obj: JQuery): JQuery;
-
-    /**
-     * Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    find(selector: string): JQuery;
-    /**
-     * Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
-     * 
-     * @param element An element to match elements against.
-     */
-    find(element: Element): JQuery;
-    /**
-     * Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
-     * 
-     * @param obj A jQuery object to match elements against.
-     */
-    find(obj: JQuery): JQuery;
-
-    /**
-     * Reduce the set of matched elements to the first in the set.
-     */
-    first(): JQuery;
-
-    /**
-     * Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    has(selector: string): JQuery;
-    /**
-     * Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
-     * 
-     * @param contained A DOM element to match elements against.
-     */
-    has(contained: Element): JQuery;
-
-    /**
-     * Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    is(selector: string): boolean;
-    /**
-     * Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
-     * 
-     * @param func A function used as a test for the set of elements. It accepts one argument, index, which is the element's index in the jQuery collection.Within the function, this refers to the current DOM element.
-     */
-    is(func: (index: number, element: Element) => boolean): boolean;
-    /**
-     * Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
-     * 
-     * @param obj An existing jQuery object to match the current set of elements against.
-     */
-    is(obj: JQuery): boolean;
-    /**
-     * Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
-     * 
-     * @param elements One or more elements to match the current set of elements against.
-     */
-    is(elements: any): boolean;
-
-    /**
-     * Reduce the set of matched elements to the final one in the set.
-     */
-    last(): JQuery;
-
-    /**
-     * Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.
-     * 
-     * @param callback A function object that will be invoked for each element in the current set.
-     */
-    map(callback: (index: number, domElement: Element) => any): JQuery;
-
-    /**
-     * Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    next(selector?: string): JQuery;
-
-    /**
-     * Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    nextAll(selector?: string): JQuery;
-
-    /**
-     * Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
-     * 
-     * @param selector A string containing a selector expression to indicate where to stop matching following sibling elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    nextUntil(selector?: string, filter?: string): JQuery;
-    /**
-     * Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
-     * 
-     * @param element A DOM node or jQuery object indicating where to stop matching following sibling elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    nextUntil(element?: Element, filter?: string): JQuery;
-    /**
-     * Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
-     * 
-     * @param obj A DOM node or jQuery object indicating where to stop matching following sibling elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    nextUntil(obj?: JQuery, filter?: string): JQuery;
-
-    /**
-     * Remove elements from the set of matched elements.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    not(selector: string): JQuery;
-    /**
-     * Remove elements from the set of matched elements.
-     * 
-     * @param func A function used as a test for each element in the set. this is the current DOM element.
-     */
-    not(func: (index: number, element: Element) => boolean): JQuery;
-    /**
-     * Remove elements from the set of matched elements.
-     * 
-     * @param elements One or more DOM elements to remove from the matched set.
-     */
-    not(elements: Element|Element[]): JQuery;
-    /**
-     * Remove elements from the set of matched elements.
-     * 
-     * @param obj An existing jQuery object to match the current set of elements against.
-     */
-    not(obj: JQuery): JQuery;
-
-    /**
-     * Get the closest ancestor element that is positioned.
-     */
-    offsetParent(): JQuery;
-
-    /**
-     * Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    parent(selector?: string): JQuery;
-
-    /**
-     * Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    parents(selector?: string): JQuery;
-
-    /**
-     * Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.
-     * 
-     * @param selector A string containing a selector expression to indicate where to stop matching ancestor elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    parentsUntil(selector?: string, filter?: string): JQuery;
-    /**
-     * Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.
-     * 
-     * @param element A DOM node or jQuery object indicating where to stop matching ancestor elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    parentsUntil(element?: Element, filter?: string): JQuery;
-    /**
-     * Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.
-     * 
-     * @param obj A DOM node or jQuery object indicating where to stop matching ancestor elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    parentsUntil(obj?: JQuery, filter?: string): JQuery;
-
-    /**
-     * Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    prev(selector?: string): JQuery;
-
-    /**
-     * Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    prevAll(selector?: string): JQuery;
-
-    /**
-     * Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.
-     * 
-     * @param selector A string containing a selector expression to indicate where to stop matching preceding sibling elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    prevUntil(selector?: string, filter?: string): JQuery;
-    /**
-     * Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.
-     * 
-     * @param element A DOM node or jQuery object indicating where to stop matching preceding sibling elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    prevUntil(element?: Element, filter?: string): JQuery;
-    /**
-     * Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.
-     * 
-     * @param obj A DOM node or jQuery object indicating where to stop matching preceding sibling elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    prevUntil(obj?: JQuery, filter?: string): JQuery;
-
-    /**
-     * Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    siblings(selector?: string): JQuery;
-
-    /**
-     * Reduce the set of matched elements to a subset specified by a range of indices.
-     * 
-     * @param start An integer indicating the 0-based position at which the elements begin to be selected. If negative, it indicates an offset from the end of the set.
-     * @param end An integer indicating the 0-based position at which the elements stop being selected. If negative, it indicates an offset from the end of the set. If omitted, the range continues until the end of the set.
-     */
-    slice(start: number, end?: number): JQuery;
-
-    /**
-     * Show the queue of functions to be executed on the matched elements.
-     * 
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     */
-    queue(queueName?: string): any[];
-    /**
-     * Manipulate the queue of functions to be executed, once for each matched element.
-     * 
-     * @param newQueue An array of functions to replace the current queue contents.
-     */
-    queue(newQueue: Function[]): JQuery;
-    /**
-     * Manipulate the queue of functions to be executed, once for each matched element.
-     * 
-     * @param callback The new function to add to the queue, with a function to call that will dequeue the next item.
-     */
-    queue(callback: Function): JQuery;
-    /**
-     * Manipulate the queue of functions to be executed, once for each matched element.
-     * 
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     * @param newQueue An array of functions to replace the current queue contents.
-     */
-    queue(queueName: string, newQueue: Function[]): JQuery;
-    /**
-     * Manipulate the queue of functions to be executed, once for each matched element.
-     * 
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     * @param callback The new function to add to the queue, with a function to call that will dequeue the next item.
-     */
-    queue(queueName: string, callback: Function): JQuery;
-}
-declare module "jquery" {
-    export = $;
-}
-declare var jQuery: JQueryStatic;
-declare var $: JQueryStatic;
\ No newline at end of file
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/jquery/typings.json b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/jquery/typings.json
deleted file mode 100644
index 0af7c54b42..0000000000
--- a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/globals/jquery/typings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "resolution": "main",
-  "tree": {
-    "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/4cdfbe96b666eec5e1defbb519a62abf04e96764/jquery/jquery.d.ts",
-    "raw": "registry:dt/jquery#1.10.0+20160417213236",
-    "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/4cdfbe96b666eec5e1defbb519a62abf04e96764/jquery/jquery.d.ts"
-  }
-}
diff --git a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/index.d.ts b/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/index.d.ts
deleted file mode 100644
index 7b1af70fde..0000000000
--- a/public/docs/_examples/upgrade-phonecat-1-typescript/ts/typings-ng1/index.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/// <reference path="globals/angular-animate/index.d.ts" />
-/// <reference path="globals/angular-mocks/index.d.ts" />
-/// <reference path="globals/angular-resource/index.d.ts" />
-/// <reference path="globals/angular-route/index.d.ts" />
-/// <reference path="globals/angular/index.d.ts" />
-/// <reference path="globals/jquery/index.d.ts" />
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/README.md b/public/docs/_examples/upgrade-phonecat-2-hybrid/README.md
index 31fd100e68..4f8e4928af 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/README.md
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/README.md
@@ -14,9 +14,6 @@ The following changes from vanilla Phonecat are applied:
   in index.html and karma.conf.ng1.js.
 * E2E tests have been moved to the parent directory, where `run-e2e-tests` can
   discover and run them along with all the other examples.
-* Angular 1 typings (from DefinitelyTyped) are added to typings-ng1 so that
-  TypeScript can recognize Angular 1 code. (typings.json comes from boilerplate
-  so we can't add them there).
 * Most of the phone JSON and image data removed in the interest of keeping
   repo weight down. Keeping enough to retain testability of the app.
 
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts.disabled b/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts.disabled
index c55560f3a3..0e27367ec8 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts.disabled
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/e2e-spec.ts.disabled
@@ -1,5 +1,6 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
 
 // Angular E2E Testing Guide:
 // https://docs.angularjs.org/guide/e2e-testing
@@ -27,11 +28,11 @@ describe('PhoneCat Application', function() {
 
       expect(phoneList.count()).toBe(20);
 
-      sendKeys(query, 'nexus');
+      query.sendKeys('nexus');
       expect(phoneList.count()).toBe(1);
 
       query.clear();
-      sendKeys(query, 'motorola');
+      query.sendKeys('motorola');
       expect(phoneList.count()).toBe(8);
     });
 
@@ -47,7 +48,7 @@ describe('PhoneCat Application', function() {
         });
       }
 
-      sendKeys(queryField, 'tablet');   // Let's narrow the dataset to make the assertions shorter
+      queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
 
       expect(getNames()).toEqual([
         'Motorola XOOM\u2122 with Wi-Fi',
@@ -64,7 +65,7 @@ describe('PhoneCat Application', function() {
 
     it('should render phone specific links', function() {
       let query = element(by.css('input'));
-      sendKeys(query, 'nexus');
+      query.sendKeys('nexus');
 
       element.all(by.css('.phones li a')).first().click();
       browser.refresh(); // Not sure why this is needed but it is. The route change works fine.
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/package.ng1.json b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/package.ng1.json
index 54f73776dd..9c7e5dd2d0 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/package.ng1.json
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/package.ng1.json
@@ -4,7 +4,12 @@
   "version": "0.0.0",
   "description": "A tutorial application for AngularJS",
   "repository": "https://github.com/angular/angular-phonecat",
-  "license": "MIT",
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
+    }
+  ],
   "devDependencies": {
     "bower": "^1.7.7",
     "http-server": "^0.9.0",
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-animate/index.d.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-animate/index.d.ts
deleted file mode 100644
index c720d9293a..0000000000
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-animate/index.d.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-// Generated by typings
-// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/f0b2681b481397d0c03557ac2ac4d70c1c61c464/angularjs/angular-animate.d.ts
-declare module "angular-animate" {
-    var _: string;
-    export = _;
-}
-
-/**
- * ngAnimate module (angular-animate.js)
- */
-declare namespace angular.animate {
-    interface IAnimateFactory {
-        (...args: any[]): IAnimateCallbackObject;
-    }
-
-    interface IAnimateCallbackObject {
-        eventFn?: (element: IAugmentedJQuery, doneFunction: Function, options: IAnimationOptions) => any;
-        setClass?: (element: IAugmentedJQuery, addedClasses: string, removedClasses: string, doneFunction: Function, options: IAnimationOptions) => any;
-        addClass?: (element: IAugmentedJQuery, addedClasses: string, doneFunction: Function, options: IAnimationOptions) => any;
-        removeClass?: (element: IAugmentedJQuery, removedClasses: string, doneFunction: Function, options: IAnimationOptions) => any;
-        enter?: (element: IAugmentedJQuery, doneFunction: Function, options: IAnimationOptions) => any;
-        leave?: (element: IAugmentedJQuery, doneFunction: Function, options: IAnimationOptions) => any;
-        move?: (element: IAugmentedJQuery, doneFunction: Function, options: IAnimationOptions) => any;
-        animate?: (element: IAugmentedJQuery, fromStyles: string, toStyles: string, doneFunction: Function, options: IAnimationOptions) => any;
-    }
-
-    interface IAnimationPromise extends IPromise<void> {}
-
-    /**
-     * AnimateService
-     * see http://docs.angularjs.org/api/ngAnimate/service/$animate
-     */
-    interface IAnimateService {
-        /**
-         * Sets up an event listener to fire whenever the animation event has fired on the given element or among any of its children.
-         *
-         * @param event the animation event that will be captured (e.g. enter, leave, move, addClass, removeClass, etc...)
-         * @param container the container element that will capture each of the animation events that are fired on itself as well as among its children
-         * @param callback the callback function that will be fired when the listener is triggered
-         */
-        on(event: string, container: JQuery, callback: Function): void;
-
-        /**
-         * Deregisters an event listener based on the event which has been associated with the provided element.
-         *
-         * @param event the animation event (e.g. enter, leave, move, addClass, removeClass, etc...)
-         * @param container the container element the event listener was placed on
-         * @param callback the callback function that was registered as the listener
-         */
-        off(event: string, container?: JQuery, callback?: Function): void;
-
-        /**
-         * Associates the provided element with a host parent element to allow the element to be animated even if it exists outside of the DOM structure of the Angular application.
-         *
-         * @param element the external element that will be pinned
-         * @param parentElement the host parent element that will be associated with the external element
-         */
-        pin(element: JQuery, parentElement: JQuery): void;
-
-        /**
-        * Globally enables / disables animations.
-        *
-        * @param element If provided then the element will be used to represent the enable/disable operation.
-        * @param value If provided then set the animation on or off.
-        * @returns current animation state
-        */
-        enabled(element: JQuery, value?: boolean): boolean;
-        enabled(value: boolean): boolean;
-
-        /**
-         * Cancels the provided animation.
-         */
-        cancel(animationPromise: IAnimationPromise): void;
-
-        /**
-         * Performs an inline animation on the element.
-         *
-         * @param element the element that will be the focus of the animation
-         * @param from a collection of CSS styles that will be applied to the element at the start of the animation
-         * @param to a collection of CSS styles that the element will animate towards
-         * @param className an optional CSS class that will be added to the element for the duration of the animation (the default class is 'ng-inline-animate')
-         * @param options an optional collection of styles that will be picked up by the CSS transition/animation
-         * @returns the animation callback promise
-         */
-        animate(element: JQuery, from: any, to: any, className?: string, options?: IAnimationOptions): IAnimationPromise;
-
-        /**
-         * Appends the element to the parentElement element that resides in the document and then runs the enter animation.
-         *
-         * @param element the element that will be the focus of the enter animation
-         * @param parentElement the parent element of the element that will be the focus of the enter animation
-         * @param afterElement the sibling element (which is the previous element) of the element that will be the focus of the enter animation
-         * @param options an optional collection of styles that will be picked up by the CSS transition/animation
-         * @returns the animation callback promise
-         */
-        enter(element: JQuery, parentElement: JQuery, afterElement?: JQuery, options?: IAnimationOptions): IAnimationPromise;
-
-        /**
-         * Runs the leave animation operation and, upon completion, removes the element from the DOM.
-         *
-         * @param element the element that will be the focus of the leave animation
-         * @param options an optional collection of styles that will be picked up by the CSS transition/animation
-         * @returns the animation callback promise
-         */
-        leave(element: JQuery, options?: IAnimationOptions): IAnimationPromise;
-
-        /**
-         * Fires the move DOM operation. Just before the animation starts, the animate service will either append
-         * it into the parentElement container or add the element directly after the afterElement element if present.
-         * Then the move animation will be run.
-         *
-         * @param element the element that will be the focus of the move animation
-         * @param parentElement the parent element of the element that will be the focus of the move animation
-         * @param afterElement the sibling element (which is the previous element) of the element that will be the focus of the move animation
-         * @returns the animation callback promise
-         */
-        move(element: JQuery, parentElement: JQuery, afterElement?: JQuery): IAnimationPromise;
-
-        /**
-         * Triggers a custom animation event based off the className variable and then attaches the className
-         * value to the element as a CSS class.
-         *
-         * @param element the element that will be animated
-         * @param className the CSS class that will be added to the element and then animated
-         * @param options an optional collection of styles that will be picked up by the CSS transition/animation
-         * @returns the animation callback promise
-         */
-        addClass(element: JQuery, className: string, options?: IAnimationOptions): IAnimationPromise;
-
-        /**
-         * Triggers a custom animation event based off the className variable and then removes the CSS class
-         * provided by the className value from the element.
-         *
-         * @param element the element that will be animated
-         * @param className the CSS class that will be animated and then removed from the element
-         * @param options an optional collection of styles that will be picked up by the CSS transition/animation
-         * @returns the animation callback promise
-         */
-        removeClass(element: JQuery, className: string, options?: IAnimationOptions): IAnimationPromise;
-
-        /**
-         * Adds and/or removes the given CSS classes to and from the element. Once complete, the done() callback
-         * will be fired (if provided).
-         *
-         * @param element the element which will have its CSS classes changed removed from it
-         * @param add the CSS classes which will be added to the element
-         * @param remove the CSS class which will be removed from the element CSS classes have been set on the element
-         * @param options an optional collection of styles that will be picked up by the CSS transition/animation
-         * @returns the animation callback promise
-         */
-        setClass(element: JQuery, add: string, remove: string, options?: IAnimationOptions): IAnimationPromise;
-    }
-
-    /**
-     * AnimateProvider
-     * see http://docs.angularjs.org/api/ngAnimate/provider/$animateProvider
-     */
-    interface IAnimateProvider {
-        /**
-         * Registers a new injectable animation factory function.
-         *
-         * @param name The name of the animation.
-         * @param factory The factory function that will be executed to return the animation object.
-         */
-        register(name: string, factory: IAnimateFactory): void;
-
-        /**
-         * Gets and/or sets the CSS class expression that is checked when performing an animation.
-         *
-         * @param expression The className expression which will be checked against all animations.
-         * @returns The current CSS className expression value. If null then there is no expression value.
-         */
-        classNameFilter(expression?: RegExp): RegExp;
-    }
-
-    /**
-     * Angular Animation Options
-     * see https://docs.angularjs.org/api/ngAnimate/#applying-directive-specific-styles-to-an-animation
-     */
-    interface IAnimationOptions {
-        /**
-         * The ending CSS styles (a key/value object) that will be applied across the animation via a CSS transition.
-         */
-        to?: Object;
-
-        /**
-         * The starting CSS styles (a key/value object) that will be applied at the start of the animation.
-         */
-        from?: Object;
-
-        /**
-         * The DOM event (e.g. enter, leave, move). When used, a generated CSS class of ng-EVENT and
-         * ng-EVENT-active will be applied to the element during the animation. Multiple events can be provided when
-         * spaces are used as a separator. (Note that this will not perform any DOM operation.)
-         */
-        event?: string;
-
-        /**
-         * The CSS easing value that will be applied to the transition or keyframe animation (or both).
-         */
-        easing?: string;
-
-        /**
-         * The raw CSS transition style that will be used (e.g. 1s linear all).
-         */
-        transition?: string;
-
-        /**
-         * The raw CSS keyframe animation style that will be used (e.g. 1s my_animation linear).
-         */
-        keyframe?: string;
-
-        /**
-         * A space separated list of CSS classes that will be added to the element and spread across the animation.
-         */
-        addClass?: string;
-
-        /**
-         * A space separated list of CSS classes that will be removed from the element and spread across
-         * the animation.
-         */
-        removeClass?: string;
-
-        /**
-         * A number value representing the total duration of the transition and/or keyframe (note that a value
-         * of 1 is 1000ms). If a value of 0 is provided then the animation will be skipped entirely.
-         */
-        duration?: number;
-
-        /**
-         * A number value representing the total delay of the transition and/or keyframe (note that a value of
-         * 1 is 1000ms). If a value of true is used then whatever delay value is detected from the CSS classes will be
-         * mirrored on the elements styles (e.g. by setting delay true then the style value of the element will be
-         * transition-delay: DETECTED_VALUE). Using true is useful when you want the CSS classes and inline styles to
-         * all share the same CSS delay value.
-         */
-        delay?: number;
-
-        /**
-         * A numeric time value representing the delay between successively animated elements (Click here to
-         * learn how CSS-based staggering works in ngAnimate.)
-         */
-        stagger?: number;
-
-        /**
-         * The numeric index representing the stagger item (e.g. a value of 5 is equal to the sixth item
-         * in the stagger; therefore when a stagger option value of 0.1 is used then there will be a stagger delay of 600ms)
-         * applyClassesEarly - Whether or not the classes being added or removed will be used when detecting the animation.
-         * This is set by $animate when enter/leave/move animations are fired to ensure that the CSS classes are resolved in time.
-         * (Note that this will prevent any transitions from occuring on the classes being added and removed.)
-         */
-        staggerIndex?: number;
-    }
-
-    interface IAnimateCssRunner {
-        /**
-         * Starts the animation
-         *
-         * @returns The animation runner with a done function for supplying a callback.
-         */
-        start(): IAnimateCssRunnerStart;
-
-        /**
-         * Ends (aborts) the animation
-         */
-        end(): void;
-    }
-
-    interface IAnimateCssRunnerStart extends IPromise<void> {
-        /**
-         * Allows you to add done callbacks to the running animation
-         *
-         * @param callbackFn: the callback function to be run
-         */
-        done(callbackFn: (animationFinished: boolean) => void): void;
-    }
-
-    /**
-     * AnimateCssService
-     * see http://docs.angularjs.org/api/ngAnimate/service/$animateCss
-     */
-    interface IAnimateCssService {
-        (element: JQuery, animateCssOptions: IAnimationOptions): IAnimateCssRunner;
-    }
-}
-
-declare module angular {
-    interface IModule {
-        animation(name: string, animationFactory: angular.animate.IAnimateFactory): IModule;
-        animation(name: string, inlineAnnotatedFunction: any[]): IModule;
-        animation(object: Object): IModule;
-    }
-
-}
\ No newline at end of file
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-animate/typings.json b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-animate/typings.json
deleted file mode 100644
index ea2467c89a..0000000000
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-animate/typings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "resolution": "main",
-  "tree": {
-    "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/f0b2681b481397d0c03557ac2ac4d70c1c61c464/angularjs/angular-animate.d.ts",
-    "raw": "registry:dt/angular-animate#1.5.0+20160407085121",
-    "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/f0b2681b481397d0c03557ac2ac4d70c1c61c464/angularjs/angular-animate.d.ts"
-  }
-}
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-mocks/index.d.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-mocks/index.d.ts
deleted file mode 100644
index fd6e92534b..0000000000
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-mocks/index.d.ts
+++ /dev/null
@@ -1,339 +0,0 @@
-// Generated by typings
-// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/5b7257019ae959533341a715b339d2562bbf9b85/angularjs/angular-mocks.d.ts
-declare module "angular-mocks/ngMock" {
-    var _: string;
-    export = _;
-}
-
-declare module "angular-mocks/ngMockE2E" {
-    var _: string;
-    export = _;
-}
-
-declare module "angular-mocks/ngAnimateMock" {
-    var _: string;
-    export = _;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// ngMock module (angular-mocks.js)
-///////////////////////////////////////////////////////////////////////////////
-declare namespace angular {
-
-    ///////////////////////////////////////////////////////////////////////////
-    // AngularStatic
-    // We reopen it to add the MockStatic definition
-    ///////////////////////////////////////////////////////////////////////////
-    interface IAngularStatic {
-        mock: IMockStatic;
-    }
-
-    // see https://docs.angularjs.org/api/ngMock/function/angular.mock.inject
-    interface IInjectStatic {
-        (...fns: Function[]): any;
-        (...inlineAnnotatedConstructor: any[]): any; // this overload is undocumented, but works
-        strictDi(val?: boolean): void;
-    }
-
-    interface IMockStatic {
-        // see https://docs.angularjs.org/api/ngMock/function/angular.mock.dump
-        dump(obj: any): string;
-
-        inject: IInjectStatic
-
-        // see https://docs.angularjs.org/api/ngMock/function/angular.mock.module
-        module: {
-          (...modules: any[]): any;
-          sharedInjector(): void;
-        }
-
-        // see https://docs.angularjs.org/api/ngMock/type/angular.mock.TzDate
-        TzDate(offset: number, timestamp: number): Date;
-        TzDate(offset: number, timestamp: string): Date;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // ExceptionHandlerService
-    // see https://docs.angularjs.org/api/ngMock/service/$exceptionHandler
-    // see https://docs.angularjs.org/api/ngMock/provider/$exceptionHandlerProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface IExceptionHandlerProvider extends IServiceProvider {
-        mode(mode: string): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // TimeoutService
-    // see https://docs.angularjs.org/api/ngMock/service/$timeout
-    // Augments the original service
-    ///////////////////////////////////////////////////////////////////////////
-    interface ITimeoutService {
-        flush(delay?: number): void;
-        flushNext(expectedDelay?: number): void;
-        verifyNoPendingTasks(): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // IntervalService
-    // see https://docs.angularjs.org/api/ngMock/service/$interval
-    // Augments the original service
-    ///////////////////////////////////////////////////////////////////////////
-    interface IIntervalService {
-        flush(millis?: number): number;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // LogService
-    // see https://docs.angularjs.org/api/ngMock/service/$log
-    // Augments the original service
-    ///////////////////////////////////////////////////////////////////////////
-    interface ILogService {
-        assertEmpty(): void;
-        reset(): void;
-    }
-
-    interface ILogCall {
-        logs: string[];
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // ControllerService mock
-    // see https://docs.angularjs.org/api/ngMock/service/$controller
-    // This interface extends http://docs.angularjs.org/api/ng.$controller
-    ///////////////////////////////////////////////////////////////////////////
-    interface IControllerService {
-      // Although the documentation doesn't state this, locals are optional
-      <T>(controllerConstructor: new (...args: any[]) => T, locals?: any, bindings?: any): T;
-      <T>(controllerConstructor: Function, locals?: any, bindings?: any): T;
-      <T>(controllerName: string, locals?: any, bindings?: any): T;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // ComponentControllerService
-    // see https://docs.angularjs.org/api/ngMock/service/$componentController
-    ///////////////////////////////////////////////////////////////////////////
-    interface IComponentControllerService {
-      // TBinding is an interface exposed by a component as per John Papa's style guide
-      // https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#accessible-members-up-top
-      <T, TBinding>(componentName: string, locals: { $scope: IScope, [key: string]: any }, bindings?: TBinding, ident?: string): T;
-    }
-
-
-    ///////////////////////////////////////////////////////////////////////////
-    // HttpBackendService
-    // see https://docs.angularjs.org/api/ngMock/service/$httpBackend
-    ///////////////////////////////////////////////////////////////////////////
-    interface IHttpBackendService {
-        /**
-          * Flushes all pending requests using the trained responses.
-          * @param count Number of responses to flush (in the order they arrived). If undefined, all pending requests will be flushed.
-          */
-        flush(count?: number): void;
-
-        /**
-          * Resets all request expectations, but preserves all backend definitions.
-          */
-        resetExpectations(): void;
-
-        /**
-          * Verifies that all of the requests defined via the expect api were made. If any of the requests were not made, verifyNoOutstandingExpectation throws an exception.
-          */
-        verifyNoOutstandingExpectation(): void;
-
-        /**
-          * Verifies that there are no outstanding requests that need to be flushed.
-          */
-        verifyNoOutstandingRequest(): void;
-
-        /**
-          * Creates a new request expectation.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, object, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param method HTTP method.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        expect(method: string, url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object | ((object: Object) => boolean)) :mock.IRequestHandler;
-
-        /**
-          * Creates a new request expectation for DELETE requests.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, object, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url is as expected.
-          * @param headers HTTP headers object to be compared with the HTTP headers in the request.
-        */
-        expectDELETE(url: string | RegExp | ((url: string) => boolean), headers?: Object): mock.IRequestHandler;
-
-        /**
-          * Creates a new request expectation for GET requests.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, object, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param headers HTTP headers object to be compared with the HTTP headers in the request.
-          */
-        expectGET(url: string | RegExp | ((url: string) => boolean), headers?: Object): mock.IRequestHandler;
-
-        /**
-          * Creates a new request expectation for HEAD requests.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, object, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param headers HTTP headers object to be compared with the HTTP headers in the request.
-          */
-        expectHEAD(url: string | RegExp | ((url: string) => boolean), headers?: Object): mock.IRequestHandler;
-
-        /**
-          * Creates a new request expectation for JSONP requests.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          */
-        expectJSONP(url: string | RegExp | ((url: string) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new request expectation for PATCH requests.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, object, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        expectPATCH(url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object): mock.IRequestHandler;
-
-        /**
-          * Creates a new request expectation for POST requests.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, object, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        expectPOST(url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object): mock.IRequestHandler;
-
-        /**
-          * Creates a new request expectation for PUT requests.
-          * Throws a preformatted error if expectation(s) don't match supplied string, regular expression, object, or if function returns false.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        expectPUT(url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param method HTTP method.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        when(method: string, url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object | ((object: Object) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition for DELETE requests.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        whenDELETE(url: string | RegExp | ((url: string) => boolean), headers?: Object | ((object: Object) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition for GET requests.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        whenGET(url: string | RegExp | ((url: string) => boolean), headers?: Object | ((object: Object) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition for HEAD requests.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        whenHEAD(url: string | RegExp | ((url: string) => boolean), headers?: Object | ((object: Object) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition for JSONP requests.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        whenJSONP(url: string | RegExp | ((url: string) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition for PATCH requests.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        whenPATCH(url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object | ((object: Object) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition for POST requests.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        whenPOST(url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object | ((object: Object) => boolean)): mock.IRequestHandler;
-
-        /**
-          * Creates a new backend definition for PUT requests.
-          * Returns an object with respond method that controls how a matched request is handled.
-          * @param url HTTP url string, regular expression or function that receives a url and returns true if the url matches the current expctation.
-          * @param data HTTP request body string, json object, regular expression or function that receives the data and returns true if the data matches the current expectation.
-          * @param headers HTTP headers object or function that receives the headers and returns true if the headers match the current expectation.
-          */
-        whenPUT(url: string | RegExp | ((url: string) => boolean), data?: string | RegExp | Object | ((data: string) => boolean), headers?: Object | ((object: Object) => boolean)): mock.IRequestHandler;
-    }
-
-    export module mock {
-        // returned interface by the the mocked HttpBackendService expect/when methods
-        interface IRequestHandler {
-
-            /**
-              * Controls the response for a matched request using a function to construct the response.
-              * Returns the RequestHandler object for possible overrides.
-              * @param func Function that receives the request HTTP method, url, data, and headers and returns an array containing response status (number), data, headers, and status text.
-              */
-            respond(func: ((method: string, url: string, data: string | Object, headers: Object) => [number, string | Object, Object, string])): IRequestHandler;
-
-            /**
-              * Controls the response for a matched request using supplied static data to construct the response.
-              * Returns the RequestHandler object for possible overrides.
-              * @param status HTTP status code to add to the response.
-              * @param data Data to add to the response.
-              * @param headers Headers object to add to the response.
-              * @param responseText Response text to add to the response.
-              */
-            respond(status: number, data: string | Object, headers?: Object, responseText?: string): IRequestHandler;
-
-            /**
-              * Controls the response for a matched request using the HTTP status code 200 and supplied static data to construct the response.
-              * Returns the RequestHandler object for possible overrides.
-              * @param data Data to add to the response.
-              * @param headers Headers object to add to the response.
-              * @param responseText Response text to add to the response.
-              */
-            respond(data: string | Object, headers?: Object, responseText?: string): IRequestHandler;
-
-            // Available when ngMockE2E is loaded
-            /**
-              * Any request matching a backend definition or expectation with passThrough handler will be passed through to the real backend (an XHR request will be made to the server.)
-              */
-            passThrough(): IRequestHandler;
-        }
-
-    }
-
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// functions attached to global object (window)
-///////////////////////////////////////////////////////////////////////////////
-//Use `angular.mock.module` instead of `module`, as `module` conflicts with commonjs.
-//declare var module: (...modules: any[]) => any;
-declare var inject: angular.IInjectStatic;
\ No newline at end of file
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-mocks/typings.json b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-mocks/typings.json
deleted file mode 100644
index 4e51b0e278..0000000000
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-mocks/typings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "resolution": "main",
-  "tree": {
-    "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/5b7257019ae959533341a715b339d2562bbf9b85/angularjs/angular-mocks.d.ts",
-    "raw": "registry:dt/angular-mocks#1.3.0+20160425155016",
-    "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/5b7257019ae959533341a715b339d2562bbf9b85/angularjs/angular-mocks.d.ts"
-  }
-}
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-resource/index.d.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-resource/index.d.ts
deleted file mode 100644
index 3735f9430c..0000000000
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-resource/index.d.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-// Generated by typings
-// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/e684481e0cd360db62fd6213ca7248245315e8a2/angularjs/angular-resource.d.ts
-declare module 'angular-resource' {
-    var _: string;
-    export = _;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// ngResource module (angular-resource.js)
-///////////////////////////////////////////////////////////////////////////////
-declare namespace angular.resource {
-
-    /**
-     * Currently supported options for the $resource factory options argument.
-     */
-    interface IResourceOptions {
-        /**
-         * If true then the trailing slashes from any calculated URL will be stripped (defaults to true)
-         */
-        stripTrailingSlashes?: boolean;
-        /**
-         * If true, the request made by a "non-instance" call will be cancelled (if not already completed) by calling
-         * $cancelRequest() on the call's return value. This can be overwritten per action. (Defaults to false.)
-         */
-        cancellable?: boolean;
-    }
-
-
-    ///////////////////////////////////////////////////////////////////////////
-    // ResourceService
-    // see http://docs.angularjs.org/api/ngResource.$resource
-    // Most part of the following definitions were achieved by analyzing the
-    // actual implementation, since the documentation doesn't seem to cover
-    // that deeply.
-    ///////////////////////////////////////////////////////////////////////////
-    interface IResourceService {
-        (url: string, paramDefaults?: any,
-            /** example:  {update: { method: 'PUT' }, delete: deleteDescriptor }
-             where deleteDescriptor : IActionDescriptor */
-            actions?: any, options?: IResourceOptions): IResourceClass<IResource<any>>;
-        <T, U>(url: string, paramDefaults?: any,
-            /** example:  {update: { method: 'PUT' }, delete: deleteDescriptor }
-             where deleteDescriptor : IActionDescriptor */
-            actions?: any, options?: IResourceOptions): U;
-        <T>(url: string, paramDefaults?: any,
-            /** example:  {update: { method: 'PUT' }, delete: deleteDescriptor }
-             where deleteDescriptor : IActionDescriptor */
-            actions?: any, options?: IResourceOptions): IResourceClass<T>;
-    }
-
-    // Just a reference to facilitate describing new actions
-    interface IActionDescriptor {
-        method: string;
-        params?: any;
-        url?: string;
-        isArray?: boolean;
-        transformRequest?: angular.IHttpRequestTransformer | angular.IHttpRequestTransformer[];
-        transformResponse?: angular.IHttpResponseTransformer | angular.IHttpResponseTransformer[];
-        headers?: any;
-        cache?: boolean | angular.ICacheObject;
-        /**
-         * Note: In contrast to $http.config, promises are not supported in $resource, because the same value
-         * would be used for multiple requests. If you are looking for a way to cancel requests, you should
-         * use the cancellable option.
-         */
-        timeout?: number
-        cancellable?: boolean;
-        withCredentials?: boolean;
-        responseType?: string;
-        interceptor?: IHttpInterceptor;
-    }
-
-    // Allow specify more resource methods
-    // No need to add duplicates for all four overloads.
-    interface IResourceMethod<T> {
-        (): T;
-        (params: Object): T;
-        (success: Function, error?: Function): T;
-        (params: Object, success: Function, error?: Function): T;
-        (params: Object, data: Object, success?: Function, error?: Function): T;
-    }
-
-    // Allow specify resource moethod which returns the array
-    // No need to add duplicates for all four overloads.
-    interface IResourceArrayMethod<T> {
-        (): IResourceArray<T>;
-        (params: Object): IResourceArray<T>;
-        (success: Function, error?: Function): IResourceArray<T>;
-        (params: Object, success: Function, error?: Function): IResourceArray<T>;
-        (params: Object, data: Object, success?: Function, error?: Function): IResourceArray<T>;
-    }
-
-    // Baseclass for everyresource with default actions.
-    // If you define your new actions for the resource, you will need
-    // to extend this interface and typecast the ResourceClass to it.
-    //
-    // In case of passing the first argument as anything but a function,
-    // it's gonna be considered data if the action method is POST, PUT or
-    // PATCH (in other words, methods with body). Otherwise, it's going
-    // to be considered as parameters to the request.
-    // https://github.com/angular/angular.js/blob/v1.2.0/src/ngResource/resource.js#L461-L465
-    //
-    // Only those methods with an HTTP body do have 'data' as first parameter:
-    // https://github.com/angular/angular.js/blob/v1.2.0/src/ngResource/resource.js#L463
-    // More specifically, those methods are POST, PUT and PATCH:
-    // https://github.com/angular/angular.js/blob/v1.2.0/src/ngResource/resource.js#L432
-    //
-    // Also, static calls always return the IResource (or IResourceArray) retrieved
-    // https://github.com/angular/angular.js/blob/v1.2.0/src/ngResource/resource.js#L538-L549
-    interface IResourceClass<T> {
-        new(dataOrParams? : any) : T;
-        get: IResourceMethod<T>;
-
-        query: IResourceArrayMethod<T>;
-
-        save: IResourceMethod<T>;
-
-        remove: IResourceMethod<T>;
-
-        delete: IResourceMethod<T>;
-    }
-
-    // Instance calls always return the the promise of the request which retrieved the object
-    // https://github.com/angular/angular.js/blob/v1.2.0/src/ngResource/resource.js#L538-L546
-    interface IResource<T> {
-        $get(): angular.IPromise<T>;
-        $get(params?: Object, success?: Function, error?: Function): angular.IPromise<T>;
-        $get(success: Function, error?: Function): angular.IPromise<T>;
-
-        $query(): angular.IPromise<IResourceArray<T>>;
-        $query(params?: Object, success?: Function, error?: Function): angular.IPromise<IResourceArray<T>>;
-        $query(success: Function, error?: Function): angular.IPromise<IResourceArray<T>>;
-
-        $save(): angular.IPromise<T>;
-        $save(params?: Object, success?: Function, error?: Function): angular.IPromise<T>;
-        $save(success: Function, error?: Function): angular.IPromise<T>;
-
-        $remove(): angular.IPromise<T>;
-        $remove(params?: Object, success?: Function, error?: Function): angular.IPromise<T>;
-        $remove(success: Function, error?: Function): angular.IPromise<T>;
-
-        $delete(): angular.IPromise<T>;
-        $delete(params?: Object, success?: Function, error?: Function): angular.IPromise<T>;
-        $delete(success: Function, error?: Function): angular.IPromise<T>;
-
-        $cancelRequest(): void;
-
-        /** the promise of the original server interaction that created this instance. **/
-        $promise : angular.IPromise<T>;
-        $resolved : boolean;
-        toJSON(): T;
-    }
-
-    /**
-     * Really just a regular Array object with $promise and $resolve attached to it
-     */
-    interface IResourceArray<T> extends Array<T & IResource<T>> {
-        /** the promise of the original server interaction that created this collection. **/
-        $promise : angular.IPromise<IResourceArray<T>>;
-        $resolved : boolean;
-    }
-
-    /** when creating a resource factory via IModule.factory */
-    interface IResourceServiceFactoryFunction<T> {
-        ($resource: angular.resource.IResourceService): IResourceClass<T>;
-        <U extends IResourceClass<T>>($resource: angular.resource.IResourceService): U;
-    }
-
-    // IResourceServiceProvider used to configure global settings
-    interface IResourceServiceProvider extends angular.IServiceProvider {
-
-        defaults: IResourceOptions;
-    }
-
-}
-
-/** extensions to base ng based on using angular-resource */
-declare namespace angular {
-
-    interface IModule {
-        /** creating a resource service factory */
-        factory(name: string, resourceServiceFactoryFunction: angular.resource.IResourceServiceFactoryFunction<any>): IModule;
-    }
-}
-
-interface Array<T>
-{
-    /** the promise of the original server interaction that created this collection. **/
-    $promise : angular.IPromise<Array<T>>;
-    $resolved : boolean;
-}
\ No newline at end of file
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-resource/typings.json b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-resource/typings.json
deleted file mode 100644
index b60eafd673..0000000000
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-resource/typings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "resolution": "main",
-  "tree": {
-    "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/e684481e0cd360db62fd6213ca7248245315e8a2/angularjs/angular-resource.d.ts",
-    "raw": "registry:dt/angular-resource#1.5.0+20160412142209",
-    "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/e684481e0cd360db62fd6213ca7248245315e8a2/angularjs/angular-resource.d.ts"
-  }
-}
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-route/index.d.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-route/index.d.ts
deleted file mode 100644
index 5fad393d0a..0000000000
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-route/index.d.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-// Generated by typings
-// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/7de6c3dd94feaeb21f20054b9f30d5dabc5efabd/angularjs/angular-route.d.ts
-declare module "angular-route" {
-    var _: string;
-    export = _;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// ngRoute module (angular-route.js)
-///////////////////////////////////////////////////////////////////////////////
-declare namespace angular.route {
-
-    ///////////////////////////////////////////////////////////////////////////
-    // RouteParamsService
-    // see http://docs.angularjs.org/api/ngRoute.$routeParams
-    ///////////////////////////////////////////////////////////////////////////
-    interface IRouteParamsService {
-        [key: string]: any;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // RouteService
-    // see http://docs.angularjs.org/api/ngRoute.$route
-    // see http://docs.angularjs.org/api/ngRoute.$routeProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface IRouteService {
-        reload(): void;
-        routes: any;
-
-        // May not always be available. For instance, current will not be available
-        // to a controller that was not initialized as a result of a route maching.
-        current?: ICurrentRoute;
-
-        /**
-         * Causes $route service to update the current URL, replacing current route parameters with those specified in newParams.
-         * Provided property names that match the route's path segment definitions will be interpolated into the
-         * location's path, while remaining properties will be treated as query params.
-         *
-         * @param newParams Object.<string, string> mapping of URL parameter names to values
-         */
-        updateParams(newParams:{[key:string]:string}): void;
-
-    }
-
-    type InlineAnnotatedFunction = Function|Array<string|Function>
-
-    /**
-     * see http://docs.angularjs.org/api/ngRoute/provider/$routeProvider#when for API documentation
-     */
-    interface IRoute {
-        /**
-         * {(string|function()=}
-         * Controller fn that should be associated with newly created scope or the name of a registered controller if passed as a string.
-         */
-        controller?: string|InlineAnnotatedFunction;
-        /**
-         * A controller alias name. If present the controller will be published to scope under the controllerAs name.
-         */
-        controllerAs?: string;
-        /**
-         * Undocumented?
-         */
-        name?: string;
-        /**
-         * {string=|function()=}
-         * Html template as a string or a function that returns an html template as a string which should be used by ngView or ngInclude directives. This property takes precedence over templateUrl.
-         *
-         * If template is a function, it will be called with the following parameters:
-         *
-         * {Array.<Object>} - route parameters extracted from the current $location.path() by applying the current route
-         */
-        template?: string|{($routeParams?: angular.route.IRouteParamsService) : string;}
-        /**
-         * {string=|function()=}
-         * Path or function that returns a path to an html template that should be used by ngView.
-         *
-         * If templateUrl is a function, it will be called with the following parameters:
-         *
-         * {Array.<Object>} - route parameters extracted from the current $location.path() by applying the current route
-         */
-        templateUrl?: string|{ ($routeParams?: angular.route.IRouteParamsService): string; }
-        /**
-         * {Object.<string, function>=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired. If any of the promises are rejected the $routeChangeError event is fired. The map object is:
-         *
-         * - key - {string}: a name of a dependency to be injected into the controller.
-         * - factory - {string|function}: If string then it is an alias for a service. Otherwise if function, then it is injected and the return value is treated as the dependency. If the result is a promise, it is resolved before its value is injected into the controller. Be aware that ngRoute.$routeParams will still refer to the previous route within these resolve functions. Use $route.current.params to access the new route parameters, instead.
-         */
-        resolve?: {[key: string]: any};
-        /**
-         * {(string|function())=}
-         * Value to update $location path with and trigger route redirection.
-         *
-         * If redirectTo is a function, it will be called with the following parameters:
-         *
-         * - {Object.<string>} - route parameters extracted from the current $location.path() by applying the current route templateUrl.
-         * - {string} - current $location.path()
-         * - {Object} - current $location.search()
-         * - The custom redirectTo function is expected to return a string which will be used to update $location.path() and $location.search().
-         */
-        redirectTo?: string|{($routeParams?: angular.route.IRouteParamsService, $locationPath?: string, $locationSearch?: any) : string};
-        /**
-         * Reload route when only $location.search() or $location.hash() changes.
-         *
-         * This option defaults to true. If the option is set to false and url in the browser changes, then $routeUpdate event is broadcasted on the root scope.
-         */
-        reloadOnSearch?: boolean;
-        /**
-         * Match routes without being case sensitive
-         *
-         * This option defaults to false. If the option is set to true, then the particular route can be matched without being case sensitive
-         */
-        caseInsensitiveMatch?: boolean;
-    }
-
-    // see http://docs.angularjs.org/api/ng.$route#current
-    interface ICurrentRoute extends IRoute {
-        locals: {
-            [index: string]: any;
-            $scope: IScope;
-            $template: string;
-        };
-
-        params: any;
-    }
-
-    interface IRouteProvider extends IServiceProvider {
-		/**
-         * Match routes without being case sensitive
-         *
-         * This option defaults to false. If the option is set to true, then the particular route can be matched without being case sensitive
-         */
-        caseInsensitiveMatch?: boolean;
-        /**
-         * Sets route definition that will be used on route change when no other route definition is matched.
-         *
-         * @params Mapping information to be assigned to $route.current.
-         */
-        otherwise(params: IRoute): IRouteProvider;
-        /**
-         * Adds a new route definition to the $route service.
-         *
-         * @param path Route path (matched against $location.path). If $location.path contains redundant trailing slash or is missing one, the route will still match and the $location.path will be updated to add or drop the trailing slash to exactly match the route definition.
-         *
-         * - path can contain named groups starting with a colon: e.g. :name. All characters up to the next slash are matched and stored in $routeParams under the given name when the route matches.
-         * - path can contain named groups starting with a colon and ending with a star: e.g.:name*. All characters are eagerly stored in $routeParams under the given name when the route matches.
-         * - path can contain optional named groups with a question mark: e.g.:name?.
-         *
-         * For example, routes like /color/:color/largecode/:largecode*\/edit will match /color/brown/largecode/code/with/slashes/edit and extract: color: brown and largecode: code/with/slashes.
-         *
-         * @param route Mapping information to be assigned to $route.current on route match.
-         */
-        when(path: string, route: IRoute): IRouteProvider;
-    }
-}
\ No newline at end of file
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-route/typings.json b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-route/typings.json
deleted file mode 100644
index 4c4677f34f..0000000000
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular-route/typings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "resolution": "main",
-  "tree": {
-    "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/7de6c3dd94feaeb21f20054b9f30d5dabc5efabd/angularjs/angular-route.d.ts",
-    "raw": "registry:dt/angular-route#1.3.0+20160317120654",
-    "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/7de6c3dd94feaeb21f20054b9f30d5dabc5efabd/angularjs/angular-route.d.ts"
-  }
-}
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular/index.d.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular/index.d.ts
deleted file mode 100644
index dfde81e26b..0000000000
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular/index.d.ts
+++ /dev/null
@@ -1,1953 +0,0 @@
-// Generated by typings
-// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/b76dd8a7f95b71696982befbb7589940d27e940b/angularjs/angular.d.ts
-declare var angular: angular.IAngularStatic;
-
-// Support for painless dependency injection
-interface Function {
-    $inject?: string[];
-}
-
-// Collapse angular into ng
-import ng = angular;
-// Support AMD require
-declare module 'angular' {
-    export = angular;
-}
-
-///////////////////////////////////////////////////////////////////////////////
-// ng module (angular.js)
-///////////////////////////////////////////////////////////////////////////////
-declare namespace angular {
-
-    // not directly implemented, but ensures that constructed class implements $get
-    interface IServiceProviderClass {
-        new (...args: any[]): IServiceProvider;
-    }
-
-    interface IServiceProviderFactory {
-        (...args: any[]): IServiceProvider;
-    }
-
-    // All service providers extend this interface
-    interface IServiceProvider {
-        $get: any;
-    }
-
-    interface IAngularBootstrapConfig {
-        strictDi?: boolean;
-        debugInfoEnabled?: boolean;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // AngularStatic
-    // see http://docs.angularjs.org/api
-    ///////////////////////////////////////////////////////////////////////////
-    interface IAngularStatic {
-        bind(context: any, fn: Function, ...args: any[]): Function;
-
-        /**
-         * Use this function to manually start up angular application.
-         *
-         * @param element DOM element which is the root of angular application.
-         * @param modules An array of modules to load into the application.
-         *     Each item in the array should be the name of a predefined module or a (DI annotated)
-         *     function that will be invoked by the injector as a config block.
-         * @param config an object for defining configuration options for the application. The following keys are supported:
-         *     - `strictDi`: disable automatic function annotation for the application. This is meant to assist in finding bugs which break minified code.
-         */
-        bootstrap(element: string|Element|JQuery|Document, modules?: (string|Function|any[])[], config?: IAngularBootstrapConfig): auto.IInjectorService;
-
-        /**
-         * Creates a deep copy of source, which should be an object or an array.
-         *
-         * - If no destination is supplied, a copy of the object or array is created.
-         * - If a destination is provided, all of its elements (for array) or properties (for objects) are deleted and then all elements/properties from the source are copied to it.
-         * - If source is not an object or array (inc. null and undefined), source is returned.
-         * - If source is identical to 'destination' an exception will be thrown.
-         *
-         * @param source The source that will be used to make a copy. Can be any type, including primitives, null, and undefined.
-         * @param destination Destination into which the source is copied. If provided, must be of the same type as source.
-         */
-        copy<T>(source: T, destination?: T): T;
-
-        /**
-         * Wraps a raw DOM element or HTML string as a jQuery element.
-         *
-         * If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite."
-         */
-        element: IAugmentedJQueryStatic;
-        equals(value1: any, value2: any): boolean;
-        extend(destination: any, ...sources: any[]): any;
-
-        /**
-         * Invokes the iterator function once for each item in obj collection, which can be either an object or an array. The iterator function is invoked with iterator(value, key), where value is the value of an object property or an array element and key is the object property key or array element index. Specifying a context for the function is optional.
-         *
-         * It is worth noting that .forEach does not iterate over inherited properties because it filters using the hasOwnProperty method.
-         *
-         * @param obj Object to iterate over.
-         * @param iterator Iterator function.
-         * @param context Object to become context (this) for the iterator function.
-         */
-        forEach<T>(obj: T[], iterator: (value: T, key: number) => any, context?: any): any;
-        /**
-         * Invokes the iterator function once for each item in obj collection, which can be either an object or an array. The iterator function is invoked with iterator(value, key), where value is the value of an object property or an array element and key is the object property key or array element index. Specifying a context for the function is optional.
-         *
-         * It is worth noting that .forEach does not iterate over inherited properties because it filters using the hasOwnProperty method.
-         *
-         * @param obj Object to iterate over.
-         * @param iterator Iterator function.
-         * @param context Object to become context (this) for the iterator function.
-         */
-        forEach<T>(obj: { [index: string]: T; }, iterator: (value: T, key: string) => any, context?: any): any;
-        /**
-         * Invokes the iterator function once for each item in obj collection, which can be either an object or an array. The iterator function is invoked with iterator(value, key), where value is the value of an object property or an array element and key is the object property key or array element index. Specifying a context for the function is optional.
-         *
-         * It is worth noting that .forEach does not iterate over inherited properties because it filters using the hasOwnProperty method.
-         *
-         * @param obj Object to iterate over.
-         * @param iterator Iterator function.
-         * @param context Object to become context (this) for the iterator function.
-         */
-        forEach(obj: any, iterator: (value: any, key: any) => any, context?: any): any;
-
-        fromJson(json: string): any;
-        identity<T>(arg?: T): T;
-        injector(modules?: any[], strictDi?: boolean): auto.IInjectorService;
-        isArray(value: any): boolean;
-        isDate(value: any): boolean;
-        isDefined(value: any): boolean;
-        isElement(value: any): boolean;
-        isFunction(value: any): boolean;
-        isNumber(value: any): boolean;
-        isObject(value: any): boolean;
-        isString(value: any): boolean;
-        isUndefined(value: any): boolean;
-        lowercase(str: string): string;
-
-        /**
-         * Deeply extends the destination object dst by copying own enumerable properties from the src object(s) to dst. You can specify multiple src objects. If you want to preserve original objects, you can do so by passing an empty object as the target: var object = angular.merge({}, object1, object2).
-         *
-         * Unlike extend(), merge() recursively descends into object properties of source objects, performing a deep copy.
-         *
-         * @param dst Destination object.
-         * @param src Source object(s).
-         */
-        merge(dst: any, ...src: any[]): any;
-
-        /**
-         * The angular.module is a global place for creating, registering and retrieving Angular modules. All modules (angular core or 3rd party) that should be available to an application must be registered using this mechanism.
-         *
-         * When passed two or more arguments, a new module is created. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved.
-         *
-         * @param name The name of the module to create or retrieve.
-         * @param requires The names of modules this module depends on. If specified then new module is being created. If unspecified then the module is being retrieved for further configuration.
-         * @param configFn Optional configuration function for the module.
-         */
-        module(
-            name: string,
-            requires?: string[],
-            configFn?: Function): IModule;
-
-        noop(...args: any[]): void;
-        reloadWithDebugInfo(): void;
-        toJson(obj: any, pretty?: boolean): string;
-        uppercase(str: string): string;
-        version: {
-            full: string;
-            major: number;
-            minor: number;
-            dot: number;
-            codeName: string;
-        };
-
-        /**
-         * If window.name contains prefix NG_DEFER_BOOTSTRAP! when angular.bootstrap is called, the bootstrap process will be paused until angular.resumeBootstrap() is called.
-         * @param extraModules An optional array of modules that should be added to the original list of modules that the app was about to be bootstrapped with.
-         */
-        resumeBootstrap?(extraModules?: string[]): ng.auto.IInjectorService;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // Module
-    // see http://docs.angularjs.org/api/angular.Module
-    ///////////////////////////////////////////////////////////////////////////
-    interface IModule {
-        /**
-         * Use this method to register a component.
-         *
-         * @param name The name of the component.
-         * @param options A definition object passed into the component.
-         */
-        component(name: string, options: IComponentOptions): IModule;
-        /**
-         * Use this method to register work which needs to be performed on module loading.
-         *
-         * @param configFn Execute this function on module load. Useful for service configuration.
-         */
-        config(configFn: Function): IModule;
-        /**
-         * Use this method to register work which needs to be performed on module loading.
-         *
-         * @param inlineAnnotatedFunction Execute this function on module load. Useful for service configuration.
-         */
-        config(inlineAnnotatedFunction: any[]): IModule;
-        config(object: Object): IModule;
-        /**
-         * Register a constant service, such as a string, a number, an array, an object or a function, with the $injector. Unlike value it can be injected into a module configuration function (see config) and it cannot be overridden by an Angular decorator.
-         *
-         * @param name The name of the constant.
-         * @param value The constant value.
-         */
-        constant<T>(name: string, value: T): IModule;
-        constant(object: Object): IModule;
-        /**
-         * The $controller service is used by Angular to create new controllers.
-         *
-         * This provider allows controller registration via the register method.
-         *
-         * @param name Controller name, or an object map of controllers where the keys are the names and the values are the constructors.
-         * @param controllerConstructor Controller constructor fn (optionally decorated with DI annotations in the array notation).
-         */
-        controller(name: string, controllerConstructor: Function): IModule;
-        /**
-         * The $controller service is used by Angular to create new controllers.
-         *
-         * This provider allows controller registration via the register method.
-         *
-         * @param name Controller name, or an object map of controllers where the keys are the names and the values are the constructors.
-         * @param controllerConstructor Controller constructor fn (optionally decorated with DI annotations in the array notation).
-         */
-        controller(name: string, inlineAnnotatedConstructor: any[]): IModule;
-        controller(object: Object): IModule;
-        /**
-         * Register a new directive with the compiler.
-         *
-         * @param name Name of the directive in camel-case (i.e. ngBind which will match as ng-bind)
-         * @param directiveFactory An injectable directive factory function.
-         */
-        directive(name: string, directiveFactory: IDirectiveFactory): IModule;
-        /**
-         * Register a new directive with the compiler.
-         *
-         * @param name Name of the directive in camel-case (i.e. ngBind which will match as ng-bind)
-         * @param directiveFactory An injectable directive factory function.
-         */
-        directive(name: string, inlineAnnotatedFunction: any[]): IModule;
-        directive(object: Object): IModule;
-        /**
-         * Register a service factory, which will be called to return the service instance. This is short for registering a service where its provider consists of only a $get property, which is the given service factory function. You should use $provide.factory(getFn) if you do not need to configure your service in a provider.
-         *
-         * @param name The name of the instance.
-         * @param $getFn The $getFn for the instance creation. Internally this is a short hand for $provide.provider(name, {$get: $getFn}).
-         */
-        factory(name: string, $getFn: Function): IModule;
-        /**
-         * Register a service factory, which will be called to return the service instance. This is short for registering a service where its provider consists of only a $get property, which is the given service factory function. You should use $provide.factory(getFn) if you do not need to configure your service in a provider.
-         *
-         * @param name The name of the instance.
-         * @param inlineAnnotatedFunction The $getFn for the instance creation. Internally this is a short hand for $provide.provider(name, {$get: $getFn}).
-         */
-        factory(name: string, inlineAnnotatedFunction: any[]): IModule;
-        factory(object: Object): IModule;
-        filter(name: string, filterFactoryFunction: Function): IModule;
-        filter(name: string, inlineAnnotatedFunction: any[]): IModule;
-        filter(object: Object): IModule;
-        provider(name: string, serviceProviderFactory: IServiceProviderFactory): IModule;
-        provider(name: string, serviceProviderConstructor: IServiceProviderClass): IModule;
-        provider(name: string, inlineAnnotatedConstructor: any[]): IModule;
-        provider(name: string, providerObject: IServiceProvider): IModule;
-        provider(object: Object): IModule;
-        /**
-         * Run blocks are the closest thing in Angular to the main method. A run block is the code which needs to run to kickstart the application. It is executed after all of the service have been configured and the injector has been created. Run blocks typically contain code which is hard to unit-test, and for this reason should be declared in isolated modules, so that they can be ignored in the unit-tests.
-         */
-        run(initializationFunction: Function): IModule;
-        /**
-         * Run blocks are the closest thing in Angular to the main method. A run block is the code which needs to run to kickstart the application. It is executed after all of the service have been configured and the injector has been created. Run blocks typically contain code which is hard to unit-test, and for this reason should be declared in isolated modules, so that they can be ignored in the unit-tests.
-         */
-        run(inlineAnnotatedFunction: any[]): IModule;
-        /**
-         * Register a service constructor, which will be invoked with new to create the service instance. This is short for registering a service where its provider's $get property is a factory function that returns an instance instantiated by the injector from the service constructor function.
-         *
-         * @param name The name of the instance.
-         * @param serviceConstructor An injectable class (constructor function) that will be instantiated.
-         */
-        service(name: string, serviceConstructor: Function): IModule;
-        /**
-         * Register a service constructor, which will be invoked with new to create the service instance. This is short for registering a service where its provider's $get property is a factory function that returns an instance instantiated by the injector from the service constructor function.
-         *
-         * @param name The name of the instance.
-         * @param inlineAnnotatedConstructor An injectable class (constructor function) that will be instantiated.
-         */
-        service(name: string, inlineAnnotatedConstructor: any[]): IModule;
-        service(object: Object): IModule;
-        /**
-         * Register a value service with the $injector, such as a string, a number, an array, an object or a function. This is short for registering a service where its provider's $get property is a factory function that takes no arguments and returns the value service.
-
-           Value services are similar to constant services, except that they cannot be injected into a module configuration function (see config) but they can be overridden by an Angular decorator.
-         *
-         * @param name The name of the instance.
-         * @param value The value.
-         */
-        value<T>(name: string, value: T): IModule;
-        value(object: Object): IModule;
-
-        /**
-         * Register a service decorator with the $injector. A service decorator intercepts the creation of a service, allowing it to override or modify the behaviour of the service. The object returned by the decorator may be the original service, or a new service object which replaces or wraps and delegates to the original service.
-         * @param name The name of the service to decorate
-         * @param decorator This function will be invoked when the service needs to be instantiated and should return the decorated service instance. The function is called using the injector.invoke method and is therefore fully injectable. Local injection arguments: $delegate - The original service instance, which can be monkey patched, configured, decorated or delegated to.
-         */
-        decorator(name:string, decoratorConstructor: Function): IModule;
-        decorator(name:string, inlineAnnotatedConstructor: any[]): IModule;
-
-        // Properties
-        name: string;
-        requires: string[];
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // Attributes
-    // see http://docs.angularjs.org/api/ng.$compile.directive.Attributes
-    ///////////////////////////////////////////////////////////////////////////
-    interface IAttributes {
-        /**
-         * this is necessary to be able to access the scoped attributes. it's not very elegant
-         * because you have to use attrs['foo'] instead of attrs.foo but I don't know of a better way
-         * this should really be limited to return string but it creates this problem: http://stackoverflow.com/q/17201854/165656
-         */
-        [name: string]: any;
-
-        /**
-         * Converts an attribute name (e.g. dash/colon/underscore-delimited string, optionally prefixed with x- or data-) to its normalized, camelCase form.
-         *
-         * Also there is special case for Moz prefix starting with upper case letter.
-         *
-         * For further information check out the guide on @see https://docs.angularjs.org/guide/directive#matching-directives
-         */
-        $normalize(name: string): string;
-
-        /**
-         * Adds the CSS class value specified by the classVal parameter to the
-         * element. If animations are enabled then an animation will be triggered
-         * for the class addition.
-         */
-        $addClass(classVal: string): void;
-
-        /**
-         * Removes the CSS class value specified by the classVal parameter from the
-         * element. If animations are enabled then an animation will be triggered for
-         * the class removal.
-         */
-        $removeClass(classVal: string): void;
-
-        /**
-         * Adds and removes the appropriate CSS class values to the element based on the difference between
-         * the new and old CSS class values (specified as newClasses and oldClasses).
-         */
-        $updateClass(newClasses: string, oldClasses: string): void;
-
-        /**
-         * Set DOM element attribute value.
-         */
-        $set(key: string, value: any): void;
-
-        /**
-         * Observes an interpolated attribute.
-         * The observer function will be invoked once during the next $digest
-         * following compilation. The observer is then invoked whenever the
-         * interpolated value changes.
-         */
-        $observe<T>(name: string, fn: (value?: T) => any): Function;
-
-        /**
-         * A map of DOM element attribute names to the normalized name. This is needed
-         * to do reverse lookup from normalized name back to actual name.
-         */
-        $attr: Object;
-    }
-
-    /**
-     * form.FormController - type in module ng
-     * see https://docs.angularjs.org/api/ng/type/form.FormController
-     */
-    interface IFormController {
-
-        /**
-         * Indexer which should return ng.INgModelController for most properties but cannot because of "All named properties must be assignable to string indexer type" constraint - see https://github.com/Microsoft/TypeScript/issues/272
-         */
-        [name: string]: any;
-
-        $pristine: boolean;
-        $dirty: boolean;
-        $valid: boolean;
-        $invalid: boolean;
-        $submitted: boolean;
-        $error: any;
-        $pending: any;
-        $addControl(control: INgModelController | IFormController): void;
-        $removeControl(control: INgModelController | IFormController): void;
-        $setValidity(validationErrorKey: string, isValid: boolean, control: INgModelController | IFormController): void;
-        $setDirty(): void;
-        $setPristine(): void;
-        $commitViewValue(): void;
-        $rollbackViewValue(): void;
-        $setSubmitted(): void;
-        $setUntouched(): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // NgModelController
-    // see http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
-    ///////////////////////////////////////////////////////////////////////////
-    interface INgModelController {
-        $render(): void;
-        $setValidity(validationErrorKey: string, isValid: boolean): void;
-        // Documentation states viewValue and modelValue to be a string but other
-        // types do work and it's common to use them.
-        $setViewValue(value: any, trigger?: string): void;
-        $setPristine(): void;
-        $setDirty(): void;
-        $validate(): void;
-        $setTouched(): void;
-        $setUntouched(): void;
-        $rollbackViewValue(): void;
-        $commitViewValue(): void;
-        $isEmpty(value: any): boolean;
-
-        $viewValue: any;
-
-        $modelValue: any;
-
-        $parsers: IModelParser[];
-        $formatters: IModelFormatter[];
-        $viewChangeListeners: IModelViewChangeListener[];
-        $error: any;
-        $name: string;
-
-        $touched: boolean;
-        $untouched: boolean;
-
-        $validators: IModelValidators;
-        $asyncValidators: IAsyncModelValidators;
-
-        $pending: any;
-        $pristine: boolean;
-        $dirty: boolean;
-        $valid: boolean;
-        $invalid: boolean;
-    }
-
-    //Allows tuning how model updates are done.
-    //https://docs.angularjs.org/api/ng/directive/ngModelOptions
-    interface INgModelOptions {
-        updateOn?: string;
-        debounce?: any;
-        allowInvalid?: boolean;
-        getterSetter?: boolean;
-        timezone?: string;
-    }
-
-    interface IModelValidators {
-        /**
-         * viewValue is any because it can be an object that is called in the view like $viewValue.name:$viewValue.subName
-         */
-        [index: string]: (modelValue: any, viewValue: any) => boolean;
-    }
-
-    interface IAsyncModelValidators {
-        [index: string]: (modelValue: any, viewValue: any) => IPromise<any>;
-    }
-
-    interface IModelParser {
-        (value: any): any;
-    }
-
-    interface IModelFormatter {
-        (value: any): any;
-    }
-
-    interface IModelViewChangeListener {
-        (): void;
-    }
-
-    /**
-     * $rootScope - $rootScopeProvider - service in module ng
-     * see https://docs.angularjs.org/api/ng/type/$rootScope.Scope and https://docs.angularjs.org/api/ng/service/$rootScope
-     */
-    interface IRootScopeService {
-        [index: string]: any;
-
-        $apply(): any;
-        $apply(exp: string): any;
-        $apply(exp: (scope: IScope) => any): any;
-
-        $applyAsync(): any;
-        $applyAsync(exp: string): any;
-        $applyAsync(exp: (scope: IScope) => any): any;
-
-        /**
-         * Dispatches an event name downwards to all child scopes (and their children) notifying the registered $rootScope.Scope listeners.
-         *
-         * The event life cycle starts at the scope on which $broadcast was called. All listeners listening for name event on this scope get notified. Afterwards, the event propagates to all direct and indirect scopes of the current scope and calls all registered listeners along the way. The event cannot be canceled.
-         *
-         * Any exception emitted from the listeners will be passed onto the $exceptionHandler service.
-         *
-         * @param name Event name to broadcast.
-         * @param args Optional one or more arguments which will be passed onto the event listeners.
-         */
-        $broadcast(name: string, ...args: any[]): IAngularEvent;
-        $destroy(): void;
-        $digest(): void;
-        /**
-         * Dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners.
-         *
-         * The event life cycle starts at the scope on which $emit was called. All listeners listening for name event on this scope get notified. Afterwards, the event traverses upwards toward the root scope and calls all registered listeners along the way. The event will stop propagating if one of the listeners cancels it.
-         *
-         * Any exception emitted from the listeners will be passed onto the $exceptionHandler service.
-         *
-         * @param name Event name to emit.
-         * @param args Optional one or more arguments which will be passed onto the event listeners.
-         */
-        $emit(name: string, ...args: any[]): IAngularEvent;
-
-        $eval(): any;
-        $eval(expression: string, locals?: Object): any;
-        $eval(expression: (scope: IScope) => any, locals?: Object): any;
-
-        $evalAsync(): void;
-        $evalAsync(expression: string): void;
-        $evalAsync(expression: (scope: IScope) => any): void;
-
-        // Defaults to false by the implementation checking strategy
-        $new(isolate?: boolean, parent?: IScope): IScope;
-
-        /**
-         * Listens on events of a given type. See $emit for discussion of event life cycle.
-         *
-         * The event listener function format is: function(event, args...).
-         *
-         * @param name Event name to listen on.
-         * @param listener Function to call when the event is emitted.
-         */
-        $on(name: string, listener: (event: IAngularEvent, ...args: any[]) => any): () => void;
-
-        $watch(watchExpression: string, listener?: string, objectEquality?: boolean): () => void;
-        $watch<T>(watchExpression: string, listener?: (newValue: T, oldValue: T, scope: IScope) => any, objectEquality?: boolean): () => void;
-        $watch(watchExpression: (scope: IScope) => any, listener?: string, objectEquality?: boolean): () => void;
-        $watch<T>(watchExpression: (scope: IScope) => T, listener?: (newValue: T, oldValue: T, scope: IScope) => any, objectEquality?: boolean): () => void;
-
-        $watchCollection<T>(watchExpression: string, listener: (newValue: T, oldValue: T, scope: IScope) => any): () => void;
-        $watchCollection<T>(watchExpression: (scope: IScope) => T, listener: (newValue: T, oldValue: T, scope: IScope) => any): () => void;
-
-        $watchGroup(watchExpressions: any[], listener: (newValue: any, oldValue: any, scope: IScope) => any): () => void;
-        $watchGroup(watchExpressions: { (scope: IScope): any }[], listener: (newValue: any, oldValue: any, scope: IScope) => any): () => void;
-
-        $parent: IScope;
-        $root: IRootScopeService;
-        $id: number;
-
-        // Hidden members
-        $$isolateBindings: any;
-        $$phase: any;
-    }
-
-    interface IScope extends IRootScopeService { }
-
-    /**
-     * $scope for ngRepeat directive.
-     * see https://docs.angularjs.org/api/ng/directive/ngRepeat
-     */
-    interface IRepeatScope extends IScope {
-
-        /**
-         * iterator offset of the repeated element (0..length-1).
-         */
-        $index: number;
-
-        /**
-         * true if the repeated element is first in the iterator.
-         */
-        $first: boolean;
-
-        /**
-         * true if the repeated element is between the first and last in the iterator.
-         */
-        $middle: boolean;
-
-        /**
-         * true if the repeated element is last in the iterator.
-         */
-        $last: boolean;
-
-        /**
-         * true if the iterator position $index is even (otherwise false).
-         */
-        $even: boolean;
-
-        /**
-         * true if the iterator position $index is odd (otherwise false).
-         */
-        $odd: boolean;
-
-    }
-
-    interface IAngularEvent {
-        /**
-         * the scope on which the event was $emit-ed or $broadcast-ed.
-         */
-        targetScope: IScope;
-        /**
-         * the scope that is currently handling the event. Once the event propagates through the scope hierarchy, this property is set to null.
-         */
-        currentScope: IScope;
-        /**
-         * name of the event.
-         */
-        name: string;
-        /**
-         * calling stopPropagation function will cancel further event propagation (available only for events that were $emit-ed).
-         */
-        stopPropagation?: Function;
-        /**
-         * calling preventDefault sets defaultPrevented flag to true.
-         */
-        preventDefault: Function;
-        /**
-         * true if preventDefault was called.
-         */
-        defaultPrevented: boolean;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // WindowService
-    // see http://docs.angularjs.org/api/ng.$window
-    ///////////////////////////////////////////////////////////////////////////
-    interface IWindowService extends Window {
-        [key: string]: any;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // TimeoutService
-    // see http://docs.angularjs.org/api/ng.$timeout
-    ///////////////////////////////////////////////////////////////////////////
-    interface ITimeoutService {
-        (delay?: number, invokeApply?: boolean): IPromise<void>;
-        <T>(fn: (...args: any[]) => T, delay?: number, invokeApply?: boolean, ...args: any[]): IPromise<T>;
-        cancel(promise?: IPromise<any>): boolean;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // IntervalService
-    // see http://docs.angularjs.org/api/ng.$interval
-    ///////////////////////////////////////////////////////////////////////////
-    interface IIntervalService {
-        (func: Function, delay: number, count?: number, invokeApply?: boolean, ...args: any[]): IPromise<any>;
-        cancel(promise: IPromise<any>): boolean;
-    }
-
-    /**
-     * $filter - $filterProvider - service in module ng
-     *
-     * Filters are used for formatting data displayed to the user.
-     *
-     * see https://docs.angularjs.org/api/ng/service/$filter
-     */
-    interface IFilterService {
-        (name: 'filter'): IFilterFilter;
-        (name: 'currency'): IFilterCurrency;
-        (name: 'number'): IFilterNumber;
-        (name: 'date'): IFilterDate;
-        (name: 'json'): IFilterJson;
-        (name: 'lowercase'): IFilterLowercase;
-        (name: 'uppercase'): IFilterUppercase;
-        (name: 'limitTo'): IFilterLimitTo;
-        (name: 'orderBy'): IFilterOrderBy;
-        /**
-         * Usage:
-         * $filter(name);
-         *
-         * @param name Name of the filter function to retrieve
-         */
-        <T>(name: string): T;
-    }
-
-    interface IFilterFilter {
-        <T>(array: T[], expression: string | IFilterFilterPatternObject | IFilterFilterPredicateFunc<T>, comparator?: IFilterFilterComparatorFunc<T>|boolean): T[];
-    }
-
-    interface IFilterFilterPatternObject {
-        [name: string]: any;
-    }
-
-    interface IFilterFilterPredicateFunc<T> {
-        (value: T, index: number, array: T[]): boolean;
-    }
-
-    interface IFilterFilterComparatorFunc<T> {
-        (actual: T, expected: T): boolean;
-    }
-
-    interface IFilterCurrency {
-        /**
-         * Formats a number as a currency (ie $1,234.56). When no currency symbol is provided, default symbol for current locale is used.
-         * @param amount Input to filter.
-         * @param symbol Currency symbol or identifier to be displayed.
-         * @param fractionSize Number of decimal places to round the amount to, defaults to default max fraction size for current locale
-         * @return Formatted number
-         */
-        (amount: number, symbol?: string, fractionSize?: number): string;
-    }
-
-    interface IFilterNumber {
-        /**
-         * Formats a number as text.
-         * @param number Number to format.
-         * @param fractionSize Number of decimal places to round the number to. If this is not provided then the fraction size is computed from the current locale's number formatting pattern. In the case of the default locale, it will be 3.
-         * @return Number rounded to decimalPlaces and places a “,” after each third digit.
-         */
-        (value: number|string, fractionSize?: number|string): string;
-    }
-
-    interface IFilterDate {
-        /**
-         * Formats date to a string based on the requested format.
-         *
-         * @param date Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.
-         * @param format Formatting rules (see Description). If not specified, mediumDate is used.
-         * @param timezone Timezone to be used for formatting. It understands UTC/GMT and the continental US time zone abbreviations, but for general use, use a time zone offset, for example, '+0430' (4 hours, 30 minutes east of the Greenwich meridian) If not specified, the timezone of the browser will be used.
-         * @return Formatted string or the input if input is not recognized as date/millis.
-         */
-        (date: Date | number | string, format?: string, timezone?: string): string;
-    }
-
-    interface IFilterJson {
-        /**
-         * Allows you to convert a JavaScript object into JSON string.
-         * @param object Any JavaScript object (including arrays and primitive types) to filter.
-         * @param spacing The number of spaces to use per indentation, defaults to 2.
-         * @return JSON string.
-         */
-        (object: any, spacing?: number): string;
-    }
-
-    interface IFilterLowercase {
-        /**
-         * Converts string to lowercase.
-         */
-        (value: string): string;
-    }
-
-    interface IFilterUppercase {
-        /**
-         * Converts string to uppercase.
-         */
-        (value: string): string;
-    }
-
-    interface IFilterLimitTo {
-        /**
-         * Creates a new array containing only a specified number of elements. The elements are taken from either the beginning or the end of the source array, string or number, as specified by the value and sign (positive or negative) of limit.
-         * @param input Source array to be limited.
-         * @param limit The length of the returned array. If the limit number is positive, limit number of items from the beginning of the source array/string are copied. If the number is negative, limit number of items from the end of the source array are copied. The limit will be trimmed if it exceeds array.length. If limit is undefined, the input will be returned unchanged.
-         * @param begin Index at which to begin limitation. As a negative index, begin indicates an offset from the end of input. Defaults to 0.
-         * @return A new sub-array of length limit or less if input array had less than limit elements.
-         */
-        <T>(input: T[], limit: string|number, begin?: string|number): T[];
-        /**
-         * Creates a new string containing only a specified number of elements. The elements are taken from either the beginning or the end of the source string or number, as specified by the value and sign (positive or negative) of limit. If a number is used as input, it is converted to a string.
-         * @param input Source string or number to be limited.
-         * @param limit The length of the returned string. If the limit number is positive, limit number of items from the beginning of the source string are copied. If the number is negative, limit number of items from the end of the source string are copied. The limit will be trimmed if it exceeds input.length. If limit is undefined, the input will be returned unchanged.
-         * @param begin Index at which to begin limitation. As a negative index, begin indicates an offset from the end of input. Defaults to 0.
-         * @return A new substring of length limit or less if input had less than limit elements.
-         */
-        (input: string|number, limit: string|number, begin?: string|number): string;
-    }
-
-    interface IFilterOrderBy {
-        /**
-         * Orders a specified array by the expression predicate. It is ordered alphabetically for strings and numerically for numbers. Note: if you notice numbers are not being sorted as expected, make sure they are actually being saved as numbers and not strings.
-         * @param array The array to sort.
-         * @param expression A predicate to be used by the comparator to determine the order of elements.
-         * @param reverse Reverse the order of the array.
-         * @return Reverse the order of the array.
-         */
-        <T>(array: T[], expression: string|((value: T) => any)|(((value: T) => any)|string)[], reverse?: boolean): T[];
-    }
-
-    /**
-     * $filterProvider - $filter - provider in module ng
-     *
-     * Filters are just functions which transform input to an output. However filters need to be Dependency Injected. To achieve this a filter definition consists of a factory function which is annotated with dependencies and is responsible for creating a filter function.
-     *
-     * see https://docs.angularjs.org/api/ng/provider/$filterProvider
-     */
-    interface IFilterProvider extends IServiceProvider {
-        /**
-         * register(name);
-         *
-         * @param name Name of the filter function, or an object map of filters where the keys are the filter names and the values are the filter factories. Note: Filter names must be valid angular Expressions identifiers, such as uppercase or orderBy. Names with special characters, such as hyphens and dots, are not allowed. If you wish to namespace your filters, then you can use capitalization (myappSubsectionFilterx) or underscores (myapp_subsection_filterx).
-         */
-        register(name: string | {}): IServiceProvider;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // LocaleService
-    // see http://docs.angularjs.org/api/ng.$locale
-    ///////////////////////////////////////////////////////////////////////////
-    interface ILocaleService {
-        id: string;
-
-        // These are not documented
-        // Check angular's i18n files for exemples
-        NUMBER_FORMATS: ILocaleNumberFormatDescriptor;
-        DATETIME_FORMATS: ILocaleDateTimeFormatDescriptor;
-        pluralCat: (num: any) => string;
-    }
-
-    interface ILocaleNumberFormatDescriptor {
-        DECIMAL_SEP: string;
-        GROUP_SEP: string;
-        PATTERNS: ILocaleNumberPatternDescriptor[];
-        CURRENCY_SYM: string;
-    }
-
-    interface ILocaleNumberPatternDescriptor {
-        minInt: number;
-        minFrac: number;
-        maxFrac: number;
-        posPre: string;
-        posSuf: string;
-        negPre: string;
-        negSuf: string;
-        gSize: number;
-        lgSize: number;
-    }
-
-    interface ILocaleDateTimeFormatDescriptor {
-        MONTH: string[];
-        SHORTMONTH: string[];
-        DAY: string[];
-        SHORTDAY: string[];
-        AMPMS: string[];
-        medium: string;
-        short: string;
-        fullDate: string;
-        longDate: string;
-        mediumDate: string;
-        shortDate: string;
-        mediumTime: string;
-        shortTime: string;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // LogService
-    // see http://docs.angularjs.org/api/ng.$log
-    // see http://docs.angularjs.org/api/ng.$logProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface ILogService {
-        debug: ILogCall;
-        error: ILogCall;
-        info: ILogCall;
-        log: ILogCall;
-        warn: ILogCall;
-    }
-
-    interface ILogProvider extends IServiceProvider {
-        debugEnabled(): boolean;
-        debugEnabled(enabled: boolean): ILogProvider;
-    }
-
-    // We define this as separate interface so we can reopen it later for
-    // the ngMock module.
-    interface ILogCall {
-        (...args: any[]): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // ParseService
-    // see http://docs.angularjs.org/api/ng.$parse
-    // see http://docs.angularjs.org/api/ng.$parseProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface IParseService {
-        (expression: string): ICompiledExpression;
-    }
-
-    interface IParseProvider {
-        logPromiseWarnings(): boolean;
-        logPromiseWarnings(value: boolean): IParseProvider;
-
-        unwrapPromises(): boolean;
-        unwrapPromises(value: boolean): IParseProvider;
-    }
-
-    interface ICompiledExpression {
-        (context: any, locals?: any): any;
-
-        literal: boolean;
-        constant: boolean;
-
-        // If value is not provided, undefined is gonna be used since the implementation
-        // does not check the parameter. Let's force a value for consistency. If consumer
-        // whants to undefine it, pass the undefined value explicitly.
-        assign(context: any, value: any): any;
-    }
-
-    /**
-     * $location - $locationProvider - service in module ng
-     * see https://docs.angularjs.org/api/ng/service/$location
-     */
-    interface ILocationService {
-        absUrl(): string;
-        hash(): string;
-        hash(newHash: string): ILocationService;
-        host(): string;
-
-        /**
-         * Return path of current url
-         */
-        path(): string;
-
-        /**
-         * Change path when called with parameter and return $location.
-         * Note: Path should always begin with forward slash (/), this method will add the forward slash if it is missing.
-         *
-         * @param path New path
-         */
-        path(path: string): ILocationService;
-
-        port(): number;
-        protocol(): string;
-        replace(): ILocationService;
-
-        /**
-         * Return search part (as object) of current url
-         */
-        search(): any;
-
-        /**
-         * Change search part when called with parameter and return $location.
-         *
-         * @param search When called with a single argument the method acts as a setter, setting the search component of $location to the specified value.
-         *
-         * If the argument is a hash object containing an array of values, these values will be encoded as duplicate search parameters in the url.
-         */
-        search(search: any): ILocationService;
-
-        /**
-         * Change search part when called with parameter and return $location.
-         *
-         * @param search New search params
-         * @param paramValue If search is a string or a Number, then paramValue will override only a single search property. If paramValue is null, the property specified via the first argument will be deleted. If paramValue is an array, it will override the property of the search component of $location specified via the first argument. If paramValue is true, the property specified via the first argument will be added with no value nor trailing equal sign.
-         */
-        search(search: string, paramValue: string|number|string[]|boolean): ILocationService;
-
-        state(): any;
-        state(state: any): ILocationService;
-        url(): string;
-        url(url: string): ILocationService;
-    }
-
-    interface ILocationProvider extends IServiceProvider {
-        hashPrefix(): string;
-        hashPrefix(prefix: string): ILocationProvider;
-        html5Mode(): boolean;
-
-        // Documentation states that parameter is string, but
-        // implementation tests it as boolean, which makes more sense
-        // since this is a toggler
-        html5Mode(active: boolean): ILocationProvider;
-        html5Mode(mode: { enabled?: boolean; requireBase?: boolean; rewriteLinks?: boolean; }): ILocationProvider;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // DocumentService
-    // see http://docs.angularjs.org/api/ng.$document
-    ///////////////////////////////////////////////////////////////////////////
-    interface IDocumentService extends IAugmentedJQuery {}
-
-    ///////////////////////////////////////////////////////////////////////////
-    // ExceptionHandlerService
-    // see http://docs.angularjs.org/api/ng.$exceptionHandler
-    ///////////////////////////////////////////////////////////////////////////
-    interface IExceptionHandlerService {
-        (exception: Error, cause?: string): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // RootElementService
-    // see http://docs.angularjs.org/api/ng.$rootElement
-    ///////////////////////////////////////////////////////////////////////////
-    interface IRootElementService extends JQuery {}
-
-    interface IQResolveReject<T> {
-        (): void;
-        (value: T): void;
-    }
-    /**
-     * $q - service in module ng
-     * A promise/deferred implementation inspired by Kris Kowal's Q.
-     * See http://docs.angularjs.org/api/ng/service/$q
-     */
-    interface IQService {
-        new <T>(resolver: (resolve: IQResolveReject<T>) => any): IPromise<T>;
-        new <T>(resolver: (resolve: IQResolveReject<T>, reject: IQResolveReject<any>) => any): IPromise<T>;
-        <T>(resolver: (resolve: IQResolveReject<T>) => any): IPromise<T>;
-        <T>(resolver: (resolve: IQResolveReject<T>, reject: IQResolveReject<any>) => any): IPromise<T>;
-
-        /**
-         * Combines multiple promises into a single promise that is resolved when all of the input promises are resolved.
-         *
-         * Returns a single promise that will be resolved with an array of values, each value corresponding to the promise at the same index in the promises array. If any of the promises is resolved with a rejection, this resulting promise will be rejected with the same rejection value.
-         *
-         * @param promises An array of promises.
-         */
-        all<T1, T2, T3, T4, T5, T6, T7, T8, T9, T10>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>, T4 | IPromise <T4>, T5 | IPromise<T5>, T6 | IPromise<T6>, T7 | IPromise<T7>, T8 | IPromise<T8>, T9 | IPromise<T9>, T10 | IPromise<T10>]): IPromise<[T1, T2, T3, T4, T5, T6, T7, T8, T9, T10]>;
-        all<T1, T2, T3, T4, T5, T6, T7, T8, T9>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>, T4 | IPromise <T4>, T5 | IPromise<T5>, T6 | IPromise<T6>, T7 | IPromise<T7>, T8 | IPromise<T8>, T9 | IPromise<T9>]): IPromise<[T1, T2, T3, T4, T5, T6, T7, T8, T9]>;
-        all<T1, T2, T3, T4, T5, T6, T7, T8>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>, T4 | IPromise <T4>, T5 | IPromise<T5>, T6 | IPromise<T6>, T7 | IPromise<T7>, T8 | IPromise<T8>]): IPromise<[T1, T2, T3, T4, T5, T6, T7, T8]>;
-        all<T1, T2, T3, T4, T5, T6, T7>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>, T4 | IPromise <T4>, T5 | IPromise<T5>, T6 | IPromise<T6>, T7 | IPromise<T7>]): IPromise<[T1, T2, T3, T4, T5, T6, T7]>;
-        all<T1, T2, T3, T4, T5, T6>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>, T4 | IPromise <T4>, T5 | IPromise<T5>, T6 | IPromise<T6>]): IPromise<[T1, T2, T3, T4, T5, T6]>;
-        all<T1, T2, T3, T4, T5>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>, T4 | IPromise <T4>, T5 | IPromise<T5>]): IPromise<[T1, T2, T3, T4, T5]>;
-        all<T1, T2, T3, T4>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>, T4 | IPromise <T4>]): IPromise<[T1, T2, T3, T4]>;
-        all<T1, T2, T3>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>, T3 | IPromise<T3>]): IPromise<[T1, T2, T3]>;
-        all<T1, T2>(values: [T1 | IPromise<T1>, T2 | IPromise<T2>]): IPromise<[T1, T2]>;
-        all<TAll>(promises: IPromise<TAll>[]): IPromise<TAll[]>;
-        /**
-         * Combines multiple promises into a single promise that is resolved when all of the input promises are resolved.
-         *
-         * Returns a single promise that will be resolved with a hash of values, each value corresponding to the promise at the same key in the promises hash. If any of the promises is resolved with a rejection, this resulting promise will be rejected with the same rejection value.
-         *
-         * @param promises A hash of promises.
-         */
-        all(promises: { [id: string]: IPromise<any>; }): IPromise<{ [id: string]: any; }>;
-        all<T extends {}>(promises: { [id: string]: IPromise<any>; }): IPromise<T>;
-        /**
-         * Creates a Deferred object which represents a task which will finish in the future.
-         */
-        defer<T>(): IDeferred<T>;
-        /**
-         * Creates a promise that is resolved as rejected with the specified reason. This api should be used to forward rejection in a chain of promises. If you are dealing with the last promise in a promise chain, you don't need to worry about it.
-         *
-         * When comparing deferreds/promises to the familiar behavior of try/catch/throw, think of reject as the throw keyword in JavaScript. This also means that if you "catch" an error via a promise error callback and you want to forward the error to the promise derived from the current promise, you have to "rethrow" the error by returning a rejection constructed via reject.
-         *
-         * @param reason Constant, message, exception or an object representing the rejection reason.
-         */
-        reject(reason?: any): IPromise<any>;
-        /**
-         * Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.
-         *
-         * @param value Value or a promise
-         */
-        resolve<T>(value: IPromise<T>|T): IPromise<T>;
-        /**
-         * Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.
-         */
-        resolve(): IPromise<void>;
-        /**
-         * Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.
-         *
-         * @param value Value or a promise
-         */
-        when<T>(value: IPromise<T>|T): IPromise<T>;
-        /**
-         * Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.
-         */
-        when(): IPromise<void>;
-    }
-
-    interface IPromise<T> {
-        /**
-         * Regardless of when the promise was or will be resolved or rejected, then calls one of the success or error callbacks asynchronously as soon as the result is available. The callbacks are called with a single argument: the result or rejection reason. Additionally, the notify callback may be called zero or more times to provide a progress indication, before the promise is resolved or rejected.
-         * The successCallBack may return IPromise<void> for when a $q.reject() needs to be returned
-         * This method returns a new promise which is resolved or rejected via the return value of the successCallback, errorCallback. It also notifies via the return value of the notifyCallback method. The promise can not be resolved or rejected from the notifyCallback method.
-         */
-        then<TResult>(successCallback: (promiseValue: T) => IPromise<TResult>|TResult, errorCallback?: (reason: any) => any, notifyCallback?: (state: any) => any): IPromise<TResult>;
-
-        /**
-         * Shorthand for promise.then(null, errorCallback)
-         */
-        catch<TResult>(onRejected: (reason: any) => IPromise<TResult>|TResult): IPromise<TResult>;
-
-        /**
-         * Allows you to observe either the fulfillment or rejection of a promise, but to do so without modifying the final value. This is useful to release resources or do some clean-up that needs to be done whether the promise was rejected or resolved. See the full specification for more information.
-         *
-         * Because finally is a reserved word in JavaScript and reserved keywords are not supported as property names by ES3, you'll need to invoke the method like promise['finally'](callback) to make your code IE8 and Android 2.x compatible.
-         */
-        finally(finallyCallback: () => any): IPromise<T>;
-    }
-
-    interface IDeferred<T> {
-        resolve(value?: T|IPromise<T>): void;
-        reject(reason?: any): void;
-        notify(state?: any): void;
-        promise: IPromise<T>;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // AnchorScrollService
-    // see http://docs.angularjs.org/api/ng.$anchorScroll
-    ///////////////////////////////////////////////////////////////////////////
-    interface IAnchorScrollService {
-        (): void;
-        (hash: string): void;
-        yOffset: any;
-    }
-
-    interface IAnchorScrollProvider extends IServiceProvider {
-        disableAutoScrolling(): void;
-    }
-
-    /**
-     * $cacheFactory - service in module ng
-     *
-     * Factory that constructs Cache objects and gives access to them.
-     *
-     * see https://docs.angularjs.org/api/ng/service/$cacheFactory
-     */
-    interface ICacheFactoryService {
-        /**
-         * Factory that constructs Cache objects and gives access to them.
-         *
-         * @param cacheId Name or id of the newly created cache.
-         * @param optionsMap Options object that specifies the cache behavior. Properties:
-         *
-         * capacity — turns the cache into LRU cache.
-         */
-        (cacheId: string, optionsMap?: { capacity?: number; }): ICacheObject;
-
-        /**
-         * Get information about all the caches that have been created.
-         * @returns key-value map of cacheId to the result of calling cache#info
-         */
-        info(): any;
-
-        /**
-         * Get access to a cache object by the cacheId used when it was created.
-         *
-         * @param cacheId Name or id of a cache to access.
-         */
-        get(cacheId: string): ICacheObject;
-    }
-
-    /**
-     * $cacheFactory.Cache - type in module ng
-     *
-     * A cache object used to store and retrieve data, primarily used by $http and the script directive to cache templates and other data.
-     *
-     * see https://docs.angularjs.org/api/ng/type/$cacheFactory.Cache
-     */
-    interface ICacheObject {
-        /**
-         * Retrieve information regarding a particular Cache.
-         */
-        info(): {
-            /**
-             * the id of the cache instance
-             */
-            id: string;
-
-            /**
-             * the number of entries kept in the cache instance
-             */
-            size: number;
-
-            //...: any additional properties from the options object when creating the cache.
-        };
-
-        /**
-         * Inserts a named entry into the Cache object to be retrieved later, and incrementing the size of the cache if the key was not already present in the cache. If behaving like an LRU cache, it will also remove stale entries from the set.
-         *
-         * It will not insert undefined values into the cache.
-         *
-         * @param key the key under which the cached data is stored.
-         * @param value the value to store alongside the key. If it is undefined, the key will not be stored.
-         */
-        put<T>(key: string, value?: T): T;
-
-        /**
-         * Retrieves named data stored in the Cache object.
-         *
-         * @param key the key of the data to be retrieved
-         */
-        get<T>(key: string): T;
-
-        /**
-         * Removes an entry from the Cache object.
-         *
-         * @param key the key of the entry to be removed
-         */
-        remove(key: string): void;
-
-        /**
-         * Clears the cache object of any entries.
-         */
-        removeAll(): void;
-
-        /**
-         * Destroys the Cache object entirely, removing it from the $cacheFactory set.
-         */
-        destroy(): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // CompileService
-    // see http://docs.angularjs.org/api/ng.$compile
-    // see http://docs.angularjs.org/api/ng.$compileProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface ICompileService {
-        (element: string, transclude?: ITranscludeFunction, maxPriority?: number): ITemplateLinkingFunction;
-        (element: Element, transclude?: ITranscludeFunction, maxPriority?: number): ITemplateLinkingFunction;
-        (element: JQuery, transclude?: ITranscludeFunction, maxPriority?: number): ITemplateLinkingFunction;
-    }
-
-    interface ICompileProvider extends IServiceProvider {
-        directive(name: string, directiveFactory: Function): ICompileProvider;
-        directive(directivesMap: Object, directiveFactory: Function): ICompileProvider;
-        directive(name: string, inlineAnnotatedFunction: any[]): ICompileProvider;
-        directive(directivesMap: Object, inlineAnnotatedFunction: any[]): ICompileProvider;
-
-        // Undocumented, but it is there...
-        directive(directivesMap: any): ICompileProvider;
-
-        component(name: string, options: IComponentOptions): ICompileProvider;
-
-        aHrefSanitizationWhitelist(): RegExp;
-        aHrefSanitizationWhitelist(regexp: RegExp): ICompileProvider;
-
-        imgSrcSanitizationWhitelist(): RegExp;
-        imgSrcSanitizationWhitelist(regexp: RegExp): ICompileProvider;
-
-        debugInfoEnabled(enabled?: boolean): any;
-    }
-
-    interface ICloneAttachFunction {
-        // Let's hint but not force cloneAttachFn's signature
-        (clonedElement?: JQuery, scope?: IScope): any;
-    }
-
-    // This corresponds to the "publicLinkFn" returned by $compile.
-    interface ITemplateLinkingFunction {
-        (scope: IScope, cloneAttachFn?: ICloneAttachFunction): IAugmentedJQuery;
-    }
-
-    // This corresponds to $transclude (and also the transclude function passed to link).
-    interface ITranscludeFunction {
-        // If the scope is provided, then the cloneAttachFn must be as well.
-        (scope: IScope, cloneAttachFn: ICloneAttachFunction): IAugmentedJQuery;
-        // If one argument is provided, then it's assumed to be the cloneAttachFn.
-        (cloneAttachFn?: ICloneAttachFunction): IAugmentedJQuery;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // ControllerService
-    // see http://docs.angularjs.org/api/ng.$controller
-    // see http://docs.angularjs.org/api/ng.$controllerProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface IControllerService {
-        // Although the documentation doesn't state this, locals are optional
-        <T>(controllerConstructor: new (...args: any[]) => T, locals?: any, later?: boolean, ident?: string): T;
-        <T>(controllerConstructor: Function, locals?: any, later?: boolean, ident?: string): T;
-        <T>(controllerName: string, locals?: any, later?: boolean, ident?: string): T;
-    }
-
-    interface IControllerProvider extends IServiceProvider {
-        register(name: string, controllerConstructor: Function): void;
-        register(name: string, dependencyAnnotatedConstructor: any[]): void;
-        allowGlobals(): void;
-    }
-
-    /**
-     * xhrFactory
-     * Replace or decorate this service to create your own custom XMLHttpRequest objects.
-     * see https://docs.angularjs.org/api/ng/service/$xhrFactory
-     */
-    interface IXhrFactory<T> {
-        (method: string, url: string): T;
-    }
-
-    /**
-     * HttpService
-     * see http://docs.angularjs.org/api/ng/service/$http
-     */
-    interface IHttpService {
-        /**
-         * Object describing the request to be made and how it should be processed.
-         */
-        <T>(config: IRequestConfig): IHttpPromise<T>;
-
-        /**
-         * Shortcut method to perform GET request.
-         *
-         * @param url Relative or absolute URL specifying the destination of the request
-         * @param config Optional configuration object
-         */
-        get<T>(url: string, config?: IRequestShortcutConfig): IHttpPromise<T>;
-
-        /**
-         * Shortcut method to perform DELETE request.
-         *
-         * @param url Relative or absolute URL specifying the destination of the request
-         * @param config Optional configuration object
-         */
-        delete<T>(url: string, config?: IRequestShortcutConfig): IHttpPromise<T>;
-
-        /**
-         * Shortcut method to perform HEAD request.
-         *
-         * @param url Relative or absolute URL specifying the destination of the request
-         * @param config Optional configuration object
-         */
-        head<T>(url: string, config?: IRequestShortcutConfig): IHttpPromise<T>;
-
-        /**
-         * Shortcut method to perform JSONP request.
-         *
-         * @param url Relative or absolute URL specifying the destination of the request
-         * @param config Optional configuration object
-         */
-        jsonp<T>(url: string, config?: IRequestShortcutConfig): IHttpPromise<T>;
-
-        /**
-         * Shortcut method to perform POST request.
-         *
-         * @param url Relative or absolute URL specifying the destination of the request
-         * @param data Request content
-         * @param config Optional configuration object
-         */
-        post<T>(url: string, data: any, config?: IRequestShortcutConfig): IHttpPromise<T>;
-
-        /**
-         * Shortcut method to perform PUT request.
-         *
-         * @param url Relative or absolute URL specifying the destination of the request
-         * @param data Request content
-         * @param config Optional configuration object
-         */
-        put<T>(url: string, data: any, config?: IRequestShortcutConfig): IHttpPromise<T>;
-
-        /**
-         * Shortcut method to perform PATCH request.
-         *
-         * @param url Relative or absolute URL specifying the destination of the request
-         * @param data Request content
-         * @param config Optional configuration object
-         */
-        patch<T>(url: string, data: any, config?: IRequestShortcutConfig): IHttpPromise<T>;
-
-        /**
-         * Runtime equivalent of the $httpProvider.defaults property. Allows configuration of default headers, withCredentials as well as request and response transformations.
-         */
-        defaults: IHttpProviderDefaults;
-
-        /**
-         * Array of config objects for currently pending requests. This is primarily meant to be used for debugging purposes.
-         */
-        pendingRequests: IRequestConfig[];
-    }
-
-    /**
-     * Object describing the request to be made and how it should be processed.
-     * see http://docs.angularjs.org/api/ng/service/$http#usage
-     */
-    interface IRequestShortcutConfig extends IHttpProviderDefaults {
-        /**
-         * {Object.<string|Object>}
-         * Map of strings or objects which will be turned to ?key1=value1&key2=value2 after the url. If the value is not a string, it will be JSONified.
-         */
-        params?: any;
-
-        /**
-         * {string|Object}
-         * Data to be sent as the request message data.
-         */
-        data?: any;
-
-        /**
-         * Timeout in milliseconds, or promise that should abort the request when resolved.
-         */
-        timeout?: number|IPromise<any>;
-
-        /**
-         * See [XMLHttpRequest.responseType]https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#xmlhttprequest-responsetype
-         */
-        responseType?: string;
-    }
-
-    /**
-     * Object describing the request to be made and how it should be processed.
-     * see http://docs.angularjs.org/api/ng/service/$http#usage
-     */
-    interface IRequestConfig extends IRequestShortcutConfig {
-        /**
-         * HTTP method (e.g. 'GET', 'POST', etc)
-         */
-        method: string;
-        /**
-         * Absolute or relative URL of the resource that is being requested.
-         */
-        url: string;
-    }
-
-    interface IHttpHeadersGetter {
-        (): { [name: string]: string; };
-        (headerName: string): string;
-    }
-
-    interface IHttpPromiseCallback<T> {
-        (data: T, status: number, headers: IHttpHeadersGetter, config: IRequestConfig): void;
-    }
-
-    interface IHttpPromiseCallbackArg<T> {
-        data?: T;
-        status?: number;
-        headers?: IHttpHeadersGetter;
-        config?: IRequestConfig;
-        statusText?: string;
-    }
-
-    interface IHttpPromise<T> extends IPromise<IHttpPromiseCallbackArg<T>> {
-        /**
-         * The $http legacy promise methods success and error have been deprecated. Use the standard then method instead.
-         * If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.
-         * @deprecated
-         */
-        success?(callback: IHttpPromiseCallback<T>): IHttpPromise<T>;
-        /**
-         * The $http legacy promise methods success and error have been deprecated. Use the standard then method instead.
-         * If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.
-         * @deprecated
-         */
-        error?(callback: IHttpPromiseCallback<any>): IHttpPromise<T>;
-    }
-
-    // See the jsdoc for transformData() at https://github.com/angular/angular.js/blob/master/src/ng/http.js#L228
-    interface IHttpRequestTransformer {
-        (data: any, headersGetter: IHttpHeadersGetter): any;
-    }
-
-    // The definition of fields are the same as IHttpPromiseCallbackArg
-    interface IHttpResponseTransformer {
-        (data: any, headersGetter: IHttpHeadersGetter, status: number): any;
-    }
-
-    type HttpHeaderType = {[requestType: string]:string|((config:IRequestConfig) => string)};
-
-    interface IHttpRequestConfigHeaders {
-        [requestType: string]: any;
-        common?: any;
-        get?: any;
-        post?: any;
-        put?: any;
-        patch?: any;
-    }
-
-    /**
-    * Object that controls the defaults for $http provider. Not all fields of IRequestShortcutConfig can be configured
-    * via defaults and the docs do not say which. The following is based on the inspection of the source code.
-    * https://docs.angularjs.org/api/ng/service/$http#defaults
-    * https://docs.angularjs.org/api/ng/service/$http#usage
-    * https://docs.angularjs.org/api/ng/provider/$httpProvider The properties section
-    */
-    interface IHttpProviderDefaults {
-        /**
-         * {boolean|Cache}
-         * If true, a default $http cache will be used to cache the GET request, otherwise if a cache instance built with $cacheFactory, this cache will be used for caching.
-         */
-        cache?: any;
-
-        /**
-         * Transform function or an array of such functions. The transform function takes the http request body and
-         * headers and returns its transformed (typically serialized) version.
-         * @see {@link https://docs.angularjs.org/api/ng/service/$http#transforming-requests-and-responses}
-         */
-        transformRequest?: IHttpRequestTransformer |IHttpRequestTransformer[];
-
-        /**
-         * Transform function or an array of such functions. The transform function takes the http response body and
-         * headers and returns its transformed (typically deserialized) version.
-         */
-        transformResponse?: IHttpResponseTransformer | IHttpResponseTransformer[];
-
-        /**
-         * Map of strings or functions which return strings representing HTTP headers to send to the server. If the
-         * return value of a function is null, the header will not be sent.
-         * The key of the map is the request verb in lower case. The "common" key applies to all requests.
-         * @see {@link https://docs.angularjs.org/api/ng/service/$http#setting-http-headers}
-         */
-        headers?: IHttpRequestConfigHeaders;
-
-        /** Name of HTTP header to populate with the XSRF token. */
-        xsrfHeaderName?: string;
-
-        /** Name of cookie containing the XSRF token. */
-        xsrfCookieName?: string;
-
-        /**
-         * whether to to set the withCredentials flag on the XHR object. See [requests with credentials]https://developer.mozilla.org/en/http_access_control#section_5 for more information.
-         */
-        withCredentials?: boolean;
-
-        /**
-        * A function used to the prepare string representation of request parameters (specified as an object). If
-        * specified as string, it is interpreted as a function registered with the $injector. Defaults to
-        * $httpParamSerializer.
-        */
-        paramSerializer?: string | ((obj: any) => string);
-    }
-
-    interface IHttpInterceptor {
-        request?: (config: IRequestConfig) => IRequestConfig|IPromise<IRequestConfig>;
-        requestError?: (rejection: any) => any;
-        response?: <T>(response: IHttpPromiseCallbackArg<T>) => IPromise<IHttpPromiseCallbackArg<T>>|IHttpPromiseCallbackArg<T>;
-        responseError?: (rejection: any) => any;
-    }
-
-    interface IHttpInterceptorFactory {
-        (...args: any[]): IHttpInterceptor;
-    }
-
-    interface IHttpProvider extends IServiceProvider {
-        defaults: IHttpProviderDefaults;
-
-        /**
-         * Register service factories (names or implementations) for interceptors which are called before and after
-         * each request.
-         */
-        interceptors: (string|IHttpInterceptorFactory|(string|IHttpInterceptorFactory)[])[];
-        useApplyAsync(): boolean;
-        useApplyAsync(value: boolean): IHttpProvider;
-
-        /**
-         *
-         * @param {boolean=} value If true, `$http` will return a normal promise without the `success` and `error` methods.
-         * @returns {boolean|Object} If a value is specified, returns the $httpProvider for chaining.
-         *    otherwise, returns the current configured value.
-         */
-        useLegacyPromiseExtensions(value:boolean) : boolean | IHttpProvider;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // HttpBackendService
-    // see http://docs.angularjs.org/api/ng.$httpBackend
-    // You should never need to use this service directly.
-    ///////////////////////////////////////////////////////////////////////////
-    interface IHttpBackendService {
-        // XXX Perhaps define callback signature in the future
-        (method: string, url: string, post?: any, callback?: Function, headers?: any, timeout?: number, withCredentials?: boolean): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // InterpolateService
-    // see http://docs.angularjs.org/api/ng.$interpolate
-    // see http://docs.angularjs.org/api/ng.$interpolateProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface IInterpolateService {
-        (text: string, mustHaveExpression?: boolean, trustedContext?: string, allOrNothing?: boolean): IInterpolationFunction;
-        endSymbol(): string;
-        startSymbol(): string;
-    }
-
-    interface IInterpolationFunction {
-        (context: any): string;
-    }
-
-    interface IInterpolateProvider extends IServiceProvider {
-        startSymbol(): string;
-        startSymbol(value: string): IInterpolateProvider;
-        endSymbol(): string;
-        endSymbol(value: string): IInterpolateProvider;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // TemplateCacheService
-    // see http://docs.angularjs.org/api/ng.$templateCache
-    ///////////////////////////////////////////////////////////////////////////
-    interface ITemplateCacheService extends ICacheObject {}
-
-    ///////////////////////////////////////////////////////////////////////////
-    // SCEService
-    // see http://docs.angularjs.org/api/ng.$sce
-    ///////////////////////////////////////////////////////////////////////////
-    interface ISCEService {
-        getTrusted(type: string, mayBeTrusted: any): any;
-        getTrustedCss(value: any): any;
-        getTrustedHtml(value: any): any;
-        getTrustedJs(value: any): any;
-        getTrustedResourceUrl(value: any): any;
-        getTrustedUrl(value: any): any;
-        parse(type: string, expression: string): (context: any, locals: any) => any;
-        parseAsCss(expression: string): (context: any, locals: any) => any;
-        parseAsHtml(expression: string): (context: any, locals: any) => any;
-        parseAsJs(expression: string): (context: any, locals: any) => any;
-        parseAsResourceUrl(expression: string): (context: any, locals: any) => any;
-        parseAsUrl(expression: string): (context: any, locals: any) => any;
-        trustAs(type: string, value: any): any;
-        trustAsHtml(value: any): any;
-        trustAsJs(value: any): any;
-        trustAsResourceUrl(value: any): any;
-        trustAsUrl(value: any): any;
-        isEnabled(): boolean;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // SCEProvider
-    // see http://docs.angularjs.org/api/ng.$sceProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface ISCEProvider extends IServiceProvider {
-        enabled(value: boolean): void;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // SCEDelegateService
-    // see http://docs.angularjs.org/api/ng.$sceDelegate
-    ///////////////////////////////////////////////////////////////////////////
-    interface ISCEDelegateService {
-        getTrusted(type: string, mayBeTrusted: any): any;
-        trustAs(type: string, value: any): any;
-        valueOf(value: any): any;
-    }
-
-
-    ///////////////////////////////////////////////////////////////////////////
-    // SCEDelegateProvider
-    // see http://docs.angularjs.org/api/ng.$sceDelegateProvider
-    ///////////////////////////////////////////////////////////////////////////
-    interface ISCEDelegateProvider extends IServiceProvider {
-        resourceUrlBlacklist(blacklist: any[]): void;
-        resourceUrlWhitelist(whitelist: any[]): void;
-        resourceUrlBlacklist(): any[];
-        resourceUrlWhitelist(): any[];
-    }
-
-    /**
-     * $templateRequest service
-     * see http://docs.angularjs.org/api/ng/service/$templateRequest
-     */
-    interface ITemplateRequestService {
-        /**
-         * Downloads a template using $http and, upon success, stores the
-         * contents inside of $templateCache.
-         *
-         * If the HTTP request fails or the response data of the HTTP request is
-         * empty then a $compile error will be thrown (unless
-         * {ignoreRequestError} is set to true).
-         *
-         * @param tpl                  The template URL.
-         * @param ignoreRequestError   Whether or not to ignore the exception
-         *                             when the request fails or the template is
-         *                             empty.
-         *
-         * @return   A promise whose value is the template content.
-         */
-        (tpl: string, ignoreRequestError?: boolean): IPromise<string>;
-        /**
-         * total amount of pending template requests being downloaded.
-         * @type {number}
-         */
-        totalPendingRequests: number;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // Component
-    // see http://angularjs.blogspot.com.br/2015/11/angularjs-15-beta2-and-14-releases.html
-    // and http://toddmotto.com/exploring-the-angular-1-5-component-method/
-    ///////////////////////////////////////////////////////////////////////////
-    /**
-     * Runtime representation a type that a Component or other object is instances of.
-     *
-     * An example of a `Type` is `MyCustomComponent` class, which in JavaScript is be represented by
-     * the `MyCustomComponent` constructor function.
-     */
-    interface Type extends Function {
-    }
-
-    /**
-     * `RouteDefinition` defines a route within a {@link RouteConfig} decorator.
-     *
-     * Supported keys:
-     * - `path` or `aux` (requires exactly one of these)
-     * - `component`, `loader`,  `redirectTo` (requires exactly one of these)
-     * - `name` or `as` (optional) (requires exactly one of these)
-     * - `data` (optional)
-     *
-     * See also {@link Route}, {@link AsyncRoute}, {@link AuxRoute}, and {@link Redirect}.
-     */
-    interface RouteDefinition {
-        path?: string;
-        aux?: string;
-        component?: Type | ComponentDefinition | string;
-        loader?: Function;
-        redirectTo?: any[];
-        as?: string;
-        name?: string;
-        data?: any;
-        useAsDefault?: boolean;
-    }
-
-    /**
-     * Represents either a component type (`type` is `component`) or a loader function
-     * (`type` is `loader`).
-     *
-     * See also {@link RouteDefinition}.
-     */
-    interface ComponentDefinition {
-        type: string;
-        loader?: Function;
-        component?: Type;
-    }
-
-    /**
-     * Component definition object (a simplified directive definition object)
-     */
-    interface IComponentOptions {
-        /**
-         * Controller constructor function that should be associated with newly created scope or the name of a registered
-         * controller if passed as a string. Empty function by default.
-         * Use the array form to define dependencies (necessary if strictDi is enabled and you require dependency injection)
-         */
-        controller?: string | Function | (string | Function)[];
-        /**
-         * An identifier name for a reference to the controller. If present, the controller will be published to scope under
-         * the controllerAs name. If not present, this will default to be the same as the component name.
-         * @default "$ctrl"
-         */
-        controllerAs?: string;
-        /**
-         * html template as a string or a function that returns an html template as a string which should be used as the
-         * contents of this component. Empty string by default.
-         * If template is a function, then it is injected with the following locals:
-         * $element - Current element
-         * $attrs - Current attributes object for the element
-         * Use the array form to define dependencies (necessary if strictDi is enabled and you require dependency injection)
-         */
-        template?: string | Function | (string | Function)[];
-        /**
-         * path or function that returns a path to an html template that should be used as the contents of this component.
-         * If templateUrl is a function, then it is injected with the following locals:
-         * $element - Current element
-         * $attrs - Current attributes object for the element
-         * Use the array form to define dependencies (necessary if strictDi is enabled and you require dependency injection)
-         */
-        templateUrl?: string | Function | (string | Function)[];
-        /**
-         * Define DOM attribute binding to component properties. Component properties are always bound to the component
-         * controller and not to the scope.
-         */
-        bindings?: {[binding: string]: string};
-        /**
-         * Whether transclusion is enabled. Enabled by default.
-         */
-        transclude?: boolean | string | {[slot: string]: string};
-        require?: string | string[] | {[controller: string]: string};
-    }
-
-    interface IComponentTemplateFn {
-        ( $element?: IAugmentedJQuery, $attrs?: IAttributes ): string;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // Directive
-    // see http://docs.angularjs.org/api/ng.$compileProvider#directive
-    // and http://docs.angularjs.org/guide/directive
-    ///////////////////////////////////////////////////////////////////////////
-
-    interface IDirectiveFactory {
-        (...args: any[]): IDirective;
-    }
-
-    interface IDirectiveLinkFn {
-        (
-            scope: IScope,
-            instanceElement: IAugmentedJQuery,
-            instanceAttributes: IAttributes,
-            controller: {},
-            transclude: ITranscludeFunction
-        ): void;
-    }
-
-    interface IDirectivePrePost {
-        pre?: IDirectiveLinkFn;
-        post?: IDirectiveLinkFn;
-    }
-
-    interface IDirectiveCompileFn {
-        (
-            templateElement: IAugmentedJQuery,
-            templateAttributes: IAttributes,
-            /**
-             * @deprecated
-             * Note: The transclude function that is passed to the compile function is deprecated,
-             * as it e.g. does not know about the right outer scope. Please use the transclude function
-             * that is passed to the link function instead.
-             */
-            transclude: ITranscludeFunction
-        ): IDirectivePrePost;
-    }
-
-    interface IDirective {
-        compile?: IDirectiveCompileFn;
-        controller?: any;
-        controllerAs?: string;
-        /**
-         * @deprecated
-         * Deprecation warning: although bindings for non-ES6 class controllers are currently bound to this before
-         * the controller constructor is called, this use is now deprecated. Please place initialization code that
-         * relies upon bindings inside a $onInit method on the controller, instead.
-         */
-        bindToController?: boolean | Object;
-        link?: IDirectiveLinkFn | IDirectivePrePost;
-        multiElement?: boolean;
-        name?: string;
-        priority?: number;
-        /**
-         * @deprecated
-         */
-        replace?: boolean;
-        require?: string | string[] | {[controller: string]: string};
-        restrict?: string;
-        scope?: boolean | Object;
-        template?: string | Function;
-        templateNamespace?: string;
-        templateUrl?: string | Function;
-        terminal?: boolean;
-        transclude?: boolean | string | {[slot: string]: string};
-    }
-
-    /**
-     * angular.element
-     * when calling angular.element, angular returns a jQuery object,
-     * augmented with additional methods like e.g. scope.
-     * see: http://docs.angularjs.org/api/angular.element
-     */
-    interface IAugmentedJQueryStatic extends JQueryStatic {
-        (selector: string, context?: any): IAugmentedJQuery;
-        (element: Element): IAugmentedJQuery;
-        (object: {}): IAugmentedJQuery;
-        (elementArray: Element[]): IAugmentedJQuery;
-        (object: JQuery): IAugmentedJQuery;
-        (func: Function): IAugmentedJQuery;
-        (array: any[]): IAugmentedJQuery;
-        (): IAugmentedJQuery;
-    }
-
-    interface IAugmentedJQuery extends JQuery {
-        // TODO: events, how to define?
-        //$destroy
-
-        find(selector: string): IAugmentedJQuery;
-        find(element: any): IAugmentedJQuery;
-        find(obj: JQuery): IAugmentedJQuery;
-        controller(): any;
-        controller(name: string): any;
-        injector(): any;
-        scope(): IScope;
-
-        /**
-        *   Overload for custom scope interfaces
-        */
-        scope<T extends IScope>(): T;
-        isolateScope(): IScope;
-
-        inheritedData(key: string, value: any): JQuery;
-        inheritedData(obj: { [key: string]: any; }): JQuery;
-        inheritedData(key?: string): any;
-    }
-
-    ///////////////////////////////////////////////////////////////////////////
-    // AUTO module (angular.js)
-    ///////////////////////////////////////////////////////////////////////////
-    export module auto {
-
-        ///////////////////////////////////////////////////////////////////////
-        // InjectorService
-        // see http://docs.angularjs.org/api/AUTO.$injector
-        ///////////////////////////////////////////////////////////////////////
-        interface IInjectorService {
-            annotate(fn: Function, strictDi?: boolean): string[];
-            annotate(inlineAnnotatedFunction: any[]): string[];
-            get<T>(name: string, caller?: string): T;
-            get(name: '$anchorScroll'): IAnchorScrollService
-            get(name: '$cacheFactory'): ICacheFactoryService
-            get(name: '$compile'): ICompileService
-            get(name: '$controller'): IControllerService
-            get(name: '$document'): IDocumentService
-            get(name: '$exceptionHandler'): IExceptionHandlerService
-            get(name: '$filter'): IFilterService
-            get(name: '$http'): IHttpService
-            get(name: '$httpBackend'): IHttpBackendService
-            get(name: '$httpParamSerializer'): IHttpParamSerializer
-            get(name: '$httpParamSerializerJQLike'): IHttpParamSerializer
-            get(name: '$interpolate'): IInterpolateService
-            get(name: '$interval'): IIntervalService
-            get(name: '$locale'): ILocaleService
-            get(name: '$location'): ILocationService
-            get(name: '$log'): ILogService
-            get(name: '$parse'): IParseService
-            get(name: '$q'): IQService
-            get(name: '$rootElement'): IRootElementService
-            get(name: '$rootScope'): IRootScopeService
-            get(name: '$sce'): ISCEService
-            get(name: '$sceDelegate'): ISCEDelegateService
-            get(name: '$templateCache'): ITemplateCacheService
-            get(name: '$templateRequest'): ITemplateRequestService
-            get(name: '$timeout'): ITimeoutService
-            get(name: '$window'): IWindowService
-            get<T>(name: '$xhrFactory'): IXhrFactory<T>
-            has(name: string): boolean;
-            instantiate<T>(typeConstructor: Function, locals?: any): T;
-            invoke(inlineAnnotatedFunction: any[]): any;
-            invoke(func: Function, context?: any, locals?: any): any;
-            strictDi: boolean;
-        }
-
-        ///////////////////////////////////////////////////////////////////////
-        // ProvideService
-        // see http://docs.angularjs.org/api/AUTO.$provide
-        ///////////////////////////////////////////////////////////////////////
-        interface IProvideService {
-            // Documentation says it returns the registered instance, but actual
-            // implementation does not return anything.
-            // constant(name: string, value: any): any;
-            /**
-             * Register a constant service, such as a string, a number, an array, an object or a function, with the $injector. Unlike value it can be injected into a module configuration function (see config) and it cannot be overridden by an Angular decorator.
-             *
-             * @param name The name of the constant.
-             * @param value The constant value.
-             */
-            constant(name: string, value: any): void;
-
-            /**
-             * Register a service decorator with the $injector. A service decorator intercepts the creation of a service, allowing it to override or modify the behaviour of the service. The object returned by the decorator may be the original service, or a new service object which replaces or wraps and delegates to the original service.
-             *
-             * @param name The name of the service to decorate.
-             * @param decorator This function will be invoked when the service needs to be instantiated and should return the decorated service instance. The function is called using the injector.invoke method and is therefore fully injectable. Local injection arguments:
-             *
-             * $delegate - The original service instance, which can be monkey patched, configured, decorated or delegated to.
-             */
-            decorator(name: string, decorator: Function): void;
-            /**
-             * Register a service decorator with the $injector. A service decorator intercepts the creation of a service, allowing it to override or modify the behaviour of the service. The object returned by the decorator may be the original service, or a new service object which replaces or wraps and delegates to the original service.
-             *
-             * @param name The name of the service to decorate.
-             * @param inlineAnnotatedFunction This function will be invoked when the service needs to be instantiated and should return the decorated service instance. The function is called using the injector.invoke method and is therefore fully injectable. Local injection arguments:
-             *
-             * $delegate - The original service instance, which can be monkey patched, configured, decorated or delegated to.
-             */
-            decorator(name: string, inlineAnnotatedFunction: any[]): void;
-            factory(name: string, serviceFactoryFunction: Function): IServiceProvider;
-            factory(name: string, inlineAnnotatedFunction: any[]): IServiceProvider;
-            provider(name: string, provider: IServiceProvider): IServiceProvider;
-            provider(name: string, serviceProviderConstructor: Function): IServiceProvider;
-            service(name: string, constructor: Function): IServiceProvider;
-            service(name: string, inlineAnnotatedFunction: any[]): IServiceProvider;
-            value(name: string, value: any): IServiceProvider;
-        }
-
-    }
-
-    /**
-     * $http params serializer that converts objects to strings
-     * see https://docs.angularjs.org/api/ng/service/$httpParamSerializer
-     */
-    interface IHttpParamSerializer {
-        (obj: Object): string;
-    }
-}
\ No newline at end of file
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular/typings.json b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular/typings.json
deleted file mode 100644
index c974311fa7..0000000000
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/angular/typings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "resolution": "main",
-  "tree": {
-    "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/b76dd8a7f95b71696982befbb7589940d27e940b/angularjs/angular.d.ts",
-    "raw": "registry:dt/angular#1.5.0+20160517064839",
-    "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/b76dd8a7f95b71696982befbb7589940d27e940b/angularjs/angular.d.ts"
-  }
-}
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/jquery/index.d.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/jquery/index.d.ts
deleted file mode 100644
index b4208b3b82..0000000000
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/jquery/index.d.ts
+++ /dev/null
@@ -1,3199 +0,0 @@
-// Generated by typings
-// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/4cdfbe96b666eec5e1defbb519a62abf04e96764/jquery/jquery.d.ts
-interface JQueryAjaxSettings {
-    /**
-     * The content type sent in the request header that tells the server what kind of response it will accept in return. If the accepts setting needs modification, it is recommended to do so once in the $.ajaxSetup() method.
-     */
-    accepts?: any;
-    /**
-     * By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().
-     */
-    async?: boolean;
-    /**
-     * A pre-request callback function that can be used to modify the jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object before it is sent. Use this to set custom headers, etc. The jqXHR and settings objects are passed as arguments. This is an Ajax Event. Returning false in the beforeSend function will cancel the request. As of jQuery 1.5, the beforeSend option will be called regardless of the type of request.
-     */
-    beforeSend? (jqXHR: JQueryXHR, settings: JQueryAjaxSettings): any;
-    /**
-     * If set to false, it will force requested pages not to be cached by the browser. Note: Setting cache to false will only work correctly with HEAD and GET requests. It works by appending "_={timestamp}" to the GET parameters. The parameter is not needed for other types of requests, except in IE8 when a POST is made to a URL that has already been requested by a GET.
-     */
-    cache?: boolean;
-    /**
-     * A function to be called when the request finishes (after success and error callbacks are executed). The function gets passed two arguments: The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string categorizing the status of the request ("success", "notmodified", "error", "timeout", "abort", or "parsererror"). As of jQuery 1.5, the complete setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.
-     */
-    complete? (jqXHR: JQueryXHR, textStatus: string): any;
-    /**
-     * An object of string/regular-expression pairs that determine how jQuery will parse the response, given its content type. (version added: 1.5)
-     */
-    contents?: { [key: string]: any; };
-    //According to jQuery.ajax source code, ajax's option actually allows contentType to set to "false"
-    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/742
-    /**
-     * When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding.
-     */
-    contentType?: any;
-    /**
-     * This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax).
-     */
-    context?: any;
-    /**
-     * An object containing dataType-to-dataType converters. Each converter's value is a function that returns the transformed value of the response. (version added: 1.5)
-     */
-    converters?: { [key: string]: any; };
-    /**
-     * If you wish to force a crossDomain request (such as JSONP) on the same domain, set the value of crossDomain to true. This allows, for example, server-side redirection to another domain. (version added: 1.5)
-     */
-    crossDomain?: boolean;
-    /**
-     * Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).
-     */
-    data?: any;
-    /**
-     * A function to be used to handle the raw response data of XMLHttpRequest.This is a pre-filtering function to sanitize the response. You should return the sanitized data. The function accepts two arguments: The raw data returned from the server and the 'dataType' parameter.
-     */
-    dataFilter? (data: any, ty: any): any;
-    /**
-     * The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string). 
-     */
-    dataType?: string;
-    /**
-     * A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "abort", and "parsererror". When an HTTP error occurs, errorThrown receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." As of jQuery 1.5, the error setting can accept an array of functions. Each function will be called in turn. Note: This handler is not called for cross-domain script and cross-domain JSONP requests. This is an Ajax Event.
-     */
-    error? (jqXHR: JQueryXHR, textStatus: string, errorThrown: string): any;
-    /**
-     * Whether to trigger global Ajax event handlers for this request. The default is true. Set to false to prevent the global handlers like ajaxStart or ajaxStop from being triggered. This can be used to control various Ajax Events.
-     */
-    global?: boolean;
-    /**
-     * An object of additional header key/value pairs to send along with requests using the XMLHttpRequest transport. The header X-Requested-With: XMLHttpRequest is always added, but its default XMLHttpRequest value can be changed here. Values in the headers setting can also be overwritten from within the beforeSend function. (version added: 1.5)
-     */
-    headers?: { [key: string]: any; };
-    /**
-     * Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header. In jQuery 1.4 this technique also checks the 'etag' specified by the server to catch unmodified data.
-     */
-    ifModified?: boolean;
-    /**
-     * Allow the current environment to be recognized as "local," (e.g. the filesystem), even if jQuery does not recognize it as such by default. The following protocols are currently recognized as local: file, *-extension, and widget. If the isLocal setting needs modification, it is recommended to do so once in the $.ajaxSetup() method. (version added: 1.5.1)
-     */
-    isLocal?: boolean;
-    /**
-     * Override the callback function name in a jsonp request. This value will be used instead of 'callback' in the 'callback=?' part of the query string in the url. So {jsonp:'onJSONPLoad'} would result in 'onJSONPLoad=?' passed to the server. As of jQuery 1.5, setting the jsonp option to false prevents jQuery from adding the "?callback" string to the URL or attempting to use "=?" for transformation. In this case, you should also explicitly set the jsonpCallback setting. For example, { jsonp: false, jsonpCallback: "callbackName" }
-     */
-    jsonp?: any;
-    /**
-     * Specify the callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests. As of jQuery 1.5, you can also use a function for this setting, in which case the value of jsonpCallback is set to the return value of that function.
-     */
-    jsonpCallback?: any;
-    /**
-     * The HTTP method to use for the request (e.g. "POST", "GET", "PUT"). (version added: 1.9.0)
-     */
-    method?: string;
-    /**
-     * A mime type to override the XHR mime type. (version added: 1.5.1)
-     */
-    mimeType?: string;
-    /**
-     * A password to be used with XMLHttpRequest in response to an HTTP access authentication request.
-     */
-    password?: string;
-    /**
-     * By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.
-     */
-    processData?: boolean;
-    /**
-     * Only applies when the "script" transport is used (e.g., cross-domain requests with "jsonp" or "script" dataType and "GET" type). Sets the charset attribute on the script tag used in the request. Used when the character set on the local page is not the same as the one on the remote script.
-     */
-    scriptCharset?: string;
-    /**
-     * An object of numeric HTTP codes and functions to be called when the response has the corresponding code. f the request is successful, the status code functions take the same parameters as the success callback; if it results in an error (including 3xx redirect), they take the same parameters as the error callback. (version added: 1.5)
-     */
-    statusCode?: { [key: string]: any; };
-    /**
-     * A function to be called if the request succeeds. The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object. As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn. This is an Ajax Event.
-     */
-    success? (data: any, textStatus: string, jqXHR: JQueryXHR): any;
-    /**
-     * Set a timeout (in milliseconds) for the request. This will override any global timeout set with $.ajaxSetup(). The timeout period starts at the point the $.ajax call is made; if several other requests are in progress and the browser has no connections available, it is possible for a request to time out before it can be sent. In jQuery 1.4.x and below, the XMLHttpRequest object will be in an invalid state if the request times out; accessing any object members may throw an exception. In Firefox 3.0+ only, script and JSONP requests cannot be cancelled by a timeout; the script will run even if it arrives after the timeout period.
-     */
-    timeout?: number;
-    /**
-     * Set this to true if you wish to use the traditional style of param serialization.
-     */
-    traditional?: boolean;
-    /**
-     * The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.
-     */
-    type?: string;
-    /**
-     * A string containing the URL to which the request is sent.
-     */
-    url?: string;
-    /**
-     * A username to be used with XMLHttpRequest in response to an HTTP access authentication request.
-     */
-    username?: string;
-    /**
-     * Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise. Override to provide your own implementation for XMLHttpRequest or enhancements to the factory.
-     */
-    xhr?: any;
-    /**
-     * An object of fieldName-fieldValue pairs to set on the native XHR object. For example, you can use it to set withCredentials to true for cross-domain requests if needed. In jQuery 1.5, the withCredentials property was not propagated to the native XHR and thus CORS requests requiring it would ignore this flag. For this reason, we recommend using jQuery 1.5.1+ should you require the use of it. (version added: 1.5.1)
-     */
-    xhrFields?: { [key: string]: any; };
-}
-
-/**
- * Interface for the jqXHR object
- */
-interface JQueryXHR extends XMLHttpRequest, JQueryPromise<any> {
-    /**
-     * The .overrideMimeType() method may be used in the beforeSend() callback function, for example, to modify the response content-type header. As of jQuery 1.5.1, the jqXHR object also contains the overrideMimeType() method (it was available in jQuery 1.4.x, as well, but was temporarily removed in jQuery 1.5). 
-     */
-    overrideMimeType(mimeType: string): any;
-    /**
-     * Cancel the request. 
-     *
-     * @param statusText A string passed as the textStatus parameter for the done callback. Default value: "canceled"
-     */
-    abort(statusText?: string): void;
-    /**
-     * Incorporates the functionality of the .done() and .fail() methods, allowing (as of jQuery 1.8) the underlying Promise to be manipulated. Refer to deferred.then() for implementation details.
-     */
-    then<R>(doneCallback: (data: any, textStatus: string, jqXHR: JQueryXHR) => R, failCallback?: (jqXHR: JQueryXHR, textStatus: string, errorThrown: any) => void): JQueryPromise<R>;
-    /**
-     * Property containing the parsed response if the response Content-Type is json
-     */
-    responseJSON?: any;
-    /**
-     * A function to be called if the request fails.
-     */
-    error(xhr: JQueryXHR, textStatus: string, errorThrown: string): void;
-}
-
-/**
- * Interface for the JQuery callback
- */
-interface JQueryCallback {
-    /**
-     * Add a callback or a collection of callbacks to a callback list.
-     * 
-     * @param callbacks A function, or array of functions, that are to be added to the callback list.
-     */
-    add(callbacks: Function): JQueryCallback;
-    /**
-     * Add a callback or a collection of callbacks to a callback list.
-     * 
-     * @param callbacks A function, or array of functions, that are to be added to the callback list.
-     */
-    add(callbacks: Function[]): JQueryCallback;
-
-    /**
-     * Disable a callback list from doing anything more.
-     */
-    disable(): JQueryCallback;
-
-    /**
-     * Determine if the callbacks list has been disabled.
-     */
-    disabled(): boolean;
-
-    /**
-     * Remove all of the callbacks from a list.
-     */
-    empty(): JQueryCallback;
-
-    /**
-     * Call all of the callbacks with the given arguments
-     * 
-     * @param arguments The argument or list of arguments to pass back to the callback list.
-     */
-    fire(...arguments: any[]): JQueryCallback;
-
-    /**
-     * Determine if the callbacks have already been called at least once.
-     */
-    fired(): boolean;
-
-    /**
-     * Call all callbacks in a list with the given context and arguments.
-     * 
-     * @param context A reference to the context in which the callbacks in the list should be fired.
-     * @param arguments An argument, or array of arguments, to pass to the callbacks in the list.
-     */
-    fireWith(context?: any, args?: any[]): JQueryCallback;
-
-    /**
-     * Determine whether a supplied callback is in a list
-     * 
-     * @param callback The callback to search for.
-     */
-    has(callback: Function): boolean;
-
-    /**
-     * Lock a callback list in its current state.
-     */
-    lock(): JQueryCallback;
-
-    /**
-     * Determine if the callbacks list has been locked.
-     */
-    locked(): boolean;
-
-    /**
-     * Remove a callback or a collection of callbacks from a callback list.
-     * 
-     * @param callbacks A function, or array of functions, that are to be removed from the callback list.
-     */
-    remove(callbacks: Function): JQueryCallback;
-    /**
-     * Remove a callback or a collection of callbacks from a callback list.
-     * 
-     * @param callbacks A function, or array of functions, that are to be removed from the callback list.
-     */
-    remove(callbacks: Function[]): JQueryCallback;
-}
-
-/**
- * Allows jQuery Promises to interop with non-jQuery promises
- */
-interface JQueryGenericPromise<T> {
-    /**
-     * Add handlers to be called when the Deferred object is resolved, rejected, or still in progress.
-     * 
-     * @param doneFilter A function that is called when the Deferred is resolved.
-     * @param failFilter An optional function that is called when the Deferred is rejected.
-     */
-    then<U>(doneFilter: (value?: T, ...values: any[]) => U|JQueryPromise<U>, failFilter?: (...reasons: any[]) => any, progressFilter?: (...progression: any[]) => any): JQueryPromise<U>;
-
-    /**
-     * Add handlers to be called when the Deferred object is resolved, rejected, or still in progress.
-     * 
-     * @param doneFilter A function that is called when the Deferred is resolved.
-     * @param failFilter An optional function that is called when the Deferred is rejected.
-     */
-    then(doneFilter: (value?: T, ...values: any[]) => void, failFilter?: (...reasons: any[]) => any, progressFilter?: (...progression: any[]) => any): JQueryPromise<void>;
-}
-
-/**
- * Interface for the JQuery promise/deferred callbacks
- */
-interface JQueryPromiseCallback<T> {
-    (value?: T, ...args: any[]): void;
-}
-
-interface JQueryPromiseOperator<T, U> {
-    (callback1: JQueryPromiseCallback<T>|JQueryPromiseCallback<T>[], ...callbacksN: Array<JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[]>): JQueryPromise<U>;
-}
-
-/**
- * Interface for the JQuery promise, part of callbacks
- */
-interface JQueryPromise<T> extends JQueryGenericPromise<T> {
-    /**
-     * Determine the current state of a Deferred object.
-     */
-    state(): string;
-    /**
-     * Add handlers to be called when the Deferred object is either resolved or rejected.
-     * 
-     * @param alwaysCallbacks1 A function, or array of functions, that is called when the Deferred is resolved or rejected.
-     * @param alwaysCallbacks2 Optional additional functions, or arrays of functions, that are called when the Deferred is resolved or rejected.
-     */
-    always(alwaysCallback1?: JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[], ...alwaysCallbacksN: Array<JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[]>): JQueryPromise<T>;
-    /**
-     * Add handlers to be called when the Deferred object is resolved.
-     * 
-     * @param doneCallbacks1 A function, or array of functions, that are called when the Deferred is resolved.
-     * @param doneCallbacks2 Optional additional functions, or arrays of functions, that are called when the Deferred is resolved.
-     */
-    done(doneCallback1?: JQueryPromiseCallback<T>|JQueryPromiseCallback<T>[], ...doneCallbackN: Array<JQueryPromiseCallback<T>|JQueryPromiseCallback<T>[]>): JQueryPromise<T>;
-    /**
-     * Add handlers to be called when the Deferred object is rejected.
-     * 
-     * @param failCallbacks1 A function, or array of functions, that are called when the Deferred is rejected.
-     * @param failCallbacks2 Optional additional functions, or arrays of functions, that are called when the Deferred is rejected.
-     */
-    fail(failCallback1?: JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[], ...failCallbacksN: Array<JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[]>): JQueryPromise<T>;
-    /**
-     * Add handlers to be called when the Deferred object generates progress notifications.
-     * 
-     * @param progressCallbacks A function, or array of functions, to be called when the Deferred generates progress notifications.
-     */
-    progress(progressCallback1?: JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[], ...progressCallbackN: Array<JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[]>): JQueryPromise<T>;
-
-    // Deprecated - given no typings
-    pipe(doneFilter?: (x: any) => any, failFilter?: (x: any) => any, progressFilter?: (x: any) => any): JQueryPromise<any>;
-}
-
-/**
- * Interface for the JQuery deferred, part of callbacks
- */
-interface JQueryDeferred<T> extends JQueryGenericPromise<T> {
-    /**
-     * Determine the current state of a Deferred object.
-     */
-    state(): string;
-    /**
-     * Add handlers to be called when the Deferred object is either resolved or rejected.
-     * 
-     * @param alwaysCallbacks1 A function, or array of functions, that is called when the Deferred is resolved or rejected.
-     * @param alwaysCallbacks2 Optional additional functions, or arrays of functions, that are called when the Deferred is resolved or rejected.
-     */
-    always(alwaysCallback1?: JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[], ...alwaysCallbacksN: Array<JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[]>): JQueryDeferred<T>;
-    /**
-     * Add handlers to be called when the Deferred object is resolved.
-     * 
-     * @param doneCallbacks1 A function, or array of functions, that are called when the Deferred is resolved.
-     * @param doneCallbacks2 Optional additional functions, or arrays of functions, that are called when the Deferred is resolved.
-     */
-    done(doneCallback1?: JQueryPromiseCallback<T>|JQueryPromiseCallback<T>[], ...doneCallbackN: Array<JQueryPromiseCallback<T>|JQueryPromiseCallback<T>[]>): JQueryDeferred<T>;
-    /**
-     * Add handlers to be called when the Deferred object is rejected.
-     * 
-     * @param failCallbacks1 A function, or array of functions, that are called when the Deferred is rejected.
-     * @param failCallbacks2 Optional additional functions, or arrays of functions, that are called when the Deferred is rejected.
-     */
-    fail(failCallback1?: JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[], ...failCallbacksN: Array<JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[]>): JQueryDeferred<T>;
-    /**
-     * Add handlers to be called when the Deferred object generates progress notifications.
-     * 
-     * @param progressCallbacks A function, or array of functions, to be called when the Deferred generates progress notifications.
-     */
-    progress(progressCallback1?: JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[], ...progressCallbackN: Array<JQueryPromiseCallback<any>|JQueryPromiseCallback<any>[]>): JQueryDeferred<T>;
-
-    /**
-     * Call the progressCallbacks on a Deferred object with the given args.
-     * 
-     * @param args Optional arguments that are passed to the progressCallbacks.
-     */
-    notify(value?: any, ...args: any[]): JQueryDeferred<T>;
-
-    /**
-     * Call the progressCallbacks on a Deferred object with the given context and args.
-     * 
-     * @param context Context passed to the progressCallbacks as the this object.
-     * @param args Optional arguments that are passed to the progressCallbacks.
-     */
-    notifyWith(context: any, value?: any[]): JQueryDeferred<T>;
-
-    /**
-     * Reject a Deferred object and call any failCallbacks with the given args.
-     * 
-     * @param args Optional arguments that are passed to the failCallbacks.
-     */
-    reject(value?: any, ...args: any[]): JQueryDeferred<T>;
-    /**
-     * Reject a Deferred object and call any failCallbacks with the given context and args.
-     * 
-     * @param context Context passed to the failCallbacks as the this object.
-     * @param args An optional array of arguments that are passed to the failCallbacks.
-     */
-    rejectWith(context: any, value?: any[]): JQueryDeferred<T>;
-
-    /**
-     * Resolve a Deferred object and call any doneCallbacks with the given args.
-     * 
-     * @param value First argument passed to doneCallbacks.
-     * @param args Optional subsequent arguments that are passed to the doneCallbacks.
-     */
-    resolve(value?: T, ...args: any[]): JQueryDeferred<T>;
-
-    /**
-     * Resolve a Deferred object and call any doneCallbacks with the given context and args.
-     * 
-     * @param context Context passed to the doneCallbacks as the this object.
-     * @param args An optional array of arguments that are passed to the doneCallbacks.
-     */
-    resolveWith(context: any, value?: T[]): JQueryDeferred<T>;
-
-    /**
-     * Return a Deferred's Promise object.
-     * 
-     * @param target Object onto which the promise methods have to be attached
-     */
-    promise(target?: any): JQueryPromise<T>;
-
-    // Deprecated - given no typings
-    pipe(doneFilter?: (x: any) => any, failFilter?: (x: any) => any, progressFilter?: (x: any) => any): JQueryPromise<any>;
-}
-
-/**
- * Interface of the JQuery extension of the W3C event object
- */
-interface BaseJQueryEventObject extends Event {
-    data: any;
-    delegateTarget: Element;
-    isDefaultPrevented(): boolean;
-    isImmediatePropagationStopped(): boolean;
-    isPropagationStopped(): boolean;
-    namespace: string;
-    originalEvent: Event;
-    preventDefault(): any;
-    relatedTarget: Element;
-    result: any;
-    stopImmediatePropagation(): void;
-    stopPropagation(): void;
-    target: Element;
-    pageX: number;
-    pageY: number;
-    which: number;
-    metaKey: boolean;
-}
-
-interface JQueryInputEventObject extends BaseJQueryEventObject {
-    altKey: boolean;
-    ctrlKey: boolean;
-    metaKey: boolean;
-    shiftKey: boolean;
-}
-
-interface JQueryMouseEventObject extends JQueryInputEventObject {
-    button: number;
-    clientX: number;
-    clientY: number;
-    offsetX: number;
-    offsetY: number;
-    pageX: number;
-    pageY: number;
-    screenX: number;
-    screenY: number;
-}
-
-interface JQueryKeyEventObject extends JQueryInputEventObject {
-    char: any;
-    charCode: number;
-    key: any;
-    keyCode: number;
-}
-
-interface JQueryEventObject extends BaseJQueryEventObject, JQueryInputEventObject, JQueryMouseEventObject, JQueryKeyEventObject{
-}
-
-/*
-    Collection of properties of the current browser
-*/
-
-interface JQuerySupport {
-    ajax?: boolean;
-    boxModel?: boolean;
-    changeBubbles?: boolean;
-    checkClone?: boolean;
-    checkOn?: boolean;
-    cors?: boolean;
-    cssFloat?: boolean;
-    hrefNormalized?: boolean;
-    htmlSerialize?: boolean;
-    leadingWhitespace?: boolean;
-    noCloneChecked?: boolean;
-    noCloneEvent?: boolean;
-    opacity?: boolean;
-    optDisabled?: boolean;
-    optSelected?: boolean;
-    scriptEval? (): boolean;
-    style?: boolean;
-    submitBubbles?: boolean;
-    tbody?: boolean;
-}
-
-interface JQueryParam {
-    /**
-     * Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.
-     * 
-     * @param obj An array or object to serialize.
-     */
-    (obj: any): string;
-
-    /**
-     * Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.
-     * 
-     * @param obj An array or object to serialize.
-     * @param traditional A Boolean indicating whether to perform a traditional "shallow" serialization.
-     */
-    (obj: any, traditional: boolean): string;
-}
-
-/**
- * The interface used to construct jQuery events (with $.Event). It is
- * defined separately instead of inline in JQueryStatic to allow
- * overriding the construction function with specific strings
- * returning specific event objects.
- */
-interface JQueryEventConstructor {
-    (name: string, eventProperties?: any): JQueryEventObject;
-    new (name: string, eventProperties?: any): JQueryEventObject;
-}
-
-/**
- * The interface used to specify coordinates.
- */
-interface JQueryCoordinates {
-    left: number;
-    top: number;
-}
-
-/**
- * Elements in the array returned by serializeArray()
- */
-interface JQuerySerializeArrayElement {
-    name: string;
-    value: string;
-}
-
-interface JQueryAnimationOptions { 
-    /**
-     * A string or number determining how long the animation will run.
-     */
-    duration?: any; 
-    /**
-     * A string indicating which easing function to use for the transition.
-     */
-    easing?: string; 
-    /**
-     * A function to call once the animation is complete.
-     */
-    complete?: Function; 
-    /**
-     * A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.
-     */
-    step?: (now: number, tween: any) => any; 
-    /**
-     * A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties. (version added: 1.8)
-     */
-    progress?: (animation: JQueryPromise<any>, progress: number, remainingMs: number) => any; 
-    /**
-     * A function to call when the animation begins. (version added: 1.8)
-     */
-    start?: (animation: JQueryPromise<any>) => any; 
-    /**
-     * A function to be called when the animation completes (its Promise object is resolved). (version added: 1.8)
-     */
-    done?: (animation: JQueryPromise<any>, jumpedToEnd: boolean) => any; 
-    /**
-     * A function to be called when the animation fails to complete (its Promise object is rejected). (version added: 1.8)
-     */
-    fail?: (animation: JQueryPromise<any>, jumpedToEnd: boolean) => any; 
-    /**
-     * A function to be called when the animation completes or stops without completing (its Promise object is either resolved or rejected). (version added: 1.8)
-     */
-    always?: (animation: JQueryPromise<any>, jumpedToEnd: boolean) => any; 
-    /**
-     * A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it.
-     */
-    queue?: any; 
-    /**
-     * A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions. (version added: 1.4)
-     */
-    specialEasing?: Object;
-}
-
-interface JQueryEasingFunction {
-    ( percent: number ): number;
-}
-
-interface JQueryEasingFunctions {
-    [ name: string ]: JQueryEasingFunction;
-    linear: JQueryEasingFunction;
-    swing: JQueryEasingFunction;
-}
-
-/**
- * Static members of jQuery (those on $ and jQuery themselves)
- */
-interface JQueryStatic {
-
-    /**
-     * Perform an asynchronous HTTP (Ajax) request.
-     *
-     * @param settings A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with $.ajaxSetup().
-     */
-    ajax(settings: JQueryAjaxSettings): JQueryXHR;
-    /**
-     * Perform an asynchronous HTTP (Ajax) request.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param settings A set of key/value pairs that configure the Ajax request. All settings are optional. A default can be set for any option with $.ajaxSetup().
-     */
-    ajax(url: string, settings?: JQueryAjaxSettings): JQueryXHR;
-
-    /**
-     * Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax().
-     *
-     * @param dataTypes An optional string containing one or more space-separated dataTypes
-     * @param handler A handler to set default values for future Ajax requests.
-     */
-    ajaxPrefilter(dataTypes: string, handler: (opts: any, originalOpts: JQueryAjaxSettings, jqXHR: JQueryXHR) => any): void;
-    /**
-     * Handle custom Ajax options or modify existing options before each request is sent and before they are processed by $.ajax().
-     *
-     * @param handler A handler to set default values for future Ajax requests.
-     */
-    ajaxPrefilter(handler: (opts: any, originalOpts: JQueryAjaxSettings, jqXHR: JQueryXHR) => any): void;
-
-    ajaxSettings: JQueryAjaxSettings;
-
-     /**
-      * Set default values for future Ajax requests. Its use is not recommended.
-      *
-      * @param options A set of key/value pairs that configure the default Ajax request. All options are optional.
-      */
-    ajaxSetup(options: JQueryAjaxSettings): void;
-
-    /**
-     * Load data from the server using a HTTP GET request.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param success A callback function that is executed if the request succeeds.
-     * @param dataType The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html).
-     */
-    get(url: string, success?: (data: any, textStatus: string, jqXHR: JQueryXHR) => any, dataType?: string): JQueryXHR;
-    /**
-     * Load data from the server using a HTTP GET request.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param data A plain object or string that is sent to the server with the request.
-     * @param success A callback function that is executed if the request succeeds.
-     * @param dataType The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html).
-     */
-    get(url: string, data?: Object|string, success?: (data: any, textStatus: string, jqXHR: JQueryXHR) => any, dataType?: string): JQueryXHR;
-    /**
-     * Load data from the server using a HTTP GET request.
-     *
-     * @param settings The JQueryAjaxSettings to be used for the request
-     */
-    get(settings : JQueryAjaxSettings): JQueryXHR;
-    /**
-     * Load JSON-encoded data from the server using a GET HTTP request.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param success A callback function that is executed if the request succeeds.
-     */
-    getJSON(url: string, success?: (data: any, textStatus: string, jqXHR: JQueryXHR) => any): JQueryXHR;
-    /**
-     * Load JSON-encoded data from the server using a GET HTTP request.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param data A plain object or string that is sent to the server with the request.
-     * @param success A callback function that is executed if the request succeeds.
-     */
-    getJSON(url: string, data?: Object|string, success?: (data: any, textStatus: string, jqXHR: JQueryXHR) => any): JQueryXHR;
-    /**
-     * Load a JavaScript file from the server using a GET HTTP request, then execute it.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param success A callback function that is executed if the request succeeds.
-     */
-    getScript(url: string, success?: (script: string, textStatus: string, jqXHR: JQueryXHR) => any): JQueryXHR;
-
-    /**
-     * Create a serialized representation of an array or object, suitable for use in a URL query string or Ajax request.
-     */
-    param: JQueryParam;
-
-    /**
-     * Load data from the server using a HTTP POST request.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param success A callback function that is executed if the request succeeds. Required if dataType is provided, but can be null in that case.
-     * @param dataType The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).
-     */
-    post(url: string, success?: (data: any, textStatus: string, jqXHR: JQueryXHR) => any, dataType?: string): JQueryXHR;
-    /**
-     * Load data from the server using a HTTP POST request.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param data A plain object or string that is sent to the server with the request.
-     * @param success A callback function that is executed if the request succeeds. Required if dataType is provided, but can be null in that case.
-     * @param dataType The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).
-     */
-    post(url: string, data?: Object|string, success?: (data: any, textStatus: string, jqXHR: JQueryXHR) => any, dataType?: string): JQueryXHR;
-    /**
-     * Load data from the server using a HTTP POST request.
-     *
-     * @param settings The JQueryAjaxSettings to be used for the request
-     */
-    post(settings : JQueryAjaxSettings): JQueryXHR;
-    /**
-     * A multi-purpose callbacks list object that provides a powerful way to manage callback lists.
-     *
-     * @param flags An optional list of space-separated flags that change how the callback list behaves.
-     */
-    Callbacks(flags?: string): JQueryCallback;
-
-    /**
-     * Holds or releases the execution of jQuery's ready event.
-     *
-     * @param hold Indicates whether the ready hold is being requested or released
-     */
-    holdReady(hold: boolean): void;
-
-    /**
-     * Accepts a string containing a CSS selector which is then used to match a set of elements.
-     *
-     * @param selector A string containing a selector expression
-     * @param context A DOM Element, Document, or jQuery to use as context
-     */
-    (selector: string, context?: Element|JQuery): JQuery;
-
-    /**
-     * Accepts a string containing a CSS selector which is then used to match a set of elements.
-     *
-     * @param element A DOM element to wrap in a jQuery object.
-     */
-    (element: Element): JQuery;
-
-    /**
-     * Accepts a string containing a CSS selector which is then used to match a set of elements.
-     *
-     * @param elementArray An array containing a set of DOM elements to wrap in a jQuery object.
-     */
-    (elementArray: Element[]): JQuery;
-
-    /**
-     * Binds a function to be executed when the DOM has finished loading.
-     *
-     * @param callback A function to execute after the DOM is ready.
-     */
-    (callback: (jQueryAlias?: JQueryStatic) => any): JQuery;
-
-    /**
-     * Accepts a string containing a CSS selector which is then used to match a set of elements.
-     *
-     * @param object A plain object to wrap in a jQuery object.
-     */
-    (object: {}): JQuery;
-
-    /**
-     * Accepts a string containing a CSS selector which is then used to match a set of elements.
-     *
-     * @param object An existing jQuery object to clone.
-     */
-    (object: JQuery): JQuery;
-
-    /**
-     * Specify a function to execute when the DOM is fully loaded.
-     */
-    (): JQuery;
-
-    /**
-     * Creates DOM elements on the fly from the provided string of raw HTML.
-     *
-     * @param html A string of HTML to create on the fly. Note that this parses HTML, not XML.
-     * @param ownerDocument A document in which the new elements will be created.
-     */
-    (html: string, ownerDocument?: Document): JQuery;
-
-    /**
-     * Creates DOM elements on the fly from the provided string of raw HTML.
-     *
-     * @param html A string defining a single, standalone, HTML element (e.g. <div/> or <div></div>).
-     * @param attributes An object of attributes, events, and methods to call on the newly-created element.
-     */
-    (html: string, attributes: Object): JQuery;
-
-    /**
-     * Relinquish jQuery's control of the $ variable.
-     *
-     * @param removeAll A Boolean indicating whether to remove all jQuery variables from the global scope (including jQuery itself).
-     */
-    noConflict(removeAll?: boolean): JQueryStatic;
-
-    /**
-     * Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.
-     *
-     * @param deferreds One or more Deferred objects, or plain JavaScript objects.
-     */
-    when<T>(...deferreds: Array<T|JQueryPromise<T>/* as JQueryDeferred<T> */>): JQueryPromise<T>;
-
-    /**
-     * Hook directly into jQuery to override how particular CSS properties are retrieved or set, normalize CSS property naming, or create custom properties.
-     */
-    cssHooks: { [key: string]: any; };
-    cssNumber: any;
-
-    /**
-     * Store arbitrary data associated with the specified element. Returns the value that was set.
-     *
-     * @param element The DOM element to associate with the data.
-     * @param key A string naming the piece of data to set.
-     * @param value The new data value.
-     */
-    data<T>(element: Element, key: string, value: T): T;
-    /**
-     * Returns value at named data store for the element, as set by jQuery.data(element, name, value), or the full data store for the element.
-     *
-     * @param element The DOM element to associate with the data.
-     * @param key A string naming the piece of data to set.
-     */
-    data(element: Element, key: string): any;
-    /**
-     * Returns value at named data store for the element, as set by jQuery.data(element, name, value), or the full data store for the element.
-     *
-     * @param element The DOM element to associate with the data.
-     */
-    data(element: Element): any;
-
-    /**
-     * Execute the next function on the queue for the matched element.
-     *
-     * @param element A DOM element from which to remove and execute a queued function.
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     */
-    dequeue(element: Element, queueName?: string): void;
-
-    /**
-     * Determine whether an element has any jQuery data associated with it.
-     *
-     * @param element A DOM element to be checked for data.
-     */
-    hasData(element: Element): boolean;
-
-    /**
-     * Show the queue of functions to be executed on the matched element.
-     *
-     * @param element A DOM element to inspect for an attached queue.
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     */
-    queue(element: Element, queueName?: string): any[];
-    /**
-     * Manipulate the queue of functions to be executed on the matched element.
-     *
-     * @param element A DOM element where the array of queued functions is attached.
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     * @param newQueue An array of functions to replace the current queue contents.
-     */
-    queue(element: Element, queueName: string, newQueue: Function[]): JQuery;
-    /**
-     * Manipulate the queue of functions to be executed on the matched element.
-     *
-     * @param element A DOM element on which to add a queued function.
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     * @param callback The new function to add to the queue.
-     */
-    queue(element: Element, queueName: string, callback: Function): JQuery;
-
-    /**
-     * Remove a previously-stored piece of data.
-     *
-     * @param element A DOM element from which to remove data.
-     * @param name A string naming the piece of data to remove.
-     */
-    removeData(element: Element, name?: string): JQuery;
-
-    /**
-     * A constructor function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.
-     *
-     * @param beforeStart A function that is called just before the constructor returns.
-     */
-    Deferred<T>(beforeStart?: (deferred: JQueryDeferred<T>) => any): JQueryDeferred<T>;
-
-    /**
-     * Effects
-     */
-
-    easing: JQueryEasingFunctions;
-
-    fx: {
-        tick: () => void;
-        /**
-         * The rate (in milliseconds) at which animations fire.
-         */
-        interval: number;
-        stop: () => void;
-        speeds: { slow: number; fast: number; };
-        /**
-         * Globally disable all animations.
-         */
-        off: boolean;
-        step: any;
-    };
-
-    /**
-     * Takes a function and returns a new one that will always have a particular context.
-     *
-     * @param fnction The function whose context will be changed.
-     * @param context The object to which the context (this) of the function should be set.
-     * @param additionalArguments Any number of arguments to be passed to the function referenced in the function argument.
-     */
-    proxy(fnction: (...args: any[]) => any, context: Object, ...additionalArguments: any[]): any;
-    /**
-     * Takes a function and returns a new one that will always have a particular context.
-     *
-     * @param context The object to which the context (this) of the function should be set.
-     * @param name The name of the function whose context will be changed (should be a property of the context object).
-     * @param additionalArguments Any number of arguments to be passed to the function named in the name argument.
-     */
-    proxy(context: Object, name: string, ...additionalArguments: any[]): any;
-
-    Event: JQueryEventConstructor;
-
-    /**
-     * Takes a string and throws an exception containing it.
-     *
-     * @param message The message to send out.
-     */
-    error(message: any): JQuery;
-
-    expr: any;
-    fn: any;  //TODO: Decide how we want to type this
-
-    isReady: boolean;
-
-    // Properties
-    support: JQuerySupport;
-
-    /**
-     * Check to see if a DOM element is a descendant of another DOM element.
-     * 
-     * @param container The DOM element that may contain the other element.
-     * @param contained The DOM element that may be contained by (a descendant of) the other element.
-     */
-    contains(container: Element, contained: Element): boolean;
-
-    /**
-     * A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.
-     * 
-     * @param collection The object or array to iterate over.
-     * @param callback The function that will be executed on every object.
-     */
-    each<T>(
-        collection: T[],
-        callback: (indexInArray: number, valueOfElement: T) => any
-        ): any;
-
-    /**
-     * A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties.
-     * 
-     * @param collection The object or array to iterate over.
-     * @param callback The function that will be executed on every object.
-     */
-    each(
-        collection: any,
-        callback: (indexInArray: any, valueOfElement: any) => any
-        ): any;
-
-    /**
-     * Merge the contents of two or more objects together into the first object.
-     *
-     * @param target An object that will receive the new properties if additional objects are passed in or that will extend the jQuery namespace if it is the sole argument.
-     * @param object1 An object containing additional properties to merge in.
-     * @param objectN Additional objects containing properties to merge in.
-     */
-    extend(target: any, object1?: any, ...objectN: any[]): any;
-    /**
-     * Merge the contents of two or more objects together into the first object.
-     *
-     * @param deep If true, the merge becomes recursive (aka. deep copy).
-     * @param target The object to extend. It will receive the new properties.
-     * @param object1 An object containing additional properties to merge in.
-     * @param objectN Additional objects containing properties to merge in.
-     */
-    extend(deep: boolean, target: any, object1?: any, ...objectN: any[]): any;
-
-    /**
-     * Execute some JavaScript code globally.
-     *
-     * @param code The JavaScript code to execute.
-     */
-    globalEval(code: string): any;
-
-    /**
-     * Finds the elements of an array which satisfy a filter function. The original array is not affected.
-     *
-     * @param array The array to search through.
-     * @param func The function to process each item against. The first argument to the function is the item, and the second argument is the index. The function should return a Boolean value.  this will be the global window object.
-     * @param invert If "invert" is false, or not provided, then the function returns an array consisting of all elements for which "callback" returns true. If "invert" is true, then the function returns an array consisting of all elements for which "callback" returns false.
-     */
-    grep<T>(array: T[], func: (elementOfArray: T, indexInArray: number) => boolean, invert?: boolean): T[];
-
-    /**
-     * Search for a specified value within an array and return its index (or -1 if not found).
-     *
-     * @param value The value to search for.
-     * @param array An array through which to search.
-     * @param fromIndex he index of the array at which to begin the search. The default is 0, which will search the whole array.
-     */
-    inArray<T>(value: T, array: T[], fromIndex?: number): number;
-
-    /**
-     * Determine whether the argument is an array.
-     *
-     * @param obj Object to test whether or not it is an array.
-     */
-    isArray(obj: any): boolean;
-    /**
-     * Check to see if an object is empty (contains no enumerable properties).
-     *
-     * @param obj The object that will be checked to see if it's empty.
-     */
-    isEmptyObject(obj: any): boolean;
-    /**
-     * Determine if the argument passed is a Javascript function object.
-     *
-     * @param obj Object to test whether or not it is a function.
-     */
-    isFunction(obj: any): boolean;
-    /**
-     * Determines whether its argument is a number.
-     *
-     * @param obj The value to be tested.
-     */
-    isNumeric(value: any): boolean;
-    /**
-     * Check to see if an object is a plain object (created using "{}" or "new Object").
-     *
-     * @param obj The object that will be checked to see if it's a plain object.
-     */
-    isPlainObject(obj: any): boolean;
-    /**
-     * Determine whether the argument is a window.
-     *
-     * @param obj Object to test whether or not it is a window.
-     */
-    isWindow(obj: any): boolean;
-    /**
-     * Check to see if a DOM node is within an XML document (or is an XML document).
-     *
-     * @param node he DOM node that will be checked to see if it's in an XML document.
-     */
-    isXMLDoc(node: Node): boolean;
-
-    /**
-     * Convert an array-like object into a true JavaScript array.
-     * 
-     * @param obj Any object to turn into a native Array.
-     */
-    makeArray(obj: any): any[];
-
-    /**
-     * Translate all items in an array or object to new array of items.
-     * 
-     * @param array The Array to translate.
-     * @param callback The function to process each item against. The first argument to the function is the array item, the second argument is the index in array The function can return any value. Within the function, this refers to the global (window) object.
-     */
-    map<T, U>(array: T[], callback: (elementOfArray: T, indexInArray: number) => U): U[];
-    /**
-     * Translate all items in an array or object to new array of items.
-     * 
-     * @param arrayOrObject The Array or Object to translate.
-     * @param callback The function to process each item against. The first argument to the function is the value; the second argument is the index or key of the array or object property. The function can return any value to add to the array. A returned array will be flattened into the resulting array. Within the function, this refers to the global (window) object.
-     */
-    map(arrayOrObject: any, callback: (value: any, indexOrKey: any) => any): any;
-
-    /**
-     * Merge the contents of two arrays together into the first array.
-     * 
-     * @param first The first array to merge, the elements of second added.
-     * @param second The second array to merge into the first, unaltered.
-     */
-    merge<T>(first: T[], second: T[]): T[];
-
-    /**
-     * An empty function.
-     */
-    noop(): any;
-
-    /**
-     * Return a number representing the current time.
-     */
-    now(): number;
-
-    /**
-     * Takes a well-formed JSON string and returns the resulting JavaScript object.
-     * 
-     * @param json The JSON string to parse.
-     */
-    parseJSON(json: string): any;
-
-    /**
-     * Parses a string into an XML document.
-     *
-     * @param data a well-formed XML string to be parsed
-     */
-    parseXML(data: string): XMLDocument;
-
-    /**
-     * Remove the whitespace from the beginning and end of a string.
-     * 
-     * @param str Remove the whitespace from the beginning and end of a string.
-     */
-    trim(str: string): string;
-
-    /**
-     * Determine the internal JavaScript [[Class]] of an object.
-     * 
-     * @param obj Object to get the internal JavaScript [[Class]] of.
-     */
-    type(obj: any): string;
-
-    /**
-     * Sorts an array of DOM elements, in place, with the duplicates removed. Note that this only works on arrays of DOM elements, not strings or numbers.
-     * 
-     * @param array The Array of DOM elements.
-     */
-    unique(array: Element[]): Element[];
-
-    /**
-     * Parses a string into an array of DOM nodes.
-     *
-     * @param data HTML string to be parsed
-     * @param context DOM element to serve as the context in which the HTML fragment will be created
-     * @param keepScripts A Boolean indicating whether to include scripts passed in the HTML string
-     */
-    parseHTML(data: string, context?: HTMLElement, keepScripts?: boolean): any[];
-
-    /**
-     * Parses a string into an array of DOM nodes.
-     *
-     * @param data HTML string to be parsed
-     * @param context DOM element to serve as the context in which the HTML fragment will be created
-     * @param keepScripts A Boolean indicating whether to include scripts passed in the HTML string
-     */
-    parseHTML(data: string, context?: Document, keepScripts?: boolean): any[];
-}
-
-/**
- * The jQuery instance members
- */
-interface JQuery {
-    /**
-     * Register a handler to be called when Ajax requests complete. This is an AjaxEvent.
-     *
-     * @param handler The function to be invoked.
-     */
-    ajaxComplete(handler: (event: JQueryEventObject, XMLHttpRequest: XMLHttpRequest, ajaxOptions: any) => any): JQuery;
-    /**
-     * Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event.
-     *
-     * @param handler The function to be invoked.
-     */
-    ajaxError(handler: (event: JQueryEventObject, jqXHR: JQueryXHR, ajaxSettings: JQueryAjaxSettings, thrownError: any) => any): JQuery;
-    /**
-     * Attach a function to be executed before an Ajax request is sent. This is an Ajax Event.
-     *
-     * @param handler The function to be invoked.
-     */
-    ajaxSend(handler: (event: JQueryEventObject, jqXHR: JQueryXHR, ajaxOptions: JQueryAjaxSettings) => any): JQuery;
-    /**
-     * Register a handler to be called when the first Ajax request begins. This is an Ajax Event.
-     *
-     * @param handler The function to be invoked.
-     */
-    ajaxStart(handler: () => any): JQuery;
-    /**
-     * Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.
-     *
-     * @param handler The function to be invoked.
-     */
-    ajaxStop(handler: () => any): JQuery;
-    /**
-     * Attach a function to be executed whenever an Ajax request completes successfully. This is an Ajax Event.
-     *
-     * @param handler The function to be invoked.
-     */
-    ajaxSuccess(handler: (event: JQueryEventObject, XMLHttpRequest: XMLHttpRequest, ajaxOptions: JQueryAjaxSettings) => any): JQuery;
-
-    /**
-     * Load data from the server and place the returned HTML into the matched element.
-     *
-     * @param url A string containing the URL to which the request is sent.
-     * @param data A plain object or string that is sent to the server with the request.
-     * @param complete A callback function that is executed when the request completes.
-     */
-    load(url: string, data?: string|Object, complete?: (responseText: string, textStatus: string, XMLHttpRequest: XMLHttpRequest) => any): JQuery;
-
-    /**
-     * Encode a set of form elements as a string for submission.
-     */
-    serialize(): string;
-    /**
-     * Encode a set of form elements as an array of names and values.
-     */
-    serializeArray(): JQuerySerializeArrayElement[];
-
-    /**
-     * Adds the specified class(es) to each of the set of matched elements.
-     *
-     * @param className One or more space-separated classes to be added to the class attribute of each matched element.
-     */
-    addClass(className: string): JQuery;
-    /**
-     * Adds the specified class(es) to each of the set of matched elements.
-     *
-     * @param function A function returning one or more space-separated class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, this refers to the current element in the set.
-     */
-    addClass(func: (index: number, className: string) => string): JQuery;
-
-    /**
-     * Add the previous set of elements on the stack to the current set, optionally filtered by a selector.
-     */
-    addBack(selector?: string): JQuery;
-
-    /**
-     * Get the value of an attribute for the first element in the set of matched elements.
-     *
-     * @param attributeName The name of the attribute to get.
-     */
-    attr(attributeName: string): string;
-    /**
-     * Set one or more attributes for the set of matched elements.
-     *
-     * @param attributeName The name of the attribute to set.
-     * @param value A value to set for the attribute.
-     */
-    attr(attributeName: string, value: string|number): JQuery;
-    /**
-     * Set one or more attributes for the set of matched elements.
-     *
-     * @param attributeName The name of the attribute to set.
-     * @param func A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old attribute value as arguments.
-     */
-    attr(attributeName: string, func: (index: number, attr: string) => string|number): JQuery;
-    /**
-     * Set one or more attributes for the set of matched elements.
-     *
-     * @param attributes An object of attribute-value pairs to set.
-     */
-    attr(attributes: Object): JQuery;
-    
-    /**
-     * Determine whether any of the matched elements are assigned the given class.
-     *
-     * @param className The class name to search for.
-     */
-    hasClass(className: string): boolean;
-
-    /**
-     * Get the HTML contents of the first element in the set of matched elements.
-     */
-    html(): string;
-    /**
-     * Set the HTML contents of each element in the set of matched elements.
-     *
-     * @param htmlString A string of HTML to set as the content of each matched element.
-     */
-    html(htmlString: string): JQuery;
-    /**
-     * Set the HTML contents of each element in the set of matched elements.
-     *
-     * @param func A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments. jQuery empties the element before calling the function; use the oldhtml argument to reference the previous content. Within the function, this refers to the current element in the set.
-     */
-    html(func: (index: number, oldhtml: string) => string): JQuery;
-    /**
-     * Set the HTML contents of each element in the set of matched elements.
-     *
-     * @param func A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments. jQuery empties the element before calling the function; use the oldhtml argument to reference the previous content. Within the function, this refers to the current element in the set.
-     */
-
-    /**
-     * Get the value of a property for the first element in the set of matched elements.
-     *
-     * @param propertyName The name of the property to get.
-     */
-    prop(propertyName: string): any;
-    /**
-     * Set one or more properties for the set of matched elements.
-     *
-     * @param propertyName The name of the property to set.
-     * @param value A value to set for the property.
-     */
-    prop(propertyName: string, value: string|number|boolean): JQuery;
-    /**
-     * Set one or more properties for the set of matched elements.
-     *
-     * @param properties An object of property-value pairs to set.
-     */
-    prop(properties: Object): JQuery;
-    /**
-     * Set one or more properties for the set of matched elements.
-     *
-     * @param propertyName The name of the property to set.
-     * @param func A function returning the value to set. Receives the index position of the element in the set and the old property value as arguments. Within the function, the keyword this refers to the current element.
-     */
-    prop(propertyName: string, func: (index: number, oldPropertyValue: any) => any): JQuery;
-
-    /**
-     * Remove an attribute from each element in the set of matched elements.
-     *
-     * @param attributeName An attribute to remove; as of version 1.7, it can be a space-separated list of attributes.
-     */
-    removeAttr(attributeName: string): JQuery;
-
-    /**
-     * Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
-     *
-     * @param className One or more space-separated classes to be removed from the class attribute of each matched element.
-     */
-    removeClass(className?: string): JQuery;
-    /**
-     * Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
-     *
-     * @param function A function returning one or more space-separated class names to be removed. Receives the index position of the element in the set and the old class value as arguments.
-     */
-    removeClass(func: (index: number, className: string) => string): JQuery;
-
-    /**
-     * Remove a property for the set of matched elements.
-     *
-     * @param propertyName The name of the property to remove.
-     */
-    removeProp(propertyName: string): JQuery;
-
-    /**
-     * Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
-     *
-     * @param className One or more class names (separated by spaces) to be toggled for each element in the matched set.
-     * @param swtch A Boolean (not just truthy/falsy) value to determine whether the class should be added or removed.
-     */
-    toggleClass(className: string, swtch?: boolean): JQuery;
-    /**
-     * Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
-     *
-     * @param swtch A boolean value to determine whether the class should be added or removed.
-     */
-    toggleClass(swtch?: boolean): JQuery;
-    /**
-     * Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
-     *
-     * @param func A function that returns class names to be toggled in the class attribute of each element in the matched set. Receives the index position of the element in the set, the old class value, and the switch as arguments.
-     * @param swtch A boolean value to determine whether the class should be added or removed.
-     */
-    toggleClass(func: (index: number, className: string, swtch: boolean) => string, swtch?: boolean): JQuery;
-
-    /**
-     * Get the current value of the first element in the set of matched elements.
-     */
-    val(): any;
-    /**
-     * Set the value of each element in the set of matched elements.
-     *
-     * @param value A string of text, an array of strings or number corresponding to the value of each matched element to set as selected/checked.
-     */
-    val(value: string|string[]|number): JQuery;
-    /**
-     * Set the value of each element in the set of matched elements.
-     *
-     * @param func A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.
-     */
-    val(func: (index: number, value: string) => string): JQuery;
-
-
-    /**
-     * Get the value of style properties for the first element in the set of matched elements.
-     *
-     * @param propertyName A CSS property.
-     */
-    css(propertyName: string): string;
-    /**
-     * Set one or more CSS properties for the set of matched elements.
-     *
-     * @param propertyName A CSS property name.
-     * @param value A value to set for the property.
-     */
-    css(propertyName: string, value: string|number): JQuery;
-    /**
-     * Set one or more CSS properties for the set of matched elements.
-     *
-     * @param propertyName A CSS property name.
-     * @param value A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.
-     */
-    css(propertyName: string, value: (index: number, value: string) => string|number): JQuery;
-    /**
-     * Set one or more CSS properties for the set of matched elements.
-     *
-     * @param properties An object of property-value pairs to set.
-     */
-    css(properties: Object): JQuery;
-
-    /**
-     * Get the current computed height for the first element in the set of matched elements.
-     */
-    height(): number;
-    /**
-     * Set the CSS height of every matched element.
-     *
-     * @param value An integer representing the number of pixels, or an integer with an optional unit of measure appended (as a string).
-     */
-    height(value: number|string): JQuery;
-    /**
-     * Set the CSS height of every matched element.
-     *
-     * @param func A function returning the height to set. Receives the index position of the element in the set and the old height as arguments. Within the function, this refers to the current element in the set.
-     */
-    height(func: (index: number, height: number) => number|string): JQuery;
-
-    /**
-     * Get the current computed height for the first element in the set of matched elements, including padding but not border.
-     */
-    innerHeight(): number;
-
-    /**
-     * Sets the inner height on elements in the set of matched elements, including padding but not border.
-     *
-     * @param value An integer representing the number of pixels, or an integer along with an optional unit of measure appended (as a string).
-     */
-    innerHeight(height: number|string): JQuery;
-    
-    /**
-     * Get the current computed width for the first element in the set of matched elements, including padding but not border.
-     */
-    innerWidth(): number;
-
-    /**
-     * Sets the inner width on elements in the set of matched elements, including padding but not border.
-     *
-     * @param value An integer representing the number of pixels, or an integer along with an optional unit of measure appended (as a string).
-     */
-    innerWidth(width: number|string): JQuery;
-    
-    /**
-     * Get the current coordinates of the first element in the set of matched elements, relative to the document.
-     */
-    offset(): JQueryCoordinates;
-    /**
-     * An object containing the properties top and left, which are integers indicating the new top and left coordinates for the elements.
-     *
-     * @param coordinates An object containing the properties top and left, which are integers indicating the new top and left coordinates for the elements.
-     */
-    offset(coordinates: JQueryCoordinates): JQuery;
-    /**
-     * An object containing the properties top and left, which are integers indicating the new top and left coordinates for the elements.
-     *
-     * @param func A function to return the coordinates to set. Receives the index of the element in the collection as the first argument and the current coordinates as the second argument. The function should return an object with the new top and left properties.
-     */
-    offset(func: (index: number, coords: JQueryCoordinates) => JQueryCoordinates): JQuery;
-
-    /**
-     * Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns an integer (without "px") representation of the value or null if called on an empty set of elements.
-     *
-     * @param includeMargin A Boolean indicating whether to include the element's margin in the calculation.
-     */
-    outerHeight(includeMargin?: boolean): number;
-
-    /**
-     * Sets the outer height on elements in the set of matched elements, including padding and border.
-     *
-     * @param value An integer representing the number of pixels, or an integer along with an optional unit of measure appended (as a string).
-     */
-    outerHeight(height: number|string): JQuery;
-
-    /**
-     * Get the current computed width for the first element in the set of matched elements, including padding and border.
-     *
-     * @param includeMargin A Boolean indicating whether to include the element's margin in the calculation.
-     */
-    outerWidth(includeMargin?: boolean): number;
-
-    /**
-     * Sets the outer width on elements in the set of matched elements, including padding and border.
-     *
-     * @param value An integer representing the number of pixels, or an integer along with an optional unit of measure appended (as a string).
-     */
-    outerWidth(width: number|string): JQuery;
-
-    /**
-     * Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
-     */
-    position(): JQueryCoordinates;
-
-    /**
-     * Get the current horizontal position of the scroll bar for the first element in the set of matched elements or set the horizontal position of the scroll bar for every matched element.
-     */
-    scrollLeft(): number;
-    /**
-     * Set the current horizontal position of the scroll bar for each of the set of matched elements.
-     *
-     * @param value An integer indicating the new position to set the scroll bar to.
-     */
-    scrollLeft(value: number): JQuery;
-
-    /**
-     * Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.
-     */
-    scrollTop(): number;
-    /**
-     * Set the current vertical position of the scroll bar for each of the set of matched elements.
-     *
-     * @param value An integer indicating the new position to set the scroll bar to.
-     */
-    scrollTop(value: number): JQuery;
-
-    /**
-     * Get the current computed width for the first element in the set of matched elements.
-     */
-    width(): number;
-    /**
-     * Set the CSS width of each element in the set of matched elements.
-     *
-     * @param value An integer representing the number of pixels, or an integer along with an optional unit of measure appended (as a string).
-     */
-    width(value: number|string): JQuery;
-    /**
-     * Set the CSS width of each element in the set of matched elements.
-     *
-     * @param func A function returning the width to set. Receives the index position of the element in the set and the old width as arguments. Within the function, this refers to the current element in the set.
-     */
-    width(func: (index: number, width: number) => number|string): JQuery;
-
-    /**
-     * Remove from the queue all items that have not yet been run.
-     *
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     */
-    clearQueue(queueName?: string): JQuery;
-
-    /**
-     * Store arbitrary data associated with the matched elements.
-     *
-     * @param key A string naming the piece of data to set.
-     * @param value The new data value; it can be any Javascript type including Array or Object.
-     */
-    data(key: string, value: any): JQuery;
-    /**
-     * Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.
-     *
-     * @param key Name of the data stored.
-     */
-    data(key: string): any;
-    /**
-     * Store arbitrary data associated with the matched elements.
-     *
-     * @param obj An object of key-value pairs of data to update.
-     */
-    data(obj: { [key: string]: any; }): JQuery;
-    /**
-     * Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.
-     */
-    data(): any;
-
-    /**
-     * Execute the next function on the queue for the matched elements.
-     *
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     */
-    dequeue(queueName?: string): JQuery;
-
-    /**
-     * Remove a previously-stored piece of data.
-     *
-     * @param name A string naming the piece of data to delete or space-separated string naming the pieces of data to delete.
-     */
-    removeData(name: string): JQuery;
-    /**
-     * Remove a previously-stored piece of data.
-     *
-     * @param list An array of strings naming the pieces of data to delete.
-     */
-    removeData(list: string[]): JQuery;
-    /**
-     * Remove all previously-stored piece of data.
-     */
-    removeData(): JQuery;
-
-    /**
-     * Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.
-     *
-     * @param type The type of queue that needs to be observed. (default: fx)
-     * @param target Object onto which the promise methods have to be attached
-     */
-    promise(type?: string, target?: Object): JQueryPromise<any>;
-
-    /**
-     * Perform a custom animation of a set of CSS properties.
-     *
-     * @param properties An object of CSS properties and values that the animation will move toward.
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    animate(properties: Object, duration?: string|number, complete?: Function): JQuery;
-    /**
-     * Perform a custom animation of a set of CSS properties.
-     *
-     * @param properties An object of CSS properties and values that the animation will move toward.
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition. (default: swing)
-     * @param complete A function to call once the animation is complete.
-     */
-    animate(properties: Object, duration?: string|number, easing?: string, complete?: Function): JQuery;
-    /**
-     * Perform a custom animation of a set of CSS properties.
-     *
-     * @param properties An object of CSS properties and values that the animation will move toward.
-     * @param options A map of additional options to pass to the method.
-     */
-    animate(properties: Object, options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Set a timer to delay execution of subsequent items in the queue.
-     *
-     * @param duration An integer indicating the number of milliseconds to delay execution of the next item in the queue.
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     */
-    delay(duration: number, queueName?: string): JQuery;
-
-    /**
-     * Display the matched elements by fading them to opaque.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeIn(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Display the matched elements by fading them to opaque.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeIn(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Display the matched elements by fading them to opaque.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    fadeIn(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Hide the matched elements by fading them to transparent.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeOut(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Hide the matched elements by fading them to transparent.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeOut(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Hide the matched elements by fading them to transparent.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    fadeOut(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Adjust the opacity of the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param opacity A number between 0 and 1 denoting the target opacity.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeTo(duration: string|number, opacity: number, complete?: Function): JQuery;
-    /**
-     * Adjust the opacity of the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param opacity A number between 0 and 1 denoting the target opacity.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeTo(duration: string|number, opacity: number, easing?: string, complete?: Function): JQuery;
-
-    /**
-     * Display or hide the matched elements by animating their opacity.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeToggle(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Display or hide the matched elements by animating their opacity.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    fadeToggle(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Display or hide the matched elements by animating their opacity.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    fadeToggle(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements.
-     *
-     * @param queue The name of the queue in which to stop animations.
-     */
-    finish(queue?: string): JQuery;
-
-    /**
-     * Hide the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    hide(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Hide the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    hide(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Hide the matched elements.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    hide(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Display the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    show(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Display the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    show(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Display the matched elements.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    show(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Display the matched elements with a sliding motion.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    slideDown(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Display the matched elements with a sliding motion.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    slideDown(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Display the matched elements with a sliding motion.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    slideDown(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Display or hide the matched elements with a sliding motion.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    slideToggle(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Display or hide the matched elements with a sliding motion.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    slideToggle(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Display or hide the matched elements with a sliding motion.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    slideToggle(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Hide the matched elements with a sliding motion.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    slideUp(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Hide the matched elements with a sliding motion.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    slideUp(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Hide the matched elements with a sliding motion.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    slideUp(options: JQueryAnimationOptions): JQuery;
-
-    /**
-     * Stop the currently-running animation on the matched elements.
-     *
-     * @param clearQueue A Boolean indicating whether to remove queued animation as well. Defaults to false.
-     * @param jumpToEnd A Boolean indicating whether to complete the current animation immediately. Defaults to false.
-     */
-    stop(clearQueue?: boolean, jumpToEnd?: boolean): JQuery;
-    /**
-     * Stop the currently-running animation on the matched elements.
-     *
-     * @param queue The name of the queue in which to stop animations.
-     * @param clearQueue A Boolean indicating whether to remove queued animation as well. Defaults to false.
-     * @param jumpToEnd A Boolean indicating whether to complete the current animation immediately. Defaults to false.
-     */
-    stop(queue?: string, clearQueue?: boolean, jumpToEnd?: boolean): JQuery;
-
-    /**
-     * Display or hide the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param complete A function to call once the animation is complete.
-     */
-    toggle(duration?: number|string, complete?: Function): JQuery;
-    /**
-     * Display or hide the matched elements.
-     *
-     * @param duration A string or number determining how long the animation will run.
-     * @param easing A string indicating which easing function to use for the transition.
-     * @param complete A function to call once the animation is complete.
-     */
-    toggle(duration?: number|string, easing?: string, complete?: Function): JQuery;
-    /**
-     * Display or hide the matched elements.
-     *
-     * @param options A map of additional options to pass to the method.
-     */
-    toggle(options: JQueryAnimationOptions): JQuery;
-    /**
-     * Display or hide the matched elements.
-     *
-     * @param showOrHide A Boolean indicating whether to show or hide the elements.
-     */
-    toggle(showOrHide: boolean): JQuery;
-
-    /**
-     * Attach a handler to an event for the elements.
-     * 
-     * @param eventType A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    bind(eventType: string, eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Attach a handler to an event for the elements.
-     * 
-     * @param eventType A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    bind(eventType: string, handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Attach a handler to an event for the elements.
-     * 
-     * @param eventType A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param preventBubble Setting the third argument to false will attach a function that prevents the default action from occurring and stops the event from bubbling. The default is true.
-     */
-    bind(eventType: string, eventData: any, preventBubble: boolean): JQuery;
-    /**
-     * Attach a handler to an event for the elements.
-     * 
-     * @param eventType A string containing one or more DOM event types, such as "click" or "submit," or custom event names.
-     * @param preventBubble Setting the third argument to false will attach a function that prevents the default action from occurring and stops the event from bubbling. The default is true.
-     */
-    bind(eventType: string, preventBubble: boolean): JQuery;
-    /**
-     * Attach a handler to an event for the elements.
-     * 
-     * @param events An object containing one or more DOM event types and functions to execute for them.
-     */
-    bind(events: any): JQuery;
-
-    /**
-     * Trigger the "blur" event on an element
-     */
-    blur(): JQuery;
-    /**
-     * Bind an event handler to the "blur" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    blur(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "blur" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    blur(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "change" event on an element.
-     */
-    change(): JQuery;
-    /**
-     * Bind an event handler to the "change" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    change(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "change" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    change(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "click" event on an element.
-     */
-    click(): JQuery;
-    /**
-     * Bind an event handler to the "click" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     */
-    click(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "click" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    click(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "dblclick" event on an element.
-     */
-    dblclick(): JQuery;
-    /**
-     * Bind an event handler to the "dblclick" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    dblclick(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "dblclick" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    dblclick(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    delegate(selector: any, eventType: string, handler: (eventObject: JQueryEventObject) => any): JQuery;
-    delegate(selector: any, eventType: string, eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "focus" event on an element.
-     */
-    focus(): JQuery;
-    /**
-     * Bind an event handler to the "focus" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    focus(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "focus" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    focus(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "focusin" event on an element.
-     */
-    focusin(): JQuery;
-    /**
-     * Bind an event handler to the "focusin" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    focusin(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "focusin" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    focusin(eventData: Object, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "focusout" event on an element.
-     */
-    focusout(): JQuery;
-    /**
-     * Bind an event handler to the "focusout" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    focusout(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "focusout" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    focusout(eventData: Object, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
-     *
-     * @param handlerIn A function to execute when the mouse pointer enters the element.
-     * @param handlerOut A function to execute when the mouse pointer leaves the element.
-     */
-    hover(handlerIn: (eventObject: JQueryEventObject) => any, handlerOut: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind a single handler to the matched elements, to be executed when the mouse pointer enters or leaves the elements.
-     *
-     * @param handlerInOut A function to execute when the mouse pointer enters or leaves the element.
-     */
-    hover(handlerInOut: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "keydown" event on an element.
-     */
-    keydown(): JQuery;
-    /**
-     * Bind an event handler to the "keydown" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    keydown(handler: (eventObject: JQueryKeyEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "keydown" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    keydown(eventData?: any, handler?: (eventObject: JQueryKeyEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "keypress" event on an element.
-     */
-    keypress(): JQuery;
-    /**
-     * Bind an event handler to the "keypress" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    keypress(handler: (eventObject: JQueryKeyEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "keypress" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    keypress(eventData?: any, handler?: (eventObject: JQueryKeyEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "keyup" event on an element.
-     */
-    keyup(): JQuery;
-    /**
-     * Bind an event handler to the "keyup" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    keyup(handler: (eventObject: JQueryKeyEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "keyup" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    keyup(eventData?: any, handler?: (eventObject: JQueryKeyEventObject) => any): JQuery;
-
-    /**
-     * Bind an event handler to the "load" JavaScript event.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    load(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "load" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    load(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "mousedown" event on an element.
-     */
-    mousedown(): JQuery;
-    /**
-     * Bind an event handler to the "mousedown" JavaScript event.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    mousedown(handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "mousedown" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    mousedown(eventData: Object, handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "mouseenter" event on an element.
-     */
-    mouseenter(): JQuery;
-    /**
-     * Bind an event handler to be fired when the mouse enters an element.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseenter(handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to be fired when the mouse enters an element.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseenter(eventData: Object, handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "mouseleave" event on an element.
-     */
-    mouseleave(): JQuery;
-    /**
-     * Bind an event handler to be fired when the mouse leaves an element.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseleave(handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to be fired when the mouse leaves an element.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseleave(eventData: Object, handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "mousemove" event on an element.
-     */
-    mousemove(): JQuery;
-    /**
-     * Bind an event handler to the "mousemove" JavaScript event.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    mousemove(handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "mousemove" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    mousemove(eventData: Object, handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "mouseout" event on an element.
-     */
-    mouseout(): JQuery;
-    /**
-     * Bind an event handler to the "mouseout" JavaScript event.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseout(handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "mouseout" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseout(eventData: Object, handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "mouseover" event on an element.
-     */
-    mouseover(): JQuery;
-    /**
-     * Bind an event handler to the "mouseover" JavaScript event.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseover(handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "mouseover" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseover(eventData: Object, handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "mouseup" event on an element.
-     */
-    mouseup(): JQuery;
-    /**
-     * Bind an event handler to the "mouseup" JavaScript event.
-     *
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseup(handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "mouseup" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    mouseup(eventData: Object, handler: (eventObject: JQueryMouseEventObject) => any): JQuery;
-
-    /**
-     * Remove an event handler.
-     */
-    off(): JQuery;
-    /**
-     * Remove an event handler.
-     *
-     * @param events One or more space-separated event types and optional namespaces, or just namespaces, such as "click", "keydown.myPlugin", or ".myPlugin".
-     * @param selector A selector which should match the one originally passed to .on() when attaching event handlers.
-     * @param handler A handler function previously attached for the event(s), or the special value false.
-     */
-    off(events: string, selector?: string, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Remove an event handler.
-     *
-     * @param events One or more space-separated event types and optional namespaces, or just namespaces, such as "click", "keydown.myPlugin", or ".myPlugin".
-     * @param handler A handler function previously attached for the event(s), or the special value false. Takes handler with extra args that can be attached with on().
-     */
-    off(events: string, handler: (eventObject: JQueryEventObject, ...args: any[]) => any): JQuery;
-    /**
-     * Remove an event handler.
-     *
-     * @param events One or more space-separated event types and optional namespaces, or just namespaces, such as "click", "keydown.myPlugin", or ".myPlugin".
-     * @param handler A handler function previously attached for the event(s), or the special value false.
-     */
-    off(events: string, handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Remove an event handler.
-     *
-     * @param events An object where the string keys represent one or more space-separated event types and optional namespaces, and the values represent handler functions previously attached for the event(s).
-     * @param selector A selector which should match the one originally passed to .on() when attaching event handlers.
-     */
-    off(events: { [key: string]: any; }, selector?: string): JQuery;
-
-    /**
-     * Attach an event handler function for one or more events to the selected elements.
-     *
-     * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
-     * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false. Rest parameter args is for optional parameters passed to jQuery.trigger(). Note that the actual parameters on the event handler function must be marked as optional (? syntax).
-     */
-    on(events: string, handler: (eventObject: JQueryEventObject, ...args: any[]) => any): JQuery;
-    /**
-     * Attach an event handler function for one or more events to the selected elements.
-     *
-     * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
-     * @param data Data to be passed to the handler in event.data when an event is triggered.
-     * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.
-    */
-    on(events: string, data : any, handler: (eventObject: JQueryEventObject, ...args: any[]) => any): JQuery;
-    /**
-     * Attach an event handler function for one or more events to the selected elements.
-     *
-     * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
-     * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
-     * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.
-     */
-    on(events: string, selector: string, handler: (eventObject: JQueryEventObject, ...eventData: any[]) => any): JQuery;
-    /**
-     * Attach an event handler function for one or more events to the selected elements.
-     *
-     * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
-     * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
-     * @param data Data to be passed to the handler in event.data when an event is triggered.
-     * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.
-     */
-    on(events: string, selector: string, data: any, handler: (eventObject: JQueryEventObject, ...eventData: any[]) => any): JQuery;
-    /**
-     * Attach an event handler function for one or more events to the selected elements.
-     *
-     * @param events An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
-     * @param selector A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.
-     * @param data Data to be passed to the handler in event.data when an event occurs.
-     */
-    on(events: { [key: string]: any; }, selector?: string, data?: any): JQuery;
-    /**
-     * Attach an event handler function for one or more events to the selected elements.
-     *
-     * @param events An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
-     * @param data Data to be passed to the handler in event.data when an event occurs.
-     */
-    on(events: { [key: string]: any; }, data?: any): JQuery;
-
-    /**
-     * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
-     *
-     * @param events A string containing one or more JavaScript event types, such as "click" or "submit," or custom event names.
-     * @param handler A function to execute at the time the event is triggered.
-     */
-    one(events: string, handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
-     *
-     * @param events A string containing one or more JavaScript event types, such as "click" or "submit," or custom event names.
-     * @param data An object containing data that will be passed to the event handler.
-     * @param handler A function to execute at the time the event is triggered.
-     */
-    one(events: string, data: Object, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
-     *
-     * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
-     * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
-     * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.
-     */
-    one(events: string, selector: string, handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
-     *
-     * @param events One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".
-     * @param selector A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
-     * @param data Data to be passed to the handler in event.data when an event is triggered.
-     * @param handler A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.
-     */
-    one(events: string, selector: string, data: any, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
-     *
-     * @param events An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
-     * @param selector A selector string to filter the descendants of the selected elements that will call the handler. If the selector is null or omitted, the handler is always called when it reaches the selected element.
-     * @param data Data to be passed to the handler in event.data when an event occurs.
-     */
-    one(events: { [key: string]: any; }, selector?: string, data?: any): JQuery;
-
-    /**
-     * Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
-     *
-     * @param events An object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
-     * @param data Data to be passed to the handler in event.data when an event occurs.
-     */
-    one(events: { [key: string]: any; }, data?: any): JQuery;
-
-
-    /**
-     * Specify a function to execute when the DOM is fully loaded.
-     *
-     * @param handler A function to execute after the DOM is ready.
-     */
-    ready(handler: (jQueryAlias?: JQueryStatic) => any): JQuery;
-
-    /**
-     * Trigger the "resize" event on an element.
-     */
-    resize(): JQuery;
-    /**
-     * Bind an event handler to the "resize" JavaScript event.
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    resize(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "resize" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    resize(eventData: Object, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "scroll" event on an element.
-     */
-    scroll(): JQuery;
-    /**
-     * Bind an event handler to the "scroll" JavaScript event.
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    scroll(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "scroll" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    scroll(eventData: Object, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "select" event on an element.
-     */
-    select(): JQuery;
-    /**
-     * Bind an event handler to the "select" JavaScript event.
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    select(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "select" JavaScript event.
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    select(eventData: Object, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Trigger the "submit" event on an element.
-     */
-    submit(): JQuery;
-    /**
-     * Bind an event handler to the "submit" JavaScript event
-     *
-     * @param handler A function to execute each time the event is triggered.
-     */
-    submit(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "submit" JavaScript event
-     *
-     * @param eventData An object containing data that will be passed to the event handler.
-     * @param handler A function to execute each time the event is triggered.
-     */
-    submit(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Execute all handlers and behaviors attached to the matched elements for the given event type.
-     * 
-     * @param eventType A string containing a JavaScript event type, such as click or submit.
-     * @param extraParameters Additional parameters to pass along to the event handler.
-     */
-    trigger(eventType: string, extraParameters?: any[]|Object): JQuery;
-    /**
-     * Execute all handlers and behaviors attached to the matched elements for the given event type.
-     * 
-     * @param event A jQuery.Event object.
-     * @param extraParameters Additional parameters to pass along to the event handler.
-     */
-    trigger(event: JQueryEventObject, extraParameters?: any[]|Object): JQuery;
-
-    /**
-     * Execute all handlers attached to an element for an event.
-     * 
-     * @param eventType A string containing a JavaScript event type, such as click or submit.
-     * @param extraParameters An array of additional parameters to pass along to the event handler.
-     */
-    triggerHandler(eventType: string, ...extraParameters: any[]): Object;
-
-    /**
-     * Execute all handlers attached to an element for an event.
-     * 
-     * @param event A jQuery.Event object.
-     * @param extraParameters An array of additional parameters to pass along to the event handler.
-     */
-    triggerHandler(event: JQueryEventObject, ...extraParameters: any[]): Object;
-
-    /**
-     * Remove a previously-attached event handler from the elements.
-     * 
-     * @param eventType A string containing a JavaScript event type, such as click or submit.
-     * @param handler The function that is to be no longer executed.
-     */
-    unbind(eventType?: string, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Remove a previously-attached event handler from the elements.
-     * 
-     * @param eventType A string containing a JavaScript event type, such as click or submit.
-     * @param fls Unbinds the corresponding 'return false' function that was bound using .bind( eventType, false ).
-     */
-    unbind(eventType: string, fls: boolean): JQuery;
-    /**
-     * Remove a previously-attached event handler from the elements.
-     * 
-     * @param evt A JavaScript event object as passed to an event handler.
-     */
-    unbind(evt: any): JQuery;
-
-    /**
-     * Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
-     */
-    undelegate(): JQuery;
-    /**
-     * Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
-     * 
-     * @param selector A selector which will be used to filter the event results.
-     * @param eventType A string containing a JavaScript event type, such as "click" or "keydown"
-     * @param handler A function to execute at the time the event is triggered.
-     */
-    undelegate(selector: string, eventType: string, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
-     * 
-     * @param selector A selector which will be used to filter the event results.
-     * @param events An object of one or more event types and previously bound functions to unbind from them.
-     */
-    undelegate(selector: string, events: Object): JQuery;
-    /**
-     * Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
-     * 
-     * @param namespace A string containing a namespace to unbind all events from.
-     */
-    undelegate(namespace: string): JQuery;
-
-    /**
-     * Bind an event handler to the "unload" JavaScript event. (DEPRECATED from v1.8)
-     * 
-     * @param handler A function to execute when the event is triggered.
-     */
-    unload(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "unload" JavaScript event. (DEPRECATED from v1.8)
-     * 
-     * @param eventData A plain object of data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    unload(eventData?: any, handler?: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * The DOM node context originally passed to jQuery(); if none was passed then context will likely be the document. (DEPRECATED from v1.10)
-     */
-    context: Element;
-
-    jquery: string;
-
-    /**
-     * Bind an event handler to the "error" JavaScript event. (DEPRECATED from v1.8)
-     * 
-     * @param handler A function to execute when the event is triggered.
-     */
-    error(handler: (eventObject: JQueryEventObject) => any): JQuery;
-    /**
-     * Bind an event handler to the "error" JavaScript event. (DEPRECATED from v1.8)
-     * 
-     * @param eventData A plain object of data that will be passed to the event handler.
-     * @param handler A function to execute when the event is triggered.
-     */
-    error(eventData: any, handler: (eventObject: JQueryEventObject) => any): JQuery;
-
-    /**
-     * Add a collection of DOM elements onto the jQuery stack.
-     * 
-     * @param elements An array of elements to push onto the stack and make into a new jQuery object.
-     */
-    pushStack(elements: any[]): JQuery;
-    /**
-     * Add a collection of DOM elements onto the jQuery stack.
-     * 
-     * @param elements An array of elements to push onto the stack and make into a new jQuery object.
-     * @param name The name of a jQuery method that generated the array of elements.
-     * @param arguments The arguments that were passed in to the jQuery method (for serialization).
-     */
-    pushStack(elements: any[], name: string, arguments: any[]): JQuery;
-
-    /**
-     * Insert content, specified by the parameter, after each element in the set of matched elements.
-     * 
-     * param content1 HTML string, DOM element, array of elements, or jQuery object to insert after each element in the set of matched elements.
-     * param content2 One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert after each element in the set of matched elements.
-     */
-    after(content1: JQuery|any[]|Element|Text|string, ...content2: any[]): JQuery;
-    /**
-     * Insert content, specified by the parameter, after each element in the set of matched elements.
-     * 
-     * param func A function that returns an HTML string, DOM element(s), or jQuery object to insert after each element in the set of matched elements. Receives the index position of the element in the set as an argument. Within the function, this refers to the current element in the set.
-     */
-    after(func: (index: number, html: string) => string|Element|JQuery): JQuery;
-
-    /**
-     * Insert content, specified by the parameter, to the end of each element in the set of matched elements.
-     * 
-     * param content1 DOM element, array of elements, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.
-     * param content2 One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert at the end of each element in the set of matched elements.
-     */
-    append(content1: JQuery|any[]|Element|Text|string, ...content2: any[]): JQuery;
-    /**
-     * Insert content, specified by the parameter, to the end of each element in the set of matched elements.
-     * 
-     * param func A function that returns an HTML string, DOM element(s), or jQuery object to insert at the end of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, this refers to the current element in the set.
-     */
-    append(func: (index: number, html: string) => string|Element|JQuery): JQuery;
-
-    /**
-     * Insert every element in the set of matched elements to the end of the target.
-     * 
-     * @param target A selector, element, HTML string, array of elements, or jQuery object; the matched set of elements will be inserted at the end of the element(s) specified by this parameter.
-     */
-    appendTo(target: JQuery|any[]|Element|string): JQuery;
-
-    /**
-     * Insert content, specified by the parameter, before each element in the set of matched elements.
-     * 
-     * param content1 HTML string, DOM element, array of elements, or jQuery object to insert before each element in the set of matched elements.
-     * param content2 One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert before each element in the set of matched elements.
-     */
-    before(content1: JQuery|any[]|Element|Text|string, ...content2: any[]): JQuery;
-    /**
-     * Insert content, specified by the parameter, before each element in the set of matched elements.
-     * 
-     * param func A function that returns an HTML string, DOM element(s), or jQuery object to insert before each element in the set of matched elements. Receives the index position of the element in the set as an argument. Within the function, this refers to the current element in the set.
-     */
-    before(func: (index: number, html: string) => string|Element|JQuery): JQuery;
-
-    /**
-     * Create a deep copy of the set of matched elements.
-     * 
-     * param withDataAndEvents A Boolean indicating whether event handlers and data should be copied along with the elements. The default value is false.
-     * param deepWithDataAndEvents A Boolean indicating whether event handlers and data for all children of the cloned element should be copied. By default its value matches the first argument's value (which defaults to false).
-     */
-    clone(withDataAndEvents?: boolean, deepWithDataAndEvents?: boolean): JQuery;
-
-    /**
-     * Remove the set of matched elements from the DOM.
-     * 
-     * param selector A selector expression that filters the set of matched elements to be removed.
-     */
-    detach(selector?: string): JQuery;
-
-    /**
-     * Remove all child nodes of the set of matched elements from the DOM.
-     */
-    empty(): JQuery;
-
-    /**
-     * Insert every element in the set of matched elements after the target.
-     * 
-     * param target A selector, element, array of elements, HTML string, or jQuery object; the matched set of elements will be inserted after the element(s) specified by this parameter.
-     */
-    insertAfter(target: JQuery|any[]|Element|Text|string): JQuery;
-
-    /**
-     * Insert every element in the set of matched elements before the target.
-     * 
-     * param target A selector, element, array of elements, HTML string, or jQuery object; the matched set of elements will be inserted before the element(s) specified by this parameter.
-     */
-    insertBefore(target: JQuery|any[]|Element|Text|string): JQuery;
-
-    /**
-     * Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
-     * 
-     * param content1 DOM element, array of elements, HTML string, or jQuery object to insert at the beginning of each element in the set of matched elements.
-     * param content2 One or more additional DOM elements, arrays of elements, HTML strings, or jQuery objects to insert at the beginning of each element in the set of matched elements.
-     */
-    prepend(content1: JQuery|any[]|Element|Text|string, ...content2: any[]): JQuery;
-    /**
-     * Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
-     * 
-     * param func A function that returns an HTML string, DOM element(s), or jQuery object to insert at the beginning of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, this refers to the current element in the set.
-     */
-    prepend(func: (index: number, html: string) => string|Element|JQuery): JQuery;
-
-    /**
-     * Insert every element in the set of matched elements to the beginning of the target.
-     * 
-     * @param target A selector, element, HTML string, array of elements, or jQuery object; the matched set of elements will be inserted at the beginning of the element(s) specified by this parameter.
-     */
-    prependTo(target: JQuery|any[]|Element|string): JQuery;
-
-    /**
-     * Remove the set of matched elements from the DOM.
-     * 
-     * @param selector A selector expression that filters the set of matched elements to be removed.
-     */
-    remove(selector?: string): JQuery;
-
-    /**
-     * Replace each target element with the set of matched elements.
-     * 
-     * @param target A selector string, jQuery object, DOM element, or array of elements indicating which element(s) to replace.
-     */
-    replaceAll(target: JQuery|any[]|Element|string): JQuery;
-
-    /**
-     * Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.
-     * 
-     * param newContent The content to insert. May be an HTML string, DOM element, array of DOM elements, or jQuery object.
-     */
-    replaceWith(newContent: JQuery|any[]|Element|Text|string): JQuery;
-    /**
-     * Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.
-     * 
-     * param func A function that returns content with which to replace the set of matched elements.
-     */
-    replaceWith(func: () => Element|JQuery): JQuery;
-
-    /**
-     * Get the combined text contents of each element in the set of matched elements, including their descendants.
-     */
-    text(): string;
-    /**
-     * Set the content of each element in the set of matched elements to the specified text.
-     * 
-     * @param text The text to set as the content of each matched element. When Number or Boolean is supplied, it will be converted to a String representation.
-     */
-    text(text: string|number|boolean): JQuery;
-    /**
-     * Set the content of each element in the set of matched elements to the specified text.
-     * 
-     * @param func A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.
-     */
-    text(func: (index: number, text: string) => string): JQuery;
-
-    /**
-     * Retrieve all the elements contained in the jQuery set, as an array.
-     */
-    toArray(): any[];
-
-    /**
-     * Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.
-     */
-    unwrap(): JQuery;
-
-    /**
-     * Wrap an HTML structure around each element in the set of matched elements.
-     * 
-     * @param wrappingElement A selector, element, HTML string, or jQuery object specifying the structure to wrap around the matched elements.
-     */
-    wrap(wrappingElement: JQuery|Element|string): JQuery;
-    /**
-     * Wrap an HTML structure around each element in the set of matched elements.
-     * 
-     * @param func A callback function returning the HTML content or jQuery object to wrap around the matched elements. Receives the index position of the element in the set as an argument. Within the function, this refers to the current element in the set.
-     */
-    wrap(func: (index: number) => string|JQuery): JQuery;
-
-    /**
-     * Wrap an HTML structure around all elements in the set of matched elements.
-     * 
-     * @param wrappingElement A selector, element, HTML string, or jQuery object specifying the structure to wrap around the matched elements.
-     */
-    wrapAll(wrappingElement: JQuery|Element|string): JQuery;
-    wrapAll(func: (index: number) => string): JQuery;
-
-    /**
-     * Wrap an HTML structure around the content of each element in the set of matched elements.
-     * 
-     * @param wrappingElement An HTML snippet, selector expression, jQuery object, or DOM element specifying the structure to wrap around the content of the matched elements.
-     */
-    wrapInner(wrappingElement: JQuery|Element|string): JQuery;
-    /**
-     * Wrap an HTML structure around the content of each element in the set of matched elements.
-     * 
-     * @param func A callback function which generates a structure to wrap around the content of the matched elements. Receives the index position of the element in the set as an argument. Within the function, this refers to the current element in the set.
-     */
-    wrapInner(func: (index: number) => string): JQuery;
-
-    /**
-     * Iterate over a jQuery object, executing a function for each matched element.
-     * 
-     * @param func A function to execute for each matched element.
-     */
-    each(func: (index: number, elem: Element) => any): JQuery;
-
-    /**
-     * Retrieve one of the elements matched by the jQuery object.
-     * 
-     * @param index A zero-based integer indicating which element to retrieve.
-     */
-    get(index: number): HTMLElement;
-    /**
-     * Retrieve the elements matched by the jQuery object.
-     */
-    get(): any[];
-
-    /**
-     * Search for a given element from among the matched elements.
-     */
-    index(): number;
-    /**
-     * Search for a given element from among the matched elements.
-     * 
-     * @param selector A selector representing a jQuery collection in which to look for an element.
-     */
-    index(selector: string|JQuery|Element): number;
-
-    /**
-     * The number of elements in the jQuery object.
-     */
-    length: number;
-    /**
-     * A selector representing selector passed to jQuery(), if any, when creating the original set.
-     * version deprecated: 1.7, removed: 1.9
-     */
-    selector: string;
-    [index: string]: any;
-    [index: number]: HTMLElement;
-
-    /**
-     * Add elements to the set of matched elements.
-     * 
-     * @param selector A string representing a selector expression to find additional elements to add to the set of matched elements.
-     * @param context The point in the document at which the selector should begin matching; similar to the context argument of the $(selector, context) method.
-     */
-    add(selector: string, context?: Element): JQuery;
-    /**
-     * Add elements to the set of matched elements.
-     * 
-     * @param elements One or more elements to add to the set of matched elements.
-     */
-    add(...elements: Element[]): JQuery;
-    /**
-     * Add elements to the set of matched elements.
-     * 
-     * @param html An HTML fragment to add to the set of matched elements.
-     */
-    add(html: string): JQuery;
-    /**
-     * Add elements to the set of matched elements.
-     * 
-     * @param obj An existing jQuery object to add to the set of matched elements.
-     */
-    add(obj: JQuery): JQuery;
-
-    /**
-     * Get the children of each element in the set of matched elements, optionally filtered by a selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    children(selector?: string): JQuery;
-
-    /**
-     * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    closest(selector: string): JQuery;
-    /**
-     * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     * @param context A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.
-     */
-    closest(selector: string, context?: Element): JQuery;
-    /**
-     * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
-     * 
-     * @param obj A jQuery object to match elements against.
-     */
-    closest(obj: JQuery): JQuery;
-    /**
-     * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
-     * 
-     * @param element An element to match elements against.
-     */
-    closest(element: Element): JQuery;
-
-    /**
-     * Get an array of all the elements and selectors matched against the current element up through the DOM tree.
-     * 
-     * @param selectors An array or string containing a selector expression to match elements against (can also be a jQuery object).
-     * @param context A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.
-     */
-    closest(selectors: any, context?: Element): any[];
-
-    /**
-     * Get the children of each element in the set of matched elements, including text and comment nodes.
-     */
-    contents(): JQuery;
-
-    /**
-     * End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.
-     */
-    end(): JQuery;
-
-    /**
-     * Reduce the set of matched elements to the one at the specified index.
-     * 
-     * @param index An integer indicating the 0-based position of the element. OR An integer indicating the position of the element, counting backwards from the last element in the set.
-     *  
-     */
-    eq(index: number): JQuery;
-
-    /**
-     * Reduce the set of matched elements to those that match the selector or pass the function's test.
-     * 
-     * @param selector A string containing a selector expression to match the current set of elements against.
-     */
-    filter(selector: string): JQuery;
-    /**
-     * Reduce the set of matched elements to those that match the selector or pass the function's test.
-     * 
-     * @param func A function used as a test for each element in the set. this is the current DOM element.
-     */
-    filter(func: (index: number, element: Element) => any): JQuery;
-    /**
-     * Reduce the set of matched elements to those that match the selector or pass the function's test.
-     * 
-     * @param element An element to match the current set of elements against.
-     */
-    filter(element: Element): JQuery;
-    /**
-     * Reduce the set of matched elements to those that match the selector or pass the function's test.
-     * 
-     * @param obj An existing jQuery object to match the current set of elements against.
-     */
-    filter(obj: JQuery): JQuery;
-
-    /**
-     * Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    find(selector: string): JQuery;
-    /**
-     * Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
-     * 
-     * @param element An element to match elements against.
-     */
-    find(element: Element): JQuery;
-    /**
-     * Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
-     * 
-     * @param obj A jQuery object to match elements against.
-     */
-    find(obj: JQuery): JQuery;
-
-    /**
-     * Reduce the set of matched elements to the first in the set.
-     */
-    first(): JQuery;
-
-    /**
-     * Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    has(selector: string): JQuery;
-    /**
-     * Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
-     * 
-     * @param contained A DOM element to match elements against.
-     */
-    has(contained: Element): JQuery;
-
-    /**
-     * Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    is(selector: string): boolean;
-    /**
-     * Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
-     * 
-     * @param func A function used as a test for the set of elements. It accepts one argument, index, which is the element's index in the jQuery collection.Within the function, this refers to the current DOM element.
-     */
-    is(func: (index: number, element: Element) => boolean): boolean;
-    /**
-     * Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
-     * 
-     * @param obj An existing jQuery object to match the current set of elements against.
-     */
-    is(obj: JQuery): boolean;
-    /**
-     * Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
-     * 
-     * @param elements One or more elements to match the current set of elements against.
-     */
-    is(elements: any): boolean;
-
-    /**
-     * Reduce the set of matched elements to the final one in the set.
-     */
-    last(): JQuery;
-
-    /**
-     * Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.
-     * 
-     * @param callback A function object that will be invoked for each element in the current set.
-     */
-    map(callback: (index: number, domElement: Element) => any): JQuery;
-
-    /**
-     * Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    next(selector?: string): JQuery;
-
-    /**
-     * Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    nextAll(selector?: string): JQuery;
-
-    /**
-     * Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
-     * 
-     * @param selector A string containing a selector expression to indicate where to stop matching following sibling elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    nextUntil(selector?: string, filter?: string): JQuery;
-    /**
-     * Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
-     * 
-     * @param element A DOM node or jQuery object indicating where to stop matching following sibling elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    nextUntil(element?: Element, filter?: string): JQuery;
-    /**
-     * Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
-     * 
-     * @param obj A DOM node or jQuery object indicating where to stop matching following sibling elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    nextUntil(obj?: JQuery, filter?: string): JQuery;
-
-    /**
-     * Remove elements from the set of matched elements.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    not(selector: string): JQuery;
-    /**
-     * Remove elements from the set of matched elements.
-     * 
-     * @param func A function used as a test for each element in the set. this is the current DOM element.
-     */
-    not(func: (index: number, element: Element) => boolean): JQuery;
-    /**
-     * Remove elements from the set of matched elements.
-     * 
-     * @param elements One or more DOM elements to remove from the matched set.
-     */
-    not(elements: Element|Element[]): JQuery;
-    /**
-     * Remove elements from the set of matched elements.
-     * 
-     * @param obj An existing jQuery object to match the current set of elements against.
-     */
-    not(obj: JQuery): JQuery;
-
-    /**
-     * Get the closest ancestor element that is positioned.
-     */
-    offsetParent(): JQuery;
-
-    /**
-     * Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    parent(selector?: string): JQuery;
-
-    /**
-     * Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    parents(selector?: string): JQuery;
-
-    /**
-     * Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.
-     * 
-     * @param selector A string containing a selector expression to indicate where to stop matching ancestor elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    parentsUntil(selector?: string, filter?: string): JQuery;
-    /**
-     * Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.
-     * 
-     * @param element A DOM node or jQuery object indicating where to stop matching ancestor elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    parentsUntil(element?: Element, filter?: string): JQuery;
-    /**
-     * Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.
-     * 
-     * @param obj A DOM node or jQuery object indicating where to stop matching ancestor elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    parentsUntil(obj?: JQuery, filter?: string): JQuery;
-
-    /**
-     * Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    prev(selector?: string): JQuery;
-
-    /**
-     * Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    prevAll(selector?: string): JQuery;
-
-    /**
-     * Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.
-     * 
-     * @param selector A string containing a selector expression to indicate where to stop matching preceding sibling elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    prevUntil(selector?: string, filter?: string): JQuery;
-    /**
-     * Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.
-     * 
-     * @param element A DOM node or jQuery object indicating where to stop matching preceding sibling elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    prevUntil(element?: Element, filter?: string): JQuery;
-    /**
-     * Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.
-     * 
-     * @param obj A DOM node or jQuery object indicating where to stop matching preceding sibling elements.
-     * @param filter A string containing a selector expression to match elements against.
-     */
-    prevUntil(obj?: JQuery, filter?: string): JQuery;
-
-    /**
-     * Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
-     * 
-     * @param selector A string containing a selector expression to match elements against.
-     */
-    siblings(selector?: string): JQuery;
-
-    /**
-     * Reduce the set of matched elements to a subset specified by a range of indices.
-     * 
-     * @param start An integer indicating the 0-based position at which the elements begin to be selected. If negative, it indicates an offset from the end of the set.
-     * @param end An integer indicating the 0-based position at which the elements stop being selected. If negative, it indicates an offset from the end of the set. If omitted, the range continues until the end of the set.
-     */
-    slice(start: number, end?: number): JQuery;
-
-    /**
-     * Show the queue of functions to be executed on the matched elements.
-     * 
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     */
-    queue(queueName?: string): any[];
-    /**
-     * Manipulate the queue of functions to be executed, once for each matched element.
-     * 
-     * @param newQueue An array of functions to replace the current queue contents.
-     */
-    queue(newQueue: Function[]): JQuery;
-    /**
-     * Manipulate the queue of functions to be executed, once for each matched element.
-     * 
-     * @param callback The new function to add to the queue, with a function to call that will dequeue the next item.
-     */
-    queue(callback: Function): JQuery;
-    /**
-     * Manipulate the queue of functions to be executed, once for each matched element.
-     * 
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     * @param newQueue An array of functions to replace the current queue contents.
-     */
-    queue(queueName: string, newQueue: Function[]): JQuery;
-    /**
-     * Manipulate the queue of functions to be executed, once for each matched element.
-     * 
-     * @param queueName A string containing the name of the queue. Defaults to fx, the standard effects queue.
-     * @param callback The new function to add to the queue, with a function to call that will dequeue the next item.
-     */
-    queue(queueName: string, callback: Function): JQuery;
-}
-declare module "jquery" {
-    export = $;
-}
-declare var jQuery: JQueryStatic;
-declare var $: JQueryStatic;
\ No newline at end of file
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/jquery/typings.json b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/jquery/typings.json
deleted file mode 100644
index 0af7c54b42..0000000000
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/globals/jquery/typings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "resolution": "main",
-  "tree": {
-    "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/4cdfbe96b666eec5e1defbb519a62abf04e96764/jquery/jquery.d.ts",
-    "raw": "registry:dt/jquery#1.10.0+20160417213236",
-    "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/4cdfbe96b666eec5e1defbb519a62abf04e96764/jquery/jquery.d.ts"
-  }
-}
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/index.d.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/index.d.ts
deleted file mode 100644
index 7b1af70fde..0000000000
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/typings-ng1/index.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/// <reference path="globals/angular-animate/index.d.ts" />
-/// <reference path="globals/angular-mocks/index.d.ts" />
-/// <reference path="globals/angular-resource/index.d.ts" />
-/// <reference path="globals/angular-route/index.d.ts" />
-/// <reference path="globals/angular/index.d.ts" />
-/// <reference path="globals/jquery/index.d.ts" />
diff --git a/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts b/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts
index a56d735d1d..49f0ca75a9 100644
--- a/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts
+++ b/public/docs/_examples/upgrade-phonecat-3-final/e2e-spec.ts
@@ -1,5 +1,6 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
 
 // Angular E2E Testing Guide:
 // https://docs.angularjs.org/guide/e2e-testing
@@ -10,7 +11,7 @@ describe('PhoneCat Application', function() {
   it('should redirect `index.html` to `index.html#!/phones', function() {
     browser.get('index.html');
     browser.waitForAngular();
-    browser.getCurrentUrl().then(function(url) {
+    browser.getCurrentUrl().then(function(url: string) {
       expect(url.endsWith('/phones')).toBe(true);
     });
   });
@@ -28,11 +29,11 @@ describe('PhoneCat Application', function() {
 
       expect(phoneList.count()).toBe(20);
 
-      sendKeys(query, 'nexus');
+      query.sendKeys('nexus');
       expect(phoneList.count()).toBe(1);
 
       query.clear();
-      sendKeys(query, 'motorola');
+      query.sendKeys('motorola');
       expect(phoneList.count()).toBe(8);
     });
 
@@ -48,7 +49,7 @@ describe('PhoneCat Application', function() {
         });
       }
 
-      sendKeys(queryField, 'tablet');   // Let's narrow the dataset to make the assertions shorter
+      queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
 
       expect(getNames()).toEqual([
         'Motorola XOOM\u2122 with Wi-Fi',
@@ -72,7 +73,7 @@ describe('PhoneCat Application', function() {
         query.sendKeys(str.charAt(i));
       }
       element.all(by.css('.phones li a')).first().click();
-      browser.getCurrentUrl().then(function(url) {
+      browser.getCurrentUrl().then(function(url: string) {
         expect(url.endsWith('/phones/nexus-s')).toBe(true);
       });
     });
diff --git a/public/docs/_examples/user-input/e2e-spec.ts b/public/docs/_examples/user-input/e2e-spec.ts
index e2cf8d69eb..c0bb770848 100644
--- a/public/docs/_examples/user-input/e2e-spec.ts
+++ b/public/docs/_examples/user-input/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by, protractor } from 'protractor';
+
 describe('User Input Tests', function () {
 
   beforeAll(function () {
@@ -29,9 +31,8 @@ describe('User Input Tests', function () {
     let inputEle = mainEle.element(by.css('input'));
     let outputTextEle = mainEle.element(by.css('p'));
     expect(outputTextEle.getText()).toEqual('');
-    return sendKeys(inputEle, 'abc').then(function() {
-      expect(outputTextEle.getText()).toEqual('a | ab | abc |');
-    });
+    inputEle.sendKeys('abc');
+    expect(outputTextEle.getText()).toEqual('a | ab | abc |');
   });
 
   it('should support user input from a local template let (loopback)', function () {
@@ -39,9 +40,8 @@ describe('User Input Tests', function () {
     let inputEle = mainEle.element(by.css('input'));
     let outputTextEle = mainEle.element(by.css('p'));
     expect(outputTextEle.getText()).toEqual('');
-    return sendKeys(inputEle, 'abc').then(function() {
-      expect(outputTextEle.getText()).toEqual('abc');
-    });
+    inputEle.sendKeys('abc');
+    expect(outputTextEle.getText()).toEqual('abc');
   });
 
   it('should be able to combine click event with a local template var', function () {
@@ -49,19 +49,19 @@ describe('User Input Tests', function () {
     let inputEle = mainEle.element(by.css('input'));
     let outputTextEle = mainEle.element(by.css('p'));
     expect(outputTextEle.getText()).toEqual('');
-    return sendKeys(inputEle, 'abc').then(function() {
-      expect(outputTextEle.getText()).toEqual('a | ab | abc |');
-    });
+    inputEle.sendKeys('abc');
+    expect(outputTextEle.getText()).toEqual('a | ab | abc |');
   });
 
-  it('should be able to filter key events', async () => {
+  xit('should be able to filter key events', () => {
     let mainEle = element(by.css('key-up3'));
     let inputEle = mainEle.element(by.css('input'));
     let outputTextEle = mainEle.element(by.css('p'));
     expect(outputTextEle.getText()).toEqual('');
-    await sendKeys(inputEle, 'abc');
+    inputEle.sendKeys('abc');
     expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet');
-    await sendKeys(inputEle, protractor.Key.ENTER);
+    // broken atm, see https://github.com/angular/angular/issues/9419
+    inputEle.sendKeys(protractor.Key.ENTER);
     expect(outputTextEle.getText()).toEqual('abc');
   });
 
@@ -71,11 +71,10 @@ describe('User Input Tests', function () {
     let inputEle = mainEle.element(by.css('input'));
     let outputTextEle = mainEle.element(by.css('p'));
     expect(outputTextEle.getText()).toEqual('');
-    return sendKeys(inputEle, 'abc').then(function() {
-      expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet');
-      // change the focus
-      return prevInputEle.click();
-    }).then(function() {
+    inputEle.sendKeys('abc');
+    expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet');
+    // change the focus
+    prevInputEle.click().then(function() {
       expect(outputTextEle.getText()).toEqual('abc');
     });
   });
@@ -87,10 +86,9 @@ describe('User Input Tests', function () {
     let heroEles = mainEle.all(by.css('li'));
     let numHeroes: number;
     expect(heroEles.count()).toBeGreaterThan(0);
-    heroEles.count().then(function(count) {
+    heroEles.count().then(function(count: number) {
       numHeroes = count;
-      return sendKeys(inputEle, 'abc');
-    }).then(function() {
+      inputEle.sendKeys('abc');
       return addButtonEle.click();
     }).then(function() {
       expect(heroEles.count()).toEqual(numHeroes + 1, 'should be one more hero added');
diff --git a/public/docs/_examples/webpack/e2e-spec.ts b/public/docs/_examples/webpack/e2e-spec.ts
index 1e88bfccf1..9bca9810eb 100644
--- a/public/docs/_examples/webpack/e2e-spec.ts
+++ b/public/docs/_examples/webpack/e2e-spec.ts
@@ -1,5 +1,7 @@
-/// <reference path='../_protractor/e2e.d.ts' />
-'use strict';
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
 describe('QuickStart E2E Tests', function () {
 
   let expectedMsg = 'Hello from Angular App with Webpack';
diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json
index 3995e724db..6f3eb15a3e 100644
--- a/public/docs/_examples/webpack/ts/package.webpack.json
+++ b/public/docs/_examples/webpack/ts/package.webpack.json
@@ -8,19 +8,24 @@
     "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
     "postinstall": "typings install"
   },
-  "license": "MIT",
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
+    }
+  ],
   "dependencies": {
-    "@angular/common": "2.0.0",
-    "@angular/compiler": "2.0.0",
-    "@angular/core": "2.0.0",
-    "@angular/forms": "2.0.0",
-    "@angular/http": "2.0.0",
-    "@angular/platform-browser": "2.0.0",
-    "@angular/platform-browser-dynamic": "2.0.0",
-    "@angular/router": "3.0.0",
+    "@angular/common": "~2.1.0",
+    "@angular/compiler": "~2.1.0",
+    "@angular/core": "~2.1.0",
+    "@angular/forms": "~2.1.0",
+    "@angular/http": "~2.1.0",
+    "@angular/platform-browser": "~2.1.0",
+    "@angular/platform-browser-dynamic": "~2.1.0",
+    "@angular/router": "~3.1.0",
     "core-js": "^2.4.1",
     "rxjs": "5.0.0-beta.12",
-    "zone.js": "^0.6.23"
+    "zone.js": "^0.6.25"
   },
   "devDependencies": {
     "angular2-template-loader": "^0.4.0",
diff --git a/public/docs/_includes/_side-nav.jade b/public/docs/_includes/_side-nav.jade
index 1b592ed33c..89a956de69 100644
--- a/public/docs/_includes/_side-nav.jade
+++ b/public/docs/_includes/_side-nav.jade
@@ -63,10 +63,10 @@
 nav(class="sidenav l-pinned-left l-layer-4 l-offset-nav"  ng-class="appCtrl.showDocsNav ? 'is-visible' : ''")
   // SEARCH BAR
   header.sidenav-search.st-input-wrapper
-    form.st-input-inner
+    .st-input-inner
       label(for="search-io" class="is-hidden") 搜索文档
-      input(type="search" id="search-io" placeholder="搜索文档...")
-    button(class="mobile-trigger button" aria-label="查看文档菜单" ng-click="appCtrl.toggleDocsMenu($event)" md-button) 文档 <span class="icon icon-arrow-drop-down"></span>
+      input(type="text" class="st-default-search-input" placeholder="搜索文档...")
+    button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="appCtrl.toggleDocsMenu($event)" md-button) 文档 <span class="icon icon-arrow-drop-down"></span>
 
   ul(class="sidenav-links")
     li.sidenav-section.no-border
diff --git a/public/docs/_includes/styleguide/_styleguide.jade b/public/docs/_includes/styleguide/_styleguide.jade
index a59f700c7e..36684a8841 100644
--- a/public/docs/_includes/styleguide/_styleguide.jade
+++ b/public/docs/_includes/styleguide/_styleguide.jade
@@ -1,11 +1,11 @@
 .grid-fluid
   .c10
-    != partial("_layouts")
-    != partial("_code-examples")
-    != partial("_alerts")
-    != partial("_callouts")
-    != partial("_tables")
-    != partial("_aside")
-    != partial("_images")
+    include _layouts
+    include _code-examples
+    include _alerts
+    include _callouts
+    include _tables
+    include _aside
+    include _images
 
-//!= partial("_jump-nav")
+//include _jump-nav
diff --git a/public/docs/_layout-dart-api.jade b/public/docs/_layout-dart-api.jade
index d8e77353b6..cded545a26 100644
--- a/public/docs/_layout-dart-api.jade
+++ b/public/docs/_layout-dart-api.jade
@@ -1,40 +1,52 @@
 //- WARNING: _layout.jade and _layout-dart-api.jade should match in terms of content
 //- except that one uses Harp partial/yield and the other uses Jade extends/include.
-doctype
-html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Framework")
-  // template: public/docs/_layout-dart-api
-  head
-    include ../_includes/_head-include
-    block head-extra
-
-  block var-def
-  body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl as appCtrl")
-    include ../_includes/_main-nav
-    if current.path[2]
-      include _includes/_side-nav
+if jade2ng
+  .side-nav--offset
+    link(rel="stylesheet" href="/assets/css/vendor/dartdoc/bootstrap.min.css")
+    link(rel="stylesheet" href="/assets/css/vendor/dartdoc/styles.css")
     include ../_includes/_hero
     include ../_includes/_banner
+    .l-content-small.grid-fluid.docs-content
+      block main-content
+else
+  doctype
+  html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Framework")
+    // template: public/docs/_layout-dart-api
+    head
+      include ../_includes/_head-include
+      link(rel="stylesheet" href="/resources/css/vendor/dartdoc/bootstrap.min.css")
+      link(rel="stylesheet" href="/resources/css/vendor/dartdoc/styles.css")
+      block head-extra
 
-    if current.path[3] == 'api'
-      if current.path[4] == 'index'
+    block var-def
+    body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl as appCtrl")
+      include ../_includes/_main-nav
+      if current.path[2]
+        include _includes/_side-nav
+      include ../_includes/_hero
+      include ../_includes/_banner
+
+      if current.path[3] == 'api'
+        if current.path[4] == 'index'
+          block main-content
+        else
+          article(class="l-content-small grid-fluid docs-content")
+            block main-content
+      else if current.path.indexOf('cheatsheet') > 0
         block main-content
       else
-        article(class="l-content-small grid-fluid docs-content")
-          block main-content
-    else if current.path.indexOf('cheatsheet') > 0
-      block main-content
-    else
-      if current.path[3] == 'index' || current.path[3] == 'styleguide'
-        article(class="l-content-small grid-fluid docs-content")
-          block main-content
-      else
-        article(class="l-content-small grid-fluid docs-content")
-          div(class="c10")
-            .showcase
-              .showcase-content
-                block main-content
-                if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
-                  include ../_includes/_next-item
+        if current.path[3] == 'index' || current.path[3] == 'styleguide'
+          article(class="l-content-small grid-fluid docs-content")
+            block main-content
+        else
+          article(class="l-content-small grid-fluid docs-content")
+            div(class="c10")
+              .showcase
+                .showcase-content
+                  block main-content
+                  if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
+                    include ../_includes/_next-item
 
-    include ../_includes/_footer
-    include ../_includes/_scripts-include
+      include ../_includes/_footer
+      include ../_includes/_scripts-include
+      include ../_includes/_scripts-minimum
\ No newline at end of file
diff --git a/public/docs/_layout.jade b/public/docs/_layout.jade
index 1baf14d66c..b1f38cc12a 100644
--- a/public/docs/_layout.jade
+++ b/public/docs/_layout.jade
@@ -1,37 +1,45 @@
 //- WARNING: _layout.jade and _layout-dart-api.jade should match in terms of content
 //- except that one uses Harp partial/yield and the other uses Jade extends/include.
-doctype
-html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Framework")
-  // template: public/docs/_layout
-  head
-    != partial("../_includes/_head-include")
-    block head-extra
-
-  //-
-  body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl as appCtrl")
-    != partial("../_includes/_main-nav")
-    if current.path[2]
-      != partial("_includes/_side-nav")
+if jade2ng
+  .side-nav--offset
     != partial("../_includes/_hero")
     != partial("../_includes/_banner")
+    .l-content-small.grid-fluid.docs-content
+      != yield
+else
+  doctype
+  html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Framework")
+    // template: public/docs/_layout
+    head
+      != partial("../_includes/_head-include")
+      block head-extra
 
-    if current.path[3] == 'api'
-      if current.path[4] == 'index'
+    //-
+    body(class="l-offset-nav l-offset-side-nav"  ng-controller="AppCtrl as appCtrl")
+      != partial("../_includes/_main-nav")
+      if current.path[2]
+        != partial("_includes/_side-nav")
+      != partial("../_includes/_hero")
+      != partial("../_includes/_banner")
+
+      if current.path[3] == 'api'
+        if current.path[4] == 'index'
+          != yield
+        else
+          article(class="l-content-small grid-fluid docs-content")
+            != yield
+      else if current.path.indexOf('cheatsheet') > 0
         != yield
       else
-        article(class="l-content-small grid-fluid docs-content")
-          != yield
-    else if current.path.indexOf('cheatsheet') > 0
-      != yield
-    else
-      if current.path[3] == 'index' || current.path[3] == 'styleguide'
-        article(class="l-content-small grid-fluid docs-content")
-          != yield
-      else
-        article(class="l-content-small grid-fluid docs-content")
-          != yield
-            if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
-              != partial("../_includes/_next-item")
+        if current.path[3] == 'index' || current.path[3] == 'styleguide'
+          article(class="l-content-small grid-fluid docs-content")
+            != yield
+        else
+          article(class="l-content-small grid-fluid docs-content")
+            != yield
+              if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
+                != partial("../_includes/_next-item")
 
-    != partial("../_includes/_footer")
-    != partial("../_includes/_scripts-include")
\ No newline at end of file
+      != partial("../_includes/_footer")
+      != partial("../_includes/_scripts-include")
+      != partial("../_includes/_scripts-minimum")
\ No newline at end of file
diff --git a/public/docs/dart/latest/cookbook/_data.json b/public/docs/dart/latest/cookbook/_data.json
index e12d383b14..a747acd83f 100644
--- a/public/docs/dart/latest/cookbook/_data.json
+++ b/public/docs/dart/latest/cookbook/_data.json
@@ -53,12 +53,6 @@
     "hide": true
   },
 
-  "rc4-to-rc5": {
-    "title": "RC4 to RC5 Migration",
-    "intro": "Migrate your RC4 app to RC5 in minutes.",
-    "hide": true
-  },
-
   "set-document-title": {
     "title": "Set the Document Title",
     "intro": "Setting the document or window title using the Title service."
diff --git a/public/docs/dart/latest/cookbook/rc4-to-rc5.jade b/public/docs/dart/latest/cookbook/rc4-to-rc5.jade
deleted file mode 100644
index c743361ac8..0000000000
--- a/public/docs/dart/latest/cookbook/rc4-to-rc5.jade
+++ /dev/null
@@ -1 +0,0 @@
-include ../../../_includes/_ts-temp
diff --git a/public/docs/dart/latest/guide/router.jade b/public/docs/dart/latest/guide/router.jade
index 4782ba81d3..578b315727 100644
--- a/public/docs/dart/latest/guide/router.jade
+++ b/public/docs/dart/latest/guide/router.jade
@@ -1 +1,6 @@
-include ../../../_includes/_ts-temp
\ No newline at end of file
+include ../_util-fns
+
+:marked
+  This advanced guide hasn't yet been written.
+  To learn the basics of routing, read the Tour of Heroes tutorial:
+  [Routing Around the App](../tutorial/toh-pt5.html).
diff --git a/public/docs/dart/latest/guide/testing.jade b/public/docs/dart/latest/guide/testing.jade
index 4782ba81d3..c743361ac8 100644
--- a/public/docs/dart/latest/guide/testing.jade
+++ b/public/docs/dart/latest/guide/testing.jade
@@ -1 +1 @@
-include ../../../_includes/_ts-temp
\ No newline at end of file
+include ../../../_includes/_ts-temp
diff --git a/public/docs/dart/latest/testing/_data.json b/public/docs/dart/latest/testing/_data.json
deleted file mode 100644
index 2c63d566e7..0000000000
--- a/public/docs/dart/latest/testing/_data.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "_listtype": "ordered",
-
-  "index": {
-    "title": "Testing Overview",
-    "intro": "Techniques and practices for testing an Angular 2 app"
-  },
-
-   "jasmine-testing-101": {
-    "title": "Jasmine Testing 101",
-    "intro": "The basics of testing anything with Jasmine"
-  },
-
-  "application-under-test": {
-    "title": "The Application Under Test",
-    "intro": "A quick look at the application we will test"
-  },
-
-  "first-app-tests": {
-    "title": "First App Tests",
-    "intro": "The first test of a simple, non-Angular part of our app"
-  },
-
-  "testing-an-angular-pipe": {
-    "title": "Testing an Angular Pipe",
-    "intro": "We test an Angular-aware part of our app"
-  }
-}
\ No newline at end of file
diff --git a/public/docs/dart/latest/testing/application-under-test.jade b/public/docs/dart/latest/testing/application-under-test.jade
deleted file mode 100644
index 4782ba81d3..0000000000
--- a/public/docs/dart/latest/testing/application-under-test.jade
+++ /dev/null
@@ -1 +0,0 @@
-include ../../../_includes/_ts-temp
\ No newline at end of file
diff --git a/public/docs/dart/latest/testing/first-app-tests.jade b/public/docs/dart/latest/testing/first-app-tests.jade
deleted file mode 100644
index 4782ba81d3..0000000000
--- a/public/docs/dart/latest/testing/first-app-tests.jade
+++ /dev/null
@@ -1 +0,0 @@
-include ../../../_includes/_ts-temp
\ No newline at end of file
diff --git a/public/docs/dart/latest/testing/index.jade b/public/docs/dart/latest/testing/index.jade
deleted file mode 100644
index 4782ba81d3..0000000000
--- a/public/docs/dart/latest/testing/index.jade
+++ /dev/null
@@ -1 +0,0 @@
-include ../../../_includes/_ts-temp
\ No newline at end of file
diff --git a/public/docs/dart/latest/testing/jasmine-testing-101.jade b/public/docs/dart/latest/testing/jasmine-testing-101.jade
deleted file mode 100644
index 4782ba81d3..0000000000
--- a/public/docs/dart/latest/testing/jasmine-testing-101.jade
+++ /dev/null
@@ -1 +0,0 @@
-include ../../../_includes/_ts-temp
\ No newline at end of file
diff --git a/public/docs/dart/latest/testing/testing-an-angular-pipe.jade b/public/docs/dart/latest/testing/testing-an-angular-pipe.jade
deleted file mode 100644
index 4782ba81d3..0000000000
--- a/public/docs/dart/latest/testing/testing-an-angular-pipe.jade
+++ /dev/null
@@ -1 +0,0 @@
-include ../../../_includes/_ts-temp
\ No newline at end of file
diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json
index 67e96e2f7f..aff615b2b4 100644
--- a/public/docs/js/latest/_data.json
+++ b/public/docs/js/latest/_data.json
@@ -4,7 +4,7 @@
     "title": "Angular Docs",
     "subtitle": "JavaScript",
     "menuTitle": "Docs Home",
-    "banner": "Angular release is <b>2.0.0</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>change log</a> to see enhancements, fixes, and breaking changes."
+    "banner": "Angular release is <b>2.1</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>change log</a> to see enhancements, fixes, and breaking changes."
   },
 
   "quickstart": {
diff --git a/public/docs/js/latest/api/_data.json b/public/docs/js/latest/api/_data.json
index 2f96733bfa..a732590638 100644
--- a/public/docs/js/latest/api/_data.json
+++ b/public/docs/js/latest/api/_data.json
@@ -1,6 +1,6 @@
 {
   "_listtype": "ordered",
   "index" : {
-    "title" : "API 2.0 Preview"
+    "title" : "API Reference"
   }
 }
\ No newline at end of file
diff --git a/public/docs/js/latest/cookbook/_data.json b/public/docs/js/latest/cookbook/_data.json
index 5660152bd5..3f319736d6 100644
--- a/public/docs/js/latest/cookbook/_data.json
+++ b/public/docs/js/latest/cookbook/_data.json
@@ -48,12 +48,6 @@
     "hide": true
   },
 
-  "rc4-to-rc5": {
-    "title": "RC4 to RC5 Migration",
-    "intro": "Migrate your RC4 app to RC5 in minutes.",
-    "hide": true
-  },
-
   "set-document-title": {
     "title": "Set the Document Title",
     "intro": "Setting the document or window title using the Title service."
diff --git a/public/docs/js/latest/cookbook/rc4-to-rc5.jade b/public/docs/js/latest/cookbook/rc4-to-rc5.jade
deleted file mode 100644
index c743361ac8..0000000000
--- a/public/docs/js/latest/cookbook/rc4-to-rc5.jade
+++ /dev/null
@@ -1 +0,0 @@
-include ../../../_includes/_ts-temp
diff --git a/public/docs/js/latest/cookbook/ts-to-js.jade b/public/docs/js/latest/cookbook/ts-to-js.jade
index 3a2287299b..7f39c9b446 100644
--- a/public/docs/js/latest/cookbook/ts-to-js.jade
+++ b/public/docs/js/latest/cookbook/ts-to-js.jade
@@ -357,8 +357,7 @@ table(width="100%")
         在TypeScript里，属性装饰器经常被用来为组件和指令提供额外的元数据。
 
         For [inputs and outputs](../guide/template-syntax.html#inputs-outputs), 
-        we use [`@Input`](../api/core/index/Input-var.html)
-        and [`@Output`](../api/core/index/Output-var.html) property decorators.
+        we use `@Input` and `@Output` property decorators.
         They may optionally specify input and output binding names if we want them to be
         different from the class property names.
         
@@ -498,14 +497,14 @@ table(width="100%")
 
         We can attach additional decorators to constructor parameters
         to qualify the injection behavior. We can mark
-        optional dependencies with the [`@Optional`](../api/core/index/Optional-var.html),
-        inject host element attributes with [`@Attribute`](../api/core/index/Attribute-var.html),
-        inject content child queries with [`@Query`](../api/core/index/Query-var.html)
-        and inject view child queries with [`@ViewQuery`](../api/core/index/ViewQuery-var.html).
+        optional dependencies with the [`@Optional`](../api/core/index/Optional-decorator.html),
+        inject host element attributes with [`@Attribute`](../api/core/index/Attribute-interface.html),
+        inject content child queries with [`@ContentChild`](../api/core/index/ContentChild-decorator.html)
+        and inject view child queries with [`@ViewChild`](../api/core/index/ViewChild-decorator.html).
         
-        我们可以往构造函数中附加额外的装饰器来调整注入行为。比如使用[`@Optional`](../api/core/index/Optional-var.html)来标记依赖是可选的，
-        用[`@Attribute`](../api/core/index/Attribute-var.html)来注入宿主元素的属性(Attribute)，
-        用[`@Query`](../api/core/index/Query-var.html)来注入投影内容的子查询，用[`@ViewQuery`](../api/core/index/ViewQuery-var.html)来注入视图的子查询。
+        我们可以往构造函数中附加额外的装饰器来调整注入行为。比如使用[`@Optional`](../api/core/index/Optional-decorator.html)来标记依赖是可选的，
+        用[`@Attribute`](../api/core/index/Attribute-interface.html)来注入宿主元素的属性(Attribute)，
+        用[`@ContentChild`](../api/core/index/ContentChild-decorator.html)来注入投影内容的子查询，用[`@ViewChild`](../api/core/index/ViewChild-decorator.html)来注入视图的子查询。
 
       +makeExample('cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts')(format="." )
 
@@ -532,8 +531,8 @@ table(width="100%")
 
       :marked
         We can apply other additional parameter decorators such as
-        [`@Host`](../api/core/index/Host-var.html) and
-        [`@SkipSelf`](../api/core/index/SkipSelf-var.html) in the same way -
+        [`@Host`](../api/core/index/Host-decorator.html) and
+        [`@SkipSelf`](../api/core/index/SkipSelf-decorator.html) in the same way -
         by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the
         parameters array.
         
@@ -564,9 +563,9 @@ table(width="100%")
         ### `Host`(宿主)装饰器
 
         We can use host property decorators to bind a host element to a component or directive.
-        The [`@HostBinding`](../api/core/index/HostBinding-var.html) decorator
+        The [`@HostBinding`](../api/core/index/HostBinding-interface.html) decorator
         binds host element properties to component data properties. 
-        The [`@HostListener`](../api/core/index/HostListener-var.html) decorator bimds
+        The [`@HostListener`](../api/core/index/HostListener-interface.html) decorator bimds
         host element events to component event handlers.
         
         我们可以使用宿主属性装饰器来把宿主元素绑定到组件或指令。
@@ -619,21 +618,21 @@ table(width="100%")
         
         有好几个属性装饰器可以用来查询组件或指令的各级子节点。
         
-        The [`@ViewChild`](../api/core/index/ViewChild-var.html) and
-        [`@ViewChildren`](../api/core/index/ViewChildren-var.html) property decorators
+        The [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
+        [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html) property decorators
         allow a component to query instances of other components that are used in
         its view.
         
-        [`@ViewChild`](../api/core/index/ViewChild-var.html)和
-        [`@ViewChildren`](../api/core/index/ViewChildren-var.html)属性装饰器允许组件查询
+        [`@ViewChild`](../api/core/index/ViewChild-decorator.html)和
+        [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html)属性装饰器允许组件查询
         在自己模板里用到的其它组件实例。
         
         
       +makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'view')(format="." )
 
       :marked
-        The [`@ContentChild`](../api/core/index/ContentChild-var.html) and
-        [`@ContentChildren`](../api/core/index/ContentChildren-var.html) property decorators
+        The [`@ContentChild`](../api/core/index/ContentChild-decorator.html) and
+        [`@ContentChildren`](../api/core/index/ContentChildren-decorator.html) property decorators
         allow a component to query instances of other components that have been projected
         into its view from elsewhere.
         
diff --git a/public/docs/js/latest/guide/forms.jade b/public/docs/js/latest/guide/forms.jade
index c9e90f88eb..b0148eae79 100644
--- a/public/docs/js/latest/guide/forms.jade
+++ b/public/docs/js/latest/guide/forms.jade
@@ -485,7 +485,7 @@ figure.image-display
 .l-sub-section
   :marked
     Why "ngModel"? 
-    A directive's [exportAs](../api/core/index/DirectiveMetadata-class.html#!#exportAs) property 
+    A directive's [exportAs](../api/core/index/Directive-decorator.html) property 
     tells Angular how to link the reference variable to the directive.
     We set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel".
     
@@ -497,7 +497,7 @@ figure.image-display
   :marked
     ### The NgForm directive
     We just set a template local variable with the value of an `NgForm` directive. 
-    Why did that work? We didn't add the **[`NgForm`](../api/common/index/NgForm-directive.html) directive** explicitly.
+    Why did that work? We didn't add the **[`NgForm`](../api/forms/index/NgForm-directive.html) directive** explicitly.
     
     Angular added it surreptitiously, wrapping it around the `<form>` element
 
diff --git a/public/docs/js/latest/guide/style-guide.jade b/public/docs/js/latest/guide/style-guide.jade
index 4782ba81d3..c743361ac8 100644
--- a/public/docs/js/latest/guide/style-guide.jade
+++ b/public/docs/js/latest/guide/style-guide.jade
@@ -1 +1 @@
-include ../../../_includes/_ts-temp
\ No newline at end of file
+include ../../../_includes/_ts-temp
diff --git a/public/docs/js/latest/guide/testing.jade b/public/docs/js/latest/guide/testing.jade
index 4782ba81d3..c743361ac8 100644
--- a/public/docs/js/latest/guide/testing.jade
+++ b/public/docs/js/latest/guide/testing.jade
@@ -1 +1 @@
-include ../../../_includes/_ts-temp
\ No newline at end of file
+include ../../../_includes/_ts-temp
diff --git a/public/docs/js/latest/testing/_data.json b/public/docs/js/latest/testing/_data.json
deleted file mode 100644
index 2c63d566e7..0000000000
--- a/public/docs/js/latest/testing/_data.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "_listtype": "ordered",
-
-  "index": {
-    "title": "Testing Overview",
-    "intro": "Techniques and practices for testing an Angular 2 app"
-  },
-
-   "jasmine-testing-101": {
-    "title": "Jasmine Testing 101",
-    "intro": "The basics of testing anything with Jasmine"
-  },
-
-  "application-under-test": {
-    "title": "The Application Under Test",
-    "intro": "A quick look at the application we will test"
-  },
-
-  "first-app-tests": {
-    "title": "First App Tests",
-    "intro": "The first test of a simple, non-Angular part of our app"
-  },
-
-  "testing-an-angular-pipe": {
-    "title": "Testing an Angular Pipe",
-    "intro": "We test an Angular-aware part of our app"
-  }
-}
\ No newline at end of file
diff --git a/public/docs/js/latest/testing/application-under-test.jade b/public/docs/js/latest/testing/application-under-test.jade
deleted file mode 100644
index 4782ba81d3..0000000000
--- a/public/docs/js/latest/testing/application-under-test.jade
+++ /dev/null
@@ -1 +0,0 @@
-include ../../../_includes/_ts-temp
\ No newline at end of file
diff --git a/public/docs/js/latest/testing/first-app-tests.jade b/public/docs/js/latest/testing/first-app-tests.jade
deleted file mode 100644
index 4782ba81d3..0000000000
--- a/public/docs/js/latest/testing/first-app-tests.jade
+++ /dev/null
@@ -1 +0,0 @@
-include ../../../_includes/_ts-temp
\ No newline at end of file
diff --git a/public/docs/js/latest/testing/index.jade b/public/docs/js/latest/testing/index.jade
deleted file mode 100644
index 4782ba81d3..0000000000
--- a/public/docs/js/latest/testing/index.jade
+++ /dev/null
@@ -1 +0,0 @@
-include ../../../_includes/_ts-temp
\ No newline at end of file
diff --git a/public/docs/js/latest/testing/jasmine-testing-101.jade b/public/docs/js/latest/testing/jasmine-testing-101.jade
deleted file mode 100644
index 4782ba81d3..0000000000
--- a/public/docs/js/latest/testing/jasmine-testing-101.jade
+++ /dev/null
@@ -1 +0,0 @@
-include ../../../_includes/_ts-temp
\ No newline at end of file
diff --git a/public/docs/js/latest/testing/testing-an-angular-pipe.jade b/public/docs/js/latest/testing/testing-an-angular-pipe.jade
deleted file mode 100644
index 4782ba81d3..0000000000
--- a/public/docs/js/latest/testing/testing-an-angular-pipe.jade
+++ /dev/null
@@ -1 +0,0 @@
-include ../../../_includes/_ts-temp
\ No newline at end of file
diff --git a/public/docs/ts/_cache/tutorial/toh-pt5.jade b/public/docs/ts/_cache/tutorial/toh-pt5.jade
index c845938fff..f0adefb421 100644
--- a/public/docs/ts/_cache/tutorial/toh-pt5.jade
+++ b/public/docs/ts/_cache/tutorial/toh-pt5.jade
@@ -2,7 +2,7 @@
 
 block includes
   include ../_util-fns
-  - var _appRoutingTsVsAppComp = 'app.routing.ts'
+  - var _appRoutingTsVsAppComp = 'app-routing.module.ts'
   - var _declsVsDirectives = 'declarations'
   - var _RoutesVsAtRouteConfig = 'Routes'
   - var _RouterModuleVsRouterDirectives = 'RouterModule'
@@ -202,7 +202,7 @@ block router-config-intro
 
   Let's define our first route as a route to the heroes component:
 
-- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.routing.ts'
+- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app-routing.module.ts'
 +makeExcerpt('app/' + _file + ' (heroes route)', 'heroes')
 
 - var _are = _docsFor == 'dart' ? 'takes' : 'are'
@@ -227,7 +227,7 @@ block router-config-intro
     We'll export a `routing` constant initialized using the `RouterModule.forRoot` method applied to our !{_array} of routes.
     This method returns a **configured router module** that we'll add to our root NgModule, `AppModule`.
 
-  +makeExcerpt('app/app.routing.1.ts (excerpt)', 'routing-export')
+  +makeExcerpt('app/app-routing.module.1.ts (excerpt)', 'routing-export')
 
   .l-sub-section
     :marked
@@ -237,9 +237,9 @@ block router-config-intro
   :marked
     ### Make the router available
 
-    We've setup initial routes in the `app.routing.ts` file. Now we'll add it to our root NgModule.
+    We've setup initial routes in the `app-routing.module.ts` file. Now we'll add it to our root NgModule.
 
-    Import the `routing` constant from `app.routing.ts` and add it the `imports` !{_array} of `AppModule`.
+    Import the `routing` constant from `app-routing.module.ts` and add it the `imports` !{_array} of `AppModule`.
 
   +makeExcerpt('app/app.module.ts', 'routing')
 
@@ -319,7 +319,7 @@ block routerLink
   Import the dashboard component and
   add the following route definition to the `!{_RoutesVsAtRouteConfig}` !{_array} of definitions.
 
-- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app.routing.ts'
+- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app-routing.module.ts'
 +makeExcerpt(_file + ' (Dashboard route)', 'dashboard')
 
 +ifDocsFor('ts|js')
@@ -340,7 +340,7 @@ block redirect-vs-use-as-default
     We can use a redirect route to make this happen. Add the following
     to our array of route definitions:
 
-  +makeExcerpt('app/app.routing.ts','redirect')
+  +makeExcerpt('app/app-routing.module.ts','redirect')
 
   .l-sub-section
     :marked
@@ -472,7 +472,7 @@ code-example(format='').
 
   Here's the *route definition* we'll use.
 
-- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.routing.ts'
+- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app-routing.module.ts'
 +makeExcerpt(_file + ' (hero detail)','hero-detail')
 
 :marked
@@ -639,7 +639,7 @@ block extract-id
   token in the parameterized hero detail route definition we added to
   `!{_appRoutingTsVsAppComp}` earlier in the chapter:
 
-- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.routing.ts'
+- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app-routing.module.ts'
 +makeExcerpt(_file + ' (hero detail)', 'hero-detail')
 
 :marked
@@ -868,7 +868,7 @@ block file-tree-end
         .file app.component.css
         .file app.component.ts
         .file app.module.ts
-        .file app.routing.ts
+        .file app-routing.module.ts
         .file dashboard.component.css
         .file dashboard.component.html
         .file dashboard.component.ts
diff --git a/public/docs/ts/_cache/tutorial/toh-pt6.jade b/public/docs/ts/_cache/tutorial/toh-pt6.jade
index 8f17d79380..54c2b2e22c 100644
--- a/public/docs/ts/_cache/tutorial/toh-pt6.jade
+++ b/public/docs/ts/_cache/tutorial/toh-pt6.jade
@@ -539,7 +539,7 @@ block filetree
         .file app.component.ts
         .file app.component.css
         .file app.module.ts
-        .file app.routing.ts
+        .file app-routing.module.ts
         .file dashboard.component.css
         .file dashboard.component.html
         .file dashboard.component.ts
diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json
index 56387e39b2..53184544ad 100644
--- a/public/docs/ts/latest/_data.json
+++ b/public/docs/ts/latest/_data.json
@@ -4,7 +4,7 @@
     "title": "Angular中文文档",
     "subtitle": "TypeScript",
     "menuTitle": "文档首页",
-    "banner": "欢迎来到<b>Angular in TypeScript</b>! 当前的Angular版本是<b>2.0.0</b>。请参考<a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>变更记录</a>了解最新的增强、修复和破坏性变更。"
+    "banner": "当前的Angular版本是<b>2.1</b>。请查看<a href='guide/change-log.html' title='文档更新记录'>文档更新记录</a>. 参见<a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank' title='Angular产品更新'>Angular更新记录</a> 了解Angular产品的最新的增强、修复和破环性变更。"
   },
 
   "cli-quickstart": {
diff --git a/public/docs/ts/latest/api/_data.json b/public/docs/ts/latest/api/_data.json
index 821e4ce2c2..f1fa06aea7 100644
--- a/public/docs/ts/latest/api/_data.json
+++ b/public/docs/ts/latest/api/_data.json
@@ -1,6 +1,6 @@
 {
   "_listtype": "ordered",
   "index" : {
-    "title" : "API 2.0预览"
+    "title" : "API 参考"
   }
 }
diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json
index e73c977bd0..205eac5ec2 100644
--- a/public/docs/ts/latest/cookbook/_data.json
+++ b/public/docs/ts/latest/cookbook/_data.json
@@ -51,11 +51,6 @@
     "intro": "把应用的模板文本翻译成多种语言"
   },
 
-  "rc4-to-rc5": {
-    "title": "如何从RC4迁移到RC5",
-    "intro": "分分钟把RC4迁移到RC5"
-  },
-
   "set-document-title": {
     "title": "设置文档标题",
     "intro": "使用Title服务来设置文档标题或窗口标题"
diff --git a/public/docs/ts/latest/cookbook/aot-compiler.jade b/public/docs/ts/latest/cookbook/aot-compiler.jade
index a4b51c0b9f..82dd308ed4 100644
--- a/public/docs/ts/latest/cookbook/aot-compiler.jade
+++ b/public/docs/ts/latest/cookbook/aot-compiler.jade
@@ -26,31 +26,29 @@ a#toc
   * [启动应用服务器](#serve)
   * [Source Code](#source-code)
   * [源码](#source-code)
+  * [Tour of Heroes](#toh)
+  * [英雄指南](#toh)
 
 a#overview
 .l-main-section
 :marked
   ## Overview
-  ## 概览
-  Angular component templates consist of a mix of standard html and Angular syntax (e.g. `ngIf`, `ngFor`). 
-  
-  Angular组件的模板由标准HTML和Angular特有的语法（比如`ngIf`、`ngFor`）组成。
-  
-  Expressions like `ngIf` and `ngFor` are specific to Angular. The browser cannot execute them directly.
-  
-  像`ngIf`和`ngFor`这样的表达式是专属于Angular的，浏览器无法直接执行它们。
-  
-  Before the browser can render the application, Angular components and their templates must be converted to executable JavaScript. 
-  We refer to this step as _Angular compilation_ or just plain _compilation_.
-  
-  在浏览器渲染该应用之前，Angular组件及其模板必须被转换成可执行的JavaScript。
-  我们把这一步叫做*Angular编译*或就叫普通的*编译*。
 
-  You can compile the app in the browser, at runtime, as the application loads, using the _Just-in-Time_ (JiT) compiler. 
+  An Angular application consist largely of components and their HTML templates.
+  Before the browser can render the application, 
+  the components and templates must be converted to executable JavaScript by the _Angular compiler_.
+.l-sub-section
+  :marked
+    <a href="https://www.youtube.com/watch?v=kW9cJsvcsGo" target="_blank">Watch compiler author Tobias Bosch explain the Angular Compiler</a> at AngularConnect 2016.
+:marked
+  You can compile the app in the browser, at runtime, as the application loads, using the **_Just-in-Time_ (JiT) compiler**. 
   This is the standard development approach shown throughout the documentation.
+  It's great .. but it has shortcomings.
   
   你可以在浏览器中使用*即时编译器*（Just-in-Time - JiT）在运行期间编译该应用，也就是在应用加载时。
   这是本文档中展示过的标准开发方式。
+  它很不错，但是有自己的缺点。  
+  
 
   JiT compilation incurs a runtime performance penalty. 
   Views take longer to render because of the in-browser compilation step. 
@@ -63,10 +61,11 @@ a#overview
   由于应用包含了Angular编译器以及大量实际上并不需要的库代码，所以文件体积也会更大。
   更大的应用需要更长的时间进行传输，加载也更慢。
   
-  This cookbook describes how to improve performance by compiling at build time instead,
-  using a process called _Ahead-of-Time_ compilation (AoT).
-
-  这本烹饪指南描述如何改用“构建时编译”来增强性能，这种方式被称为“预（AoT）编译”。
+  Compilation can uncover many component-template binding errors.
+  JiT compilation discovers them at runtime which is later than we'd like.
+  
+  The **_Ahead-of-Time_ (AoT) compiler** can catch template errors early and improve performance 
+  by compiling at build time as you'll learn in this chapter.
 
 
 a#aot-jit
@@ -86,10 +85,6 @@ a#aot-jit
   
   ### 为什么需要AoT编译？
 
-  The performance improvement from doing AoT compilation can be significant for three reasons:
-
-  使用AoT编译器提升性能的重要意义包括三点：
-
   *Faster rendering*
   
   *渲染得更快*
@@ -120,6 +115,19 @@ a#aot-jit
   如果应用已经编译过了，自然不需要再下载Angular编译器了。
   该编译器差不多占了Angular自身体积的一半儿，所以，省略它可以显著减小应用的体积。
 
+
+  *Detect template errors earlier*
+
+  The AoT compiler detects and reports template binding errors during the build step
+  before users can see them.
+
+
+  *Better security*
+
+  AoT compiles HTML templates and components into JavaScript files long before they are served to the client.
+  With no templates to read and no risky client-side HTML or JavaScript evaluation,
+  there are fewer opportunities for injection attacks.
+
 a#compile
 .l-main-section
 :marked
@@ -131,7 +139,7 @@ a#compile
   
   ### 为离线编译做准备
 
-  This cookbook takes the <a href='/docs/ts/latest/quickstart.html'>QuickStart</a> as its starting point.
+  Take the <a href='/docs/ts/latest/quickstart.html'>QuickStart</a> as a starting point.
   A few minor changes to the lone `app.component` lead to these two class and html files:
 
   本烹饪书以<a href='/docs/ts/latest/quickstart.html'>“快速起步”</a>作为起始点。
@@ -143,7 +151,7 @@ a#compile
   null,
   `app/app.component.html,
    app/app.component.ts`
-)
+)(format='.')
 
 :marked
   Install a few new npm dependencies with the following command: 
@@ -201,6 +209,11 @@ code-example(format='.').
   
 code-example(format='.').
   node_modules/.bin/ngc -p tsconfig-aot.json
+.l-sub-section
+  :marked
+    Windows users should surround the `ngc` command in double quotes:
+  code-example(format='.').
+    "node_modules/.bin/ngc" -p tsconfig-aot.json
 :marked
   `ngc` expects the `-p` switch to point to a `tsconfig.json` file or a folder containing a `tsconfig.json` file.
   
@@ -341,14 +354,11 @@ a#tree-shaking
 code-example(format='.').
   npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-uglify --save-dev
 :marked
-  Next, create a configuration file to tell Rollup how to process the application. 
-  The configuration file in this cookbook is named `rollup.js` and looks like this.
-  
-  接下来，创建一个配置文件，来告诉Rollup如何处理该应用。
-  这个烹饪宝典中的配置文件被称为`rollup.js`，它是这样的：
-
-+makeExample('cb-aot-compiler/ts/rollup.js', null, 'rollup.js')(format='.')
+  Next, create a configuration file (`rollup-config.js`)
+  in the project root directory to tell Rollup how to process the application. 
+  The cookbook configuration file looks like this.
 
++makeExample('cb-aot-compiler/ts/rollup-config.js', null, 'rollup-config.js')(format='.')
 :marked
   It tells Rollup that the app entry point is `app/main.js` .
   The `dest` attribute tells Rollup to create a bundle called `build.js` in the `dist` folder.
@@ -390,7 +400,7 @@ code-example(format='.').
   幸运的是，有一个Rollup插件，它会修改*RxJS*，以使用Rollup所需的ES`import`和`export`语句。
   然后Rollup就可以把该应用中用到的那部分`RxJS`代码留在“捆”文件中了。
 
-+makeExample('cb-aot-compiler/ts/rollup.js','commonjs','rollup.js (CommonJs to ES2015 Plugin)')(format='.')     
++makeExample('cb-aot-compiler/ts/rollup-config.js','commonjs','rollup-config.js (CommonJs to ES2015 Plugin)')(format='.')     
 
 :marked
   *Minification* 
@@ -403,7 +413,7 @@ code-example(format='.').
   Rollup做摇树优化时会大幅减小代码体积。最小化过程则会让它更小。
   本烹饪宝典依赖于Rollup插件*uglify*来最小化并混淆代码。
   
-+makeExample('cb-aot-compiler/ts/rollup.js','uglify','rollup.js (CommonJs to ES2015 Plugin)')(format='.') 
++makeExample('cb-aot-compiler/ts/rollup-config.js','uglify','rollup-config.js (CommonJs to ES2015 Plugin)')(format='.') 
 
 .l-sub-section
   :marked
@@ -421,7 +431,7 @@ code-example(format='.').
   通过下列命令执行Rollup过程：
   
 code-example(format='.').
-  node_modules/.bin/rollup -c rollup.js
+  node_modules/.bin/rollup -c rollup-config.js
 
 .l-sub-section
   :marked
@@ -476,26 +486,178 @@ code-example(format='.').
 a#source-code
 .l-main-section
 :marked
-  ## Source Code
-  
-  ## 源代码
+  ## AoT QuickStart Source Code
 
-  Here is the pertinent AoT source code for this cookbook:
-  
-  下面是与本烹饪宝典有关的AoT源码：
-  
+  Here's the pertinent source code:
 +makeTabs(
   `cb-aot-compiler/ts/app/app.component.html,
    cb-aot-compiler/ts/app/app.component.ts,
    cb-aot-compiler/ts/app/main.ts,
    cb-aot-compiler/ts/index.html,
    cb-aot-compiler/ts/tsconfig-aot.json,
-   cb-aot-compiler/ts/rollup.js`,
+   cb-aot-compiler/ts/rollup-config.js`,
   null,
   `app/app.component.html,
    app/app.component.ts,
    app/main.ts,
    index.html,
    tsconfig-aot.json,
-   rollup.js`
+   rollup-config.js`
 )
+
+a#toh
+.l-main-section
+:marked
+  ## Tour of Heroes
+
+  The sample above is a trivial variation of the QuickStart app. 
+  In this section you apply what you've learned about AoT compilation and Tree Shaking 
+  to an app with more substance, the tutorial [_Tour of Heroes_](../tutorial/toh-pt6.html).
+
+  ### JiT in development, AoT in production
+
+  Today AoT compilation and Tree Shaking take more time than is practical for development. That will change soon.
+  For now, it's best to JiT compile in development and switch to AoT compilation before deploying to production.
+
+  Fortunately, the source code can be compiled either way without change _if_ you account for a few key differences.
+
+  ***Index.html***
+
+  The JiT and AoT apps are setup and launched so differently that they require their own `index.html` files. 
+  Here they are for comparison:
+
++makeTabs(
+  `toh-6/ts/aot/index.html,
+   toh-6/ts/index.html`,
+  null,
+  `aot/index.html (AoT),
+   index.html (JiT)`
+)
+
+:marked
+  They can't be in the same folder. 
+  ***Put the AoT version in the `/aot` folder***.
+
+  The JiT version relies on `SystemJS` to load individual modules and requires the `reflect-metadata` shim. 
+  Both scripts appear in its `index.html`.
+
+  The AoT version loads the entire application in a single script, `aot/dist/build.js`.
+  It does not need `SystemJS` or the `reflect-metadata` shim; those scripts are absent from its `index.html`
+
+  *Component-relative Template URLS*
+
+  The AoT compiler requires that `@Component` URLS for external templates and css files be _component-relative_.
+  That means that the value of `@Component.templateUrl` is a URL value relative to the component class file:
+  `foo.component.html` no matter where `foo.component.ts` sits in the project folder structure.
+
+  While JiT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AoT compilation.
+  
+  JiT-compiled apps, using the SystemJS loader and _component-relative_ URLs *must set the* `@Component.moduleId` *property to* `module.id`.
+  The `module` object is undefined when an AoT-compiled app runs. 
+  The app fails unless you assign a global `module` value in the `index.html` like this:
++makeExample('toh-6/ts/aot/index.html','moduleId')(format='.')  
+.l-sub-section
+  :marked
+    Setting a global `module` is a temporary expedient. 
+:marked
+  *TypeScript configuration*
+
+  JiT-compiled apps transpile to `commonjs` modules.
+  AoT-compiled apps transpile to _ES2015_/_ES6_ modules to facilitate Tree Shaking. 
+  AoT requires its own TypeScript configuration settings as well.
+
+  You'll need separate TypeScript configuration files such as these:
+
++makeTabs(
+  `toh-6/ts/tsconfig-aot.json,
+   toh-6/ts/tsconfig.json`,
+  null,
+  `tsconfig.json (AoT),
+   tsconfig-aot.json (JiT)`
+)
+
+:marked
+  ### Tree Shaking
+
+  Rollup does the Tree Shaking as before.
+  
+  The Rollup configuration changes slightly to accommodate the `angular-in-memory-web-api` module
+  that the _Tour of Heroes_ app requires for data server simulation.
+  
+  The `angular-in-memory-web-api` is a `commonjs` module like the RxJS library.
+  Add `angular-in-memory-web-api` to the _commonjs plugin_ `include` array,
+  next to the `rxjs` file specification.
+
++makeExample('toh-6/ts/rollup-config.js',null,'rollup-config.js')(format='.')  
+
+:marked
+  ### Running the application
+
+.alert.is-important
+  :marked
+    The general audience instructions for running the AoT build of the Tour of Heroes app are not ready.
+
+    The following instructions presuppose that you have cloned the 
+    <a href="https://github.com/angular/angular.io" target="_blank">angular.io</a> 
+    github repository and prepared it for development as explained in the repo's README.md.
+
+    The _Tour of Heroes_ source code is in the `public/docs/_examples/toh-6/ts` folder.
+:marked
+  Run the JiT-compiled app with `npm start` as for all other JiT examples.
+
+  Compiling with AoT presupposes certain supporting files, most of them discussed above.
++makeTabs(
+  `toh-6/ts/aot/index.html,
+   toh-6/ts/aot/bs-config.json,
+   toh-6/ts/copy-dist-files.js,
+   toh-6/ts/rollup-config.js,
+   toh-6/ts/tsconfig-aot.json`,
+  null,
+  `aot/index.html,
+   aot/bs-config.json,
+   copy-dist-files.js,
+   rollup-config.js,
+   tsconfig-aot.json`)
+:marked
+  Extend the `scripts` section of the `package.json` with these npm scripts:
+code-example(format='.').
+  "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+  "lite:aot": "lite-server -c aot/bs-config.json",
+:marked
+  Copy the AoT distribution files into the `/aot` folder with the node script:
+code-example(format='.').
+  node copy-dist-files
+.l-sub-section
+  :marked
+    You won't do that again until there are updates to `zone.js` or the `core-js` shim for old browsers.
+:marked
+  Now AoT-compile the app and launch it with the `lite` server:
+code-example(format='.').
+  npm run build:aot && npm run lite:aot
+
+:marked
+  ### Inspect the Bundle
+
+  It's fascinating to see what the generated JavaScript bundle looks like after Rollup. 
+  The code is minified, so you won't learn much from inspecting the bundle directly.
+  But the <a href="https://github.com/danvk/source-map-explorer/blob/master/README.md" target="_blank">source-map-explorer</a> 
+  tool can be quite revealing. 
+
+  Install it:
+code-example(format='.').  
+  npm install source-map-explorer --save-dev
+:marked
+  Run the following command to generate the map.
+
+code-example(format='.').
+  node_modules/.bin/source-map-explorer aot/dist/build.js
+
+:marked
+  The `source-map-explorer` analyzes the source map generated with the bundle and draws a map of all dependencies,
+  showing exactly which application and Angular modules and classes are included in the bundle.
+
+  Here's the map for _Tour of Heroes_. 
+
+a(href="/resources/images/cookbooks/aot-compiler/toh6-bundle.png", target="_blank", title="View larger image")
+  figure.image-display
+    img(src="/resources/images/cookbooks/aot-compiler/toh6-bundle.png" alt="TOH-6-bundle")   
diff --git a/public/docs/ts/latest/cookbook/i18n.jade b/public/docs/ts/latest/cookbook/i18n.jade
index 8f58098f9d..33175c0801 100644
--- a/public/docs/ts/latest/cookbook/i18n.jade
+++ b/public/docs/ts/latest/cookbook/i18n.jade
@@ -1,21 +1,21 @@
 include ../_util-fns
 
 :marked
-  Angular's _internationalization_ ("_i18n_") tools help make your app availble in multiple languages.
+  Angular's _internationalization_ ("_i18n_") tools help make your app available in multiple languages.
   
   <a id="top"></a>
   ## Table of contents
     
     * [Angular and i18n template translation](#angular-i18n)
     * [Mark text with the _i18n_ attribute](#i18n-attribute)
-    * [Extract text with ng-xi18n](#ng-xi18n)
+    * [Create a translation source file with the _ng-xi18n_ tool](#ng-xi18n)
     * [Translate](#translate)
-    * [Merge the translation file into the app](#merge)
+    * [Merge the completed translation file into the app](#merge)
       * [JiT configuration](#jit)
       * [AoT configuration](#aot)
 
 :marked
-  **Try this** <live-example>live example</live-example> of a JiT-compiled app, translated into French.
+  **Try this** <live-example name="cb-i18n">live example</live-example> of a JiT-compiled app, translated into French.
 
   
 a#angular-i18n
@@ -30,6 +30,7 @@ a#angular-i18n
   This page describes the _i18n_ tools to assist translation of component template text
   into multiple languages.
 
+
 .l-sub-section
   :marked
     Practitioners of _internationalization_ refer to a translatable text as a "_message_".
@@ -61,7 +62,9 @@ a#i18n-attribute
 
 .alert.is-helpful
   :marked
-    `i18n` is not an Angular _directive_. It's a custom _attribute_, recognized by Angular tools and compilers.
+    `i18n` is not an Angular _directive_. 
+    It's a custom _attribute_, recognized by Angular tools and compilers.
+    It will be removed by the compiler _after_ translation.
 
 :marked
   In the accompanying sample, an `<h1>` tag displays a simple English language greeting which you will translate to French:
@@ -87,16 +90,17 @@ a#i18n-attribute
   While all appearance of a message with the _same_ meaning should have the _same_ translation, 
   a message with *different meanings* could have different translations.
   The Angular extraction tool preserves both the _meaning_ and the _description_ in the translation source file
-  to facilitiate contextually-specific transations.
+  to facilitiate contextually-specific translations.
 
 a#ng-xi18n
 .l-main-section
 :marked
-  ## Extract translatable text with the _ng-xi18n_ command
+  ## Create a translation source file with the _ng-xi18n_ tool
   
-  Use the `ng-xi18n` extraction tool to generate a translation source file in an industry standard format.
+  Use the `ng-xi18n` extraction tool to extract the `i18n`-marked texts 
+  into a translation source file in an industry standard format.
   
-  This is an Angular CLI tool based on the `ngc` compiler in the `@angular/compiler-cli` npm package.
+  This is an Angular CLI tool in the `@angular/compiler-cli` npm package.
   If you haven't already installed the CLI and its `platform-server` peer dependency, do so now:
   
 code-example(language="sh" class="code-shell").
@@ -151,18 +155,26 @@ a#translate
   The next step is to translate the English language template text into the specific language translation
   files. The cookbook sample creates a French translation file.
 
-a#i18n-file-structure
+a#localization-folder
 :marked
-  ### Create an i18n project structure
+  ### Create a localization folder
 
   You will probably translate into more than one other language so it's a good idea
   for the project structure to reflect your entire internationalization effort.
   
-  One approach is to create an `i18n` folder with subfolders for each language or locale, e.g. `i18n/fr` for French.
-  This sample puts `i18n/fr` under the project root.
+  One approach is to dedicate a folder to localization and store related assets 
+  (e.g. internationalization files) there.
+.l-sub-section
+  :marked
+    Localization and internationalization are 
+    <a href="https://en.wikipedia.org/wiki/Internationalization_and_localization" target="_blank">different but closely related terms</a>.
+:marked
+  This sample follows that suggestion. It has `locale` folder immediately under the project root.
+  Assets within the folder carry a filename extension that matches a language-culture code from a
+  <a href="https://msdn.microsoft.com/en-us/library/ee825488(v=cs.20).aspx" target="_blank">well-known codeset</a>.
 
-  Move the `messages.xlf` into the `i18n` folder where it will become the source for all language-specific translations.
-  Then copy `messages.xlf` into `i18n/fr` and rename it as `messages.fr.xlf` .
+  Move `messages.xlf` into the `locale` folder where it will become the source for all language-specific translations.
+  Then make a copy for the French language named `messages.fr.xlf` .
 
   Follow the same convention for each target language.
 
@@ -174,17 +186,17 @@ a#i18n-file-structure
   This sample file is easy to translate without a special editor or knowledge of French.
   Open `messages.fr.xlf` and find the `<trans-unit>` section:
 
-+makeExample('cb-i18n/ts/i18n/trans-unit.html', '', 'i18n/messages.fr.xlf (<trans-unit>)')(format=".")
++makeExample('cb-i18n/ts/locale/trans-unit.html', '', 'locale/messages.fr.xlf (<trans-unit>)')(format=".")
 :marked
   This XML element represents the translation of the `<h1>` greeting tag you marked with the `i18n` attribute. 
   
   Using the _source_, _description_, and _meaning_ elements to guide your translation,
   replace the `<target/>` tag with the French greeting:
-+makeExample('cb-i18n/ts/i18n/fr/messages.fr.xlf.html', 'trans-unit', 'i18n/fr/messages.fr.xlf (<trans-unit>, after translation)')(format=".")
++makeExample('cb-i18n/ts/locale/messages.fr.xlf.html', 'trans-unit', 'locale/messages.fr.xlf (<trans-unit>, after translation)')(format=".")
 :marked
   Note that the `id` is generated by the tool. Don't touch it.
-  Its value depends on the content of the message, its meaning, and its description.
-  Change any of these factors and the `id` changes as well.
+  Its value depends on the content of the message and its assigned meaning.
+  Change either factor and the `id` changes as well.
 .alert.is-helpful
   :marked
     Repeat the extraction process whenever you add new app messages or edit existing ones.
@@ -202,19 +214,19 @@ a#i18n-file-structure
   cb-i18n/ts/app/app.component.ts,
   cb-i18n/ts/app/app.module.ts,
   cb-i18n/ts/app/main.1.ts,
-  cb-i18n/ts/i18n/fr/messages.fr.xlf.html
+  cb-i18n/ts/locale/messages.fr.xlf.html
 `, '', `
   app/app.component.html,
   app/app.component.ts,
   app/app.module.ts,
   app/main.ts,
-  i18n/fr/messages.fr.xlf
+  locale/messages.fr.xlf
 `)
 
 a#merge
 .l-main-section
 :marked
-  ## Merge the translation file
+  ## Merge the completed translation file
 
   To merge the translated text into component templates,
   you compile the application with the completed translation file.
@@ -224,7 +236,8 @@ a#merge
   You provide the Angular compiler with three new pieces of information:
     * the translation file
     * the translation file format 
-    * the _Locale ID_ (`en-US` for instance)
+    * the   <a href="https://en.wikipedia.org/wiki/XLIFF" target="_blank">_Locale ID_</a>
+    (`fr` or `en-US` for instance)
   
   _How_ you provide this information depends upon whether you compile with
   the JiT (_Just-in-Time_) compiler or the AoT (_Ahead-of-Time_) compiler. 
@@ -280,12 +293,12 @@ a#text-plugin
 :marked
   * It gets the locale from the global `document.locale` variable that was set in `index.html`.
 
-  * If there is no locale or the language is English, there is no need to translate.
+  * If there is no locale or the language is U.S. English (`en-US`), there is no need to translate.
     The function returns an empty `noProviders` array as a `Promise`.
     It must return a `Promise` because this function could read a translation file asynchronously from the server.
 
   * It creates a transaction filename from the locale according to the name and location convention 
-  [described earlier](#i18n-file-structure).
+  [described earlier](#localization-folder).
 
   * The `getTranslationsWithSystemJs` method reads the translation and returns the contents as a string.
   Notice that it appends `!text` to the filename, telling SystemJS to use the [text plugin](#text-plugin). 
@@ -341,10 +354,10 @@ a#aot
   
   For this sample, the French language command would be
 code-example(language="sh" class="code-shell").
-  ./node_modules/.bin/ngc --i18nFile=./i18n/fr/messages.fr.xlf --locale=fr --i18nFormat=xlf
+  ./node_modules/.bin/ngc --i18nFile=./locale/messages.fr.xlf --locale=fr --i18nFormat=xlf
 
 .l-sub-section
   :marked
     Windows users may have to quote the command:
   code-example(language="sh" class="code-shell").
-    "./node_modules/.bin/ngc" --i18nFile=./i18n/fr/messages.fr.xlf --locale=fr --i18nFormat=xlf
+    "./node_modules/.bin/ngc" --i18nFile=./locale/messages.fr.xlf --locale=fr --i18nFormat=xlf
diff --git a/public/docs/ts/latest/cookbook/ngmodule-faq.jade b/public/docs/ts/latest/cookbook/ngmodule-faq.jade
index 1fcea88969..607061a9fb 100644
--- a/public/docs/ts/latest/cookbook/ngmodule-faq.jade
+++ b/public/docs/ts/latest/cookbook/ngmodule-faq.jade
@@ -52,7 +52,7 @@ block includes
   * [What if I import the same module twice?](#q-reimport)
   * [如果我两次导入了同一个模块会怎么样？](#q-reimport)
 
-  Exports  
+  Exports
   
   导出(exports)
   
@@ -147,7 +147,7 @@ a#q-declarable
   ### 什么是*可声明的*？
   
   _Declarables_ are the class types &mdash; components, directives, and pipes &mdash;
-  that you can add to a module's `declarations` list. 
+  that you can add to a module's `declarations` list.
   They're the _only_ classes that you can add to `declarations`.
   
   *可声明的*就是组件、指令和管道等可以被加到模块的`declarations`列表中的类。它们也是*所有*能被加到`declarations`中的类。
@@ -173,7 +173,7 @@ a#q-what-not-to-declare
   
   * 已经被其它模块声明过的类，无论是在应用模块、@angular模块还是第三方模块中。
 
-  * an array of directives imported from another module. 
+  * an array of directives imported from another module.
   For example, do not declare FORMS_DIRECTIVES from `@angular/forms`.
   
   * 一组从其它模块中导入的指令。
@@ -187,7 +187,7 @@ a#q-what-not-to-declare
   
   * 服务类
 
-  * non-Angular classes and objects such as 
+  * non-Angular classes and objects such as
   strings, numbers, functions, entity models, configurations, business logic, and helper classes.
 
   * 非Angular的类和对象，比如：字符串、数字、函数、实体模型、配置、业务逻辑和辅助类。
@@ -230,7 +230,7 @@ a#q-why-cant-bind-to
   
   ### "_Can't bind to 'x' since it isn't a known property of 'y'_"是什么意思？
 
-  This error usually means either that you neglected to declare the directive "x" 
+  This error usually means either that you neglected to declare the directive "x"
   or you haven't imported the module to which "x" belongs.
   
   这个错误通常意味着你或者忘了声明指令“x”，或者你没有导入“x”所属的模块。
@@ -239,7 +239,7 @@ a#q-why-cant-bind-to
   
   比如，如果这个“x”是`ngModel`，你可能忘了从`@angular/forms`中导入`FormsModule`。
 
-  Perhaps you declared "x" in an application sub-module but forgot to export it? 
+  Perhaps you declared "x" in an application sub-module but forgot to export it?
   The "x" class won't be visible to other modules until you add it to the `exports` list.
   
   也可能你在该应用的特性模块中声明了“x”，但是忘了从那个模块导出它。
@@ -254,19 +254,19 @@ a#q-what-to-import
   
   ### 我应该导入什么？
 
-  Import modules whose public (exported) [declarable classes](#q-declarable) 
+  Import modules whose public (exported) [declarable classes](#q-declarable)
   you need to reference in this module's component templates.
   
   一句话：导入你需要在当前模块的组件模板中使用的那些公开的（被导出的）[可声明类](#q-declarable)。
 
   This invariably means importing `CommonModule` from `@angular/common` for access to
-  the Angular directives such as `NgIf` and `NgFor`. 
+  the Angular directives such as `NgIf` and `NgFor`.
   You can import it directly or from another module that [re-exports](#q-reexport) it.
   
   这意味着要从`@angular/common`中导入`CommonModule`才能访问Angular的内置指令，比如`NgIf`和`NgFor`。
   你可以直接导入它或者从[重新导出](#q-reexport)过该模块的其它模块中导入它。
 
-  Import `FormsModule` from `@angular/forms` 
+  Import `FormsModule` from `@angular/forms`
   if your components have `[(ngModel)]` two-way binding expressions.
   
   如果你的组件有`[(ngModel)]`双向绑定表达式，就要从`@angular/forms`中导入`FormsModule`。
@@ -324,7 +324,7 @@ a#q-browser-vs-common-module
   
   特性模块中导入`CommonModule`可以让它能用在任何目标平台上，不仅是浏览器。那些跨平台库的作者应该喜欢这种方式的。
 
-.l-hr 
+.l-hr
 a#q-reimport
 .l-main-section
 :marked
@@ -350,7 +350,7 @@ a#q-reimport
   
   Angular不允许模块之间出现循环依赖，所以不要让模块'A'导入模块'B'，而模块'B'又导入模块'A'。
 
-.l-hr 
+.l-hr
 a#q-what-to-export
 .l-main-section
 :marked
@@ -366,7 +366,7 @@ a#q-what-to-export
   导出那些*其它模块*希望在自己的模板中引用的[可声明类](#q-declarable)。这些也是你的*公开*类。
   如果你不导出某个类，它就是*私有的*，只对当前模块中声明的其它组件可见。
 
-  You _can_ export any declarable class &mdash; components, directives, and pipes &mdash; 
+  You _can_ export any declarable class &mdash; components, directives, and pipes &mdash;
   whether it is declared in this module or in an imported module.
   
   你*可以*导出任何可声明类（组件、指令和管道），而不用管它是声明在当前模块中还是某个导入的模块中。
@@ -406,7 +406,7 @@ a#q-what-not-to-export
   比如[入口组件](#q-entry-component-defined)可能从来不会在其它组件的模板中出现。
   导出它们没有坏处，但也没有好处。
 
-  * Pure service modules that don't have public (exported) declarations. 
+  * Pure service modules that don't have public (exported) declarations.
   For example, there is no point in re-exporting `HttpModule` because it doesn't export anything.
   It's only purpose is to add http service providers to the application as a whole.
   
@@ -532,7 +532,7 @@ a#q-module-provider-visibility
   
   这会让该提供商对应用中所有知道该提供商令牌（token）的类都可见。
 
-  This is by design. 
+  This is by design.
   Extensibility through module imports is a primary goal of the Angular module system.
   Merging module providers into the application injector
   makes it easy for a module library to enrich the entire application with new services.
@@ -545,8 +545,8 @@ a#q-module-provider-visibility
   
   However, this can feel like an unwelcome surprise if you are expecting the module's services 
   to be visible only to the components declared by that feature module.
-  If the `HeroModule` provides the `HeroService` and the root `AppModule` imports `HeroModule`, 
-  any class that knows the `HeroService` _type_ can inject that service, 
+  If the `HeroModule` provides the `HeroService` and the root `AppModule` imports `HeroModule`,
+  any class that knows the `HeroService` _type_ can inject that service,
   not just the classes declared in the `HeroModule`.
   
   不过，如果你期望模块的服务只对那个特性模块内部声明的组件可见，那么这可能会带来一些不受欢迎的意外。
@@ -596,7 +596,7 @@ a#q-module-provider-duplicates
   
   当同时加载了两个导入的模块，它们都列出了使用同一个令牌的提供商时，后导入的模块会“获胜”，这是因为这两个提供商都被添加到了同一个注入器中。
 
-  When Angular looks to inject a service for that token, 
+  When Angular looks to inject a service for that token,
   it creates and delivers the instance created by the second provider.
   
   当Angular尝试根据令牌注入服务时，它使用第二个提供商来创建并交付服务实例。
@@ -652,7 +652,7 @@ a#q-component-scoped-providers
 :marked
   Suppose a module requires a customized `HttpBackend` that adds a special header for all Http requests.
   If another module elsewhere in the application also customizes `HttpBackend`
-  or merely imports the `HttpModule`, it could override this module's `HttpBackend` provider, 
+  or merely imports the `HttpModule`, it could override this module's `HttpBackend` provider,
   losing the special header. The server will reject http requests from this module.
   
   假设模块需要一个定制过的`HttpBackend`，它为所有的Http请求添加一个特别的请求头。
@@ -670,7 +670,7 @@ a#q-component-scoped-providers
   
   如果你必须防范这种“提供商腐化”现象，那就*不要依赖于“启动时加载”模块的`providers`*。
 
-  Load the module lazily if you can. 
+  Load the module lazily if you can.
   Angular gives a [lazy-loaded module](#q-lazy-loaded-module-provider-visibility) its own child injector.
   The module's providers are visible only within the component tree created with this injector.
   
@@ -687,7 +687,7 @@ a#q-component-scoped-providers
   
   继续看这个例子，假设某个模块的组件真的需要一个私有的、自定义的`HttpBackend`。
 
-  Create a "top component" that acts as the root for all of the module's components. 
+  Create a "top component" that acts as the root for all of the module's components.
   Add the custom `HttpBackend` provider to the top component's `providers` list rather than the module's `providers`.
   Recall that Angular creates a child injector for each component instance and populates the injector
   with the component's own providers.
@@ -697,7 +697,7 @@ a#q-component-scoped-providers
   回忆一下，Angular会为每个组件实例创建一个子注入器，并使用组件自己的`providers`来配置这个注入器。
   
   When a child of this component _asks_ for the `HttpBackend` service,
-  Angular provides the local `HttpBackend` service, 
+  Angular provides the local `HttpBackend` service,
   not the version provided in the application root injector.
   Child components will make proper http requests no matter what other modules do to `HttpBackend`.
   
@@ -751,7 +751,7 @@ a#q-root-component-or-module
   #### ***讨论***
   
   Angular registers all startup module providers with the application root injector.
-  The services created from root injector providers are available to the entire application. 
+  The services created from root injector providers are available to the entire application.
   They are _application-scoped_.
   
   Angular把所有启动期模块的提供商都注册进了应用的根注入器中。
@@ -763,7 +763,7 @@ a#q-root-component-or-module
   某些服务（比如`Router`）只有当注册进应用的根注入器时才能正常工作。
 
   By contrast, Angular registers `AppComponent` providers with the `AppComponent`'s own injector.
-  `AppComponent`services are available only to that component and its component tree. 
+  `AppComponent`services are available only to that component and its component tree.
   They are _component-scoped_.
   
   相反，Angular使用`AppComponent`自己的注入器注册了`AppComponent`的提供商。
@@ -778,9 +778,9 @@ a#q-root-component-or-module
   这对于没有路由器的应用来说*几乎是*整个应用了。
   但这个“几乎”对于带路有的应用仍然是不够的。
 
-  `AppComponent` services don't exist at the root level where routing operates. 
+  `AppComponent` services don't exist at the root level where routing operates.
   Lazy loaded modules can't reach them.
-  In the Angular Module Chapter sample applications, if we had registered `UserService` in the `AppComponent`, 
+  In the Angular Module Chapter sample applications, if we had registered `UserService` in the `AppComponent`,
   the `HeroComponent` couldn't inject it.
   The application  would fail the moment a user navigated to "Heroes".
   
@@ -804,22 +804,22 @@ a#q-component-or-module
   通常，优先把模块中具体特性的提供商注册到模块中（`@NgModule.providers`），而不是组件中（`@Component.providers`）。
   
   Register a provider with a component when you _must_ limit the scope of a service instance
-  to that component and its component tree. 
+  to that component and its component tree.
   Apply the same reasoning to registering a provider with a directive.
   
   当你*必须*把服务实例的范围限制到某个组件及其子组件树时，就把提供商注册到该组件中。
   指令的提供商也同样照此处理。
 
   For example, a hero editing component that needs a private copy of a caching hero service should register
-  the `HeroService` with the `HeroEditorComponent`. 
-  Then each new instance of the `HeroEditorComponent` gets its own cached service instance. 
+  the `HeroService` with the `HeroEditorComponent`.
+  Then each new instance of the `HeroEditorComponent` gets its own cached service instance.
   The changes that editor makes to heroes in its service do not touch the hero instances elsewhere in the application.
   
   例如，如果英雄编辑组件需要自己私有的缓存英雄服务实例，那么我们应该把`HeroService`注册进`HeroEditorComponent`中。
   这样，每个新的`HeroEditorComponent`的实例都会得到一份自己的缓存服务实例。
   编辑器的改动只会作用于它自己的服务，而不会影响到应用中其它地方的英雄实例。
 
-  [Always register _application-wide_ services with the root `AppModule`](q-root-component-or-module), 
+  [Always register _application-wide_ services with the root `AppModule`](q-root-component-or-module),
   not the root `AppComponent`.
   
   [总是在根模块`AppModule`中注册*全应用级*服务](q-root-component-or-module)，而不要在根组件`AppComponent`中。 
@@ -832,7 +832,7 @@ a#q-why-bad
   
   ### 为什么*SharedModule*为惰性加载模块提供服务是个馊主意？
 
-  This question arose in the [Angular Module](../guide/ngmodule.html#no-shared-module-providers) chapter 
+  This question arose in the [Angular Module](../guide/ngmodule.html#no-shared-module-providers) chapter
   when we discussed the importance of keeping providers out of the `SharedModule`.
   
   这个问题在[Angular模块](../guide/ngmodule.html#no-shared-module-providers)章出现过，那时我们在讨论不要把提供商放进`SharedModule`的重要性。
@@ -847,7 +847,7 @@ a#q-why-bad
   
   当应用启动时，Angular主动加载了`AppModule`和`ContactModule`。
 
-  Both instances of the imported `SharedModule` would provide the `UserService`. 
+  Both instances of the imported `SharedModule` would provide the `UserService`.
   Angular registers one of them in the root app injector (see [above](#q-reimport)).
   Then some component injects `UserService`, Angular finds it in the app root injector,
   and delivers the app-wide singleton `UserService`. No problem. 
@@ -912,13 +912,13 @@ a#q-why-child-injector
   
   这意味着模块的行为将取决于它是在应用启动期间加载的还是后来惰性加载的。如果疏忽了这一点，可能导致[严重后果](#q-why-bad)。
 
-  Why doesn't Angular add lazy loaded providers to the app root injector as it does for eagerly loaded modules? 
+  Why doesn't Angular add lazy loaded providers to the app root injector as it does for eagerly loaded modules?
   Why the inconsistency?
   
   为什么Angular不能像主动加载模块那样把惰性加载模块的提供商也添加到应用程序的根注入器中呢？为什么会出现这种不一致？
   
   The answer is grounded in a fundamental characteristic of the Angular dependency injection system.
-  An injector can add providers _until it is first used_. 
+  An injector can add providers _until it is first used_.
   Once an injector starts creating and delivering services, its provider list is frozen. No new providers allowed.
   
   归根结底，这来自于Angular依赖注入系统的一个基本特征：
@@ -926,15 +926,15 @@ a#q-why-child-injector
   一旦注入器已经创建和开始交付服务，它的提供商列表就被冻结了，不再接受新的提供商。
 
   When an applications starts, Angular first configures the root injector with the providers of all eagerly loaded modules
-  _before_ creating its first component and injecting any of the provided services. 
+  _before_ creating its first component and injecting any of the provided services.
   Once the application begins, the app root injector is closed to new providers.
   
   当应用启动时，Angular会首先使用所有主动加载模块中的提供商来配置根注入器，这发生在它创建第一个组件以及注入任何服务之前。
   一旦应用开始工作，应用的根注入器就不再接受新的提供商了。
 
   Time passes. Application logic triggers lazy loading of a module.
-  Angular must add the lazy loaded module's providers to an injector _somewhere_. 
-  It can't added them to the app root injector because that injector is closed to new providers. 
+  Angular must add the lazy loaded module's providers to an injector _somewhere_.
+  It can't added them to the app root injector because that injector is closed to new providers.
   So Angular creates a new child injector for the lazy loaded module context.
   
   之后，应用逻辑开始惰性加载某个模块。
@@ -952,7 +952,7 @@ a#q-is-it-loaded
   ### 我要如何知道一个模块或服务是否已经加载过了？
 
   Some modules and its services should only be loaded once by the root `AppModule`.
-  Importing the module a second time by lazy loading a module could [produce errant behavior](#q-why-bad) 
+  Importing the module a second time by lazy loading a module could [produce errant behavior](#q-why-bad)
   that may be difficult to detect and diagnose.
   
   某些模块及其服务只能被根模块`AppModule`加载一次。
@@ -964,7 +964,7 @@ a#q-is-it-loaded
   
   为了防范这种风险，我们可以写一个构造函数，它会尝试从应用的根注入器中注入该模块或服务。如果这种注入成功了，那就说明这个类是被第二次加载的，我们就可以抛出一个错误，或者采取其它挽救措施。
 
-  Certain Angular modules (such as `BrowserModule`) implements such a guard 
+  Certain Angular modules (such as `BrowserModule`) implements such a guard
   as does this Angular Module chapter sample's `CoreModule` constructor.
   
   某些Angular模块（例如`BrowserModule`）就实现了一个像本页范例中的`CoreModule`构造函数那样的守卫。
@@ -981,9 +981,13 @@ a#q-entry-component-defined
   
   ### 什么是*入口组件*？
 
-  Any component that Angular loads _imperatively_ by type is an _entry component_, A component loaded _declaratively_ via its selector is _not_ an entry component.
+  Any component that Angular loads _imperatively_ by type is an _entry component_,
   
-  Angular根据其类型*不可避免地*加载的组件是*入口组件*，而通过组件选择器*声明式*加载的组件则*不是*入口组件。
+  Angular根据其类型*不可避免地*加载的组件是*入口组件*，
+   
+  A component loaded _declaratively_ via its selector is _not_ an entry component.
+  
+  而通过组件选择器*声明式*加载的组件则*不是*入口组件。
   
   Most application components are loaded declaratively. 
   Angular uses the component's selector to locate the element in the template. 
@@ -999,7 +1003,7 @@ a#q-entry-component-defined
 
   The bootstrapped root `AppComponent` is an _entry component_.
   True, its selector matches an element tag in `index.html`.
-  But `index.html` is not a component template and the `AppComponent` 
+  But `index.html` is not a component template and the `AppComponent`
   selector doesn't match an element in any component template.
   
   用于引导的根`AppComponent`就是一个*入口组件*。
@@ -1019,7 +1023,7 @@ a#q-entry-component-defined
   路由定义根据*类型*来引用组件。
   路由器会忽略路由组件的选择器（即使它有选择器），并且把该组件动态加载到`RouterOutlet`中。
 
-  The compiler can't discover these _entry components_ by looking for them in other component templates. 
+  The compiler can't discover these _entry components_ by looking for them in other component templates.
   We must tell it about them ... by adding them to the `entryComponents` list.
   
   编译器无法通过在其它组件的模板中查找来发现这些*入口组件*。
@@ -1060,7 +1064,7 @@ a#q-bootstrap_vs_entry_component
   
   `@NgModule.bootstrap`属性告诉编译器这是一个入口组件，同时它应该生成一些代码来用该组件引导此应用。
 
-  There is no need to list a component in both the `bootstrap` and `entryComponent` lists 
+  There is no need to list a component in both the `bootstrap` and `entryComponent` lists
   although it is harmless to do so.
   
   不需要把组件同时列在`bootstrap`和`entryComponent`列表中 —— 虽然这样做也没坏处。
@@ -1095,7 +1099,7 @@ a#q-when-entry-components
 
   Although it's harmless to add components to this list,
   it's best to add only the components that are truly _entry components_.
-  Don't include components that [are referenced](#q-template-reference) 
+  Don't include components that [are referenced](#q-template-reference)
   in the templates of other components.
   
   虽然把组件加到这个列表中也没什么坏处，不过最好还是只添加真正的*入口组件*。
@@ -1132,7 +1136,7 @@ a#q-why-entry-components
   事实上，大多数库中声明和导出的组件我们都用不到。
   如果我们从未引用它们，那么*摇树优化器*就会从最终的代码包中把这些组件砍掉。
 
-  If the [Angular compiler](#q-angular-compiler) generated code for every declared component, 
+  If the [Angular compiler](#q-angular-compiler) generated code for every declared component,
   it would defeat the purpose of the tree shaker.
   
   如果[Angular编译器](#q-angular-compiler)为每个声明的组件都生成了代码，那么摇树优化器的作用就没有了。
@@ -1203,7 +1207,7 @@ a#q-module-recommendations
   它的导入或重新导出的模块中也不应该有`providers`。
   如果你要违背这条指导原则，请务必想清楚你在做什么，并要有充分的理由。
 
-  Import the `SharedModule` in your _feature_ modules, 
+  Import the `SharedModule` in your _feature_ modules,
   both those loaded when the app starts and those you lazy load later.
   
   在任何特性模块中（无论是你在应用启动时主动加载的模块还是之后惰性加载的模块），你都可以随意导入这个`SharedModule`。
@@ -1226,7 +1230,7 @@ a#q-module-recommendations
 .l-sub-section
   :marked
     This chapter sample departs from that advice by declaring and exporting two components that are
-    only used within the root `AppComponent` declared by `AppModule`. 
+    only used within the root `AppComponent` declared by `AppModule`.
     Someone following this guideline strictly would have declared these components in the `AppModule` instead.
     
     这里的范例违背了此建议，它声明和导出了两个只用在`AppModule`模块的`AppComponent`组件中的组件。
@@ -1316,7 +1320,7 @@ table
 
       .l-sub-section
         :marked
-          For an example, see [_ContactModule_](../guide/ngmodule.html#contact-module-v1) 
+          For an example, see [_ContactModule_](../guide/ngmodule.html#contact-module-v1)
           in the Angular Module chapter, before we introduced routing.
           
           比如“Angular模块”章的[_ContactModule_](../guide/ngmodule.html#contact-module-v1)。
@@ -1327,7 +1331,7 @@ table
       p 路由
     td
       :marked
-        _Routed Feature Modules_ are _Domain Feature modules_ 
+        _Routed Feature Modules_ are _Domain Feature modules_
         whose top components are the **targets of router navigation routes**.
         
         *路由特性模块*属于*领域特性模块*的一种，它的顶层组件是**路由器导航时的路由目标**。
@@ -1340,12 +1344,12 @@ table
         
         这里的`ContactModule`、`HeroModule`和`CrisisModule`都是路由特性模块。
 
-        Routed Feature Modules _should not export anything_. 
+        Routed Feature Modules _should not export anything_.
         They don't have to because none of their components ever appear in the template of an external component.
         
         路由特性模块*不应该导出任何东西*，这是因为它们中的任何组件都不可能出现在外部组件的模板中。
 
-        A lazy loaded Routed Feature Module should _not be imported_ by any module. 
+        A lazy loaded Routed Feature Module should _not be imported_ by any module.
         Doing so would trigger an eager load, defeating the purpose of lazy loading.
         `HeroModule` and `CrisisModule` are lazy loaded. They aren't mentioned among the `AppModule` imports.
         
@@ -1354,7 +1358,7 @@ table
         `HeroModule`和`CrisisModule`是惰性加载的。它们没有出现在`AppModule`的`imports`中。
 
         But an eager loaded Routed Feature Module must be imported by another module
-        so that the compiler learns about its components. 
+        so that the compiler learns about its components.
         `ContactModule` is eager loaded and, therefore, is listed among the `AppModule` imports.
         
         而主动加载的路由特性模块必须被其它模块导入，以便编译器了解它有哪些组件。
@@ -1371,6 +1375,42 @@ table
         or in a module that the routed module imports.
         
         不要在路由特性模块及其导入的模块中提供*全应用级*的单例服务。
+  tr
+    td(style="vertical-align: top")<a id="routing-module"></a>Routing
+    td
+      :marked
+        A [_Routing Module_](../guide/router.html#routing-module) **provides routing configuration** for another module.
+
+        A Routing Module separates routing concerns from its companion module.
+        
+        It typically:
+        * defines routes
+        * adds router configuration to the module's `imports`
+        * re-exports `RouterModule`
+        * adds guard and resolver service providers to the module's `providers`.
+        
+        The name of the Routing Module should parallel the name of its companion module, using the suffix "Routing".
+        For example, `FooModule` in `foo.module.ts` has a routing module named `FooRoutingModule`
+        in `foo-routing.module.ts`
+        
+        If the companion module is the _root_ `AppModule`, 
+        the `AppRoutingModule` adds router configuration to its `imports` with `RouterModule.forRoot(routes)`. 
+        All other Routing Modules are children that import `RouterModule.forChild(routes)`.
+
+        A Routing Module re-exports the `RouterModule` as a convenience 
+        so that components of the companion module have access to 
+        router directives such as `RouterLink` and `RouterOutlet`.
+
+        A Routing Module **should not have its own `declarations`!** 
+        &nbsp; Components, directives, and pipes are the **responsibility of the feature module**
+        not the _routing_ module.
+
+        A Routing Module should _only_ be imported by its companion module.
+
+        The `AppRoutingModule`, `ContactRoutingModule` and `HeroRoutingModule` are good examples.
+      .l-sub-section
+        :marked
+          See also "[Do you need a _Routing Module_?](../guide/router.html#why-routing-module)".
 
   tr
     td(style="vertical-align: top")
@@ -1419,7 +1459,7 @@ table
         
         部件模块应该只有`declarations`，并导出里面的绝大多数声明。
 
-        A Widget Module should rarely have _providers_. 
+        A Widget Module should rarely have _providers_.
         Know what you're doing and why if you deviate from this guideline.
         
         窗口部件模块很少会有`providers`。
@@ -1500,6 +1540,25 @@ table
       p <code>ContactModule</code>、<code>HeroModule</code>、<code>CrisisModule</code>
   tr
     td
+      p Routing
+      p 路由
+    td
+      p No
+      p 无
+    td
+      p Yes
+      p 有
+    td
+      p No
+      p 无
+    td
+      p <code>AppModule</code>
+      p <code>AppModule</code>
+    td
+      p <code>HttpModule</code>, <code>CoreModule</code>
+      p <code>HttpModule</code>、<code>CoreModule</code>   
+  tr
+    td 
       p Service
       p 服务
     td
@@ -1516,7 +1575,7 @@ table
       p <code>AppModule</code>
     td
       p <code>HttpModule</code>, <code>CoreModule</code>
-      p <code>HttpModule</code>、<code>CoreModule</code>
+      p <code>HttpModule</code>、<code>CoreModule</code>   
   tr
     td
       p Widget
@@ -1590,7 +1649,7 @@ code-example(format='.').
   
   Angular的模块类与JavaScript的模块类有三个主要的不同点：
 
-  1. An Angular module bounds [_declarable classes_](#q-declarables) only. 
+  1. An Angular module bounds [_declarable classes_](#q-declarables) only.
   Declarables are the only classes that matter to the [Angular compiler](#q-angular-compiler).
   
   1. Angular模块只绑定了[_可声明的类_](#q-declarables)，这些可声明的类只是供[Angular编译器](#q-angular-compiler)用的。
@@ -1600,7 +1659,7 @@ code-example(format='.').
      
   1. JavaScript模块把所有成员类都定义在一个巨型文件，Angular模块则把自己的类都列在`@NgModule.declarations`数组中。
 
-  1. An Angular module can only export the [_declarable classes_](#q-declarables) 
+  1. An Angular module can only export the [_declarable classes_](#q-declarables)
   it owns or imports from other modules.
   It doesn't declare or export any other kind of class.
   
@@ -1642,7 +1701,7 @@ h4.
 h4 Angular如何在模板中查找组件、指令和管道？<br>什么是<i><b>模板引用</b></i>？
 
 :marked
-  The [Angular compiler](#q-angular-compiler) looks inside component templates 
+  The [Angular compiler](#q-angular-compiler) looks inside component templates
   for other components, directives, and pipes. When it finds one, that's a "template reference".
   
   [Angular编译器](#q-angular-compiler)在组件模板内查找其它组件、指令和管道。一旦找到了，那就是一个“模板引用”。
@@ -1663,7 +1722,7 @@ h4 Angular如何在模板中查找组件、指令和管道？<br>什么是<i><b>
 
 .l-hr
 
-a#q-angular-compiler  
+a#q-angular-compiler
 .l-main-section
 :marked
   ### What is the Angular Compiler?
@@ -1678,7 +1737,7 @@ a#q-angular-compiler
 
   The code we write is not immediately executable.
   Consider **components**.
-  Components have templates that contain custom elements, attribute directives, Angular binding declarations, 
+  Components have templates that contain custom elements, attribute directives, Angular binding declarations,
   and some peculiar syntax that clearly isn't native HTML.
   
   我们写的代码是无法直接执行的。
@@ -1691,24 +1750,24 @@ a#q-angular-compiler
   *Angular编译器*读取模板的HTML，把它和相应的组件类代码组合在一起，并产出*组件工厂*。
   
   A component factory creates a pure, 100% JavaScript representation
-  of the component that incorporates everything described in its `@Component` metadata: 
+  of the component that incorporates everything described in its `@Component` metadata:
   the HTML, the binding instructions, the attached styles ... everything.
   
   组件工厂为组件创建纯粹的、100% JavaScript的表示形式，它包含了`@Component`元数据中描述的一切：HTML、绑定指令、附属的样式等……
 
-  Because **directives** and **pipes** appear in component templates, 
+  Because **directives** and **pipes** appear in component templates,
   the _Angular Compiler_ incorporates them into compiled component code too.
   
   由于**指令**和**管道**都出现在组件模板中，*Angular编译器**也同样会把它们组合到编译成的组件代码中。
 
-  `@NgModule` metadata tells the _Angular Compiler_ what components to compile for this module and 
+  `@NgModule` metadata tells the _Angular Compiler_ what components to compile for this module and
   how to link this module with other modules.
   
   `@NgModule`元数据告诉*Angular编译器*要为当前模块编译哪些组件，以及如何把当前模块和其它模块链接起来。
 
 .l-hr
 
-a#q-ngmodule-api  
+a#q-ngmodule-api
 .l-main-section
 :marked
   ## *NgModule* API
@@ -1739,13 +1798,13 @@ table
     td(style="vertical-align: top") <code>declarations</code>
     td
       :marked
-        A list of [declarable](#q-declarables) classes, 
+        A list of [declarable](#q-declarables) classes,
         the **component**, **directive** and **pipe** classes that _belong to this module_.
         
         [可声明类](#q-declarables)的列表，也就是属于当前模块的**组件**、**指令**和**管道**类。
 
         These declared classes are visible within the module but invisible to
-        components in a different module unless (a) they are _exported_ from this module and 
+        components in a different module unless (a) they are _exported_ from this module and
         (b) that other module _imports_ this one.
         
         这些声明的类对组件内部可见，但是对其它模块不可见，除非 (a) 这些类从当前模块中*导出过*，并且 (b) 其它模块导入了当前模块。
@@ -1787,7 +1846,7 @@ table
         惰性加载模块有自己的子注入器，通常它是应用的根注入器的直接子级。
 
         Lazy loaded services are scoped to the lazy module's injector.
-        If a lazy loaded module also provides the `HeroService`, 
+        If a lazy loaded module also provides the `HeroService`,
         any component created within that module's context (e.g., by router navigation)
         gets the local instance of the service, not the instance in the root application injector.
         
@@ -1817,7 +1876,7 @@ table
         
         在两种情况下组件模板可以[引用](#q-template-reference)其它组件、指令或管道：或者所引用的类是声明在当前模块中的，或者那个类已经从其它模块中导入进来了。
 
-        A component can use the `NgIf` and `NgFor` directives only because its parent module 
+        A component can use the `NgIf` and `NgFor` directives only because its parent module
         imported the Angular `CommonModule` (perhaps indirectly by importing `BrowserModule`).
         
         组件可以使用`NgIf`和`NgFor`指令，只是因为它所在的模块导入了Angular的`CommonModule`（也可能是通过导入`BrowserModule`而间接导入的）。
@@ -1834,13 +1893,13 @@ table
     td(style="vertical-align: top") <code>exports</code>
     td
       :marked
-        A list of declarations &mdash; **component**, **directive**, and **pipe** classes &mdash; that 
+        A list of declarations &mdash; **component**, **directive**, and **pipe** classes &mdash; that
         an importing module can use.
         
         可供导入了自己的模块使用的可声明对象（**组件**、**指令**、**管道类**）的列表。
 
-        Exported declarations are the module's _public API_. 
-        A component in another module can [reference](#q-template-reference) _this_ module's `HeroComponent` 
+        Exported declarations are the module's _public API_.
+        A component in another module can [reference](#q-template-reference) _this_ module's `HeroComponent`
         if (a) it imports this module and (b) this module exports `HeroComponent`.
         
         这些导出的可声明对象就是模块的*公开API*。
@@ -1906,7 +1965,7 @@ table
         大多数开发人员从来不会设置该属性，为什么呢？
 
         The [_Angular Compiler_](#q-angular-compiler) must know about every component actually used in the application.
-        The compiler can discover most components by walking the tree of references 
+        The compiler can discover most components by walking the tree of references
         from one component template to another.
         
         [_Angular编译器_](#q-angular-compiler)必须知道在应用中实际用过的每一个组件。
@@ -1925,7 +1984,7 @@ table
         路由组件同样是*入口组件*，因为它们也不会被从模板中引用。
         路由器创建会它们，并把它们扔到DOM中的`<router-outlet>`。
 
-        While the bootstrapped and routed components are _entry components_, 
+        While the bootstrapped and routed components are _entry components_,
         we usally don't have to add them to a module's `entryComponents` list.
         
         *引导组件*和*路由组件*都是*入口组件*，我们一般不用再把它们添加到模块的`entryComponents`列表中。
diff --git a/public/docs/ts/latest/cookbook/rc4-to-rc5.jade b/public/docs/ts/latest/cookbook/rc4-to-rc5.jade
deleted file mode 100644
index 1bcb4595ee..0000000000
--- a/public/docs/ts/latest/cookbook/rc4-to-rc5.jade
+++ /dev/null
@@ -1,199 +0,0 @@
-include ../_util-fns
-
-:marked
-  # Angular Modules (NgModules) have landed in Angular RC5!
-  
-  # Angular模块（NgModule）功能在Angular RC5中发布了！
-
-  _Angular Modules_, also known as _NgModules_, are the powerful new way to organize and bootstrap your Angular application. 
-  
-  *Angular模块*（也叫*NgModule*）是组织代码和引导应用的强力新途径。
-  
-.l-sub-section
-  :marked
-    Read more in the ["RC5 and NgModules" announcement](https://angularjs.blogspot.com).
-    
-    要了解更多，参见["RC5和NgModule"正式发布](https://angularjs.blogspot.com)。
-
-    Learn the details of NgModule in the [Angular Module](../guide/ngmodule.html) chapter.
-    
-    要深入了解NgModule，参见[Angular Module](../guide/ngmodule.html)页。
-    
-:marked
-  The new  `@NgModule` decorator gives you module-level components, directives, and pipes without 
-  the need to specify them repeatedly in every component of your application. 
-  
-  新的`@NgModule`装饰器让我们可以指定模块级的组件、指令和管道，而不需要在应用中的每个组件中都指定它们。
-  
-  The `@NgModule` metadata give the Angular compiler the context needed so that you can use the same code 
-  regardless of whether you are running Angular in [Ahead-of-time](../glossary.html#aot) or [Just
-   in Time](../glossary.html#jit) mode.
-   
-  `@NgModule`元数据为Angular编译器提供了上下文环境，以便我们可以让同一套代码分别运行在[预编译AoT模式](../glossary.html#aot)或[即时编译JiT模式](../glossary.html#jit)。
-
-  ## How do I use them?
-  
-  ## 如何使用？
-
-  If you were previously writing an Angular application, your app should continue to work in RC5. 
-  We’ve worked hard to ensure that applications that worked with RC4 continue to work while you migrate. 
-  For this to work, we’re doing 2 things automatically for you:
-  
-  如果你曾经写过Angular应用，那么它应该仍然能在RC5中工作。
-  我们付出了很多努力来确保RC4中的应用也能正常工作在RC5中。
-
-  * We create an implicit `NgModule` for you as part of the `bootstrap()` command
-  * 我们在`bootstrap()`命令中会为你创建一个隐式的`NgModule`
-  * We automatically hoist your components, pipes, and directives
-  * 我们会自动升级你的组件、管道和指令
-
-  While your application will continue to work today, 
-  it’s important that you update your application to ensure future updates and deprecations don’t negatively affect you. 
-  To make it easier, you can think of the process as having 5 steps.
-  
-  虽然应用仍然能工作，但你最好还是升级下应用，以确保未来的升级和废弃的特性不会给你带来困扰。
-  要让这项工作更容易，你可以遵循如下五个步骤：
-
-  1. **Update to RC5** - Your application should continue to work without modification, but it’s important that you are running the latest version of Angular.
-  
-  1. **升级到RC5** - 你的应用不用修改也仍然能正常工作，但重点是你要运行在最新版本的Angular中。
-  
-  2. **Create an _NgModule_** - Create the root `NgModule` that you’ll use to bootstrap your application.
-  
-  2. **创建*NgModule*** - 创建一个根`NgModule`，你要用它来引导应用程序。
-  
-  3. **Update your bootstrap** - Bootstrap that module instead of your root component
-  
-  3. **升级你的引导代码** - 改成引导根模块，而不再是根组件
-  
-  4. **Update your 3rd party libraries** - Take advantage of the latest from Forms, Material, Http, and more
-  
-  4. **升级你的第三方库** - 获得最新版表单、Material设计、Http等模块的优点
-  
-  5. **Cleanup** - Clean up your code. 
-  The deprecated classes, methods and properties will be removed from Angular very soon.
-  
-  5. **清理** - 清理你的代码。那些被标记为废弃的类、方法和属性将很快从Angular中移除
-
-  Prefer to look at code and diffs? 
-  Check out the upgrade in [one commit](https://github.com/StephenFluin/ngmodule-migration/commit/9f9c6ae099346e491fc31d77bf65ed440e1f164c).
-  
-  想看看代码级变更？
-  那就来[这个提交](https://github.com/StephenFluin/ngmodule-migration/commit/9f9c6ae099346e491fc31d77bf65ed440e1f164c)吧。
-
-  ## 1. Update to RC5
-  
-  ## 1. 升级到RC5
-  
-  If you use npm, you should be able to either update your `package.json` file and run `npm install`. 
-  Or alternatively you can run the following command:
-  
-  如果使用npm，那么你可以手动修改`package.json`文件并运行`npm install`命令，或者直接运行下列命令：
-
-code-example(format='.' language='bash').
-  npm install @angular/{core,common,compiler,platform-browser,platform-browser-dynamic} --save
-
-:marked
-  Update your optional libraries
-  
-  更新你的可选库
-
-code-example(format='.' language='bash').
-  npm install @angular/router
-  npm install @angular/forms
-  npm install @angular2-material/{core,button,card,...}@latest
-
-:marked
-  Update the Angular CLI if you're using that tool
-  
-  如果你在使用Angular CLI，也要更新它
-
-code-example(format='.'  language='bash').
-  npm install angular-cli @angular/tsc-wrapped --save-dev
-
-:marked
-  ## 2. Create an _NgModule_
-  
-  ## 2. 创建*NgModule*
-  
-  Create a new file called app.module.ts. Populate it with your root component as follows:
-  
-  创建一个名叫`app.module.ts`的新文件，把以前的根组件换成这样：
-
-code-example(format='.' language='javascript').
-  import { NgModule }       from '@angular/core';
-  import { BrowserModule  } from '@angular/platform-browser';
-  import { AppComponent }   from './app.component';
-
-  @NgModule({
-      declarations: [AppComponent],
-      imports:      [BrowserModule],
-      bootstrap:    [AppComponent],
-  })
-  export class AppModule {}
-
-:marked
-  ## 3. Update your bootstrap
-  
-  ## 3. 升级你的引导代码
-  
-  Update your `main.ts` file to bootstrap using the "Just-in-time" (JiT) compiler.
-  
-  升级`main.ts`文件，改用即时（JiT）编译器来引导。
-
-code-example(format='.' language='javascript').
-  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-  import { AppModule }              from './app/app.module';
-
-  platformBrowserDynamic().bootstrapModule(AppModule);
-
-:marked
-  ## 4. Import library modules in your _NgModule_
-  
-  ## 4. 在*NgModule*中导入库模块
-  
-  Remove the Angular and 3rd party library providers from your `AppComponent` providers 
-  and switch to `NgModule` imports as seen in this example.
-  
-  从你的`AppComponent`的`providers`中移除Angular和第三方库中的服务提供商，改为使用`NgModule`中的`imports`，就像这样：
-
-code-example(format='.' language='javascript').
-  imports: [
-      BrowserModule, 
-      // Router
-      RouterModule.forRoot(config), 
-      // Forms
-      FormsModule, 
-      // Material Design
-      MdSlideToggleModule, 
-      MdButtonModule, 
-      MdToolbarModule, 
-      MdCardModule, 
-      MdInputModule,
-  ],
-
-:marked
-  ## 5. Cleanup
-  ## 5. 清理
-  
-  For RC5, you can leave your components, directives and pipes 
-  in the `directives` and `pipes` properties of your `@Component` metadata.
-  In fact, we automatically hoist (add) them to the NgModule to which they belong.
-  
-  对于RC5来说，你仍然可以在`@Component`元数据的`directives`和`pipes`属性中指定组件、指令和管道。
-  实际上，我们会自动把它们加入到它们所属的NgModule中去。
-
-.alert.is-important
-  :marked
-    This option is temporary for backward compatibility. 
-    It will be removed in the final release of Angular 2.0.
-    
-    这个选项只是为了向后兼容而临时设置的。
-    当Angular 2.0正式发布的时候，它将会被移除。
-
-    Get ahead of the game and start moving your component `directives` and `pipes` 
-    into module `declarations` as soon as possible.
-    We intend to delete _all_ deprecated class, methods, and properties in the next RC.
-
-    你可以先继续，但要尽早把这些组件、指令和管道移到模块的`declarations`中。
-    我们准备在下一个RC中删除*所有*废弃的类、方法和属性。
diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade
index e89e2c39a3..e2871ffccd 100644
--- a/public/docs/ts/latest/glossary.jade
+++ b/public/docs/ts/latest/glossary.jade
@@ -808,15 +808,12 @@ a#N
   :marked
     Read more in the page on [pipes](!{docsLatest}/guide/pipes.html).
 
-    要了解更多，参见[管道](/docs/ts/latest/guide/pipes.html)一章。
-
-- var _ProviderUrl = docsLatest+'/api/'+(lang == 'dart' ? 'angular2.core' : 'core/index')+'/Provider-class.html'
 :marked
   ## Provider
   ## 提供商(Provider)
 .l-sub-section
   :marked
-    A [provider](!{_ProviderUrl}) creates a new instance of a dependency for the
+    A _provider_ creates a new instance of a dependency for the
     [dependency injection](#dependency-injection) system.
     It relates a lookup token to code&mdash;sometimes called a "recipe"&mdash;that can create a dependency value.
 
diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json
index ebd833e9e1..8f4c4b8d28 100644
--- a/public/docs/ts/latest/guide/_data.json
+++ b/public/docs/ts/latest/guide/_data.json
@@ -63,6 +63,18 @@
     "basics": true
   },
 
+  "glossary": {
+    "title": "Glossary",
+    "intro": "Brief definitions of the most important words in the Angular vocabulary",
+    "basics": true
+  },
+
+  "change-log": {
+    "title": "Change Log",
+    "intro": "An annotated history of recent documentation improvements.",
+    "basics": true
+  },
+
   "ngmodule": {
     "title": "Angular模块（NgModule）",
     "intro": "用@NgModule定义应用中的模块"
@@ -88,12 +100,6 @@
     "intro": "学习如何给组件应用CSS样式。"
   },
 
-  "glossary": {
-    "title": "词汇表",
-    "intro": "Angular重要词汇的简短定义。",
-    "basics": true
-  },
-
   "hierarchical-dependency-injection": {
     "title": "多级依赖注入器",
     "navTitle": "多级注入器",
diff --git a/public/docs/ts/latest/guide/attribute-directives.jade b/public/docs/ts/latest/guide/attribute-directives.jade
index efca11a311..1f9aaac46c 100644
--- a/public/docs/ts/latest/guide/attribute-directives.jade
+++ b/public/docs/ts/latest/guide/attribute-directives.jade
@@ -6,7 +6,17 @@ block includes
   
   **属性**型指令用于改变一个DOM元素的外观或行为。
 
+
 :marked
+  # Contents
+  
+
+  * [Directives overview](#directive-overview)
+  * [Build a simple attribute directive](#write-directive)
+  * [Apply the attribute directive to an element in a template](#apply-directive)
+  * [Respond to user-initiated events](#respond-to-user)
+  * [Pass values into the directive using data binding](#bindings)
+  * [Bind to a second property](#second-property)
   In this chapter we will
   
   本章中我们将：
@@ -21,10 +31,17 @@ block includes
 
   试试<live-example>在线例子</live-example>。
 
+.l-main-section
+a#directive-overview
+:marked
   ## Directives overview
+
   ## 指令概览
   
   There are three kinds of directives in Angular:
+  1. Components&mdash;directives with a template.
+  1. Structural directives&mdash;change the DOM layout by adding and removing DOM elements.
+  1. Attribute directives&mdash;change the appearance or behavior of an element.
   
   在Angular中有三种类型的指令
   1. Components
@@ -34,9 +51,13 @@ block includes
   1. Attribute directives
   1. 属性型指令
 
-  A *Component* is really a directive with a template. 
-  It's the most common of the three directives and we tend to write lots of them as we build applications.
+  *Components* are the most common of the three directives. Read more about creating them
+  in step three of [QuickStart](../quickstart.html#root-component).
 
+  *Structural Directives* change the structure of the view. Two examples are [NgFor](template-syntax.html#ngFor) and [NgIf](template-syntax.html#ngIf)
+  in the [Template Syntax](template-syntax.html) page.
+
+  *Attribute directives* are used as attributes of elements. The built-in [NgStyle](template-syntax.html#ngStyle) directive in the [Template Syntax](template-syntax.html) page, for example,
   *组件*其实是一个带模板的指令。
   它是这三种指令中最常用的，我们在构建应用程序时会写大量组件。
 
@@ -49,6 +70,7 @@ block includes
   An *Attribute* directive can change the appearance or behavior of an element.
   The built-in [NgStyle](template-syntax.html#ngStyle) directive, for example,
   can change several element styles at the same time.
+
   
   *属性型*指令改变一个元素的外观或行为。
   比如，内置的[NgStyle](template-syntax.html#ngStyle)指令可以同时修改元素的多种样式。
@@ -80,6 +102,9 @@ block includes
 a#write-directive
 :marked
   ## Build a simple attribute directive
+  An attribute directive minimally requires building a controller class annotated with
+  `@Directive`, which specifies the selector that identifies
+  the attribute.
   ## 创建一个简单的属性型指令
   
   An attribute directive minimally requires building a controller class annotated with 
@@ -90,11 +115,28 @@ a#write-directive
   属性型指令至少需要一个带有`@Directive`装饰器的控制器类。该装饰器指定了一个选择器，用于指出与此指令相关联的属性名字。
   控制器类实现了指令需要具备的行为。
 
+  This page demonstrates building a simple attribute
+  directive to set an element's background color
+  when the user hovers over that element.
+.l-sub-section
+  :marked
+    Technically, a directive isn't necessary to simply set the background color. Style binding can set styles as follows:
+
+  +makeExample('attribute-directives/ts/app/app.component.1.html','p-style-background')
+
+  :marked
+    Read more about [style binding](template-syntax.html#style-binding) on the [Template Syntax](template-syntax.html) page.
+
+    For a simple example, though, this will demonstrate how attribute directives work.
+
+
   Let's build a small illustrative example together.
   
   让我们构建一个小例子来说明它。
 
 :marked
+  ### Write the directive code
+  Create a new project folder (`attribute-directives`) and follow the steps in [QuickStart](../quickstart.html).
   ### Our first draft
   ### 第一个草稿
   Create a new project folder (`attribute-directives`) and follow the steps in the [QuickStart](../quickstart.html).
@@ -103,6 +145,7 @@ a#write-directive
 
 include ../_quickstart_repo
 :marked
+  Create the following source file in the indicated folder with the following code:
   Create the following source file in the indicated folder with the given code:
   
   在指定的文件夹下创建下列源码文件：
@@ -111,6 +154,16 @@ include ../_quickstart_repo
 
 block highlight-directive-1
   :marked
+    The `import` statement specifies symbols from the Angular `core`:
+    1. `Directive` provides the functionality of the `@Directive` decorator.
+    1. `ElementRef` [injects](dependency-injection.html) into the directive's constructor
+    so the code can access the DOM element.
+    1. `Input` allows data to flow from the binding expression into the directive.
+    1. `Renderer` allows the code to change the DOM element's style.
+
+    Next, the `@Directive` decorator function contains the directive metadata in a configuration object
+    as an argument.
+
     We begin by importing some symbols from the Angular `core`.
     We need the `Directive` symbol for the `@Directive` decorator.
     We need the `ElementRef` to [inject](dependency-injection.html) into the directive's constructor
@@ -129,10 +182,14 @@ block highlight-directive-1
 
     然后，通过给`@Directive`装饰器函数传入一个“配置对象”来定义指令的元数据。
 :marked
+  `@Directive` requires a CSS selector to identify
+  the HTML in the template that is associated with the directive.
   A `@Directive` decorator for an attribute directive requires a css selector to identify
   the HTML in the template that is associated with our directive.
   The [CSS selector for an attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
   is the attribute name in square brackets.
+  Here, the directive's selector is `[myHighlight]`.
+  Angular will locate all elements in the template that have an attribute named `myHighlight`.
  
   属性型指令的`@Directive`装饰器需要一个css选择器，以便从模板中识别出关联到这个指令的HTML。
   [css中的attribute选择器](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)就是属性名称加方括号。
@@ -144,6 +201,10 @@ block highlight-directive-1
 .l-sub-section
   :marked
     ### Why not call it "highlight"?
+    Though *highlight* is a more concise name than *myHighlight* and would work,
+    a best practice is to prefix selector names to ensure
+    they don't conflict with  standard HTML attributes.
+    This also reduces the risk colliding with third-party directive names.
     ### 为什么不直接叫做"highlight"？
     *highlight* is a nicer name than *myHighlight* and, technically, it would work if we called it that.
     
@@ -156,6 +217,8 @@ block highlight-directive-1
     不过，我们还是建议选择一个带前缀的选择器名称，以保证无论现在还是未来它都不会和任何标准HTML属性发生冲突。
     当使用自己的前缀时，也会减少和第三方指令发生命名冲突的风险。
 
+    Make sure you do **not** prefix the `highlight` directive name with **`ng`** because
+    that prefix is reserved for Angular and using it could cause bugs that are difficult to diagnose. For a simple demo, the short prefix, `my`, helps distinguish your custom directive.
     We do **not** prefix our `highlight` directive name with **`ng`**.
     That prefix belongs to Angular.
     
@@ -166,8 +229,9 @@ block highlight-directive-1
     
     我们需要一个自己的前缀，最好短点，目前用的这个`my`前缀就不错。
 p
-  | After the #[code @Directive] metadata comes the directive's controller class, which contains the logic for the directive. 
+  | After the #[code @Directive] metadata comes the directive's controller class, called #[code HighlightDirective], which contains the logic for the directive.
   +ifDocsFor('ts')
+    |  Exporting #[code HighlightDirective] makes it accessible to other components.
     | We export `HighlightDirective` to make it accessible to other components.
 p
   | `@Directive`元数据的后面就是指令的控制器类，它包括了指令的工作逻辑。
@@ -177,6 +241,9 @@ p
   Angular creates a new instance of the directive's controller class for
   each matching element, injecting an Angular `ElementRef` and `Renderer`
   into the constructor.
+  `ElementRef` is a service that grants direct access to the DOM element
+  through its `nativeElement` property and `Renderer` allows the code to set the element style.
+
   `ElementRef` is a service that grants us direct access to the DOM element
   through its `nativeElement` property and with `Renderer` we can set the element style.
   
@@ -187,6 +254,7 @@ p
 a#apply-directive
 :marked
   ## Apply the attribute directive
+  To use the new `HighlightDirective`, create a template that
   ## 使用属性型指令
   The `AppComponent` in this sample is a test harness for our `HighlightDirective`.
   Let's give it a new template that 
@@ -197,7 +265,7 @@ a#apply-directive
   我们来给它一个新的模板，把这个指令作为属性应用到一个段落(`p`)元素上。
   用Angular的话说，`<p>`元素就是这个属性型指令的**宿主**。
 p
-  | We'll put the template in its own 
+  | Put the template in its own
   code #[+adjExPath('app.component.html')]
   | file that looks like this:
 p
@@ -206,6 +274,7 @@ p
   | 文件中，就像这样：
 +makeExample('attribute-directives/ts/app/app.component.1.html',null,'app/app.component.html')(format=".")
 :marked
+  Now reference this template in the `AppComponent`:
   A separate template file is clearly overkill for a 2-line template. 
   Hang in there; we're going to expand it later.
   Meanwhile, we'll revise the `AppComponent` to reference this template.
@@ -215,6 +284,9 @@ p
   同时，要修改`AppComponent`，使其引用这个模板。
 +makeExample('attribute-directives/ts/app/app.component.ts',null,'app/app.component.ts')
 :marked
+  Next, add an `import` statement to fetch the `Highlight` directive and
+  add that class to the `declarations` NgModule metadata. This way Angular
+  recognizes the directive when it encounters `myHighlight` in the template.
   We'll add an `import` statement to fetch the 'Highlight' directive and, 
   added that class to the `declarations` NgModule metadata so that Angular 
   will recognize our directive when it encounters `myHighlight` in the template. 
@@ -225,6 +297,8 @@ p
 +makeExample('attribute-directives/ts/app/app.module.ts',null,'app/app.module.ts')
 
 :marked
+  Now when the app runs, the `myHighlight` directive highlights the paragraph text.
+
   We run the app and see that our directive highlights the paragraph text.
   
   运行应用，就会看到我们的指令确实高亮了段落中的文本。
@@ -233,10 +307,12 @@ figure.image-display
   img(src="/resources/images/devguide/attribute-directives/first-highlight.png" alt="First Highlight")
 .l-sub-section
   :marked
+    ### Your directive isn't working?
     ### Your directive isn't working? 
     ### 你的指令没生效？
 
     Did you remember to add the directive to the the `declarations` attribute of `@NgModule`? It is easy to forget!
+
     
     你记着设置`@NgModule`的`declarations`数组了吗？它很容易被忘掉。
     
@@ -246,7 +322,13 @@ figure.image-display
   code-example(format="nocode").
     EXCEPTION: Template parse errors:
       Can't bind to 'myHighlight' since it isn't a known property of 'p'.
+
   :marked
+    Angular detects that you're trying to bind to *something* but it doesn't know what,
+    so it looks to the `declarations` metadata array. By specifying `HighlightDirective`
+    in the array, Angular knows to check the import statements and from there,
+    to go to `highlight.directive.ts` to find out what `myHighlight` does.
+
     Angular detects that we're trying to bind to *something* but it doesn't know what.
     We have to tell it by listing `HighlightDirective` in the `declarations` metadata array.
     
@@ -254,6 +336,10 @@ figure.image-display
     我们必需把`HighlightDirective`列在元数据的`declarations`数组中，来告诉它有这样一个指令。
     
 :marked
+  To summarize, Angular found the `myHighlight` attribute on the `<p>` element. It created
+  an instance of the `HighlightDirective` class,
+  injecting a reference to the element into the constructor
+  where the `<p>` element's background style is set to yellow.
   Let's recap what happened.
   
   我们来概括一下发生了什么。
@@ -270,10 +356,19 @@ figure.image-display
 .l-main-section
 a#respond-to-user
 :marked
+  ## Respond to user-initiated events
   ## Respond to user action
   
   ## 响应用户的操作
 
+  Currently, `myHighlight` simply sets an element color.
+  The directive should set the color when the user hovers over an element.
+
+  This requires two things:
+  1. detecting when the user hovers into and out of the element.
+  2. responding to those actions by setting and clearing the highlight color.
+
+  To do this, you can apply the `@HostListener` !{_decorator} to methods which are called when an event is raised.
   We are not satisfied to simply set an element color.
   Our directive should set the color in response to a user action.
   Specifically, we want to set the color when the user hovers over an element.
@@ -301,12 +396,20 @@ a#respond-to-user
 .l-sub-section
   
   :marked
+    The `@HostListener` !{_decorator} refers to the DOM element that hosts an attribute directive, the `<p>` in this case.
+
+    It is possible to attach event listeners by manipulating the host DOM element directly, but
     The `@HostListener` !{_decorator} refers to the DOM element that hosts our attribute directive, the `<p>` in our case.
     
     `@HostListener`装饰器引用的是我们这个属性型指令的宿主元素，在这个例子中就是`<p>`。
      
     We could have attached event listeners by manipulating the host DOM element directly, but
     there are at least three problems with such an approach:
+
+    1. You have to write the listeners correctly.
+    1. The code must *detach* the listener when the directive is destroyed to avoid memory leaks.
+    1. Talking to DOM API directly isn't a best practice.
+
     
     可以通过直接操纵DOM元素的方式给宿主DOM元素挂上一个事件监听器。
     但这种方法至少有三个问题：
@@ -322,6 +425,7 @@ a#respond-to-user
     我们还是围绕`@HostListener`装饰器来吧。
     
 :marked
+  Now implement the two mouse event handlers:
   Now we implement the two mouse event handlers:
   
   现在，我们实现那两个鼠标事件处理器：
@@ -330,7 +434,7 @@ a#respond-to-user
 
 :marked
   Notice that they delegate to a helper method that sets the color via a private local variable, `#{_priv}el`.
-  We revise the constructor to capture the `ElementRef.nativeElement` in this variable.
+  Next, revise the constructor to capture the `ElementRef.nativeElement` in this variable.
 
   注意，它们把处理逻辑委托给了一个辅助方法，这个方法会通过一个私有变量`#{_priv}el`来设置颜色。
   我们要修改构造函数，来把`ElementRef.nativeElement`存进这个私有变量。
@@ -345,6 +449,8 @@ a#respond-to-user
 +makeExample('app/highlight.directive.2.ts')
 
 :marked
+  Run the app and confirm that the background color appears when the mouse hovers over the `p` and
+  disappears as it moves out.
   We run the app and confirm that the background color appears as we move the mouse over the `p` and
   disappears as we move out.
   
@@ -354,16 +460,20 @@ figure.image-display
 .l-main-section
 a#bindings
 :marked
+  ## Pass values into the directive using data binding
+
   ## Configure the directive with binding
   ## 通过绑定来配置指令
 
   Currently the highlight color is hard-coded within the directive. That's inflexible.
+  A better practice is to set the color externally with a binding as follows:
   We should set the color externally with a binding like this:
 
   现在的高亮颜色是在指令中硬编码进去的。这样没有弹性。
   我们应该通过绑定从外部设置这个颜色。就像这样：
 +makeExample('attribute-directives/ts/app/app.component.html','pHost')
 :marked
+  You can extend the directive class with a bindable **input** `highlightColor` property and use it to highlight text.
   We'll extend our directive class with a bindable **input** `highlightColor` property and use it when we highlight text.
   
   我们将给指令类增加一个可绑定**输入**属性`highlightColor`，当需要高亮文本的时候，就用它。
@@ -376,7 +486,7 @@ a#bindings
 
 a#input
 :marked
-  The new `highlightColor` property is called an *input* property because data flows from the binding expression into our directive.
+  The new `highlightColor` property is called an *input* property because data flows from the binding expression into the directive.
   Notice the `@Input()` #{_decorator} applied to the property.
 
   新的`highlightColor`属性被称为“输入”属性，这是因为数据流是从绑定表达式到这个指令的。
@@ -385,6 +495,10 @@ a#input
 +makeExcerpt('app/highlight.directive.ts', 'color')
 
 :marked
+  `@Input` adds metadata to the class that makes the `highlightColor` property available for
+  property binding under the `myHighlight` alias.
+  Without this input metadata Angular rejects the binding.
+  See the [appendix](#why-input) below for more information.
   `@Input` adds metadata to the class that makes the `highlightColor` property available for 
   property binding under the `myHighlight` alias. 
   We must add this input metadata or Angular will reject the binding.
@@ -395,6 +509,8 @@ a#input
   参见下面的[附录](#why-input)来了解为何如此。
 .l-sub-section
   :marked
+    ### @Input(_alias_)
+    Currently, the code **aliases** the `highlightColor` property with the attribute name by
     ### @Input(_alias_) 
     ### @Input(_别名_)
     The developer who uses this directive expects to bind to the attribute name, `myHighlight`.
@@ -418,8 +534,19 @@ a#input
     可以通过把`myHighlight`传给`@Input`#{_decoratorCn}来把这个属性名作为`highlightColor`属性的别名。
     
   +makeExcerpt('app/highlight.directive.ts', 'color', '')
+  :marked
+    The code binds to the attribute name, `myHighlight`, but the
+    the directive property name is `highlightColor`. That's a disconnect.
+
+    You can resolve the discrepancy by renaming the property to `myHighlight` and define it as follows:
+
+  +makeExcerpt('app/highlight.directive.ts', 'highlight', '')
+
   
 :marked
+  Now that you're getting the highlight color as an input, modify the `onMouseEnter()` method to use
+  it instead of the hard-coded color name and define red as the default color.
+
   Now that we're getting the highlight color as an input, we modify the `onMouseEnter()` method to use
   it instead of the hard-coded color name.
   We also define red as the default color to fallback on in case
@@ -431,6 +558,9 @@ a#input
 +makeExcerpt('attribute-directives/ts/app/highlight.directive.ts', 'mouse-enter', '')
 
 :marked
+  To let users pick the highlight color and bind their choice to the directive,
+  update `app.component.html` as follows:
+
   Now we'll update our `AppComponent` template to let 
   users pick the highlight color and bind their choice to our directive.
   
@@ -445,6 +575,13 @@ a#input
 .l-sub-section
   :marked
     ### Where is the templated *color* property?
+
+    You may notice that the radio button click handlers in the template set a `color` property
+    and the code is binding that `color` to the directive.
+    However, you never defined a color property for the host `AppComponent`.
+    Yet this code works. Where is the template `color` value going?
+
+    Browser debugging reveals that Angular dynamically added a `color` property
     ### 模板的*color*属性在哪里？
     
     The eagle-eyed may notice that the radio button click handlers in the template set a `color` property
@@ -462,6 +599,11 @@ a#input
     
     Browser debugging reveals that Angular dynamically added a `color` property 
     to the runtime instance of the `AppComponent`.
+
+    This is *convenient* behavior but it is also *implicit* behavior that could be confusing.
+    For clarity, consider adding the `color` property to the `AppComponent`.
+
+
     
     在浏览器中调试就会发现，Angular在`AppComponent`的运行期实例上添加了一个`color`属性。
     
@@ -472,6 +614,7 @@ a#input
     虽然这样也可行，但我们建议你还是要把`color`属性加到`AppComponent`中。
 
 :marked
+  Here is the second version of the directive in action.
   Here is our second version of the directive in action.
   
   下面是指令操作演示的第二版。
@@ -479,8 +622,13 @@ figure.image-display
   img(src="/resources/images/devguide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2")
 
 .l-main-section
+a#second-property
 :marked
   ## Bind to a second property
+  This example directive only has a single customizable property. A real app often needs more.
+
+  Let's allow the template developer to set the default color&mdash;the color that prevails until the user picks a highlight color.
+  To do this, first add a second **input** property to `HighlightDirective` called `defaultColor`:
   ## 绑定到第二个属性
   Our directive only has a single, customizable property. What if we had ***two properties***?
   
@@ -494,6 +642,13 @@ figure.image-display
 +makeExample('attribute-directives/ts/app/highlight.directive.ts', 'defaultColor')(format=".")
 :marked
   The `defaultColor` property has a setter that overrides the hard-coded default color, "red".
+  You don't need a getter.
+
+  How do you bind to it? The app is already using `myHighlight` attribute name as a binding target.
+
+  Remember that a *component is a directive, too*.
+  You can add as many component property bindings as you need by stringing them along in the template
+  as in this example that sets the `a`, `b`, `c` properties to the string literals 'a', 'b', and 'c'.
   We don't need a getter.
   
   `defaultColor`属性是一个setter函数，它代替了硬编码的默认颜色“red”。不需要getter函数。
@@ -512,11 +667,16 @@ figure.image-display
 code-example(format="." ).
   &lt;my-component [a]="'a'" [b]="'b'" [c]="'c'">&lt;my-component>
 :marked
+  The same holds true for an attribute directive.
   We do the same thing with an attribute directive.
   
   在属性型指令中也可以这样做。
 +makeExample('attribute-directives/ts/app/app.component.html', 'defaultColor')(format=".")
 :marked
+  Here the code is binding the user's color choice to the `myHighlight` attribute as before.
+  It is *also* binding the literal string, 'violet', to the `defaultColor`.
+
+
   Here we're binding the user's color choice to the `myHighlight` attribute as we did before.
   We're *also* binding the literal string, 'violet', to the `defaultColor`.
   
@@ -532,6 +692,11 @@ figure.image-display
 .l-main-section
 :marked
   ## Summary
+  This page covered how to:
+  - [Build a simple **attribute directive** to attach behavior to an HTML element](#write-directive).
+  - [Use that directive in a template](#apply-directive).
+  - [Respond to **events** to change behavior based on an event](#respond-to-user).
+  - [Use **binding** to pass values to the attribute directive](#bindings).
   ## 总结
   We now know how to
 
@@ -550,7 +715,7 @@ figure.image-display
   最终的源码如下：
 +makeTabs(
   `attribute-directives/ts/app/app.component.ts,
-   attribute-directives/ts/app/app.component.html, 
+   attribute-directives/ts/app/app.component.html,
    attribute-directives/ts/app/highlight.directive.ts,
    attribute-directives/ts/app/app.module.ts,
    attribute-directives/ts/app/main.ts,
@@ -570,6 +735,12 @@ a#why-input
 .l-main-section
 :marked
   ### Appendix: Input properties
+
+  In this demo, the `highlightColor` property is an ***input*** property of
+  `HighlightDirective`.
+
+  You've seen properties in bindings before but never had to declare them as anything. Why now?
+
   ### 附录：Input属性
   
   Earlier we declared the `highlightColor` property to be an ***input*** property of our
@@ -583,11 +754,15 @@ a#why-input
   以前也见过属性绑定，但我们从没有定义过它们。为什么现在就不行了？
   
   Angular makes a subtle but important distinction between binding **sources** and **targets**.
+
   
   Angular在绑定的**源**和**目标**之间有一个巧妙但重要的区别。
   
   In all previous bindings, the directive or component property was a binding ***source***.
   A property is a *source* if it appears in the template expression to the ***right*** of the equals (=).
+
+  A property is a *target* when it appears in **square brackets** ([ ]) to the **left** of the equals (=)
+  as it is does when binding to the `myHighlight` property of the `HighlightDirective`.
   
   在以前的所有绑定中，指令或组件的属性都是绑定***源***。
   如果属性出现在了模板表达式等号(=)的***右侧***，它就是一个*源*。
@@ -601,11 +776,15 @@ a#why-input
 :marked
   The 'color' in `[myHighlight]="color"` is a binding ***source***.
   A source property doesn't require a declaration.
+
   
   `[myHighlight]="color"`中的'color'就是绑定***源***。
   源属性不需要特别声明。
   
   The 'myHighlight' in `[myHighlight]="color"` *is* a binding ***target***.
+  You must declare it as an *input* property or
+  Angular rejects the binding with a clear error.
+
   We must declare it as an *input* property.
   Angular rejects the binding with a clear error if we don't.
   
@@ -614,6 +793,17 @@ a#why-input
   
   Angular treats a *target* property differently for a good reason.
   A component or directive in target position needs protection.
+
+  Imagine that `HighlightDirective` did truly wonderous things in a
+  popular open source project.
+
+  Surprisingly, some people &mdash; perhaps naively &mdash;
+  start binding to *every* property of the directive.
+  Not just the one or two properties you expected them to target. *Every* property.
+  That could really mess up your directive in ways you didn't anticipate and have no desire to support.
+
+  The ***input*** declaration ensures that consumers of your directive can only bind to
+  the properties of the public API but nothing else.
   
   Angular这样区别对待*目标*属性有充分的理由。
   作为目标的组件或指令需要保护。
diff --git a/public/docs/ts/latest/guide/browser-support.jade b/public/docs/ts/latest/guide/browser-support.jade
index 22a570d6e8..83c6fecaf6 100644
--- a/public/docs/ts/latest/guide/browser-support.jade
+++ b/public/docs/ts/latest/guide/browser-support.jade
@@ -172,13 +172,13 @@ table
       p 除Chrome和Firefox外的所有，但不支持IE9
   tr(style="vertical-align: top") 
     td
-      a(href="../api/common/index/DatePipe-class.html" target="_blank") Date
+      a(href="../api/common/index/DatePipe-pipe.html" target="_blank") Date
       span ,  
-      a(href="../api/common/index/CurrencyPipe-class.html" target="_blank") currency
+      a(href="../api/common/index/CurrencyPipe-pipe.html" target="_blank") currency
       span , 
-      a(href="../api/common/index/DecimalPipe-class.html" target="_blank") decimal
+      a(href="../api/common/index/DecimalPipe-pipe.html" target="_blank") decimal
       span  和 
-      a(href="../api/common/index/PercentPipe-class.html" target="_blank") percent
+      a(href="../api/common/index/PercentPipe-pipe.html" target="_blank") percent
       span  管道
     td
       :marked
diff --git a/public/docs/ts/latest/guide/change-log.jade b/public/docs/ts/latest/guide/change-log.jade
new file mode 100644
index 0000000000..637f604ea4
--- /dev/null
+++ b/public/docs/ts/latest/guide/change-log.jade
@@ -0,0 +1,64 @@
+block includes
+  include ../_util-fns
+
+:marked
+  # Documentation Change Log
+
+  The Angular documentation is a living document with continuous improvements.
+  This log calls attention to recent significant changes.
+
+  ## Sync with Angular v.2.1.0 (2016-10-12)
+  Docs and code samples updated and tested with Angular v.2.1.0 
+
+  ## NEW "Ahead of Time (AoT) Compilation" cookbook (2016-10-11)
+  The NEW [Ahead of Time (AoT) Compilation](../cookbook/aot-compiler.html) cookbook
+  explains what AoT compilation is and why you'd want it.
+  It demonstrates the basics with a QuickStart app
+  followed by the more advanced considerations of compiling and bundling the Tour of Heroes.
+
+  ## Sync with Angular v.2.0.2 (2016-10-6)
+  Docs and code samples updated and tested with Angular v.2.0.2 
+
+  ## "Routing and Navigation" guide with the _Router Module_ (2016-10-5)
+  The [Routing and Navigation](router.html) guide now locates route configuration
+  in a _Routing Module_. 
+  The _Routing Module_ replaces the previous _routing object_ involving the `ModuleWithProviders`.
+
+  All guided samples with routing use the _Routing Module_ and prose content has been updated,
+  most conspicuously in the 
+  [NgModule](ngmodule.html) guide and [NgModule FAQ](../cookbook/ngmodule-faq.html) cookbook.
+
+  ## New "Internationalization" Cookbook (2016-09-30)
+
+  Added a new [Internationalization (i18n)](../cookbook/i18n.html) cookbook that shows how
+  to use Angular "i18n" facilities to translate template text into multiple languages.
+
+  ## "angular-in-memory-web-api" package rename (2016-09-27)
+
+  Many samples use the `angular-in-memory-web-api` to simulate a remote server.
+  This library is also useful to you during early development before you have a server to talk to.
+
+  The package name was changed from "angular2-in-memory-web-api" which is still frozen-in-time on npm.
+  The new "angular-in-memory-web-api" has new features. 
+  <a href="https://github.com/angular/in-memory-web-api/blob/master/README.md" target="_blank">Read about them on github</a>.
+
+  ## "Style Guide" with _NgModules_ (2016-09-27)
+
+  [StyleGuide](style-guide.html) explains our recommended conventions for Angular modules (NgModule).
+  Barrels now are far less useful and have been removed from the style guide;
+  they remain valuable but are not a matter of Angular style.
+  We also relaxed the rule that discouraged use of the `@Component.host` property.
+
+  ## _moduleId: module.id_ everywhere (2016-09-25)
+
+  Sample components that get their templates or styles with `templateUrl` or `styleUrls`
+  have been converted to _module-relative_ URLs.
+  We added the `moduleId: module.id` property-and-value to their `@Component` metadata.
+  
+  This change is a requirement for compilation with AoT compiler when the app loads
+  modules with SystemJS as the samples currently do.
+
+  ## "Lifecycle Hooks" guide simplified (2016-09-24)
+
+  The [Lifecycle Hooks](lifecycle-hooks.html) guide is shorter, simpler, and 
+  draws more attention to the order in which Angular calls the hooks.
diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade
index 623324fd7c..47ca883ce0 100644
--- a/public/docs/ts/latest/guide/dependency-injection.jade
+++ b/public/docs/ts/latest/guide/dependency-injection.jade
@@ -574,7 +574,7 @@ block ctor-syntax
 
 .l-sub-section
   :marked
-    Learn more in [Testing](../testing/index.html).
+    Learn more in [Testing](./testing.html).
 
     要学习更多知识，参见[测试](../testing/index.html)。
 
diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade
index 02e1e4051f..601d34b145 100644
--- a/public/docs/ts/latest/guide/forms.jade
+++ b/public/docs/ts/latest/guide/forms.jade
@@ -902,7 +902,7 @@ figure.image-display
 .l-sub-section
   :marked
     Why "ngModel"?
-    A directive's [exportAs](../api/core/index/DirectiveMetadata-class.html#!#exportAs-anchor) property
+    A directive's [exportAs](../api/core/index/Directive-decorator.html) property
     tells Angular how to link the reference variable to the directive.
     We set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel".
     
@@ -1081,10 +1081,10 @@ figure.image-display
     
     ### NgForm指令
     
-    What `NgForm` directive? We didn't add an [NgForm](../api/common/index/NgForm-directive.html) directive!
-    
-    什么`NgForm`指令？我们没有添加过[NgForm](../api/common/index/NgForm-directive.html)指令啊！
+    What `NgForm` directive? We didn't add an [NgForm](../api/forms/index/NgForm-directive.html) directive!
     
+    什么`NgForm`指令？我们没有添加过[NgForm](../api/common/index/NgForm-directive.html)指令啊！    
+
     Angular did. Angular creates and attaches an `NgForm` directive to the `<form>` tag automatically.
     
     Angular替我们做了。Angular自动创建了`NgForm`指令，并且把它附加到`<form>`标签上。
diff --git a/public/docs/ts/latest/guide/lifecycle-hooks.jade b/public/docs/ts/latest/guide/lifecycle-hooks.jade
index 4de5f294f1..6b846cb740 100644
--- a/public/docs/ts/latest/guide/lifecycle-hooks.jade
+++ b/public/docs/ts/latest/guide/lifecycle-hooks.jade
@@ -767,9 +767,9 @@ figure.image-display
 :marked
   The following hooks take action based on changing values *within the child view*
   which can only be reached by querying for the child view via the property decorated with
-  [@ViewChild](../api/core/index/ViewChild-var.html).
+  [@ViewChild](../api/core/index/ViewChild-decorator.html).
   
-  下列钩子基于*子视图中*的每一次数据变更采取行动，我们只能通过带[@ViewChild](../api/core/index/ViewChild-var.html)装饰器的属性来访问子视图。
+  下列钩子基于*子视图中*的每一次数据变更采取行动，我们只能通过带[@ViewChild](../api/core/index/ViewChild-decorator.html)装饰器的属性来访问子视图。
 
 +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'hooks', 'AfterViewComponent (class excerpts)')(format=".")
 #wait-a-tick
@@ -893,9 +893,9 @@ figure.image-display
   
   The following *AfterContent* hooks take action based on changing values in a  *content child*
   which can only be reached by querying for it via the property decorated with
-  [@ContentChild](../api/core/index/ContentChild-var.html).
+  [@ContentChild](../api/core/index/ContentChild-decorator.html).
   
-  下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过带有[@ContentChild](../api/core/index/ContentChild-var.html)装饰器的属性来查询到“子级内容”。
+  下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过带有[@ContentChild](../api/core/index/ContentChild-decorator.html)装饰器的属性来查询到“子级内容”。
 
 +makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'hooks', 'AfterContentComponent (class excerpts)')(format=".")
 
diff --git a/public/docs/ts/latest/guide/ngmodule.jade b/public/docs/ts/latest/guide/ngmodule.jade
index b4eb1a65a4..dbab784415 100644
--- a/public/docs/ts/latest/guide/ngmodule.jade
+++ b/public/docs/ts/latest/guide/ngmodule.jade
@@ -95,7 +95,7 @@ block includes
 
 .l-hr
 
-a#angular-modularity  
+a#angular-modularity
 .l-main-section
 :marked
   ## Angular Modularity
@@ -118,7 +118,7 @@ a#angular-modularity
     <a href="https://github.com/angular/angularfire2" target="_blank">AngularFire2</a>。
 
   Angular modules consolidate components, directives and pipes into
-  cohesive blocks of functionality, each focused on a 
+  cohesive blocks of functionality, each focused on a
   feature area, application business domain, workflow, or common collection of utilities.
   
   Angular模块把组件、指令和管道打包成内聚的功能块，每块聚焦于一个特性分区、业务领域、工作流，或一组通用的工具。
@@ -154,14 +154,14 @@ a#angular-modularity
   
   * 在应用程序级提供服务，以便应用中的任何组件都能使用它。
 
-  Every Angular app has at least one module class, the _root module_. 
+  Every Angular app has at least one module class, the _root module_.
   We bootstrap that module to launch the application.
   
   每个Angular应用至少有一个模块类 —— _根模块_，我们将通过引导根模块来启动应用。
 
   The _root module_ is all we need in a simple application with a few components.
-  As the app grows, we refactor the _root module_ into **feature modules** 
-  that represent collections of related functionality. 
+  As the app grows, we refactor the _root module_ into **feature modules**
+  that represent collections of related functionality.
   We then import these modules into the _root module_.
   
   对于组件很少的简单应用来说，只用一个_根模块_就足够了。
@@ -172,7 +172,7 @@ a#angular-modularity
   
   稍后我们就会看到怎么做。不过还是先从_根模块_开始吧！
 
-a#root-module 
+a#root-module
 .l-main-section
 :marked
   ## _AppModule_ - the application root module
@@ -192,7 +192,7 @@ a#root-module
 +makeExample('ngmodule/ts/app/app.module.0.ts', '', 'app/app.module.ts (minimal)')(format=".")
 
 :marked
-  The `@NgModule` decorator defines the metadata for the module. 
+  The `@NgModule` decorator defines the metadata for the module.
   We'll take an intuitive approach to understanding the metadata and fill in details as we go.
   
   `@NgModule`装饰器用来为模块定义元数据。
@@ -220,7 +220,7 @@ a#root-module
   
 +makeExample('ngmodule/ts/app/app.component.0.ts', '', 'app/app.component.ts (minimal)')(format=".")
 :marked
-  Lastly, the `@NgModule.bootstrap` property identifies this `AppComponent` as the _bootstrap component_. 
+  Lastly, the `@NgModule.bootstrap` property identifies this `AppComponent` as the _bootstrap component_.
   When Angular launches the app, it places the HTML rendering of `AppComponent` in the DOM,
   inside the `<my-app>` element tags of the `index.html`
   
@@ -256,7 +256,7 @@ a#bootstrap
 +makeExample('ngmodule/ts/app/main.ts', '', 'app/main.ts (dynamic)')(format=".")
 
 :marked
-  The samples in this page demonstrate the dynamic bootstrapping approach. 
+  The samples in this page demonstrate the dynamic bootstrapping approach.
 
   这里的例子演示进行动态引导的方法。
 
@@ -272,12 +272,12 @@ a#bootstrap
   静态方案可以生成更小、启动更快的应用，建议优先使用它，特别是在移动设备或高延迟网络下。
 
   In the _static_ option, the Angular compiler runs ahead-of-time as part of the build process,
-  producing a collection of class factories in their own files. 
+  producing a collection of class factories in their own files.
   Among them is the `AppModuleNgFactory`.
   
   使用_static_选项，Angular编译器作为构建流程的一部分提前运行，生成一组类工厂。它们的核心就是`AppModuleNgFactory`。
 
-  The syntax for bootstrapping the pre-compiled `AppModuleNgFactory` is similar to 
+  The syntax for bootstrapping the pre-compiled `AppModuleNgFactory` is similar to
   the dynamic version that bootstraps the `AppModule` class.
   
   引导预编译的`AppModuleNgFactory`的语法和动态引导`AppModule`类的方式很相似。
@@ -285,7 +285,7 @@ a#bootstrap
 +makeExample('ngmodule/ts/app/main-static.ts', '', 'app/main.ts (static)')(format=".")
 
 :marked
-  Because the entire application was pre-compiled, 
+  Because the entire application was pre-compiled,
   we don't ship the _Angular Compiler_ to the browser and we don't compile in the browser.
   
   由于整个应用都是预编译的，所以我们不用把_Angular编译器_一起发到浏览器中，也不用在浏览器中进行编译。
@@ -340,7 +340,7 @@ a#declarations
 
 +makeExample('ngmodule/ts/app/app.component.1.ts', 'template')(format=".")
 :marked
-  If we ran the app now, Angular would not recognize the `highlight` attribute and would ignore it. 
+  If we ran the app now, Angular would not recognize the `highlight` attribute and would ignore it.
   We must declare the directive in `AppModule`.
 
   如果我们现在就运行该应用，Angular将无法识别`highlight`属性，并且忽略它。
@@ -375,7 +375,7 @@ a#declarations
 
 +makeExample('ngmodule/ts/app/app.component.1.ts', '', 'app/app.component.ts (v1)')(format=".")
 :marked
-  Angular won't recognize the `<app-title>` tag until we declare it in `AppModule`. 
+  Angular won't recognize the `<app-title>` tag until we declare it in `AppModule`.
   Import the `TitleComponent` class and add it to the module's `declarations`:
 
   除非我们在`AppModule`中声明过，否则Angular无法识别`<app-title>`标签。
@@ -407,8 +407,8 @@ a#providers
   
   模块可以往应用的“根依赖注入器”中添加提供商，让那些服务在应用中到处可用。
 
-  Many applications capture information about the currently logged-in user and make that information 
-  accessible through a user service. 
+  Many applications capture information about the currently logged-in user and make that information
+  accessible through a user service.
   This sample application has a dummy implementation of such a `UserService`.
   
   很多应用都需要获取当前登录的用户的信息，并且通过user服务来访问它们。
@@ -470,7 +470,7 @@ a#imports
 +makeExample('ngmodule/ts/app/app.module.0.ts', 'imports', 'app/app.module.ts (imports)')(format=".")
 
 :marked
-  Importing `BrowserModule` made all of its public components, directives and pipes visible 
+  Importing `BrowserModule` made all of its public components, directives and pipes visible
   to the component templates in `AppModule`. They are ready to use without further ado.
   
   导入`BrowserModule`会让该模块公开的所有组件、指令和管道在`AppModule`下的任何组件模板中直接可用，而不需要额外的繁琐步骤。
@@ -491,7 +491,7 @@ a#imports
     最终的效果是：只要导入`BrowserModule`就自动获得了`CommonModule`中的指令。
     
 :marked
-  Many familiar Angular directives do not belong to`CommonModule`. 
+  Many familiar Angular directives do not belong to`CommonModule`.
   For example,  `NgModel` and `RouterLink` belong to Angular's `FormsModule` and `RouterModule` respectively.
   We must _import_ those modules before we can use their directives.
   
@@ -499,7 +499,7 @@ a#imports
   例如，`NgModel`和`RouterLink`分别属于Angular的`FormsModule`模块和`RouterModule`模块。
   在使用那些指令之前，我们也必须_导入_那些模块。
 
-  To illustrate this point, we extend the sample app with `ContactComponent`, 
+  To illustrate this point, we extend the sample app with `ContactComponent`,
   a form component that imports form support from the Angular `FormsModule`.
   
   要解释这一点，我们可以再加入`ContactComponent`组件，它是一个表单组件，从Angular的`FormsModule`中导入了表单支持。
@@ -512,7 +512,7 @@ a#imports
   
   [Angular表单](forms.html)是用来管理用户数据输入的最佳方式之一。
 
-  The `ContactComponent` presents a "contact editor", 
+  The `ContactComponent` presents a "contact editor",
   implemented with _Angular Forms_ in the [_template-driven form_](forms.html) style.
   
   `ContactComponnet`组件展现“联系人编辑器”，它是用[_模板驱动式表单_](forms.html)实现的。
@@ -524,7 +524,7 @@ a#imports
     #### Angular表单的风格
     
     We write Angular form components in either the
-    [_template-driven form_](forms.html) style or 
+    [_template-driven form_](forms.html) style or
     the [_reactive form_](../cookbook/dynamic-form.html) style.
     
     我们写Angular表单组件时，可以使用[_模板驱动式表单_](forms.html)，
@@ -539,7 +539,7 @@ a#imports
     那些带有_响应式表单_组件的模块，应该转而导入`ReactiveFormsModule`。
 
 :marked
-  The `ContactComponent` selector matches an element named `<app-contact>`. 
+  The `ContactComponent` selector matches an element named `<app-contact>`.
   Add an element with that name to the `AppComponent` template just below the `<app-title>`:
   
   `ContactComponent`的选择器会去匹配名叫`<app-contact>`的元素。
@@ -548,8 +548,8 @@ a#imports
 +makeExample('ngmodule/ts/app/app.component.1b.ts', 'template', 'app/app.component.ts (template)')(format=".")
 
 :marked
-  The `ContactComponent` has a lot going on. 
-  Form components are often complex anyway and this one has its own `ContactService`, 
+  The `ContactComponent` has a lot going on.
+  Form components are often complex anyway and this one has its own `ContactService`,
   its own [custom pipe](#pipes.html#custom-pipes) called `Awesome`,
   and an alternative version of the `HighlightDirective`.
   
@@ -570,7 +570,7 @@ a#imports
   ngmodule/ts/app/contact/contact.service.ts,
   ngmodule/ts/app/contact/awesome.pipe.ts,
   ngmodule/ts/app/contact/highlight.directive.ts
-  `, 
+  `,
   null,
   `app/contact/contact.component.html,
   app/contact/contact.component.ts,
@@ -618,7 +618,7 @@ a#imports
 
 .alert.is-critical
   :marked
-    **Do not** add `NgModel` &mdash; or the `FORMS_DIRECTIVES` &mdash; 
+    **Do not** add `NgModel` &mdash; or the `FORMS_DIRECTIVES` &mdash;
     to the `AppModule` metadata's declarations!
     
     **不要**把`NgModel`（或`FORMS_DIRECTIVES）加到`AppModule`元数据的`declarations`数据中！
@@ -660,7 +660,7 @@ a#import-name-conflict
     
   +makeExample('ngmodule/ts/app/app.module.1b.ts', 'import-alias')(format=".")
   :marked
-    This solves the immediate problem of referencing both directive _types_ in the same file but 
+    This solves the immediate problem of referencing both directive _types_ in the same file but
     leaves another problem unresoved as we discuss [below](#resolve-conflicts).
     
     这解决了在文件中使用指令_类型_时的冲突问题，但是还有另一个问题问题没有解决，我们将在[后面](#resolve-conflicts)讨论它。
@@ -676,8 +676,8 @@ a#import-name-conflict
   `ContactComponent`显示从`ContactService`服务中获取的联系人信息，该服务是被Angular注入到组件的构造函数中的。
   
   We have to provide that service somewhere.
-  The `ContactComponent` _could_ provide it. 
-  But then it would be scoped to this component _only_. 
+  The `ContactComponent` _could_ provide it.
+  But then it would be scoped to this component _only_.
   We want to share this service with other contact-related components that we will surely add later.
   
   我们必须在某个地方提供该服务。
@@ -777,11 +777,10 @@ a#application-scoped-providers
 
   试试这个例子：
 
-  <live-example embedded plnkr="contact.1b" img="devguide/ngmodule/contact-1b-plunker.png"></live-example>  
-  
-  
+  <live-example embedded plnkr="contact.1b" img="devguide/ngmodule/contact-1b-plunker.png"></live-example>
+
 a#resolve-conflicts
-.l-main-section 
+.l-main-section
 :marked
   ## Resolve directive conflicts
   
@@ -808,7 +807,7 @@ a#resolve-conflicts
    app/contact/highlight.directive.ts`)
 
 :marked
-  Will Angular use only one of them? No. 
+  Will Angular use only one of them? No.
   Both directives are declared in this module so _both directives are active_.
   
   Angular会只用它们中的一个吗？不会。
@@ -828,7 +827,7 @@ a#resolve-conflicts
     
     真正的问题在于，有_两个不同的类_试图做同一件事。
 
-    It's OK to import the _same_ directive class multiple times. 
+    It's OK to import the _same_ directive class multiple times.
     Angular removes duplicate classes and only registers one of them.
     
     多次导入_同一个_指令是没问题的，Angular会移除重复的类，而只注册一次。
@@ -843,8 +842,8 @@ a#resolve-conflicts
     从Angular的角度看，两个类并没有重复。Angular会同时保留这两个指令，并让它们依次修改同一个HTML元素。
 
 :marked
-  At least the app still compiles. 
-  If we define two different component classes with the same selector specifying the same element tag, 
+  At least the app still compiles.
+  If we define two different component classes with the same selector specifying the same element tag,
   the compiler reports an error. It can't insert two components in the same DOM location.
 
   至少，应用仍然编译通过了。
@@ -900,7 +899,7 @@ a#feature-modules
   ### _特性模块_
 
   A _feature module_ is a class adorned by the `@NgModule` decorator and its metadata,
-  just like a root module. 
+  just like a root module.
   Feature module metadata have the same properties as the metadata for a root module.
   
   _特性模块_是带有`@NgModule`装饰器及其元数据的类，就像根模块中一样。
@@ -931,7 +930,7 @@ a#feature-modules
   此外，特性模块主要还是从它的设计意图上来区分。
 
   A feature module delivers a cohesive set of functionality
-  focused on an application business domain, a user workflow, a facility (forms, http, routing), 
+  focused on an application business domain, a user workflow, a facility (forms, http, routing),
   or a collection of related utilities.
   
   特性模块用来提供一组紧密相关的功能。
@@ -942,8 +941,8 @@ a#feature-modules
   
   虽然这些都能在根模块中做，但特性模块可以帮助我们把应用切分成具有特定关注点和目标的不同区域。
 
-  A feature module collaborates with the root module and with other modules 
-  through the services it provides and 
+  A feature module collaborates with the root module and with other modules
+  through the services it provides and
   the components, directives, and pipes that it chooses to share.
   
   特性模块通过自己提供的服务和它决定对外共享的那些组件、指令、管道来与根模块等其它模块协同工作。
@@ -1028,7 +1027,7 @@ a#feature-modules
   我们*导出*了`ContactComponent`，这样其它模块只要导入了`ContactModule`，就可以在其组件模板中使用来自`ContactModule`中的组件了。
 
   All other declared contact classes are private by default.
-  The `AwesomePipe` and `HighlightDirective` are hidden from the rest of the application. 
+  The `AwesomePipe` and `HighlightDirective` are hidden from the rest of the application.
   The `HighlightDirective` can no longer color the `AppComponent` title text.
   
   “联系人”中声明的所有其它类默认都是私有的。
@@ -1064,7 +1063,7 @@ a#feature-modules
 +makeTabs(
   `ngmodule/ts/app/app.module.2.ts,
    ngmodule/ts/app/app.module.1b.ts`,
-   '', 
+   '',
   `app/app.module.ts (v2),
    app/app.module.ts (v1)`)
 :marked
@@ -1121,9 +1120,9 @@ a#lazy-load
   
   ## 用路由器实现延迟（Lazy）加载
 
-  The Heroic Staffing Agency sample app has evolved. 
+  The Heroic Staffing Agency sample app has evolved.
   It has two more modules, one for managing the heroes-on-staff and another for matching crises to the heroes.
-  Both modules are in the early stages of development. 
+  Both modules are in the early stages of development.
   Their specifics aren't important to the story and we won't discuss every line of code.
   
   “英雄管理局”这个例子应用继续成长。
@@ -1198,26 +1197,27 @@ a#lazy-load
   
   该模块仍然要导入`ContactModule`模块，以便在应用启动时加载它的路由和组件。
 
-  The module does _not_ import `HeroModule` or `CrisisModule`. 
+  The module does _not_ import `HeroModule` or `CrisisModule`.
   They'll be fetched and mounted asynchronously when the user navigates to one of their routes.
   
   该模块不用导入`HeroModule`或`CrisisModule`。
   它们将在用户导航到其中的某个路由时，被异步获取并加载。
   
-  The significant change from version 2 is the addition of a ***routing*** object to the `imports`.
-  The routing object, which provides a configured `Router` service, is defined in the `app.routing.ts` file.
+  The significant change from version 2 is the addition of the ***AppRoutingModule*** to the module `imports`.
+  The `AppRoutingModule` is a [_Routing Module_](../guide/router.html#routing-module)
+  that handles the app's routing concerns.
   
-  与第二版相比，最值得注意的修改是`imports`中那个额外的***routing***对象。
-  `routing`对象提供了配置好的`Router`服务，它是在`app.routing.ts`文件中定义的。
+  与第二版相比，最值得注意的修改是`imports`中那个额外的***AppRoutingModule***模块。
+  `AppRoutingModule`是一个[**路由模块**](../guide/router.html#routing-module)
+  用来处理应用的路由。
 
   ### App routing
   
-  ### 应用路由
-  
-+makeExample('ngmodule/ts/app/app.routing.ts', '', 'app/app.routing.ts')(format='.')
+  ### 应用路由 
 
++makeExample('ngmodule/ts/app/app-routing.module.ts', '', 'app/app-routing.module.ts')(format='.')
 :marked
-  The router is the subject of [its own page](router.html) so we'll skip lightly over the details and 
+  The router is the subject of [its own page](router.html) so we'll skip lightly over the details and
   concentrate on the intersection of Angular modules and routing.
   
   路由器有[专门的章节](router.html)做了深入讲解，所以这里我们跳过细节，而是专注于它和Angular模块的协作。
@@ -1232,7 +1232,7 @@ a#lazy-load
   第一个路由把空白URL（比如：`http://host.com/`）重定向到了另一个路径为`contact`的路由（比如：`http://host.com/contact`）。
   
   The `contact` route isn't defined here.
-  It's defined in the _Contact_ feature's _own_ routing file, `contact.routing.ts`.
+  It's defined in the _Contact_ feature's _own_ routing module, `contact-routing.module.ts`.
   It's standard practice for feature modules with routing components to define their own routes.
   We'll get to that file in a moment.
   
@@ -1244,11 +1244,10 @@ a#lazy-load
   
   另外两个路由使用惰性加载语法来告诉路由器要到哪里去找这些模块。
   
-+makeExample('ngmodule/ts/app/app.routing.ts', 'lazy-routes')(format='.')
-
++makeExample('ngmodule/ts/app/app-routing.module.ts', 'lazy-routes')(format='.')
 .l-sub-section
   :marked
-    A lazy loaded module location is a _string_, not a _type_. 
+    A lazy loaded module location is a _string_, not a _type_.
     In this app, the string identifies both the module _file_ and the module _class_,
     the latter separated from the former by a `#`.
     
@@ -1258,29 +1257,29 @@ a#lazy-load
 :marked
   ### RouterModule.forRoot
 
-  The last line calls the `forRoot` static class method of the `RouterModule`, passing in the configuration.
+  The `forRoot` static class method of the `RouterModule` with the provided configuration,
+  added to the `imports` array provides the routing concerns for the module.
   
-  最后一行调用了`RouterModule`类的静态方法`forRoot`，并把路由配置信息传给它。
+  `RouterModule`类的`forRoot`静态方法和提供的配置，被添加到`imports`数组中，提供该模块的路由信息。
   
-+makeExample('ngmodule/ts/app/app.routing.ts', 'forRoot')(format='.')
-
++makeExample('ngmodule/ts/app/app-routing.module.ts', 'forRoot')(format='.')
 :marked
-  The returned `routing` object is a `ModuleWithProviders` containing both the `RouterModule` directives
+  The returned `AppRoutingModule` class is a `Routing Module` containing both the `RouterModule` directives
   and the Dependency Injection providers that produce a configured `Router`. 
   
-  该方法返回的`routing`是`ModuleWithProviders`对象，它包含了一些`RouterModule`的指令和用来生成配置好的`Router`的依赖注入提供商。
+  该方法返回的`AppRoutingModule`类是一个`Routing Module`，它同时包含了`RouterModule`指令和用来生成配置好的`Router`的依赖注入提供商。  
 
-  This `routing` object is intended for the app _root_ module _only_.
+  This `AppRoutingModule` is intended for the app _root_ module _only_.
   
-  这个`routing`对象*仅仅*是给应用程序的*根*模块使用的。
+  这个`AppRoutingModule`*仅仅*是给应用程序的*根*模块使用的。
 
 .alert.is-critical
   :marked
-    Never call `RouterModule.forRoot` in a feature module.
+    Never call `RouterModule.forRoot` in a feature routing module.
     
-    永远不要在特性模块中调用`RouterModule.forRoot`！
+    永远不要在特性路由模块中调用`RouterModule.forRoot`！
 :marked
-  Back in the root `AppModule`, we add this `routing` object to its `imports` list, 
+  Back in the root `AppModule`, we add the `AppRoutingModule` to its `imports` list,
   and the app is ready to navigate.
   
   回到根模块`AppModule`，把这个`routing`对象添加到根模块的`imports`列表中，该应用就可以正常导航了。
@@ -1291,26 +1290,27 @@ a#lazy-load
   ### Routing to a feature module
   ### 路由到特性模块
   
-  The `app/contact` folder holds a new file, `contact.routing.ts`.
-  It defines the `contact` route we mentioned a bit earlier and also creates a `routing` object like so:
+  The `app/contact` folder holds a new file, `contact-routing.module.ts`.
+  It defines the `contact` route we mentioned a bit earlier and also provides a `ContactRoutingModule` like so:
   
-  `app/contact`目录中也有一个新文件`contact.routing.ts`。
-  它定义了我们前面提到过的`contact`路由，并创建了`routing`对象，就像这样：
+  `app/contact`目录中也有一个新文件`contact-routing.module.ts`。
+  它定义了我们前面提到过的`contact`路由，并提供了`ContactRoutingModule`，就像这样：
   
-+makeExample('ngmodule/ts/app/contact/contact.routing.ts', 'routing', 'app/contact/contact.routing.ts (routing)')(format='.')
++makeExample('ngmodule/ts/app/contact/contact-routing.module.ts', 'routing', 'app/contact/contact-routing.module.ts (routing)')(format='.')
 
 :marked
   This time we pass the route list to the `forChild` method of the `RouterModule`.
-  It produces a different kind of object intended for feature modules.
+  It's only responsible for providing additional routes and is intended for feature modules.
 
   这次我们要把路由列表传给`RouterModule`的`forChild`方法。
   该方法会为特性模块生成另一种对象。
 
 .alert.is-important
   :marked
-    Always call `RouterModule.forChild` in a feature module.
+    Always call `RouterModule.forChild` in a feature routing module.
+    
+    总是在特性路由模块中调用`RouterModule.forChild`。
     
-    总是在特性模块中调用`RouterModule.forChild`。
 
 .alert.is-helpful
   :marked
@@ -1334,20 +1334,20 @@ a#lazy-load
 +makeTabs(
   `ngmodule/ts/app/contact/contact.module.3.ts,
    ngmodule/ts/app/contact/contact.module.2.ts`,
-   'class, class', 
+   'class, class',
   `app/contact/contact.module.3.ts,
    app/contact/contact.module.2.ts`)
 :marked
-  1. It imports the `routing` object from `contact.routing.ts`
-
-  1. 它从`contact.routing.ts`中导入了`routing`对象
+  1. It imports the `ContactRoutingModule` object from `contact-routing.module.ts`
 
+  1. 它从`contact-routing.module.ts`中导入了`ContactRoutingModule`对象
+  
   1. It no longer exports `ContactComponent`
 
   1. 它不再导出`ContactComponent`
 
   Now that we navigate to `ContactComponent` with the router there's no reason to make it public.
-  Nor does it need a selector. 
+  Nor does it need a selector.
   No template will ever again reference this `ContactComponent`.
   It's gone from the [_AppComponent_ template](#app-component-template).
 
@@ -1365,7 +1365,7 @@ a#hero-module
   
   惰性加载的`HeroModule`和`CrisisModule`与其它特性模块遵循同样的规则。它们和“主动加载”的`ContactModule`看上去没有任何区别。
 
-  The `HeroModule` is a bit more complex than the `CrisisModule` which makes it 
+  The `HeroModule` is a bit more complex than the `CrisisModule` which makes it
   a more interesting and useful example. Here's its file structure:
   
   `HeroModule`比`CrisisModule`略复杂一些，因此更适合用作范例。它的文件结构如下：
@@ -1377,13 +1377,13 @@ a#hero-module
     .file hero-list.component.ts
     .file hero.component.ts
     .file hero.module.ts
-    .file hero.routing.ts
+    .file hero-routing.module.ts
     .file hero.service.ts
     .file highlight.directive.ts
 :marked
   This is the child routing scenario familiar to readers of the [Router](router.html#child-routing-component) page.
-  The `HeroComponent` is the feature's top component and routing host. 
-  Its template has a `<router-outlet>` that displays either a list of heroes (`HeroList`) 
+  The `HeroComponent` is the feature's top component and routing host.
+  Its template has a `<router-outlet>` that displays either a list of heroes (`HeroList`)
   or an editor of a selected hero (`HeroDetail`).
   Both components delegate to the `HeroService` to fetch and save data.
 
@@ -1408,10 +1408,10 @@ a#hero-module
 
 :marked
   It imports the `FormsModule` because the `HeroDetailComponent` template binds with `[(ngModel)]`. 
-  It imports a `routing` object from `hero.routing.ts` just as `ContactModule` and `CrisisModule` do.
+  It imports the `HeroRoutingModule` from `hero-routing.module.ts` just as `ContactModule` and `CrisisModule` do.
   
   它导入了`FormsModule`，因为`HeroDetailComponent`的模板中绑定到了`[(ngModel)]`。
-  像`ContactModule`和`CrisisModule`中一样，它还从`hero.routing.ts`中导入了`routing`对象。
+  像`ContactModule`和`CrisisModule`中一样，它还从`hero-routing.module.ts`中导入了`HeroRoutingModule`。
 
   The `CrisisModule` is much the same. There's nothing more to say that's new. 
   
@@ -1434,7 +1434,7 @@ a#shared-module
   让我们感到不爽的是：这里有`HighlightDirective`的三个不同版本。
   还有一大堆其它乱七八糟的东西堆在app目录这一级，我们得把它们清出去。
 
-  Let's add a `SharedModule` to hold the common components, directives, and pipes 
+  Let's add a `SharedModule` to hold the common components, directives, and pipes
   and share them with the modules that need them.
   
   我们添加`SharedModule`来存放这些公共组件、指令和管道，并且共享给那些想用它们的模块。
@@ -1467,9 +1467,9 @@ a#shared-module
   * It re-exports the `CommonModule` and `FormsModule`
   * 它重新导出了`CommonModule`和`FormsModule`
 
-  #### Re-exporting other modules
+  ### Re-exporting other modules
   
-  #### 重新导出其它模块
+  ### 重新导出其它模块
 
   While reviewing our application, we noticed that many components requiring `SharedModule` directives
   also use `NgIf` and `NgFor` from `CommonModule`
@@ -1486,7 +1486,7 @@ a#shared-module
   通过让`SharedModule`重新导出`CommonModule`和`FormsModule`模块，我们可以消除这种重复。
   于是导入`SharedModule`的模块也同时*免费*获得了`CommonModule`和`FormsModule`。
 
-  As it happens, the components declared by `SharedModule` itself don't bind with `[(ngModel)]`. 
+  As it happens, the components declared by `SharedModule` itself don't bind with `[(ngModel)]`.
   Technically,  there is no need for `SharedModule` to import `FormsModule`.
   
   实际上，`SharedModule`本身所声明的组件没绑定过`[(ngModel)]`，那么，严格来说`SharedModule`并不需要导入`FormsModule`。
@@ -1504,7 +1504,7 @@ a#shared-module
   
   设计`SharedModule`的目的在于让常用的组件、指令和管道可以被用在*很多*其它模块的组件模板中。
 
-  The `TitleComponent` is used _only once_ by the `AppComponent`. 
+  The `TitleComponent` is used _only once_ by the `AppComponent`.
   There's no point in sharing it.
   
   而`TitleComponent`*只被*`AppComponent`用了一次，因此没必要共享它。
@@ -1513,7 +1513,7 @@ a#shared-module
   
   ### Why _UserService_ isn't shared  
   
-  ### 为什么*UserService*没有被共享
+  ### 为什么*UserService*没有被共享  
 
   While many components share the same service _instances_,
   they rely on Angular dependency injection to do this kind of sharing, not the module system.
@@ -1521,15 +1521,15 @@ a#shared-module
   虽然很多组件都共享着同一个服务*实例*，但它们是靠Angular的依赖注入体系实现的，而不是模块体系。
  
   Several components of our sample inject the `UserService`.
-  There should be _only one_ instance of the `UserService` in the entire application 
+  There should be _only one_ instance of the `UserService` in the entire application
   and _only one_ provider of it.
   
   例子中的很多组件都注入了`UserService`。
   在整个应用程序中，*只应该有一个*`UserService`的实例，并且它*只应该有一个*提供商。
   
   `UserService` is an application-wide singleton.
-  We don't want each module to have its own separate instance. 
-  Yet there is [a real danger](../cookbook/ngmodule-faq.html#q-why-it-is-bad) of that happening 
+  We don't want each module to have its own separate instance.
+  Yet there is [a real danger](../cookbook/ngmodule-faq.html#q-why-it-is-bad) of that happening
   if the `SharedModule` provides the `UserService`.
   
   `UserService`是全应用级单例。
@@ -1589,7 +1589,7 @@ a#core-module
     我们正在从Angular核心库中导入一些从未用到的符号，稍后我们会接触它们。
 
 :marked
-  The `@NgModule` metadata should be familiar. 
+  The `@NgModule` metadata should be familiar.
   We declare the `TitleComponent`  because this module _owns_ it and we export it
   because `AppComponent` (which is in `AppModule`) displays the title in its template.
   `TitleComponent` needs the Angular `NgIf` directive that we import from `CommonModule`.
@@ -1599,7 +1599,7 @@ a#core-module
   由于`TitleComponent`需要用到Angular的`NgIf`指令，所以我们导入了`CommonModule`。
 
   `CoreModule` _provides_ the `UserService`. Angular registers that provider with the app root injector,
-  making a singleton instance of the `UserService` available to any component that needs it, 
+  making a singleton instance of the `UserService` available to any component that needs it,
   whether that component is eagerly or lazily loaded.
   
   `CoreModule`*提供*了`UserService`。Angular在该应用的“根注入器”中注册了它的提供商，导致这份`UserService`的实例在每个需要它的组件中都是可用的，无论那个组件时主动加载的还是惰性加载的。
@@ -1621,10 +1621,10 @@ a#core-module
     把`TitleComponent`放在根目录中其实也无所谓。
     即使我们决定把`UserService`文件挪到`app/core`目录中，根`AppModule`也仍然可以自己注册`UserService`（就像现在这样）。
 
-    Real world apps have more to worry about. 
+    Real world apps have more to worry about.
     They can have several single-use components (e.g., spinners, message toasts, and modal dialogs)
-    that appear only in the `AppComponent` template. 
-    We don't import them elsewhere so they're not _shared_ in that sense. 
+    that appear only in the `AppComponent` template.
+    We don't import them elsewhere so they're not _shared_ in that sense.
     Yet they're too big and messy to leave loose in the root folder.
 
     但真实的应用要考虑很多。
@@ -1748,8 +1748,8 @@ a#core-for-root
   
 .l-sub-section
   :marked
-    More precisely, Angular accumulates all imported providers _before_ appending the items listed in `@NgModule.providers`. 
-    This sequence ensures that whatever we add explicitly to the `AppModule` providers takes precedence 
+    More precisely, Angular accumulates all imported providers _before_ appending the items listed in `@NgModule.providers`.
+    This sequence ensures that whatever we add explicitly to the `AppModule` providers takes precedence
     over the providers of imported modules.
 
     更精确的说法是，Angular会先累加所有导入的提供商，*然后才*把它们追加到`@NgModule.providers`中。
@@ -1839,7 +1839,7 @@ a#prevent-reimport
   如果该构造函数在我们所期望的`AppModule`中运行，就没有任何祖先注入器能够提供`CoreModule`的实例，于是注入器会放弃查找。
 
   By default the injector throws an error when it can't find a requested provider.
-  The `@Optional` decorator means not finding the service is OK. 
+  The `@Optional` decorator means not finding the service is OK.
   The injector returns `null`, the `parentModule` parameter is null,
   and the constructor concludes uneventfully.
 
@@ -1853,7 +1853,7 @@ a#prevent-reimport
   
   Angular creates a lazy loaded module with its own injector, a _child_ of the root injector.
   `@SkipSelf` causes Angular to look for a `CoreModule` in the parent injector which this time is the root injector.
-  Of course it finds the instance imported by the root `AppModule`. 
+  Of course it finds the instance imported by the root `AppModule`.
   Now `parentModule` exists and the constructor throws the error.
 
   Angular创建一个惰性加载模块，它具有自己的注入器，它是根注入器的*子注入器*。
diff --git a/public/docs/ts/latest/guide/pipes.jade b/public/docs/ts/latest/guide/pipes.jade
index b6aec885dd..7c7ed4816c 100644
--- a/public/docs/ts/latest/guide/pipes.jade
+++ b/public/docs/ts/latest/guide/pipes.jade
@@ -153,7 +153,7 @@ figure.image-display
 
 .l-sub-section
   :marked
-    Learn more about the `DatePipes` format options in the [API Docs](../api/common/index/DatePipe-class.html).
+    Learn more about the `DatePipes` format options in the [API Docs](../api/common/index/DatePipe-pipe.html).
 
     要了解更多`DatePipes`的格式选项，请参阅[API文档](../api/common/index/DatePipe-class.html)。
 
@@ -642,7 +642,7 @@ figure.image-display
   header Debugging with the json pipe
   header 借助json管道进行调试
   :marked
-    The [JsonPipe](../api/common/index/JsonPipe-class.html)
+    The [JsonPipe](../api/common/index/JsonPipe-pipe.html)
     provides an easy way to diagnosis a mysteriously failing data binding or
     inspect an object for future binding.
 
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
index cb994f6b10..ba57a581d7 100644
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@@ -107,6 +107,10 @@ include ../_util-fns
   
   * 在[可选路由参数](#optional-route-parameters)中提供非关键信息
   
+  * refactoring routing into a [routing module](#routing-module)
+  
+  * 重构路由到[路由模块](#routing-module)
+  
   * add [child routes](#child-routing-component) under a feature section
 
   * 在“特性分区”下添加[子路由](#child-routing-component)
@@ -210,7 +214,7 @@ include ../_util-fns
   它并不是Angular 2核心库的一部分，而是在它自己的`@angular/router`包中。
   像其它Angular包一样，我们可以从它导入所需的一切。
 
-+makeExcerpt('app/app.routing.ts (import)', 'import-router')
++makeExcerpt('app/app.module.1.ts (import)', 'import-router')
 
 .l-sub-section
 
@@ -235,16 +239,17 @@ include ../_util-fns
   需要先配置路由器，才会有路由信息。
   首选方案是用带有“路由数组”的**`provideRouter`**工厂函数（`[provideRouter(routes)]`）来启动此应用。
 
-  In the following example, we configure our application with four route definitions.
+  In the following example, we configure our application with four route definitions. The configured `RouterModule` is
+  add to the `AppModule`'s `imports` array.
 
-  在下面的例子中，我们用四个路由定义配置了本应用的路由器。
+  在下面的例子中，我们用四个路由定义配置了本应用的路由器。这个配置的`RouterModule`被添加到`AppModule`的`imports`数组中。
 
-+makeExcerpt('app/app.routing.1.ts (excerpt)', 'route-config')
++makeExcerpt('app/app.module.0.ts (excerpt)', 'route-config')
 
 .l-sub-section
 
   :marked
-    The `Routes` is an array of *routes* that describe how to navigate.
+    The `RouterModule` is provided an array of *routes* that describe how to navigate.
     Each *Route* maps a URL `path` to a component.
 
     `RouterConfig`是一个*路由*数组，它会决定如何导航。
@@ -292,19 +297,6 @@ include ../_util-fns
 
     **这些路由的定义顺序**是故意如此设计的。路由器使用**先匹配者优先**的策略来匹配路由，所以，具体路由应该放在通用路由的前面。在上面的配置中，带静态路径的路由被放在了前面，后面是空路径路由，因此它会作为默认路由。而通配符路由被放在最后面，这是因为它是最通用的路由，应该**只在**前面找不到其它能匹配的路由时才匹配它。
     
-:marked
-    We export the `routing` constant so we can import it into our `app.module.ts` file where we'll add
-    a configured *Router* module to our `AppModule` imports.
-  
-    我们导出了`routing`常量，以便把它导入到`app.module.ts`文件中。
-    在那里，我们将在`AppModule`的imports中配置*Router*模块。
-    
-:marked
-  Next we open `app.module.ts` where we must register our routing, routing providers, and declare our two route components.
-  
-  接下来，打开`app.module.ts`，在那里我们要注册路由、路由提供商，并声明我们的两个路由组件。
-+makeExcerpt('app/app.module.1.ts (basic setup)', 'router-basics')
-
 :marked
   ### Router Outlet
 
@@ -391,7 +383,7 @@ code-example(language="html").
   在导航时的每个生命周期成功完成时，路由器会构建出一个`ActivatedRoute`组成的树，它表示路由器的当前状态。
   我们可以在应用中的任何地方用`Router`服务及其`routerState`属性来访问当前的`RouterState`值。
 
-  The router state provides us with methods to traverse up and down the route tree from any activated route
+  Each `ActivatedRoute` in the `RouterState` provides methods to traverse up and down the route tree
   to get information we may need from parent, child and sibling routes.
   
   路由器状态为我们提供了从任意激活路由开始向上或向下遍历路由树的一种方式，以获得关于父、子、兄弟路由的信息。
@@ -855,30 +847,10 @@ a#base-href
   路由器在它自己的`@angular/router`包中。
   它不是Angular 2内核的一部分。该路由器是可选的服务，这是因为并不是所有应用都需要路由，并且，如果需要，你还可能需要另外的路由库。
 
-  We teach our router how to navigate by configuring it with routes.
-  We recommend creating a separate `app.routing.ts` file dedicated to this purpose.
+  We teach our router how to navigate by configuring it with routes.  
   
-  通过一些路由来配置路由器，我们可以教它如何进行导航。
-  建议创建一个独立的`app.routing.ts`文件来达到此目的。
+  通过一些路由来配置路由器，我们可以教它如何进行导航。  
 
-:marked
-  Here is our first configuration. We pass the array of routes to the `RouterModule.forRoot` method
-  which returns a module containing the configured `Router` service provider ... and some other,
-  unseen providers that the routing library requires. We export this as the `routing` token.
-
-  下面是第一种配置。将路由数组传进`RouterModule.forRoot`方法，它将返回一个路由器需要的模块，该模块包含了配置好的`Router`服务提供商和一些其它不可见的提供商。我们将它导出为`routing`常量。
-
-+makeExcerpt('app/app.routing.2.ts')
-
-.l-sub-section
-  :marked
-    We also export an empty `appRoutingProviders` array
-    so we can simplify registration of router dependencies later in `app.module.ts`.
-    We don't have any providers to register right now. But we will.
-
-    我们还导出了一个空的`appRoutingProviders`数组，以便将来可以在`app.module.ts`中注册路由器的依赖。
-    现在我们还不用注册任何提供商，不过很快就需要了。
-    
 a#route-config
 
 h4#define-routes Define routes
@@ -920,42 +892,27 @@ h4#define-routes 定义一些路由
   for that path.*
 
   * **当应用程序请求导航到路径`/crisis-center`时，创建或者取回一个`CrisisListComponent`的实例，显示它的视图，并将该路径更新到浏览器地址栏和历史。**
-
-.l-sub-section
-
-  :marked
-    Learn about *providers* in the [Dependency Injection](dependency-injection.html#!#injector-providers) chapter.
-
-    在[依赖注入](dependency-injection.html#!#injector-providers)一章中，可以学到关于*提供商*的更多知识。
-
-h4#register-providers Register routing in the AppModule
-
-h4#register-providers 在`AppModule`中注册路由
-
+  
 :marked
-  Our app launches from the `app.module.ts` file in the `/app` folder.
+  Here is our first configuration. We pass the array of routes to the `RouterModule.forRoot` method
+  which returns a module containing the configured `Router` service provider ... and some other,
+  unseen providers that the routing library requires. Once our application is bootstrapped, the `Router`
+  will perform the initial navigation based on the current browser URL.
 
-  本应用的启动点位于`/app`目录下的`app.module.ts`文件中。
-
-  We import the `routing` token we exported from the `app.routing.ts` file and add it to the `imports` array.
-  
-  我们导入了从`app.routing.ts`文件中导出的`routing`令牌，并把它添加到了`imports`数组中。
-
-  We import our `CrisisListComponent` and `HeroListComponent` components and add them to our *declarations*
-  so they will be registered within our `AppModule`.
-  
-  我们导入了`CrisisListComponent`和`HeroListComponent`组件，并把它们加入了*declarations*数组中，它们将被注册到`AppModule`中。
-
-  We also import the `appRoutingProviders` array and add it to the `providers` array.
-  
-  我们还导入了`appRoutingProviders`数组，并把它加入了`providers`数组中。
-  
 +makeExcerpt('app/app.module.1.ts')
 
+.l-sub-section
+  :marked
+    Adding the configured `RouterModule` to the `AppModule` is sufficient for simple route configurations.
+    As our application grows, we'll want to refactor our routing configuration into a separate file
+    and create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicating for the purpose
+    of routing in feature modules.
+
 :marked
-  Providing the router module in our `AppModule` makes the Router available everywhere in our application.
+  Providing the `RouterModule` in our `AppModule` makes the Router available everywhere in our application.
+  
+  在`AppModule`中提供`RouterModule`，让该路由器在应用的任何地方都能被使用。
   
-  在`AppModule`中注册路由器模块会让该路由器在应用的任何地方都能被使用。
 
 h3#shell The <i>AppComponent</i> shell
 
@@ -1123,7 +1080,6 @@ h3#router-directives <i>路由器指令集</i>
       .children
         .file app.component.ts
         .file app.module.ts
-        .file app.routing.ts
         .file crisis-list.component.ts
         .file hero-list.component.ts
         .file main.ts
@@ -1143,7 +1099,6 @@ h3#router-directives <i>路由器指令集</i>
 +makeTabs(
   `router/ts/app/app.component.1.ts,
   router/ts/app/app.module.1.ts,
-  router/ts/app/app.routing.2.ts,
   router/ts/app/main.ts,
   router/ts/app/hero-list.component.ts,
   router/ts/app/crisis-list.component.ts,
@@ -1151,17 +1106,87 @@ h3#router-directives <i>路由器指令集</i>
   ',,,,',
   `app.component.ts,
   app.module.ts,
-  app.routing.ts,
   main.ts,
   hero-list.component.ts,
   crisis-list.component.ts,
   index.html`)
 
+.l-main-section#routing-module
+:marked
+  ## Milestone #2: The *Routing Module*
+
+  In our initial route configuration, we provided a simple setup with two routes used
+  to configure our application for routing. This is perfectly fine for simple routing.
+  As our application grows and we make use of more *Router* features, such as guards,
+  resolvers, and child routing, we'll naturally want to refactor our routing. We
+  recommend moving the routing into a separate file using a special-purpose
+  service called a *Routing Module*.
+
+  The **Routing Module**
+  * separates our routing concerns from our feature module
+  * provides a module to replace or remove when testing our feature module
+  * provides a common place for require routing service providers including guards and resolvers
+  * is **not** concerned with feature [module declarations](../cookbook/ngmodule-faq.html#!#routing-module)
+
+:marked
+  ### Refactor routing into a module
+
+  We'll create a file named `app-routing.module.ts` in our `/app` folder to
+  contain our `Routing Module`. The routing module will import our `RouterModule` tokens
+  and configure our routes. We'll follow the convention of our filename and name
+  the Angular module `AppRoutingModule`.
+
+  We import the `CrisisListComponent` and the `HeroListComponent` components
+  just like we did in the `app.module.ts`. Then we'll move the `Router` imports
+  and routing configuration including `RouterModule.forRoot` into our routing module.
+
+  We'll also export the `AppRoutingModule` so we can add it to our `AppModule` imports.
+
+  Our last step is to re-export the `RouterModule`. By re-exporting the `RouterModule`,
+  our feature module will be provided with the `Router Directives` when using our `Routing Module`.
+
+  Here is our first `Routing Module`:
+
++makeExcerpt('app/app-routing.module.1.ts')
+
+:marked
+   Next, we'll update our `app.module.ts` file by importing our `AppRoutingModule` token
+   from the `app-routing.module.ts` and replace our `RouterModule.forRoot` with our newly
+   created `AppRoutingModule`.
+
++makeExcerpt('app/app.module.2.ts')
+
+:marked
+  Our application continues to work just the same, and we can use our routing module as
+  the central place to maintain our routing configuration for each feature module.
+
+a#why-routing-module
+:marked
+  ### Do you need a _Routing Module_?
+  
+  The _Routing Module_ *replaces* the routing configuration in the root or feature module. 
+  _Either_ configure routes in the Routing Module _or_ within the module itself but not in both.
+
+  The Routing Module is a design choice whose value is most obvious when the configuration is complex
+  and includes specialized guard and resolver services.
+  It can seem like overkill when the actual configuration is dead simple.
+
+  Some developers skip the Routing Module (e.g., `AppRoutingModule`) when the configuration is simple and 
+  merge the routing configuration directly into the companion module (e.g., `AppModule`).
+  
+  We recommend that you choose one pattern or the other and follow that pattern consistently.
+
+  Most developers should always implement a Routing Module for the sake of consistency.
+  It keeps the code clean when configuration becomes complex.
+  It makes testing the feature module easier.
+  Its existence calls attention to the fact that a module is routed.
+  It is where developers expect to find and expand routing configuration.
+
 .l-main-section#heroes-feature
 :marked
-  ## Milestone #2: The Heroes Feature
+  ## Milestone #3: The Heroes Feature
   
-  ## 里程碑 #2 英雄特征区
+  ## 里程碑 #2 英雄特征区  
 
   We've seen how to navigate using the `RouterLink` directive.
 
@@ -1305,26 +1330,31 @@ figure.image-display
 
   我们推荐的方式是为每个特性区创建它自己的路由配置文件。
 
-  Create a new `heroes.routing.ts` in the `heroes` folder like this:
+  Create a new `heroes-routing.module.ts` in the `heroes` folder like this:
 
-  在`heroes`目录下创建一个新的`heroes.routing.ts`文件，就像这样：
+  在`heroes`目录下创建一个新的`heroes-routing.module.ts`文件，就像这样：
 
-+makeExcerpt('app/heroes/heroes.routing.ts')
++makeExcerpt('app/heroes/heroes-routing.module.ts')
+
+.l-sub-section
+  :marked
+    Keep the Routing Module file in the same folder as its companion module file.
+    Here both `heroes-routing.module.ts` and `heroes.module.ts` are in the same `app/heroes` folder.
 
 :marked
-  We use the same techniques we learned for `app.routing.ts`.
+  We use the same techniques we learned in creating the `app-routing.module.ts`.
 
   我们使用与`app.routes.ts`中一样的技巧。
 
   We import the two components from their new locations in the `app/heroes/` folder, define the two hero routes.
-  and add export our `heroesRouting` that returns configured `RouterModule` for our feature module.
+  and add export our `HeroRoutingModule` that returns our `RoutingModule` for the hero feature module.
 
   从它们所在的新`app/heroes/`目录导入列表和详情组件，定义两个英雄路由并导出到`HeroesRoutes`数组。
 
 :marked
   Now that we have routes for our `Heroes` module, we'll need to register them with the *Router*.
-  We'll import the *RouterModule* like we did in the `app.routing.ts`, but there is a slight difference here.
-  In our `app.routing.ts`, we used the static **forRoot** method to register our routes and application level
+  We'll import the *RouterModule* like we did in the `app-routing.module.ts`, but there is a slight difference here.
+  In our `app-routing.module.ts`, we used the static **forRoot** method to register our routes and application level
   service providers. In a feature module we use static **forChild** method.
   
   现在，我们的`Heroes`模块有路由了，我们得用*路由器*注册它们。
@@ -1340,10 +1370,10 @@ figure.image-display
     **RouterModule.forRoot**只能由`AppModule`提供。但我们位于特性模块中，所以使用**RouterModule.forChild**来单独注册更多路由。
 
 :marked
-  We import our `heroesRouting` token from `heroes.routing.ts` into our `Heroes` module and register the routing.
-  
-  我们从`Heroes`模块的`heroes.routing.ts`中导入`heroesRouting`令牌，并注册其路由。
+  We import our `HeroRoutingModule` token from `heroes-routing.module.ts` into our `Heroes` module and register the routing.
   
+  我们在`Heroes`模块中从`heroes-routing.module.ts`中导入`HeroRoutingModule`，并注册其路由。  
+
 +makeExcerpt('app/heroes/heroes.module.ts (heroes routing)', 'heroes-routes')
 
 :marked
@@ -1355,7 +1385,7 @@ figure.image-display
 
   `HeroDetailComponent`的路由有点特殊。
 
-+makeExcerpt('app/heroes/heroes.routing.ts (excerpt)', 'hero-detail-route')
++makeExcerpt('app/heroes/heroes-routing.module.ts (excerpt)', 'hero-detail-route')
 
 :marked
   Notice the `:id` token in the path. That creates a slot in the path for a **Route Parameter**.
@@ -1392,9 +1422,9 @@ code-example(format="." language="bash").
     在这个场景下，把路由参数的令牌`:id`嵌入到路由定义的`path`中是一个好主意，因为对于`HeroDetailComponent`来说`id`是*必须的*，
     而且路径中的值`15`已经足够把到“Magneta”的路由和到其它英雄的路由明确区分开。
 
-    An [optional-route-parameter](#optional-route-parameter) might be a better choice if we were passing an *optional* value to `HeroDetailComponent`.
+    An [optional-route-parameter](#optional-route-parameters) might be a better choice if we were passing an *optional* value to `HeroDetailComponent`.
     
-    当我们把一个*可选*值传给`HeroDetailComponent`时，[可选路由参数](#optional-route-parameter)可能是一个更好的选择。
+    当我们把一个*可选*值传给`HeroDetailComponent`时，[可选路由参数](#optional-route-parameters)可能是一个更好的选择。
     
 a#navigate
 :marked
@@ -1736,7 +1766,7 @@ figure.image-display
   这么多种参数要放在URL的*路径*中可不容易。即使我们能制定出一个合适的URL方案，实现起来也太复杂了，得通过模式匹配才能把URL翻译成命名路由。
 
   Optional parameters are the ideal vehicle for conveying arbitrarily complex information during navigation.
-  Optional parameters aren't involved in pattern matching and affords enormous flexibility of expression.
+  Optional parameters aren't involved in pattern matching and afford enormous flexibility of expression.
   
   可选参数是在导航期间传送任意复杂信息的理想载体。
   可选参数不涉及到模式匹配并在表达上提供了巨大的灵活性。
@@ -1788,7 +1818,7 @@ figure.image-display
   
   路由器在导航URL中内嵌了`id`的值，这是因为我们把它用一个`:id`占位符当做路由参数定义在了路由的`path`中：
 
-+makeExcerpt('app/heroes/heroes.routing.ts', 'hero-detail-route')
++makeExcerpt('app/heroes/heroes-routing.module.ts', 'hero-detail-route')
 
 :marked
   When the user clicks the back button, the `HeroDetailComponent` constructs another *link parameters array*
@@ -1804,7 +1834,7 @@ figure.image-display
   该数组缺少一个路由参数，这是因为我们那时没有理由往`HeroListComponent`发送信息。
 
   Now we have a reason. We'd like to send the id of the current hero with the navigation request so that the
-  `HeroListComponent` can highlight that hero in its list. 
+  `HeroListComponent` can highlight that hero in its list.
   This is a _nice-to-have_ feature; the list will display perfectly well without it.
   
   但现在有了。我们要在导航请求中同时发送当前英雄的id，以便`HeroListComponent`可以在列表中高亮这个英雄。
@@ -2048,7 +2078,7 @@ h3#merge-hero-routes 把hero模块导入到AppModule中
   
   像这样修改`app.module.ts`：
 
-+makeExcerpt('app/app.module.2.ts (heroes module import)', 'hero-import')
++makeExcerpt('app/app.module.3.ts (heroes module import)', 'hero-import')
 
 :marked
   We imported the `HeroesModule` and added it to our `AppModule`'s `imports`.
@@ -2079,11 +2109,12 @@ h3#merge-hero-routes 把hero模块导入到AppModule中
   这个“英雄特性区”可以演化出更多的组件和不同的路由。
   这是为每个特性区创建一个独立模块带来的核心优势。
 
-  Since our `Heroes` routes are defined within our feature module, we can also remove our initial `heroes` route from the `app.routing.ts`.
+  Since our `Heroes` routes are defined within our feature module, we can also remove our initial `heroes` route from the `app-routing.module.ts`.
+  
+  由于`Heroes`路由被定义在了我们的特性模块中，我们也可以从`app-routing.module.ts`中移除当初的`heroes`路由了。
   
-  由于`Heroes`路由被定义在了我们的特性模块中，我们也可以从`app.routing.ts`中移除当初的`heroes`路由了。
 
-+makeExcerpt('app/app.routing.3.ts (v2)', '')
++makeExcerpt('app/app-routing.module.2.ts (v2)', '')
 
 :marked
   ### Heroes App Wrap-up
@@ -2133,10 +2164,10 @@ h3#merge-hero-routes 把hero模块导入到AppModule中
         .file hero-list.component.ts
         .file hero.service.ts
         .file heroes.module.ts
-        .file heroes.routing.ts
+        .file heroes-routing.module.ts
       .file app.component.ts
       .file app.module.ts
-      .file app.routing.ts
+      .file app-routing.module.ts
       .file crisis-list.component.ts
       .file main.ts
     .file node_modules ...
@@ -2160,28 +2191,28 @@ h3#merge-hero-routes 把hero模块导入到AppModule中
 
 +makeTabs(
   `router/ts/app/app.component.1.ts,
-   router/ts/app/app.module.2.ts,
-   router/ts/app/app.routing.3.ts,
+   router/ts/app/app.module.3.ts,
+   router/ts/app/app-routing.module.3.ts,
    router/ts/app/heroes/hero-list.component.ts,
    router/ts/app/heroes/hero-detail.component.ts,
    router/ts/app/heroes/hero.service.ts,
    router/ts/app/heroes/heroes.module.ts,
-   router/ts/app/heroes/heroes.routing.ts`,
+   router/ts/app/heroes/heroes-routing.module.ts`,
    null,
   `app.component.ts,
   app.module.ts,
-  app.routing.ts,
+  app-routing.module.ts,
   hero-list.component.ts,
   hero-detail.component.ts,
   hero.service.ts,
   heroes.module.ts,
-  heroes.routing.ts`)
+  heroes-routing.module.ts`)
 
 .l-main-section#crisis-center-feature
 :marked
-  ## Milestone #3: The Crisis Center
+  ## Milestone #4: The Crisis Center
 
-  ## 里程碑#3：危机中心
+  ## 里程碑#4：危机中心
 
   The *Crisis Center* is a fake view at the moment. Time to make it useful.
 
@@ -2230,20 +2261,6 @@ h3#merge-hero-routes 把hero模块导入到AppModule中
 
   * 如果用户尚未登录，路由器就应该阻止它访问某些特性。
 
-  * Our `CrisisService` is only needed within the *Crisis Center* module.
-  We should limit access to it to that module.
-
-  * `CrisisService`只在*危机中心*模块中才需要，因此我们应该把它局限在此模块中使用。
-
-  * Changes to a feature module such as *Crisis Center* shouldn't provoke changes to the `AppModule` or
-  any other feature's component.
-
-  * 对特性模块（如*危机中心*）的修改，不应该导致对`AppModule`或其它特性组件的修改。
-
-  We need to [*separate our concerns*](https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html).
-
-  我们需要[*分离这些关注点*](https://blog.8thlight.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html)。
-
   We'll address all of these issues in the *Crisis Center*
   starting with the introduction of **child routes**
 
@@ -2336,49 +2353,6 @@ a#child-routing-component
     We *can* give it a selector. There's no harm in it.
     Our point is that we don't *need* one because we only *navigate* to it.
 
-    当然，我们也*可以*给它一个选择器，这没什么坏处。
-    重点在于：它并不是*必须的*，因为我们只会*导航*到它。
-
-:marked
-  ### Service isolation
-
-  ### 服务隔离
-
-  The `CrisisService` is neither needed nor wanted outside the *Crisis Center* domain.
-  Instead of registering it with the `AppModule`'s providers &mdash;
-  which makes it visible everywhere &mdash;
-  we register the `CrisisService` in the `CrisisCenterModule` providers array.
-
-  在*危机中心*领域之外既不需要也没人想要`CrisisService`。
-  与其在`AppModule`的提供商中注册它导致它在应用的任何地方都可见，不如在`CrisisCenterModule`的`providers`数组中注册`CrisisService`。
-
-+makeExcerpt('app/crisis-center/crisis-center.module.1.ts', 'providers', '')
-
-:marked
-  This limits the scope of the `CrisisService` to the *Crisis Center* routes.
-  No module outside of the *Crisis Center* can access it.
-
-  这会把`CrisisService`的范围局限在*危机中心*及其子组件树上。
-  在*危机中心*之外，没有任何组件能访问它。
-
-  There's a practical benefit to restricting its scope in this way.
-
-  用这种方式限制它的范围有一些实践好处。
-
-  First we can evolve the service independently of the rest of the application
-  without fear of breaking what should be unrelated modules.
-
-  第一，我们可以独立于应用程序的其它部分演进此服务，而不用担心破坏了与此无关的模块。
-
-  Second, we can delay loading this service into memory until we need it.
-  We can remove it from the application launch bundle,
-  reducing the size of the initial payload and improving performance.
-  We can load it optionally, [asynchronously](#asynchronous-routing) with the other *Crisis Center* components
-  if and when the user begins that workflow.
-
-  第二，可以对此服务进行惰性加载，直到需要它的时候才加载到内存中。
-  可以从应用的发布包中移除它，以减小首次加载的体积并提升性能。
-  可以用可选的方式加载它，当用户开始此工作流时，本应用才异步加载其它的*危机中心*组件。
 :marked
   ### Child Route Configuration
 
@@ -2397,13 +2371,13 @@ a#child-routing-component
 +makeExcerpt('app/crisis-center/crisis-center-home.component.ts (minus imports)', 'minus-imports')
 
 :marked
-  We create a `crisis-center.routing.ts` file as we did the `heroes.routing.ts` file.
+  We create a `crisis-center-routing.module.ts` file as we did the `heroes-routing.module.ts` file.
   But this time we define **child routes** *within* the parent `crisis-center` route.
 
   像`heroes.routing.ts`文件一样，我们也创建一个`crisis-center.routing.ts`。
   但这次，我们要把**子路由**定义在父路由`crisis-center`中。
 
-+makeExcerpt('app/crisis-center/crisis-center.routing.1.ts (Routes)', 'routes')
++makeExcerpt('app/crisis-center/crisis-center-routing.module.1.ts (Routes)', 'routes')
 
 :marked
   Notice that the parent `crisis-center` route has a `children` property
@@ -2474,11 +2448,11 @@ code-example.
   localhost:3000/crisis-center/2
 
 :marked
-  Here's the complete `crisis-center.routing.ts` file with its imports.
+  Here's the complete `crisis-center-routing.module.ts` file with its imports.
 
   这里是完整的`crisis-center.routing.ts`及其导入语句。
 
-+makeExcerpt('app/crisis-center/crisis-center.routing.1.ts', '')
++makeExcerpt('app/crisis-center/crisis-center-routing.module.1.ts', '')
 
 h3#import-crisis-module Import crisis center module into the AppModule routes
 
@@ -2489,17 +2463,17 @@ h3#import-crisis-module 把危机中心模块导入`AppModule`的路由中
   
   像`Heroes`模块中一样，我们必须把`危机中心`模块导入`AppModule`中：
  
-+makeExcerpt('app/app.module.3.ts (Crisis Center Module)', 'crisis-center-module')
++makeExcerpt('app/app.module.4.ts (import CrisisCenterModule)', 'crisis-center-module')
 
 :marked
-  We also remove the initial crisis center route from our `app.routing.ts`. Our routes
-  are now being provided by our `HeroesModule` and our `CrisisCenter` feature modules. We'll keep our `app.routing.ts` file
+  We also remove the initial crisis center route from our `app-routing.module.ts`. Our routes
+  are now being provided by our `HeroesModule` and our `CrisisCenter` feature modules. We'll keep our `app-routing.module.ts` file
   for general routes which we'll cover later in the chapter.
   
   我们还从`app.routing.ts`中移除了危机中心的初始路由。我们的路由现在是由`HeroesModule`和`CrisisCenter`特性模块提供的。
   我们将保持`app.routing.ts`文件中只有通用路由，本章稍后会讲解它。
 
-+makeExcerpt('app/app.routing.4.ts (v3)', '')
++makeExcerpt('app/app-routing.module.3.ts (v3)', '')
 
 a#redirect
 
@@ -2534,7 +2508,7 @@ code-example.
   
   首选的解决方案是添加一个`redirect`路由，它会把初始的相对URL（`''`）悄悄翻译成默认路径(`/crisis-center`)。
   
-+makeExcerpt('app/crisis-center/crisis-center.routing.2.ts' , 'redirect', '')
++makeExcerpt('app/crisis-center/crisis-center-routing.module.2.ts' , 'redirect', '')
 
 :marked
   A redirect route requires a `pathMatch` property to tell the router how to match a URL to the path of a route.
@@ -2586,7 +2560,7 @@ code-example.
 
   修改过的路由定义看起来是这样的：
 
-+makeExcerpt('app/crisis-center/crisis-center.routing.2.ts (routes v2)' , 'routes')
++makeExcerpt('app/crisis-center/crisis-center-routing.module.2.ts (routes v2)' , 'routes')
 
 .l-main-section
 h2#relative-navigation Relative Navigation
@@ -2706,8 +2680,8 @@ h2#guards Route Guards
 h2#guards 路由守卫
 
 :marked
-  ## Milestone #4: Route Guards
-  ## 里程碑#4：路由守卫
+  ## Milestone #5: Route Guards
+  ## 里程碑#5：路由守卫
 
   At the moment, *any* user can navigate *anywhere* in the application *anytime*.
 
@@ -2855,7 +2829,7 @@ a#can-activate-guard
     .file admin-dashboard.component.ts
     .file admin.component.ts
     .file admin.module.ts
-    .file admin.routing.ts
+    .file admin-routing.module.ts
     .file manage-crises.component.ts
     .file manage-heroes.component.ts
 
@@ -2895,7 +2869,7 @@ a#can-activate-guard
   
   我们的初始管理路由配置如下：
 
-+makeExcerpt('app/admin/admin.routing.1.ts (admin routing)', 'admin-routes')
++makeExcerpt('app/admin/admin-routing.module.1.ts (admin routing)', 'admin-routes')
 
 h3#component-less-route <i>Component-Less Route</i>: grouping routes without a component
 h3#component-less-route <i>无组件路由</i>: 不借助组件对路由进行分组
@@ -2918,7 +2892,7 @@ h3#component-less-route <i>无组件路由</i>: 不借助组件对路由进行
   
   接下来，我们把`AdminModule`导入到`app.module.ts`中，并把它加入`imports`数组中来注册这些管理类路由。
 
-+makeExcerpt('app/app.module.3.ts (admin module)', 'admin-module')
++makeExcerpt('app/app.module.4.ts (admin module)', 'admin-module')
 
 :marked
   And we add a link to the `AppComponent` shell that users can click to get to this feature.
@@ -2958,12 +2932,12 @@ h3#component-less-route <i>无组件路由</i>: 不借助组件对路由进行
 +makeExcerpt('app/auth-guard.service.1.ts')
 
 :marked
-  Next we open `admin.routing.ts `, import the `AuthGuard` class, and
+  Next we open `admin-routing.module.ts `, import the `AuthGuard` class, and
   update the admin route with a `CanActivate` guard property that references it:
 
   接下来，打开`crisis-center.routes.ts`，导入`AuthGuard`类，修改管理路由并通过`CanActivate`属性来引用`AuthGuard`：
 
-+makeExcerpt('app/admin/admin.routing.2.ts (guarded admin route)', 'admin-route')
++makeExcerpt('app/admin/admin-routing.module.2.ts (guarded admin route)', 'admin-route')
 
 :marked
   Our admin feature is now protected by the guard, albeit protected poorly.
@@ -3039,23 +3013,23 @@ h3#component-less-route <i>无组件路由</i>: 不借助组件对路由进行
   该组件没有什么新内容，我们把它放进路由配置的方式也没什么新意。
 
 
-  We'll register a `/login` route in our `app.routing.ts` and add the necessary providers to the `appRoutingProviders`
-  array we created earlier. In our `app.module.ts`, we'll import the `LoginComponent` and add it to our `AppModule` `declarations`.
+  We'll register a `/login` route in our `login-routing.module.ts` and add the necessary providers to the `providers`
+  array. In our `app.module.ts`, we'll import the `LoginComponent` and add it to our `AppModule` `declarations`.
+  We'll also import and add the `LoginRoutingModule` to our `AppModule` imports.
 
-  我们将在`app.routing.ts`中注册一个`/login`路由，并把必要的提供商添加到以前创建的`appRoutingProviders`数组中。
+  我们将在`login-routing.module.ts`中注册一个`/login`路由，并把必要的提供商添加`providers`数组中。
   在`app.module.ts`中，我们导入`LoginComponent`并把它加入根模块的`declarations`中。
+  同时在`AppModule`中导入并添加`LoginRoutingModule`。
   
 +makeTabs(
    `router/ts/app/app.module.ts,
-   router/ts/app/app.routing.6.ts,
    router/ts/app/login.component.1.ts,
-   router/ts/app/login.routing.ts
+   router/ts/app/login-routing.module.ts
   `,
   null,
    `app/app.module.ts,
-   app/app.routing.ts,
    app/login.component.ts,
-   app/login.routing.ts
+   app/login-routing.module.ts
   `)
 
 .l-sub-section
@@ -3099,7 +3073,7 @@ h3#can-activate-child-guard <i>CanActivateChild</i>: 守卫子路由
   
   我们往“无组件”的管理路由中添加同一个`AuthGuard`以同时保护所有子路由，而不是挨个添加它们。
 
-+makeExcerpt('app/admin/admin.routing.3.ts (excerpt)', 'can-activate-child')
++makeExcerpt('app/admin/admin-routing.module.3.ts (excerpt)', 'can-activate-child')
 
 h3#can-deactivate-guard <i>CanDeactivate</i>: handling unsaved changes
 
@@ -3160,7 +3134,7 @@ h3#can-deactivate-guard <i>CanDeactivate</i>：处理未保存的更改
   Users update crisis information in the `CrisisDetailComponent`.
   Unlike the `HeroDetailComponent`, the user changes do not update the
   crisis entity immediately. We update the entity when the user presses the *Save* button.
-  We discard the changes if the user presses he *Cancel* button.
+  We discard the changes if the user presses the *Cancel* button.
 
   用户在`CrisisDetailComponent`中更新危机信息。
   与`HeroDetailComponent`不同，用户的改动不会立即更新危机的实体对象。当用户按下了*Save*按钮时，我们就更新这个实体对象；如果按了*Cancel*按钮，那就放弃这些更改。
@@ -3244,18 +3218,18 @@ a#CanDeactivate
   注意，`canDeactivate`方法*可以*同步返回，如果没有危机，或者没有未定的修改，它就立即返回`true`。但是它也可以返回一个承诺（`Promise`）或可观察对象（`Observable`），路由器将等待它们被解析为真值（继续导航）或假值（留下）。
 
 :marked
-  We add the `Guard` to our crisis detail route in `crisis-center.routing.ts` using the `canDeactivate` array.
+  We add the `Guard` to our crisis detail route in `crisis-center-routing.module.ts` using the `canDeactivate` array.
 
   我们往`crisis-center.routing.ts`的危机详情路由中用`canDeactivate`数组添加一个`Guard`（守卫）。
 
-+makeExcerpt('app/crisis-center/crisis-center.routing.3.ts (can deactivate guard)', '')
++makeExcerpt('app/crisis-center/crisis-center-routing.module.3.ts (can deactivate guard)', '')
 
 :marked
-  We also need to add the `Guard` to our main `appRoutingProviders` so the `Router` can inject it during the navigation process.
+  We also need to add the `Guard` to our main `AppRoutingModule` `providers` so the `Router` can inject it during the navigation process.
 
   我们还要把这个`Guard`添加到主文件的`appRouterProviders`中去，以便`Router`可以在导航过程中注入它。
   
-+makeExample('app/app.routing.6.ts', '', '')
++makeExample('app/app-routing.module.4.ts', '', '')
 
 :marked
   Now we have given our user a safeguard against unsaved changes.
@@ -3324,7 +3298,7 @@ h3#resolve-guard <i>解析</i>: 提前获取组件数据
 +makeExample('app/crisis-center/crisis-detail-resolve.service.ts', '')
 
 :marked
-  We'll take the relevant parts of the `ngOnInit` lifecycle hook in our `CrisisDetailComponent` and moved them into our `CrisisDetailResolve` guard.
+  We'll take the relevant parts of the `ngOnInit` lifecycle hook in our `CrisisDetailComponent` and move them into our `CrisisDetailResolve` guard.
   We import the `Crisis` model and `CrisisService` and also the `Router` for navigation from our resolve implementation. We want to be explicit about
   the data we are resolving, so we implement the `Resolve` interface with a type of `Crisis`. This lets us know that what we will resolve will match our
   `Crisis` model. We inject the `CrisisService` and `Router` and implement the `resolve` method that supports a `Promise`, `Observable` or a synchronous
@@ -3339,18 +3313,15 @@ h3#resolve-guard <i>解析</i>: 提前获取组件数据
 
   我们使用`CrisisService.getCrisis`方法来获取一个**承诺对象**，用于防止路由在成功获取数据之前被加载。如果没有找到对应`Crisis`，便将用户导航回`CrisisList`，取消之前导航到危机详情的路由。
 
-  Now that our guard is ready, we'll import it in our `crisis-center.routing.ts` and use the `resolve` object in our route configuration.
+  Now that our guard is ready, we'll import it in our `crisis-center-routing.module.ts` and use the `resolve` object in our route configuration.
 
-  解析守卫现在准备好了，将它导入到`crisis-center.routing.ts`中，然后在路由配置中设置`resolve`对象。
+  解析守卫现在准备好了，将它导入到`crisis-center-routing.module.ts`中，然后在路由配置中设置`resolve`对象。
 
-+makeExcerpt('app/crisis-center/crisis-center.routing.ts (resolve)', 'crisis-detail-resolve')
+  We'll add the `CrisisDetailResolve` service to our `CrisisCenterRoutingModule`'s `providers`, so its available to the `Router` during the navigation process.
 
-:marked
-  We'll add the `CrisisDetailResolve` service to our crisis center module's `providers`, so its available to the `Router` during the navigation process.
+  接下来，将`CrisisDetailResolve`服务添加到危机中心路由模块的`providers`数组中，这样`Router`在路由过程中可以使用它。
 
-  接下来，将`CrisisDetailResolve`服务添加到危机中心模块的`providers`数组中，这样`Router`在路由过程中可以使用它。
-
-+makeExcerpt('app/crisis-center/crisis-center.module.ts (crisis detail resolve provider)', 'crisis-detail-resolve')
++makeExcerpt('app/crisis-center/crisis-center-routing.module.ts (resolve)', 'crisis-detail-resolve')
 
 :marked
   Now that we've added our `Resolve` guard to fetch data before the route loads, we no longer need to do this once we get into our `CrisisDetailComponent`.
@@ -3388,7 +3359,7 @@ h3#resolve-guard <i>解析</i>: 提前获取组件数据
    `router/ts/app/app.component.ts,
    router/ts/app/crisis-center/crisis-center-home.component.ts,
    router/ts/app/crisis-center/crisis-center.component.ts,
-   router/ts/app/crisis-center/crisis-center.routing.ts,
+   router/ts/app/crisis-center/crisis-center-routing.module.ts,
    router/ts/app/crisis-center/crisis-list.component.ts,
    router/ts/app/crisis-center/crisis-detail.component.ts,
    router/ts/app/crisis-center/crisis-detail-resolve.service.ts,
@@ -3398,7 +3369,7 @@ h3#resolve-guard <i>解析</i>: 提前获取组件数据
    `app.component.ts,
    crisis-center-home.component.ts,
    crisis-center.component.ts,
-   crisis-center.routing.ts,
+   crisis-center-routing.module.ts,
    crisis-list.component.ts,
    crisis-detail.component.ts,
    crisis-detail-resolve.service.ts,
@@ -3505,7 +3476,7 @@ a#fragment
 <a id="asynchronous-routing"></a>
 .l-main-section
 :marked
-  ## Milestone #5: Asynchronous Routing
+  ## Milestone #6: Asynchronous Routing
 
   ## 里程碑5：异步路由
 
@@ -3546,13 +3517,13 @@ a#fragment
 
   ### 惰性加载路由配置
 
-  We'll start by adding an `admin` route to our `app.routing.ts` file. We want to load our `Admin` module asynchronously,
+  We'll start by adding an `admin` route to our `app-routing.module.ts` file. We want to load our `Admin` module asynchronously,
   so we'll use the `loadChildren` property in our route config where previously we used the `children` property to include our child routes.
   
-  首先，把`admin`路由添加到 `app.routing.ts`文件中。我们想要异步加载`Admin`模块，
+  首先，把`admin`路由添加到 `app-routing.module.ts`文件中。我们想要异步加载`Admin`模块，
   就得在路由配置中使用`loadChildren`属性，而以前我们已经用`children`属性包含进了这些子路由。
 
-  We'll also change our `admin` **path** in our `admin.routing.ts` to an empty path. The `Router` supports
+  We'll also change our `admin` **path** in our `admin-routing.module.ts` to an empty path. The `Router` supports
   *empty path* routes, which we can use for grouping routes together without adding anything additional paths to the URL. Our
   users will still visit `/admin` and our `AdminComponent` still serves as our *Routing Component* which contains
   our child routes.
@@ -3560,20 +3531,13 @@ a#fragment
   接下来，在`admin.routing.ts`中，把`admin`的**path**更改为空路径。路由器支持**空路径**路由，它可以在不必把别的路径添加到URL中的情况下，将多个路由组合到一起。用户还是可以访问`/crisis-center`，`CrisisCenterComponent`组件还是包含了子级路由的**路由组件**。
 
 +makeTabs(
-  `router/ts/app/app.routing.ts,
-  router/ts/app/admin/admin.routing.ts`,
+  `router/ts/app/app-routing.module.ts,
+  router/ts/app/admin/admin-routing.module.ts`,
   'lazy-load-admin,',
-  `app.routing.ts (load children),
-  app/admin/admin.routing.ts (empty path admin)
+  `app-routing.module.ts (load children),
+  app/admin/admin-routing.module.ts (empty path admin)
   `)
 
-.l-sub-section
-  :marked
-    We use the ES2015 `spread` feature to flatten the route arrays of our `adminRoutes` and `loginRoutes`
-    into our `appRoutes` array to provide a simple array of routes.
-
-    我们使用了ES2015的`spread`特性来将`adminRoutes`和`loginRoutes`这两个路由数组扁平化，
-    放进我们的`appRoutes`数组中，以便给路由提供一个单一数组。
 :marked
   The `loadChildren` property is used by the `Router` to map to our bundle we want to lazy-load, in this case being the `AdminModule`.
   
@@ -3642,12 +3606,12 @@ h3#can-load-guard <i>CanLoad守卫</i>: 保护特性模块的加载
 +makeExcerpt('app/auth-guard.service.ts (can load guard)', '')
 
 :marked
-  Next, we'll import the `AuthGuard` into our `app.routing.ts` and add the `AuthGuard` to the `canLoad` array for
+  Next, we'll import the `AuthGuard` into our `app-routing.module.ts` and add the `AuthGuard` to the `canLoad` array for
   our `admin` route. Now our `admin` feature area is only loaded when the proper access has been granted.
   
   接下来，我们就把`AuthGuard`导入到`app.routing.ts`中，并把`AuthGuard`添加到`admin`路由的`canLoad`数组中。现在`admin`特性区就只有当获得访问授权时才会被加载了。
 
-+makeExcerpt('app/app.routing.ts (can load guard)', 'can-load-guard')
++makeExcerpt('app/app-routing.module.ts (can load guard)', 'can-load-guard')
 
 <a id="final-app"></a>
 
@@ -4021,4 +3985,4 @@ code-example(format=".", language="bash").
 
   我们可以在根模块的`RouterModule.forRoot`的第二个参数中传入一个带有`useHash: true`的对象，以回到基于`HashLocationStrategy`的传统方式。
 
-+makeExcerpt('app/app.module.5.ts (hash URL strategy)', '')
++makeExcerpt('app/app.module.6.ts (hash URL strategy)', '')
diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade
index 2a21010ec8..8dd9b0956c 100644
--- a/public/docs/ts/latest/guide/style-guide.jade
+++ b/public/docs/ts/latest/guide/style-guide.jade
@@ -594,9 +594,9 @@ a(href="#toc") 回到顶部
 
 .s-rule.do
   :marked
-    **Do** include error handling the bootstrapping logic.
+    **Do** include error handling in the bootstrapping logic.
     
-    **坚持**在“引导”逻辑中包含错误处理代码。
+    **坚持**在“引导”逻辑中包含错误处理代码。    
 
 .s-rule.avoid
   :marked
@@ -1629,12 +1629,12 @@ a(href="#toc") 回到顶部
 
 a(id='file-tree')
 :marked
-  Folder and File Structure
+  Here is a compliant folder and file structure
   
-  目录和文件结构
+  目录和文件结构  
 
 .filetree
-  .file src
+  .file &lt;project root&gt;
   .children
     .file app
     .children
@@ -1680,8 +1680,8 @@ a(id='file-tree')
         .file villains.module.ts
         .file villains-routing.module.ts
       .file app.component.ts|html|css|spec.ts
-    .file app.module.ts
-    .file app-routing.module.ts
+      .file app.module.ts
+      .file app-routing.module.ts
     .file main.ts
     .file index.html
     .file ...
@@ -1776,15 +1776,17 @@ a(href="#toc") 回到顶部
 
 .s-rule.do
   :marked
-    **Do** create an Angular module at the root of the application.
+    **Do** create an Angular module in the app's root folder (e.g., in `/app`).
+    
+    **坚持**在应用的根部创建一个Angular模块（不如`/app`）。
     
-    **坚持**在应用的根部创建一个Angular模块。
 
 .s-why
   :marked
-    **Why?** Every app requires at least one Angular module.
+    **Why?** Every app requires at least one root Angular module.
+    
+    **为何？**每个应用都至少需要一个根Angular模块。
     
-    **为何？**每个应用都至少需要一个Angular模块。
 
 .s-rule.consider
   :marked
@@ -2471,9 +2473,10 @@ a(href="#toc") 回到顶部
 
 .s-rule.do
   :marked
-    **Do** use [`@Input`](https://angular.io/docs/ts/latest/api/core/index/Input-var.html) and [`@Output`](https://angular.io/docs/ts/latest/api/core/index/Output-var.html) instead of the `inputs` and `outputs` properties of the [`@Directive`](https://angular.io/docs/ts/latest/api/core/index/Directive-decorator.html) and [`@Component`](https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html) decorators:
+    **Do** use `@Input` and `@Output` instead of the `inputs` and `outputs` properties of the 
+    `@Directive and `@Component` decorators:
     
-    **坚持**使用[`@Input`](https://angular.io/docs/ts/latest/api/core/Input-var.html)和[`@Output`](https://angular.io/docs/ts/latest/api/core/Output-var.html), 而非[`@Directive`](https://angular.io/docs/ts/latest/api/core/Directive-decorator.html) 和 [`@Component`](https://angular.io/docs/ts/latest/api/core/Component-decorator.html) 装饰器里面的`inputs`和`outputs`属性。
+    **坚持** 使用`@Directive`和`@Component`装饰器的`@Input`和`@Output`，而非`inputs`和`outputs`属性:
 
 .s-rule.do
   :marked
@@ -2489,15 +2492,10 @@ a(href="#toc") 回到顶部
 
 .s-why
   :marked
-    **Why?** If you ever need to rename the property or event name associated to 
-    [`@Input`](https://angular.io/docs/ts/latest/api/core/index/Input-var.html) or 
-    [`@Output`](https://angular.io/docs/ts/latest/api/core/index/Output-var.html) 
-    you can modify it on a single place.
+    **Why?** If you ever need to rename the property or event name associated with 
+    `@Input` or `@Output`, you can modify it a single place.
     
-    **为何？**如果你永远都不用对关联到 
-    [`@Input`](https://angular.io/docs/ts/latest/api/core/index/Input-var.html)或 
-    [`@Output`](https://angular.io/docs/ts/latest/api/core/index/Output-var.html)的属性或事件进行改名，
-    那么你可以只在一处地方修改它。
+    **为何？** 如果你需要重命名属性或者`@Input`或者关联的事件名字
 
 .s-why
   :marked
diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade
index d096c30674..4b56844096 100644
--- a/public/docs/ts/latest/guide/template-syntax.jade
+++ b/public/docs/ts/latest/guide/template-syntax.jade
@@ -837,8 +837,8 @@ table
     If we must read a target element property or call one of its methods,
     we'll need a different technique.
     See the API reference for
-    [viewChild](../api/core/index/ViewChild-var.html) and
-    [contentChild](../api/core/index/ContentChild-var.html).
+    [viewChild](../api/core/index/ViewChild-decorator.html) and
+    [contentChild](../api/core/index/ContentChild-decorator.html).
 
     如果我们不得不读取目标元素上的属性或调用它的某个方法，我们得用另一种技术。
     参见API参考手册中的[viewChild](../api/core/index/ViewChild-var.html)和
@@ -1481,7 +1481,7 @@ block style-property-name-dart-diff
     The `ngModel` input property sets the element's value property and the `ngModelChange` output property
     listens for changes to the element's value.
     The details are specific to each kind of element and therefore the `NgModel` directive only works for elements,
-    such as the input text box, that are supported by a [ControlValueAccessor](../api/common/index/ControlValueAccessor-interface.html).
+    such as the input text box, that are supported by a [ControlValueAccessor](../api/forms/index/ControlValueAccessor-interface.html).
     We can't apply `[(ngModel)]` to our custom components until we write a suitable *value accessor*,
     a technique that is beyond the scope of this chapter.
 
@@ -2079,11 +2079,15 @@ figure.image-display
   ### Referencing a template reference variable
   ### 引用一个模板引用变量
 
-  We can reference a template reference variable on the same element, on a sibling element, or on
-  any child elements.
+  We can refer to a template reference variable _anywhere_ in the current template.
+.l-sub-section
+  :marked
+    Do not define the same variable name more than once in the same template.
+    The runtime value will be unpredictable.
 
-  我们可以在同一元素、兄弟元素或任何子元素中引用模板引用变量。
+    我们可以在同一元素、兄弟元素或任何子元素中引用模板引用变量。
 
+:marked
   Here are two other examples of creating and consuming a Template reference variable:
 
   这里是关于创建和消费模板引用变量的另外两个例子：
diff --git a/public/docs/ts/latest/guide/testing.jade b/public/docs/ts/latest/guide/testing.jade
index 67795a15f9..47daae613a 100644
--- a/public/docs/ts/latest/guide/testing.jade
+++ b/public/docs/ts/latest/guide/testing.jade
@@ -770,7 +770,7 @@ a(href="#top").to-top 回到顶部
 +makeExample('testing/ts/app/banner.component.spec.ts', 'simple-example-it', 'app/banner.component.spec.ts (simplified)')(format='.')
 :marked
   A comprehensive review of the Angular testing utilities appears [later in the chapter](#atu-apis).
-  Let's dive right into Angular testing, starting with with the components of a sample application.
+  Let's dive right into Angular testing, starting with the components of a sample application.
 
   完整的关于Angular测试工具的回顾将会在[本章后面](#atu-apis)出现。
   让我们深入到Angular测试，以例子应用的组件开始。
@@ -1543,7 +1543,7 @@ a(href="#top").to-top 回到顶部
 
   Notice the `async` call in the `beforeEach`, made necessary by the asynchronous `TestBed.compileComponents` method.
   The `async` function arranges for the tester's code to run in a special _async test zone_
-  that hides the mechanics of asynchronous execution, just as it does when passed to an [_it_ test)(#async).
+  that hides the mechanics of asynchronous execution, just as it does when passed to an [_it_ test](#async).
 
   注意`beforeEach`里面对`async`的调用，因为异步方法`TestBed.compileComponents`而变得必要。
   `async`函数将测试代码安排到特殊的**异步测试区域**来运行，该区域隐藏了异步执行的细节，就像它被传递给[_it_ 测试)(#async)一样。
@@ -1621,9 +1621,9 @@ a(href="#top").to-top 回到顶部
   测试的目的是验证这样的绑定和期待的那样正常工作。
   测试应该设置导入值并监听导出事件。
 
-  The `DashboardHeroComponent` is tiny example of a component in this role.
-  It displays an individual heroe provided by the `DashboardComponent`. 
-  Clicking that hero tells the the `DashboardComponent` that the user has selected the hero.
+  The `DashboardHeroComponent` is  tiny example of a component in this role.
+  It displays an individual hero provided by the `DashboardComponent`. 
+  Clicking that hero tells the `DashboardComponent` that the user has selected the hero.
 
   `DashbaordComponent`是非常小的这种类型的例子组件。
   它显示由`DashboardCompoent`提供的英雄个体。
@@ -1937,9 +1937,9 @@ a(href="#top").to-top 回到顶部
 +makeExample('testing/ts/app/dashboard/dashboard.component.spec.ts', 'router-stub', 'app/dashboard/dashboard.component.spec.ts (Router Stub)')(format='.')
 :marked
   Now we setup the testing module with the test stubs for the `Router` and `HeroService` and 
-  create a test instance of the `DashbaordComponent` for subsequent testing.
+  create a test instance of the `DashboardComponent` for subsequent testing.
 
-  现在我们来利用`Router`和`HeroService`的测试stub类来配置测试模块，并为接下来的测试创建`DashbaordComponent`的测试实例。
+  现在我们来利用`Router`和`HeroService`的测试stub类来配置测试模块，并为接下来的测试创建`DashboardComponent`的测试实例。
 +makeExample('testing/ts/app/dashboard/dashboard.component.spec.ts', 'compile-and-create-body', 'app/dashboard/dashboard.component.spec.ts (compile and create)')(format='.')
 :marked
   The following test clicks the displayed hero and confirms (with the help of a spy) that `Router.navigateByUrl` is called with the expected url.
diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade
index 0362c5138d..2b9ea8b439 100644
--- a/public/docs/ts/latest/guide/upgrade.jade
+++ b/public/docs/ts/latest/guide/upgrade.jade
@@ -2182,11 +2182,11 @@ code-example(format="").
   
   无论在Angular 1还是Angular 2或其它框架中，路由器都需要进行配置。
   
-  The details of Angular 2 router configuration are best left to the [Routing](../router.html) documentation
+  The details of Angular 2 router configuration are best left to the [Routing documentation](router.html) 
   which recommends that you create a `NgModule` dedicated to router configuration
   (called a _Routing Module_):
   
-  Angular 2路由器配置的详情最好去查阅下[路由与导航](../router.html)文档。
+  Angular 2路由器配置的详情最好去查阅下[路由与导航](router.html)文档。
   它建议你创建一个专们用于路由器配置的`NgModule`（名叫*路由模块*）。
 
 +makeExample('upgrade-phonecat-3-final/ts/app/app-routing.module.ts', null, 'app/app-routing.module.ts')
@@ -2235,9 +2235,10 @@ code-example(format="").
 +makeExample('upgrade-phonecat-3-final/ts/app/phone-list/phone-list.template.html', 'list', 'app/phone-list/phone-list.template.html (list with links)')(format='.')
 .l-sub-section
   :marked
-    See the [Routing](../router.html) page for details.
+    See the [Routing](router.html) page for details.
+    
+    要了解详情，请查看[路由与导航](router.html)页。
     
-    要了解详情，请查看[路由与导航](../router.html)页。
 
 :marked
   ### Bootstrap as an Angular 2 app
diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
index 0ed32b7e26..3d2d765d15 100644
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@@ -86,7 +86,7 @@ h1 环境准备：安装#{_prereq}
 block setup-tooling
   :marked
     If Node.js and npm aren't already on your machine, <a href="http://blog.npmjs.org/post/85484771375/how-to-install-npm"
-    target="_blank">install them</a>. Our examples require node **v5.x.x** or higher and
+    target="_blank">install them</a>. Our examples require node **v4.x.x** or higher and
     npm **3.x.x** or higher. To check which version you are using, run `node -v` and `npm -v`
     in a terminal window.
     
@@ -295,8 +295,8 @@ block install-packages
     这是要让最小的应用在浏览器中运行时，对Angular的最低需求。
 
     The QuickStart application doesn't do anything else, so you don't need any other modules. In a real
-    application, you'd likely import [`FormsModule`](../latest/api/forms/index/FormsModule-class
-    .html) as well as [`RouterModule`](../latest/api/router/index/RouterModule-class.html) and
+    application, you'd likely import [`FormsModule`](../latest/api/forms/index/FormsModule-class.html) 
+    as well as [`RouterModule`](../latest/api/router/index/RouterModule-class.html) and
     [`HttpModule`](../latest/api/http/index/HttpModule-class.html). These are introduced in the
     [Tour of Heroes Tutorial](./tutorial/).
     
@@ -474,10 +474,10 @@ h1#index 步骤5：定义该应用的宿主页面
 .callout.is-helpful
   :marked
     For the full set of master styles used by the documentation samples,
-    see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css).
+    see [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/_boilerplate/styles.css).
   
     要查看本文档中所用到的主样式表的完整集合，参见
-    [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css)
+    [styles.css](https://github.com/angular/angular.io/blob/master/public/docs/_examples/_boilerplate/styles.css).    
 
 .l-main-section#build-and-run
 h1 Step !{step++}: Build and run the application
diff --git a/public/docs/ts/latest/tutorial/_data.json b/public/docs/ts/latest/tutorial/_data.json
index bd367334f6..7819ba418b 100644
--- a/public/docs/ts/latest/tutorial/_data.json
+++ b/public/docs/ts/latest/tutorial/_data.json
@@ -27,7 +27,7 @@
   },
   "toh-pt5": {
     "title": "路由",
-    "intro": "我们添加一个Angular组件路由，并且学习在视图之间导航",
+    "intro": "我们添加Angular路由，并且学习在视图之间导航",
     "nextable": true
   },
   "toh-pt6": {
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index d0df124883..6c01dca817 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -2,7 +2,7 @@
 
 block includes
   include ../_util-fns
-  - var _appRoutingTsVsAppComp = 'app.routing.ts'
+  - var _appRoutingTsVsAppComp = 'app.module.ts'
   - var _declsVsDirectives = 'declarations'
   - var _RoutesVsAtRouteConfig = 'Routes'
   - var _RouterModuleVsRouterDirectives = 'RouterModule'
@@ -350,9 +350,9 @@ block router-config-intro
     ### 配置路由  
   
     Our application doesn't have any routes yet.
-    We'll start by creating a configuration file for the application routes.
+    We'll start by creating a configuration for the application routes.
     
-    本应用还没有路由。我们来为应用的路由新建一个配置文件。
+    本应用还没有路由。我们来为应用的路由新建一个配置。
 
 :marked
   *Routes* tell the router which views to display when a user clicks a link or
@@ -364,11 +364,12 @@ block router-config-intro
   
   我们的第一个路由是指向`HeroesComponent`的。
   
-- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.routing.ts'
+- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.module.2.ts'
 +makeExcerpt('app/' + _file + ' (heroes route)', 'heroes')
 
 - var _are = _docsFor == 'dart' ? 'takes' : 'are'
 - var _routePathPrefix = _docsFor == 'dart' ? '/' : ''
+
 :marked
   The `!{_RoutesVsAtRouteConfig}` !{_are} !{_an} !{_array} of *route definitions*.
   We have only one route definition at the moment but rest assured, we'll add more.
@@ -396,35 +397,20 @@ block router-config-intro
     
 +ifDocsFor('ts|js')
   :marked
-    We'll export a `routing` constant initialized using the `RouterModule.forRoot` method applied to our !{_array} of routes.
-    This method returns a **configured router module** that we'll add to our root NgModule, `AppModule`.
-  
-    使用`RouterModule.forRoot`方法，导出包含了路由数组的`routing`常量。它返回一个**配置好的路由模块**，它将被加入到根NgModule - `AppModule`中。
+    ### Make the router available
+    
+    ### 让路由器可用
 
-  +makeExcerpt('app/app.routing.1.ts (excerpt)', 'routing-export')
+    We've setup the initial route configuration. Now we'll add it to our `AppModule`.
+    We'll add our configured `RouterModule` to the `AppModule` imports !{_array}.
+
+  +makeExcerpt('app/app.module.2.ts (app routing)', '')
 
   .l-sub-section
     :marked
-      We call the `forRoot` method because we're providing a configured router at the _root_ of the application.
-      The `forRoot` method gives us the Router service providers and directives needed for routing.
-    
-      调用`forRoot`方法是因为要在应用程序根部提供配置好的路由。
-      `forRoot`方法为我们提供了路由需要的服务提供商和指令。 
-    
-  :marked
-    ### Make the router available.
-    
-    ### 让路由器生效
-    
-    We've setup initial routes in the `app.routing.ts` file. Now we'll add it to our root NgModule.
-    
-    我们已经在`app.routing.ts`文件中设置好了初始路由，接着把它加到根模块（NgModule）中。
-  
-    Import the `routing` constant from `app.routing.ts` and add it the `imports` !{_array} of `AppModule`.
-    
-    我们要从`app.routing.ts`中导入`routing`常量，并把它加入根模块的`imports`数组中。
-  
-  +makeExcerpt('app/app.module.ts', 'routing')
+      We use the `forRoot` method because we're providing a configured router at the _root_ of the application.
+      The `forRoot` method gives us the Router service providers and directives needed for routing, and
+      performs the initial navigation based on the current browser URL.
 
 - var _heroesRoute = _docsFor == 'dart' ? "'Heroes'" : 'heroes'
 :marked
@@ -550,14 +536,15 @@ block routerLink
 
   先导入`DashboardComponent`类，然后把下列路由的定义添加到`!{_RoutesVsAtRouteConfig}`数组中。
 
-- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app.routing.ts'
+- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app.module.3.ts'
 +makeExcerpt(_file + ' (Dashboard route)', 'dashboard')
 
 +ifDocsFor('ts|js')
   :marked
-    Also import and add `DashboardComponent` to our root NgModule's `declarations`.
+    Also import and add `DashboardComponent` to our `AppModule`'s `declarations`.
     
     还得把`DashboardComponent`添加到根模块的`declarations`数组中。
+    
 
   +makeExcerpt('app/app.module.ts', 'dashboard')
 
@@ -581,7 +568,7 @@ block redirect-vs-use-as-default
     
     可以使用重定向路由来实现它。添加下面的内容到路由定义的数组中：
     
-  +makeExcerpt('app/app.routing.ts','redirect')
+  +makeExcerpt('app/app.module.3.ts','redirect')
 
   .l-sub-section
     :marked
@@ -629,7 +616,7 @@ block redirect-vs-use-as-default
   
   设置`moduleId`属性到`module.id`，相对模块加载`templateUrl`。
 
-+makeExcerpt('app/dashboard.component.ts', 'templateUrl')
++makeExcerpt('app/dashboard.component.ts', 'metadata')
 
 :marked
   Create that file with this content:
@@ -803,7 +790,7 @@ code-example(format='').
 
   下面是我们将使用的*路由定义*。
 
-- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.routing.ts'
+- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.module.3.ts'
 +makeExcerpt(_file + ' (hero detail)','hero-detail')
 
 :marked
@@ -986,11 +973,11 @@ block extract-id
 +makeExample('app/hero-detail.component.html')
 
 :marked
-  We update the component metadata with a `templateUrl` pointing to the template file that we just created.
+  We update the component metadata with a `moduleId` and a `templateUrl` pointing to the template file that we just created.
 
   然后更新组件的元数据，用一个`templateUrl`属性指向我们刚刚创建的模板文件。
 
-+makeExcerpt('app/hero-detail.component.ts', 'templateUrl')
++makeExcerpt('app/hero-detail.component.ts', 'metadata')
 
 :marked
   Here's the (nearly) finished `HeroDetailComponent`:
@@ -1062,7 +1049,7 @@ block extract-id
 
   这两个数组项目与我们之前在`!{_appRoutingTsVsAppComp}`中添加的***path***和***:id***为代号被参数化的英雄详情路由的配置对象对应。
 
-- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.routing.ts'
+- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.module.3.ts'
 +makeExcerpt(_file + ' (hero detail)', 'hero-detail')
 
 :marked
@@ -1078,8 +1065,56 @@ block extract-id
 
 :marked
   Refresh the browser and select a hero from the dashboard; the app should navigate directly to that hero’s details.
-
+  
   刷新浏览器，并从仪表盘中选择一位英雄，应用就会直接导航到英雄的详情。
+  
+.l-main-section
+:marked
+  ## Refactor routes to a _Routing Module_
+
+  Almost 20 lines of `AppModule` are devoted to configuring four routes. 
+  Most application have many more routes and they [add guard services](../guide/router.html#guards) 
+  to protect against unwanted or unauthorized navigations. 
+  Routing considerations could quickly dominate this module and obscure its primary purpose which is to 
+  establish key facts about the entire app for the Angular compiler.
+
+  We should refactor the routing configuration into its own class.
+  What kind of class? 
+  The current `RouterModule.forRoot()` produces an Angular `ModuleWithProviders` which suggests that a
+  class dedicated to routing should be some kind of module.
+  It should be a [_Routing Module_](../guide/router.htm#routing-module).
+
+  By convention the name of a _Routing Module_ contains the word "Routing" and 
+  aligns with the name of the module that declares the components navigated to".
+  
+  Create an `app-routing.module.ts` file as a sibling to `app.module.ts`. Give it the following contents extracted from the `AppModule` class:
+
++makeExample('app/app-routing.module.ts')
+:marked
+  Noteworthy points, typical of _Routing Modules_:
+  * Pull the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
+
+  * Add `RouterModule.forRoot(routes)` to `imports`.
+    
+  * Add `RouterModule` to `exports` so that the components in the companion module have access to Router declarables 
+  such as `RouterLink` and `RouterOutlet`.
+  
+  * No `declarations`!  Declarations are the responsibility of the companion module.
+
+  * Add module `providers` for guard services if you have them; there are none in this example.
+
+  ### Update _AppModule_
+
+  Now delete the routing configuration from `AppModule` and import the `AppRoutingModule` 
+  (_both_ with an ES `import` statement _and_ by adding it to the `NgModule.imports` list).
+
+  Here is the revised `AppModule`, compared to its pre-refactor state:
++makeTabs(
+  `toh-5/ts/app/app.module.ts, toh-5/ts/app/app.module.3.ts`,
+   null,
+  `app/app.module.ts (after), app/app.module.ts (before)`)
+:marked
+  It's simpler and focused on indentifying the key pieces of the application.  
 
 .l-main-section
 :marked
@@ -1087,11 +1122,13 @@ block extract-id
 
   ## 在*HeroesComponent*中选择一位英雄
 
+  Earlier we added the ability to select a hero from the dashboard.
   We'll do something similar in the `HeroesComponent`.
-
+  
+  之前我们添加了从控制台选择一个英雄的功能。
   我们现在要做的事和`HeroesComponent`中很像。
 
-  That component's current template exhibits a "master/detail" style with the list of heroes
+  The `HeroesComponent` template exhibits a "master/detail" style with the list of heroes
   at the top and details of the selected hero below.
 
   那个组件的当前模板展示了一个主从风格的界面：上方是英雄列表，底下是所选英雄的详情。
@@ -1099,6 +1136,8 @@ block extract-id
 +makeExample('toh-4/ts/app/app.component.ts','template', 'app/heroes.component.ts (当前的模板)')(format=".")
 
 :marked
+  Our goal is to move the detail to its own view and navigate to it when the user decides to edit a selected hero.
+
   Delete the `<h1>` at the top (forgot about it during the `AppComponent`-to-`HeroesComponent` conversion).
   
   删除顶部的`<h1>`（在从`AppComponent`转到`HeroesComponent`期间可以先忘掉它）。
@@ -1114,8 +1153,9 @@ block extract-id
   我们要在它自己的页面中显示英雄详情，并像我们在仪表盘中所做的那样路由到它。
 
   But we'll throw in a small twist for variety.
-  When the user selects a hero from the list, we *won't* go to the detail page.
-  We'll show a *mini-detail* on *this* page instead and make the user click a button to navigate to the *full detail *page.
+  We are keeping the "master/detail" style but shrinking the detail to a "mini", read-only version.
+  When the user selects a hero from the list, we *don't* go to the detail page.
+  We show a *mini-detail* on *this* page instead and make the user click a button to navigate to the *full detail *page.
 
   但是，我们要做一点小小的改动。
   当用户从这个列表中选择一个英雄时，我们*不会*再跳转到详情页。
@@ -1195,7 +1235,7 @@ figure.image-display
 
   1. *设置*组件元数据的`templateUrl`和`styleUrls`属性，来分别引用这两个文件。
 
-  1. *Set* the `moduleId` property to `module.id` so that 'templateUrl` and `styleUrls` are relative to the component.
+  1. *Set* the `moduleId` property to `module.id` so that `templateUrl` and `styleUrls` are relative to the component.
 
   1. *设置*`moduleId`属性为`module.id`，将`templateUrl`和`styleUrls`路径设置为相对组件的路径。
 
@@ -1386,7 +1426,7 @@ block css-files
 
 +makeExcerpt('styles.css (excerpt)', 'toh')
 
-- var styles_css = 'https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/styles.css'
+- var styles_css = 'https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/_boilerplate/styles.css'
 
 :marked
   Create the file <span ngio-ex>styles.css</span>, if it doesn't exist already.
@@ -1430,7 +1470,7 @@ block file-tree-end
         .file app.component.css
         .file app.component.ts
         .file app.module.ts
-        .file app.routing.ts
+        .file app-routing.module.ts
         .file dashboard.component.css
         .file dashboard.component.html
         .file dashboard.component.ts
@@ -1488,6 +1528,7 @@ block file-tree-end
   - 我们把HTML和CSS从组件中移出来，放到了它们自己的文件中。
 
   - We added the `uppercase` pipe to format data.
+  - We refactored routes into a `Routing Module` that we import.
 
   - 我们添加了一个`uppercase`管道，来格式化数据。
 
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
index 0b1f6b28e4..a792998975 100644
--- a/public/docs/ts/latest/tutorial/toh-pt6.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -241,7 +241,7 @@ block get-heroes-details
     *Observable(可观察对象)*是一个管理异步数据流的强力方式。
     后面我们还会进一步学习[可观察对象](#observables)。
 
-    For *now* we get back on familiar ground by immediately by
+    For *now* we get back on familiar ground by immediately
     converting that `Observable` to a `Promise` using the `toPromise` operator.
 
     *现在*，我们先利用`toPromise`操作符把`Observable`直接转换成`Promise`对象，回到已经熟悉的地盘。
@@ -364,7 +364,7 @@ block get-heroes-details
   ## 更新英雄详情
 
   We can edit a hero's name already in the hero detail view. Go ahead and try
-  it. As we type, the hero name is updated in the view heading. 
+  it. As we type, the hero name is updated in the view heading.
   But when we hit the `Back` button, the changes are lost!
   
   我们已经可以在英雄详情中编辑英雄的名字了。来试试吧。在输入的时候，页头上的英雄名字也会随之更新。
@@ -828,7 +828,7 @@ block observable-transformers
 - var _declarations = _docsFor == 'dart' ? 'directives' : 'declarations'
 - var declFile = _docsFor == 'dart' ? 'app/dashboard.component.ts' : 'app/app.module.ts'
 :marked
-  Finally, we import `HeroSearchComponent` from 
+  Finally, we import `HeroSearchComponent` from
   <span ngio-ex>hero-search.component.ts</span>
   and add it to the `!{_declarations}` !{_array}:
   
@@ -867,7 +867,7 @@ block filetree
         .file app.component.ts
         .file app.component.css
         .file app.module.ts
-        .file app.routing.ts
+        .file app-routing.module.ts
         .file dashboard.component.css
         .file dashboard.component.html
         .file dashboard.component.ts
@@ -929,9 +929,9 @@ block filetree
   
   - 我们学会了如何使用“可观察对象”。
 
-  Here are the files we added or changed in this chapter.
+  Here are the files we _added or changed_ in this chapter.
   
-  下面是我们添加或修改之后的文件汇总。
+  下面是我们**添加或修改**之后的文件汇总。  
 
 block file-summary
   +makeTabs(
diff --git a/public/events.jade b/public/events.jade
index 4a6bf488ca..9d3c8da3e5 100644
--- a/public/events.jade
+++ b/public/events.jade
@@ -7,26 +7,6 @@ table.is-full-width
 
   tbody
 
-    <!-- UtahJS -->
-    tr
-      th
-        a(
-        target="_blank"
-        href="https://conf.utahjs.com/"
-        ) UtahJS
-      td Salt Lake City, UT, USA
-      td Sept. 16, 2016
-
-    <!-- Angular Connect -->
-    tr
-      th
-        a(
-        target="_blank"
-        href="http://angularconnect.com/"
-        ) Angular Connect
-      td London, UK
-      td Sept. 27-28, 2016
-
     <!-- Angular Brackets -->
     tr
       th
diff --git a/public/news.jade b/public/news.jade
index 132a09464b..4faf8a0247 100644
--- a/public/news.jade
+++ b/public/news.jade
@@ -6,30 +6,30 @@
 .grid-fluid
   .c6
     .article-card
-      .date Sept 14, 2016
+      .date Oct 12, 2016
       .title
         a(
         target="_blank"
-        href="http://angularjs.blogspot.com/2016/09/angular2-final.html"
-        ) Angular, version 2: proprioception-reinforcement
-      p Today, at a special meetup at Google HQ, we announced the final release version of Angular, the full-platform successor to Angular 1...
-      .author
-        img(src="/resources/images/bios/juleskremer.jpg")
-        .posted Posted by <b>Jules Kremer</b>
-
-  .c6
-    .article-card
-      .date Sept 13, 2016
-      .title
-        a(
-        target="_blank"
-        href="http://angularjs.blogspot.com/2016/09/rc7-now-available.html"
-        ) RC7 Now Available
-      p Today we’re happy to announce that we are shipping Angular 2.0.0-rc.7. This small release is focused on bugfixes. What's fixed? Lazy loading, RxJS, IDE Docs Integration...
+        href="http://angularjs.blogspot.com/2016/10/angular-210-now-available.html"
+        ) Angular 2.1.0 Now Available
+      p Angular version 2.1.0 - incremental-metamorphosis - is a minor release following our announced adoption of Semantic Versioning...
       .author
         img(src="/resources/images/bios/stephenfluin.jpg")
         .posted Posted by <b>Stephen Fluin</b>
 
+  .c6
+    .article-card
+      .date Oct 7, 2016
+      .title
+        a(
+        target="_blank"
+        href="http://angularjs.blogspot.com/2016/10/versioning-and-releasing-angular.html"
+        ) Versioning and Releasing Angular
+      p In order for the ecosystem around Angular to thrive, developers need stability from the Angular framework so that reusable components and libraries, tools and learned practices don’t go obsolete unexpectedly...
+      .author
+        img(src="/resources/images/bios/igor-minar.jpg")
+        .posted Posted by <b>Igor Minar</b>
+
 .grid-fluid.l-space-bottom-2.l-space-top-4
   .c12.text-center
     h3.text-headline.text-uppercase  Developer Community
@@ -38,56 +38,56 @@
 .grid-fluid
   .c6
     .article-card
-      .date Sept 14, 2016
+      .date Oct 13, 2016
       .title
         a(
         target="_blank"
-        href="http://blog.thoughtram.io/angular/2016/09/14/bypassing-providers-in-angular-2.html"
-        ) Bypassing Providers in Angular 2
-      p We covered a lot of different things everything dependency injection in Angular 2. However, at our latest training, one of our students came up with a very interesting question: "Can I bypass a provider...
+        href="http://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html"
+        ) Two-way Data Binding in Angular 2
+      p If there was one feature in Angular that made us go “Wow”, then it was probably its two-way data binding system. Changes in the application state have been automagically reflected into the view...
       .author
         img(src="/resources/images/bios/angular-gde-bio-placeholder.png")
         .posted Posted by <b>Pascal Precht</b>
 
   .c6
     .article-card
-      .date Sept 12, 2016
+      .date Oct 10, 2016
       .title
         a(
         target="_blank"
-        href="http://slides.com/wassimchegham/demystifying-ahead-of-time-compilation-in-angular-2-aot-jit#/"
-        ) Demystifying AoT compilation in Angular 2
-      p The introduction of NgModule was huge news for the Angular 2 community. This new API is supposed to help the AoT compilation by providing the compilation context and a much lighter application bundle...
+        href="http://www.creativebloq.com/how-to/build-a-material-design-app-with-angular-2"
+        ) Build a Material Design app with Angular 2
+      p This walkthrough reveals how to create a DialogComponent and to-do app with Angular Material and the Angular CLI...
       .author
-        img(src="/resources/images/bios/angular-gde-bio-placeholder.png")
-        .posted Posted by <b>Wassim Chegham</b>
+        img(src="/resources/images/bios/shield-bio-placeholder.png")
+        .posted Posted by <b>Daniel Zen</b>
 
 .grid-fluid
   .c6
     .article-card
-      .date Sept 12, 2016
+      .date Sept 26, 2016
       .title
         a(
         target="_blank"
-        href="https://medium.com/codingthesmartway-com-blog/using-material-design-in-angular-2-83a3128c58b7#.5z4pseikh"
-        ) Using Material Design in Angular 2
-      p Angular 2 Material Design Components are available as NPM packages. A full list of packages can be found at...
+        href="https://www.lucidchart.com/techblog/2016/09/26/improving-angular-2-load-times/"
+        ) Improving Angular 2 Load Times and a 29KB Hello World App
+      p At the beginning of this year, Lucidchart rebuilt its editor in Angular 2. The end result of these efforts is that our new editor loads five seconds faste....
       .author
         img(src="/resources/images/bios/shield-bio-placeholder.png")
-        .posted Posted by <b>Sebastian Eschweiler</b>
+        .posted Posted by <b>James Judd</b>
 
   .c6
     .article-card
-      .date Sept 11, 2016
+      .date Sept 18, 2016
       .title
         a(
         target="_blank"
-        href="https://johnpapa.net/introducing-angular-modules-routing-module/"
-        ) Introducing Angular Modules - Routing Module
-      p When we create an Angular 2 app, we define a root module. This root module is defined with @NgModule and works quite well for small apps....
+        href="https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294#.pbvt3c9zo"
+        ) The 4 Stages of Perf Tuning for your Angular2 App
+      p While being fast right out of the box, the performance of Angular apps can be further enhanced. Let’s look at each of these...
       .author
         img(src="/resources/images/bios/angular-gde-bio-placeholder.png")
-        .posted Posted by <b>John Papa</b>
+        .posted Posted by <b>Vinci Rufus</b>
 
 
 .grid-fluid.l-space-bottom-2.l-space-top-4
diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss
index 29efc6f508..787781547c 100644
--- a/public/resources/css/main.scss
+++ b/public/resources/css/main.scss
@@ -49,6 +49,7 @@
 @import 'module/card';
 @import 'module/hover-card';
 @import 'module/modal';
+@import 'module/search';
 @import 'module/shadow';
 @import 'module/showcase';
 @import 'module/statement';
diff --git a/public/resources/css/module/_badge.scss b/public/resources/css/module/_badge.scss
index 960c6fd724..fe5bd2b55c 100644
--- a/public/resources/css/module/_badge.scss
+++ b/public/resources/css/module/_badge.scss
@@ -45,7 +45,7 @@ $badges: (
   font-size: 11px;
   height: $unit * 3;
   line-height: ($unit * 3) - 2;
-  margin: ($unit + 4) 0;
+  margin: ($unit + 4) $unit ($unit + 4) 0;
   padding: 0 $unit;
   text-align: center;
   text-transform: uppercase;
diff --git a/public/resources/css/module/_banner.scss b/public/resources/css/module/_banner.scss
index 3fd0dd9932..f11a0a78af 100644
--- a/public/resources/css/module/_banner.scss
+++ b/public/resources/css/module/_banner.scss
@@ -11,7 +11,7 @@
   font-size: 18px;
   font-weight: 200;
   padding: ($unit * 4) ($unit * 6);
-  height: 97px;
+  min-height: 97px;
 
   include respond-to('mobile') {
     padding: ($unit * 2);
@@ -30,4 +30,4 @@
     line-height: 32px;
     margin: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/public/resources/css/module/_search.scss b/public/resources/css/module/_search.scss
new file mode 100644
index 0000000000..57655f242d
--- /dev/null
+++ b/public/resources/css/module/_search.scss
@@ -0,0 +1,47 @@
+/*
+* Search Module
+*
+* Module for search input and results
+*
+*/
+
+
+/*
+* Variables
+*/
+
+$unit: 8px !default;
+$search-field: '.search-field';
+$search-results: '.search-results';
+$search-height: 104px;
+$search-width: 752px;
+
+
+/*
+* Class
+*/
+
+#{$search-results} {
+
+  #{$search-field} {
+    background: $white;
+    border: 1px solid $blue-grey-100;
+    border-radius: 2px;
+    box-sizing: border-box;
+    color: $blue-grey-500;
+    font-size: 16px;
+    height: $unit * 5;
+    margin-bottom: $unit * 4;
+    padding: 0 $unit;
+    width: 100%;
+
+    &:active,
+    &:focus {
+      background: rgba($amber-50, .24);
+      border: 1px solid $blue-500;
+      color: $blue-500;
+    }
+  }
+
+
+}
\ No newline at end of file
diff --git a/public/resources/css/module/_side-nav.scss b/public/resources/css/module/_side-nav.scss
index d5356a1efd..bae88d3745 100644
--- a/public/resources/css/module/_side-nav.scss
+++ b/public/resources/css/module/_side-nav.scss
@@ -80,6 +80,7 @@ $sidenav-width: 240px;
   }
 
   input {
+    background: $white;
     border: none;
     border-radius: 200px;
     box-sizing: border-box;
diff --git a/public/resources/css/module/_symbol.scss b/public/resources/css/module/_symbol.scss
index e0cf61cc0f..9940883424 100644
--- a/public/resources/css/module/_symbol.scss
+++ b/public/resources/css/module/_symbol.scss
@@ -51,7 +51,7 @@ $api-symbols: (
   ),
   type-alias: (
     content: 'T',
-    background: $blue-grey-50
+    background: $light-green-600
   )
 );
 
diff --git a/public/resources/css/vendor/dartdoc/bootstrap.css b/public/resources/css/vendor/dartdoc/bootstrap.css
new file mode 100755
index 0000000000..c5c93029f1
--- /dev/null
+++ b/public/resources/css/vendor/dartdoc/bootstrap.css
@@ -0,0 +1,1017 @@
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/*!
+ * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=2562a07bd43503c5d2ca2125d913d5b4)
+ * Config saved to config.json and https://gist.github.com/2562a07bd43503c5d2ca2125d913d5b4
+ */
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+[hidden],
+template {
+  display: none;
+}
+a {
+  background-color: transparent;
+}
+a:active,
+a:hover {
+  outline: 0;
+}
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+b,
+strong {
+  font-weight: bold;
+}
+dfn {
+  font-style: italic;
+}
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+mark {
+  background: #ff0;
+  color: #000;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+img {
+  border: 0;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+figure {
+  margin: 1em 40px;
+}
+hr {
+  -webkit-box-sizing: content-box;
+     -moz-box-sizing: content-box;
+          box-sizing: content-box;
+  height: 0;
+}
+pre {
+  overflow: auto;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+button {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+input {
+  line-height: normal;
+}
+input[type="checkbox"],
+input[type="radio"] {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -webkit-box-sizing: content-box;
+     -moz-box-sizing: content-box;
+          box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+legend {
+  border: 0;
+  padding: 0;
+}
+textarea {
+  overflow: auto;
+}
+optgroup {
+  font-weight: bold;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+td,
+th {
+  padding: 0;
+}
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+html {
+  font-size: 10px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #333333;
+  background-color: #ffffff;
+}
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+a {
+  color: #337ab7;
+  text-decoration: none;
+}
+a:hover,
+a:focus {
+  color: #23527c;
+  text-decoration: underline;
+}
+a:focus {
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+figure {
+  margin: 0;
+}
+img {
+  vertical-align: middle;
+}
+.img-responsive {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+.img-rounded {
+  border-radius: 6px;
+}
+.img-thumbnail {
+  padding: 4px;
+  line-height: 1.42857143;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+  -webkit-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  display: inline-block;
+  max-width: 100%;
+  height: auto;
+}
+.img-circle {
+  border-radius: 50%;
+}
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eeeeee;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+}
+[role="button"] {
+  cursor: pointer;
+}
+.container {
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+@media (min-width: 768px) {
+  .container {
+    width: 750px;
+  }
+}
+@media (min-width: 992px) {
+  .container {
+    width: 970px;
+  }
+}
+@media (min-width: 1200px) {
+  .container {
+    width: 1170px;
+  }
+}
+.container-fluid {
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.row {
+  margin-left: -15px;
+  margin-right: -15px;
+}
+.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
+  position: relative;
+  min-height: 1px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
+  float: left;
+}
+.col-xs-12 {
+  width: 100%;
+}
+.col-xs-11 {
+  width: 91.66666667%;
+}
+.col-xs-10 {
+  width: 83.33333333%;
+}
+.col-xs-9 {
+  width: 75%;
+}
+.col-xs-8 {
+  width: 66.66666667%;
+}
+.col-xs-7 {
+  width: 58.33333333%;
+}
+.col-xs-6 {
+  width: 50%;
+}
+.col-xs-5 {
+  width: 41.66666667%;
+}
+.col-xs-4 {
+  width: 33.33333333%;
+}
+.col-xs-3 {
+  width: 25%;
+}
+.col-xs-2 {
+  width: 16.66666667%;
+}
+.col-xs-1 {
+  width: 8.33333333%;
+}
+.col-xs-pull-12 {
+  right: 100%;
+}
+.col-xs-pull-11 {
+  right: 91.66666667%;
+}
+.col-xs-pull-10 {
+  right: 83.33333333%;
+}
+.col-xs-pull-9 {
+  right: 75%;
+}
+.col-xs-pull-8 {
+  right: 66.66666667%;
+}
+.col-xs-pull-7 {
+  right: 58.33333333%;
+}
+.col-xs-pull-6 {
+  right: 50%;
+}
+.col-xs-pull-5 {
+  right: 41.66666667%;
+}
+.col-xs-pull-4 {
+  right: 33.33333333%;
+}
+.col-xs-pull-3 {
+  right: 25%;
+}
+.col-xs-pull-2 {
+  right: 16.66666667%;
+}
+.col-xs-pull-1 {
+  right: 8.33333333%;
+}
+.col-xs-pull-0 {
+  right: auto;
+}
+.col-xs-push-12 {
+  left: 100%;
+}
+.col-xs-push-11 {
+  left: 91.66666667%;
+}
+.col-xs-push-10 {
+  left: 83.33333333%;
+}
+.col-xs-push-9 {
+  left: 75%;
+}
+.col-xs-push-8 {
+  left: 66.66666667%;
+}
+.col-xs-push-7 {
+  left: 58.33333333%;
+}
+.col-xs-push-6 {
+  left: 50%;
+}
+.col-xs-push-5 {
+  left: 41.66666667%;
+}
+.col-xs-push-4 {
+  left: 33.33333333%;
+}
+.col-xs-push-3 {
+  left: 25%;
+}
+.col-xs-push-2 {
+  left: 16.66666667%;
+}
+.col-xs-push-1 {
+  left: 8.33333333%;
+}
+.col-xs-push-0 {
+  left: auto;
+}
+.col-xs-offset-12 {
+  margin-left: 100%;
+}
+.col-xs-offset-11 {
+  margin-left: 91.66666667%;
+}
+.col-xs-offset-10 {
+  margin-left: 83.33333333%;
+}
+.col-xs-offset-9 {
+  margin-left: 75%;
+}
+.col-xs-offset-8 {
+  margin-left: 66.66666667%;
+}
+.col-xs-offset-7 {
+  margin-left: 58.33333333%;
+}
+.col-xs-offset-6 {
+  margin-left: 50%;
+}
+.col-xs-offset-5 {
+  margin-left: 41.66666667%;
+}
+.col-xs-offset-4 {
+  margin-left: 33.33333333%;
+}
+.col-xs-offset-3 {
+  margin-left: 25%;
+}
+.col-xs-offset-2 {
+  margin-left: 16.66666667%;
+}
+.col-xs-offset-1 {
+  margin-left: 8.33333333%;
+}
+.col-xs-offset-0 {
+  margin-left: 0%;
+}
+@media (min-width: 768px) {
+  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
+    float: left;
+  }
+  .col-sm-12 {
+    width: 100%;
+  }
+  .col-sm-11 {
+    width: 91.66666667%;
+  }
+  .col-sm-10 {
+    width: 83.33333333%;
+  }
+  .col-sm-9 {
+    width: 75%;
+  }
+  .col-sm-8 {
+    width: 66.66666667%;
+  }
+  .col-sm-7 {
+    width: 58.33333333%;
+  }
+  .col-sm-6 {
+    width: 50%;
+  }
+  .col-sm-5 {
+    width: 41.66666667%;
+  }
+  .col-sm-4 {
+    width: 33.33333333%;
+  }
+  .col-sm-3 {
+    width: 25%;
+  }
+  .col-sm-2 {
+    width: 16.66666667%;
+  }
+  .col-sm-1 {
+    width: 8.33333333%;
+  }
+  .col-sm-pull-12 {
+    right: 100%;
+  }
+  .col-sm-pull-11 {
+    right: 91.66666667%;
+  }
+  .col-sm-pull-10 {
+    right: 83.33333333%;
+  }
+  .col-sm-pull-9 {
+    right: 75%;
+  }
+  .col-sm-pull-8 {
+    right: 66.66666667%;
+  }
+  .col-sm-pull-7 {
+    right: 58.33333333%;
+  }
+  .col-sm-pull-6 {
+    right: 50%;
+  }
+  .col-sm-pull-5 {
+    right: 41.66666667%;
+  }
+  .col-sm-pull-4 {
+    right: 33.33333333%;
+  }
+  .col-sm-pull-3 {
+    right: 25%;
+  }
+  .col-sm-pull-2 {
+    right: 16.66666667%;
+  }
+  .col-sm-pull-1 {
+    right: 8.33333333%;
+  }
+  .col-sm-pull-0 {
+    right: auto;
+  }
+  .col-sm-push-12 {
+    left: 100%;
+  }
+  .col-sm-push-11 {
+    left: 91.66666667%;
+  }
+  .col-sm-push-10 {
+    left: 83.33333333%;
+  }
+  .col-sm-push-9 {
+    left: 75%;
+  }
+  .col-sm-push-8 {
+    left: 66.66666667%;
+  }
+  .col-sm-push-7 {
+    left: 58.33333333%;
+  }
+  .col-sm-push-6 {
+    left: 50%;
+  }
+  .col-sm-push-5 {
+    left: 41.66666667%;
+  }
+  .col-sm-push-4 {
+    left: 33.33333333%;
+  }
+  .col-sm-push-3 {
+    left: 25%;
+  }
+  .col-sm-push-2 {
+    left: 16.66666667%;
+  }
+  .col-sm-push-1 {
+    left: 8.33333333%;
+  }
+  .col-sm-push-0 {
+    left: auto;
+  }
+  .col-sm-offset-12 {
+    margin-left: 100%;
+  }
+  .col-sm-offset-11 {
+    margin-left: 91.66666667%;
+  }
+  .col-sm-offset-10 {
+    margin-left: 83.33333333%;
+  }
+  .col-sm-offset-9 {
+    margin-left: 75%;
+  }
+  .col-sm-offset-8 {
+    margin-left: 66.66666667%;
+  }
+  .col-sm-offset-7 {
+    margin-left: 58.33333333%;
+  }
+  .col-sm-offset-6 {
+    margin-left: 50%;
+  }
+  .col-sm-offset-5 {
+    margin-left: 41.66666667%;
+  }
+  .col-sm-offset-4 {
+    margin-left: 33.33333333%;
+  }
+  .col-sm-offset-3 {
+    margin-left: 25%;
+  }
+  .col-sm-offset-2 {
+    margin-left: 16.66666667%;
+  }
+  .col-sm-offset-1 {
+    margin-left: 8.33333333%;
+  }
+  .col-sm-offset-0 {
+    margin-left: 0%;
+  }
+}
+@media (min-width: 992px) {
+  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+    float: left;
+  }
+  .col-md-12 {
+    width: 100%;
+  }
+  .col-md-11 {
+    width: 91.66666667%;
+  }
+  .col-md-10 {
+    width: 83.33333333%;
+  }
+  .col-md-9 {
+    width: 75%;
+  }
+  .col-md-8 {
+    width: 66.66666667%;
+  }
+  .col-md-7 {
+    width: 58.33333333%;
+  }
+  .col-md-6 {
+    width: 50%;
+  }
+  .col-md-5 {
+    width: 41.66666667%;
+  }
+  .col-md-4 {
+    width: 33.33333333%;
+  }
+  .col-md-3 {
+    width: 25%;
+  }
+  .col-md-2 {
+    width: 16.66666667%;
+  }
+  .col-md-1 {
+    width: 8.33333333%;
+  }
+  .col-md-pull-12 {
+    right: 100%;
+  }
+  .col-md-pull-11 {
+    right: 91.66666667%;
+  }
+  .col-md-pull-10 {
+    right: 83.33333333%;
+  }
+  .col-md-pull-9 {
+    right: 75%;
+  }
+  .col-md-pull-8 {
+    right: 66.66666667%;
+  }
+  .col-md-pull-7 {
+    right: 58.33333333%;
+  }
+  .col-md-pull-6 {
+    right: 50%;
+  }
+  .col-md-pull-5 {
+    right: 41.66666667%;
+  }
+  .col-md-pull-4 {
+    right: 33.33333333%;
+  }
+  .col-md-pull-3 {
+    right: 25%;
+  }
+  .col-md-pull-2 {
+    right: 16.66666667%;
+  }
+  .col-md-pull-1 {
+    right: 8.33333333%;
+  }
+  .col-md-pull-0 {
+    right: auto;
+  }
+  .col-md-push-12 {
+    left: 100%;
+  }
+  .col-md-push-11 {
+    left: 91.66666667%;
+  }
+  .col-md-push-10 {
+    left: 83.33333333%;
+  }
+  .col-md-push-9 {
+    left: 75%;
+  }
+  .col-md-push-8 {
+    left: 66.66666667%;
+  }
+  .col-md-push-7 {
+    left: 58.33333333%;
+  }
+  .col-md-push-6 {
+    left: 50%;
+  }
+  .col-md-push-5 {
+    left: 41.66666667%;
+  }
+  .col-md-push-4 {
+    left: 33.33333333%;
+  }
+  .col-md-push-3 {
+    left: 25%;
+  }
+  .col-md-push-2 {
+    left: 16.66666667%;
+  }
+  .col-md-push-1 {
+    left: 8.33333333%;
+  }
+  .col-md-push-0 {
+    left: auto;
+  }
+  .col-md-offset-12 {
+    margin-left: 100%;
+  }
+  .col-md-offset-11 {
+    margin-left: 91.66666667%;
+  }
+  .col-md-offset-10 {
+    margin-left: 83.33333333%;
+  }
+  .col-md-offset-9 {
+    margin-left: 75%;
+  }
+  .col-md-offset-8 {
+    margin-left: 66.66666667%;
+  }
+  .col-md-offset-7 {
+    margin-left: 58.33333333%;
+  }
+  .col-md-offset-6 {
+    margin-left: 50%;
+  }
+  .col-md-offset-5 {
+    margin-left: 41.66666667%;
+  }
+  .col-md-offset-4 {
+    margin-left: 33.33333333%;
+  }
+  .col-md-offset-3 {
+    margin-left: 25%;
+  }
+  .col-md-offset-2 {
+    margin-left: 16.66666667%;
+  }
+  .col-md-offset-1 {
+    margin-left: 8.33333333%;
+  }
+  .col-md-offset-0 {
+    margin-left: 0%;
+  }
+}
+@media (min-width: 1200px) {
+  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
+    float: left;
+  }
+  .col-lg-12 {
+    width: 100%;
+  }
+  .col-lg-11 {
+    width: 91.66666667%;
+  }
+  .col-lg-10 {
+    width: 83.33333333%;
+  }
+  .col-lg-9 {
+    width: 75%;
+  }
+  .col-lg-8 {
+    width: 66.66666667%;
+  }
+  .col-lg-7 {
+    width: 58.33333333%;
+  }
+  .col-lg-6 {
+    width: 50%;
+  }
+  .col-lg-5 {
+    width: 41.66666667%;
+  }
+  .col-lg-4 {
+    width: 33.33333333%;
+  }
+  .col-lg-3 {
+    width: 25%;
+  }
+  .col-lg-2 {
+    width: 16.66666667%;
+  }
+  .col-lg-1 {
+    width: 8.33333333%;
+  }
+  .col-lg-pull-12 {
+    right: 100%;
+  }
+  .col-lg-pull-11 {
+    right: 91.66666667%;
+  }
+  .col-lg-pull-10 {
+    right: 83.33333333%;
+  }
+  .col-lg-pull-9 {
+    right: 75%;
+  }
+  .col-lg-pull-8 {
+    right: 66.66666667%;
+  }
+  .col-lg-pull-7 {
+    right: 58.33333333%;
+  }
+  .col-lg-pull-6 {
+    right: 50%;
+  }
+  .col-lg-pull-5 {
+    right: 41.66666667%;
+  }
+  .col-lg-pull-4 {
+    right: 33.33333333%;
+  }
+  .col-lg-pull-3 {
+    right: 25%;
+  }
+  .col-lg-pull-2 {
+    right: 16.66666667%;
+  }
+  .col-lg-pull-1 {
+    right: 8.33333333%;
+  }
+  .col-lg-pull-0 {
+    right: auto;
+  }
+  .col-lg-push-12 {
+    left: 100%;
+  }
+  .col-lg-push-11 {
+    left: 91.66666667%;
+  }
+  .col-lg-push-10 {
+    left: 83.33333333%;
+  }
+  .col-lg-push-9 {
+    left: 75%;
+  }
+  .col-lg-push-8 {
+    left: 66.66666667%;
+  }
+  .col-lg-push-7 {
+    left: 58.33333333%;
+  }
+  .col-lg-push-6 {
+    left: 50%;
+  }
+  .col-lg-push-5 {
+    left: 41.66666667%;
+  }
+  .col-lg-push-4 {
+    left: 33.33333333%;
+  }
+  .col-lg-push-3 {
+    left: 25%;
+  }
+  .col-lg-push-2 {
+    left: 16.66666667%;
+  }
+  .col-lg-push-1 {
+    left: 8.33333333%;
+  }
+  .col-lg-push-0 {
+    left: auto;
+  }
+  .col-lg-offset-12 {
+    margin-left: 100%;
+  }
+  .col-lg-offset-11 {
+    margin-left: 91.66666667%;
+  }
+  .col-lg-offset-10 {
+    margin-left: 83.33333333%;
+  }
+  .col-lg-offset-9 {
+    margin-left: 75%;
+  }
+  .col-lg-offset-8 {
+    margin-left: 66.66666667%;
+  }
+  .col-lg-offset-7 {
+    margin-left: 58.33333333%;
+  }
+  .col-lg-offset-6 {
+    margin-left: 50%;
+  }
+  .col-lg-offset-5 {
+    margin-left: 41.66666667%;
+  }
+  .col-lg-offset-4 {
+    margin-left: 33.33333333%;
+  }
+  .col-lg-offset-3 {
+    margin-left: 25%;
+  }
+  .col-lg-offset-2 {
+    margin-left: 16.66666667%;
+  }
+  .col-lg-offset-1 {
+    margin-left: 8.33333333%;
+  }
+  .col-lg-offset-0 {
+    margin-left: 0%;
+  }
+}
+.clearfix:before,
+.clearfix:after,
+.container:before,
+.container:after,
+.container-fluid:before,
+.container-fluid:after,
+.row:before,
+.row:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after,
+.container:after,
+.container-fluid:after,
+.row:after {
+  clear: both;
+}
+.center-block {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.pull-right {
+  float: right !important;
+}
+.pull-left {
+  float: left !important;
+}
+.hide {
+  display: none !important;
+}
+.show {
+  display: block !important;
+}
+.invisible {
+  visibility: hidden;
+}
+.text-hide {
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+.hidden {
+  display: none !important;
+}
+.affix {
+  position: fixed;
+}
diff --git a/public/resources/css/vendor/dartdoc/bootstrap.min.css b/public/resources/css/vendor/dartdoc/bootstrap.min.css
new file mode 100755
index 0000000000..cb0b23127d
--- /dev/null
+++ b/public/resources/css/vendor/dartdoc/bootstrap.min.css
@@ -0,0 +1,14 @@
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/*!
+ * Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=2562a07bd43503c5d2ca2125d913d5b4)
+ * Config saved to config.json and https://gist.github.com/2562a07bd43503c5d2ca2125d913d5b4
+ *//*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:hover,a:focus{color:#23527c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role="button"]{cursor:pointer}.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}.row{margin-left:-15px;margin-right:-15px}.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{position:relative;min-height:1px;padding-left:15px;padding-right:15px}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}.col-xs-offset-12{margin-left:100%}.col-xs-offset-11{margin-left:91.66666667%}.col-xs-offset-10{margin-left:83.33333333%}.col-xs-offset-9{margin-left:75%}.col-xs-offset-8{margin-left:66.66666667%}.col-xs-offset-7{margin-left:58.33333333%}.col-xs-offset-6{margin-left:50%}.col-xs-offset-5{margin-left:41.66666667%}.col-xs-offset-4{margin-left:33.33333333%}.col-xs-offset-3{margin-left:25%}.col-xs-offset-2{margin-left:16.66666667%}.col-xs-offset-1{margin-left:8.33333333%}.col-xs-offset-0{margin-left:0}@media (min-width:768px){.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}.col-sm-offset-12{margin-left:100%}.col-sm-offset-11{margin-left:91.66666667%}.col-sm-offset-10{margin-left:83.33333333%}.col-sm-offset-9{margin-left:75%}.col-sm-offset-8{margin-left:66.66666667%}.col-sm-offset-7{margin-left:58.33333333%}.col-sm-offset-6{margin-left:50%}.col-sm-offset-5{margin-left:41.66666667%}.col-sm-offset-4{margin-left:33.33333333%}.col-sm-offset-3{margin-left:25%}.col-sm-offset-2{margin-left:16.66666667%}.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-0{margin-left:0}}@media (min-width:992px){.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}.col-md-offset-12{margin-left:100%}.col-md-offset-11{margin-left:91.66666667%}.col-md-offset-10{margin-left:83.33333333%}.col-md-offset-9{margin-left:75%}.col-md-offset-8{margin-left:66.66666667%}.col-md-offset-7{margin-left:58.33333333%}.col-md-offset-6{margin-left:50%}.col-md-offset-5{margin-left:41.66666667%}.col-md-offset-4{margin-left:33.33333333%}.col-md-offset-3{margin-left:25%}.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-1{margin-left:8.33333333%}.col-md-offset-0{margin-left:0}}@media (min-width:1200px){.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.col-lg-pull-12{right:100%}.col-lg-pull-11{right:91.66666667%}.col-lg-pull-10{right:83.33333333%}.col-lg-pull-9{right:75%}.col-lg-pull-8{right:66.66666667%}.col-lg-pull-7{right:58.33333333%}.col-lg-pull-6{right:50%}.col-lg-pull-5{right:41.66666667%}.col-lg-pull-4{right:33.33333333%}.col-lg-pull-3{right:25%}.col-lg-pull-2{right:16.66666667%}.col-lg-pull-1{right:8.33333333%}.col-lg-pull-0{right:auto}.col-lg-push-12{left:100%}.col-lg-push-11{left:91.66666667%}.col-lg-push-10{left:83.33333333%}.col-lg-push-9{left:75%}.col-lg-push-8{left:66.66666667%}.col-lg-push-7{left:58.33333333%}.col-lg-push-6{left:50%}.col-lg-push-5{left:41.66666667%}.col-lg-push-4{left:33.33333333%}.col-lg-push-3{left:25%}.col-lg-push-2{left:16.66666667%}.col-lg-push-1{left:8.33333333%}.col-lg-push-0{left:auto}.col-lg-offset-12{margin-left:100%}.col-lg-offset-11{margin-left:91.66666667%}.col-lg-offset-10{margin-left:83.33333333%}.col-lg-offset-9{margin-left:75%}.col-lg-offset-8{margin-left:66.66666667%}.col-lg-offset-7{margin-left:58.33333333%}.col-lg-offset-6{margin-left:50%}.col-lg-offset-5{margin-left:41.66666667%}.col-lg-offset-4{margin-left:33.33333333%}.col-lg-offset-3{margin-left:25%}.col-lg-offset-2{margin-left:16.66666667%}.col-lg-offset-1{margin-left:8.33333333%}.col-lg-offset-0{margin-left:0}}.clearfix:before,.clearfix:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after{content:" ";display:table}.clearfix:after,.container:after,.container-fluid:after,.row:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important}.affix{position:fixed}
\ No newline at end of file
diff --git a/public/resources/css/vendor/dartdoc/styles.css b/public/resources/css/vendor/dartdoc/styles.css
new file mode 100644
index 0000000000..903e50da49
--- /dev/null
+++ b/public/resources/css/vendor/dartdoc/styles.css
@@ -0,0 +1,757 @@
+/* This is a copy of the dartdoc static-assets/styles.css as of 2016/10/03 but with footer styles disabled. */
+
+/* Palette generated by Material Palette - materialpalette.com/blue/cyan */
+
+.dark-primary-color    { background: #1976D2; }
+.default-primary-color { background: #2196F3; }
+.light-primary-color   { background: #BBDEFB; }
+.text-primary-color    { color: #FFFFFF; }
+.accent-color          { background: #00BCD4; }
+.primary-text-color    { color: #212121; }
+.secondary-text-color  { color: #727272; }
+.divider-color         { border-color: #B6B6B6; }
+
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  font-size: 15px;
+  margin-bottom: 60px;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
+  overflow-x: hidden;
+  color: #212121;
+}
+
+nav {
+  font-size: 17px;
+}
+
+/* some of this is to reset bootstrap */
+nav.navbar {
+  background-color: inherit;
+  min-height: 48px;
+  border: 0;
+}
+
+nav.navbar .row {
+  padding-top: 8px;
+}
+
+nav .container {
+  white-space: nowrap;
+}
+
+@media screen and (min-width: 500px) and (max-width: 768px) {
+  .navbar-right {
+      float: right!important;
+  }
+}
+
+header {
+  background-color: rgb(0, 102, 152);
+  color: white;
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+}
+
+header.header-fixed nav.navbar-fixed-top {
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+}
+
+header.container-fluid {
+  padding: 0;
+}
+
+header .masthead {
+  padding-top: 64px;
+}
+
+header .contents {
+  padding: 0;
+}
+
+@media screen and (max-width:768px) {
+  header .contents {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
+
+.body {
+  margin-top: 24px;
+}
+
+section {
+  margin-bottom: 36px;
+}
+
+dl {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+  margin: 0;
+}
+
+h1.title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+h2 {
+  font-size: 24px;
+}
+
+h5 {
+  font-size: 16px;
+}
+
+strong {
+  font-weight: 500;
+}
+
+.subtitle {
+  font-size: 17px;
+  min-height: 1.4em;
+}
+
+.title-description .subtitle {
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+p {
+  margin-bottom: 1em;
+}
+
+a, a:hover {
+  color: rgb(0, 102, 152);
+}
+
+pre.prettyprint {
+  font-family: 'Source Code Pro', monospace;
+  color: black;
+  border-radius: 4px;
+  font-size: 14px;
+  word-wrap: normal;
+  line-height: 1.4;
+  background: #f7f7f7;
+  border: 1px solid #ddd;
+  margin: 16px 0 16px 0;
+  padding: 8px;
+}
+
+pre code {
+  white-space: pre;
+  word-wrap: initial;
+}
+
+.fixed {
+  white-space: pre;
+}
+
+pre {
+  border: 1px solid #ddd;
+  background-color: #f7f7f7;
+  font-size: 14px;
+}
+
+code {
+  font-family: 'Source Code Pro', monospace;
+  /* overriding bootstrap */
+  color: inherit;
+  background-color: #f7f7f7;
+}
+
+h2 .crossdart {
+  float: right;
+  font-size: 0.5em;
+  margin-top: 1em;
+}
+
+.crossdart-link {
+  border-bottom: 1px solid #dfdfdf;
+  text-decoration: none;
+}
+
+.crossdart-link:hover {
+  border-bottom: 1px solid #aaa;
+  text-decoration: none;
+}
+
+@media(max-width: 768px) {
+  nav .container {
+    width: 100%
+  }
+
+  h1 {
+    font-size: 24px;
+  }
+
+  pre {
+    margin: 16px 0;
+  }
+}
+
+@media (min-width: 768px) {
+  .dl-horizontal dd {
+    margin-left: 128px;
+  }
+
+  .dl-horizontal dt {
+    width: 128px;
+  }
+
+  ul.subnav li {
+    font-size: 17px;
+  }
+}
+
+header h1 {
+  font-weight: 400;
+  margin-bottom: 16px;
+}
+
+header a,
+header a:hover,
+header p,
+header li {
+  color: white;
+}
+
+header h1 .kind {
+  color: #ddd;
+  text-transform: uppercase;
+  font-size: 15px;
+  display: block;
+}
+
+@media screen and (max-width: 768px) {
+  header h1 .kind {
+    font-size: 14px;
+  }
+}
+
+dt {
+  font-weight: normal;
+}
+
+dd {
+  color: #212121;
+  margin-bottom: 1em;
+}
+
+dd.callable, dd.constant, dd.property {
+  margin-bottom: 24px;
+}
+
+dd p {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 0;
+}
+
+section.summary h2 {
+  color: #727272;
+  margin-bottom: 16px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid #ddd;
+}
+
+/* indents wrapped lines */
+section.summary dt {
+  margin-left: 24px;
+  text-indent: -24px;
+}
+
+dl.dl-horizontal dt {
+  font-style: normal;
+  text-align: left;
+  color: #727272;
+}
+
+dl.dl-horizontal dt::after {
+  content: ':';
+}
+
+dt .name {
+  font-weight: 500;
+}
+
+dl dt.callable .name {
+  float: none;
+  width: auto;
+}
+
+.parameter {
+  white-space: nowrap;
+}
+
+.signature {
+  color: #727272;
+}
+
+.signature a {
+  /* 50% mix of default-primary-color and primary-text-color. */
+  color: #4674a2;
+}
+
+.optional {
+  font-style: italic;
+}
+
+.undocumented {
+  font-style: italic;
+}
+
+.is-const {
+  font-style: italic;
+}
+
+.deprecated {
+  text-decoration: line-through;
+}
+
+p.firstline {
+  font-weight: bold;
+}
+
+footer-disabled-for-ng2io {
+  padding: 20px;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 60px;
+}
+
+footer-disabled-for-ng2io p {
+  margin: 0;
+  color: #555;
+}
+
+footer-disabled-for-ng2io .no-break {
+  white-space: nowrap;
+}
+
+footer-disabled-for-ng2io .container,
+footer-disabled-for-ng2io .container-fluid {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.copyright a {
+  color: #555;
+}
+
+.markdown h1 {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.markdown h2 {
+  font-size: 20px;
+  margin-top: 24px;
+  margin-bottom: 8px;
+}
+
+.markdown h3 {
+  font-size: 18px;
+  margin-bottom: 8px;
+}
+
+.markdown h4 {
+  font-size: 16px;
+  margin-bottom: 0;
+}
+
+.markdown li p {
+  margin: 0;
+}
+
+.gt-separated {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.gt-separated li {
+  display: inline-block;
+}
+
+.gt-separated li:before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='#DDDDDD' d='M6.7,4L5.7,4.9L8.8,8l-3.1,3.1L6.7,12l4-4L6.7,4z'/></svg>");
+  background-position: center;
+  content: "\00a0";
+  margin: 0 6px 0 4px;
+}
+
+.gt-separated.dark li:before {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='#727272' d='M6.7,4L5.7,4.9L8.8,8l-3.1,3.1L6.7,12l4-4L6.7,4z'/></svg>");
+}
+
+.gt-separated li:first-child:before {
+  background-image: none;
+  content: "";
+  margin: 0;
+}
+
+/* The slug line under a declaration for things like "const", "read-only", etc. */
+.features {
+  font-style: italic;
+  color: #727272;
+}
+
+.multi-line-signature {
+  font-size: 17px;
+  color: #727272;
+}
+
+.multi-line-signature .parameter {
+  margin-left: 24px;
+  display: block;
+}
+
+.breadcrumbs {
+  padding: 0;
+  margin: 8px 0 8px 0;
+  font-size: 17px;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+@media screen and (min-width: 768px) {
+  nav ol.breadcrumbs {
+    float: left;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .breadcrumbs {
+    margin: 0 0 24px 0;
+    overflow-x: hidden;
+  }
+}
+
+.self-crumb {
+  color: #ddd;
+}
+
+nav .self-name {
+  color: #ddd;
+  display: none;
+}
+
+.annotation-list {
+  list-style: none;
+  padding: 0;
+  display: inline;
+}
+
+.annotation-list li:before {
+  content: "@";
+}
+
+.comma-separated {
+  list-style: none;
+  padding: 0;
+  display: inline;
+}
+
+.comma-separated li {
+  display: inline;
+}
+
+.comma-separated li:after {
+  content: ", ";
+}
+
+.comma-separated li:last-child:after {
+  content: "";
+}
+
+.end-with-period li:last-child:after {
+  content: ".";
+}
+
+.container > section:first-child {
+  border: 0;
+}
+
+.constructor-modifier {
+  font-style: italic;
+}
+
+section.multi-line-signature div.parameters {
+  margin-left: 24px;
+}
+
+/* subnav styles */
+
+ul.subnav {
+  overflow: auto;
+  white-space: nowrap;
+  padding-left: 0;
+  min-height: 25px;
+}
+
+ul.subnav::-webkit-scrollbar {
+  display: none;
+}
+
+ul.subnav li {
+  display: inline-block;
+  text-transform: uppercase;
+}
+
+ul.subnav li a {
+  color: #FFFFFF;
+}
+
+ul.subnav li {
+  margin-right: 24px;
+}
+
+ul.subnav li:last-of-type {
+  margin-right: 0;
+}
+
+@media(max-width: 768px) {
+  ul.subnav li {
+    margin-right: 16px;
+  }
+}
+
+/* sidebar styles */
+
+.sidebar-offcanvas-left {
+  background-color: #f7f7f7;
+  padding: 0;
+}
+
+.sidebar ol {
+  list-style: none;
+  font-size: 14px;
+  line-height: 24px;
+  margin-bottom: 0;
+  padding: 0;
+}
+
+.sidebar-offcanvas-left ol {
+  padding: 16px;
+}
+
+.sidebar h5,
+.sidebar ol li {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.sidebar ol li.section-title a {
+  color: inherit;
+}
+
+.sidebar ol li.section-title {
+  font-size: 13px;
+  color: #B6B6B6;
+  text-transform: uppercase;
+  line-height: 20px;
+  margin-top: 24px;
+}
+
+.sidebar ol li:first-child {
+  padding-top: 0;
+  margin-top: 0;
+}
+
+button {
+  padding: 0;
+}
+
+#sidenav-left-toggle {
+  display: none;
+  vertical-align: text-bottom;
+  padding: 0;
+}
+
+/* left-nav disappears, and can transition in from the left */
+@media screen and (max-width:768px) {
+  #sidenav-left-toggle {
+    display: inline;
+    background: no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='#FFFFFF' d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/></svg>");
+    background-position: center;
+    width: 24px;
+    height: 24px;
+    border: none;
+    margin-right: 24px;
+  }
+
+  #overlay-under-drawer.active {
+    opacity: 0.4;
+    height: 100%;
+    z-index: 1999;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background-color: black;
+    display: block;
+  }
+
+  .sidebar-offcanvas-left {
+    left:-100%;
+    position:fixed;
+    -webkit-transition:all .25s ease-out;
+    -o-transition:all .25s ease-out;
+    transition:all .25s ease-out;
+    z-index: 2000;
+    top:0;
+    width: 280px; /* works all the way down to an iphone 4 */
+    height: 100%;
+    background-color: white;
+    overflow-y: auto; /* TODO: how to hide scroll bars? */
+  }
+
+  .sidebar-offcanvas-left.active {
+    left:0; /* this animates our drawer into the page */
+  }
+}
+
+.sidebar h5 {
+  color: #727272;
+  padding-bottom: 16px;
+}
+
+.sidebar-offcanvas-left h5 {
+  border-bottom: 1px solid #ddd;
+  padding: 16px;
+}
+
+.sidebar-offcanvas-left h5:last-of-type {
+  border: 0;
+  padding: 16px 16px 0 16px;
+}
+
+/* the right nav disappears out of view when the window shrinks */
+@media screen and (max-width: 992px) {
+  .sidebar-offcanvas-right{
+     display: none;
+   }
+}
+
+#overlay-under-drawer {
+  display: none;
+}
+
+/* find-as-you-type search box */
+
+/* override bootstrap defaults */
+.form-control {
+  border-radius: 0;
+  border: 0;
+}
+
+form.search {
+  display: inline;
+}
+
+@media screen and (max-width: 500px) {
+  form.search {
+    display: none;
+  }
+}
+
+.typeahead,
+.tt-query,
+.tt-hint {
+  width: 200px;
+  height: 30px;
+  padding: 8px 12px;
+  line-height: 30px;
+  outline: none;
+}
+
+.typeahead {
+  background-color: #fff;
+  border-radius: 2px;
+}
+
+.tt-query {
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.tt-hint {
+  color: #999
+}
+
+.tt-menu {
+  right:0;
+  left: inherit !important;
+  width: 422px;
+  max-height: 250px;
+  overflow-y: auto;
+  font-size: 14px;
+  margin: 0;
+  padding: 8px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+          box-shadow: 0 5px 10px rgba(0,0,0,.2);
+}
+
+.tt-suggestion {
+  padding: 3px 20px;
+  color: #212121;
+}
+
+.tt-suggestion:hover {
+  cursor: pointer;
+  color: #fff;
+  background-color: #0097cf;
+}
+
+.tt-suggestion:hover .search-from-lib {
+  color: #ddd;
+}
+
+.tt-suggestion.tt-cursor {
+  color: #fff;
+  background-color: #0097cf;
+}
+
+.tt-suggestion.tt-cursor .search-from-lib {
+  color: #ddd;
+}
+
+.tt-suggestion p {
+  margin: 0;
+}
+
+.search-from-lib {
+  font-style: italic;
+  color: gray;
+}
+
+section#setter {
+  border-top: 1px solid #ddd;
+  padding-top: 36px;
+}
+
+li.inherited a {
+  opacity: 0.65;
+  font-style: italic;
+}
diff --git a/public/resources/images/cookbooks/aot-compiler/toh6-bundle.png b/public/resources/images/cookbooks/aot-compiler/toh6-bundle.png
new file mode 100644
index 0000000000..8db47a35b2
Binary files /dev/null and b/public/resources/images/cookbooks/aot-compiler/toh6-bundle.png differ
diff --git a/public/resources/images/logos/anglebrackets/anglebrackets.png b/public/resources/images/logos/anglebrackets/anglebrackets.png
new file mode 100644
index 0000000000..637ad53eb0
Binary files /dev/null and b/public/resources/images/logos/anglebrackets/anglebrackets.png differ
diff --git a/public/resources/js/directives/announcement-bar.js b/public/resources/js/directives/announcement-bar.js
index 11b39fe8b4..b3232cd245 100644
--- a/public/resources/js/directives/announcement-bar.js
+++ b/public/resources/js/directives/announcement-bar.js
@@ -15,16 +15,18 @@ angularIO.directive('announcementBar', ['$interval', function($interval) {
     replace: true,
     template:
       '<div class="announcement-bar">' +
+        '<em>{{scope.slides.length}}</em>' +
         '<div class="announcement-bar-slides" ng-transclude></div>' +
-        '<nav class="announcement-bar-nav">'+
+        '<nav class="announcement-bar-nav" ng-if="slides.length > 1">'+
           '<button ng-class="{ selected: currentSlide === key }" ng-repeat="(key, slide) in slides" ng-click="changeSlide($event, key)">{{key}}</button>' +
         '</nav>' +
       '</div>',
 
     link: function(scope, element, attrs) {
       // REGISTER ELEMENTS
+      var $ctrl = this;
       scope.slides = angular.element(element[0].getElementsByClassName('announcement-bar-slide'));
-      var slideLenth = scope.slides.length;
+      var slideLength = scope.slides.length;
 
       // SHOW FIRST SLIDE
       scope.currentSlide = 0;
@@ -58,7 +60,7 @@ angularIO.directive('announcementBar', ['$interval', function($interval) {
         scope.slides.removeClass('is-visible');
 
         // RESET ON LAST SLIDE
-        if((scope.currentSlide) > (slideLenth - 1))  {
+        if((scope.currentSlide) > (slideLength - 1))  {
           scope.currentSlide = 0;
         }
 
diff --git a/public/resources/js/directives/api-list.js b/public/resources/js/directives/api-list.js
index a813e5ba4a..02fe0dbf13 100644
--- a/public/resources/js/directives/api-list.js
+++ b/public/resources/js/directives/api-list.js
@@ -1,26 +1,51 @@
+/*eslint no-unused-vars: "angularIO" */
+
+
+/*
+* API List & Filter Directive
+*
+* A page displaying all of the angular API methods available
+* including a filter that can hide/show methods bases on filter
+* settings.
+*/
+
 angularIO.directive('apiList', function () {
-  var API_FILTER_KEY = 'apiFilter';
-  var API_TYPE_KEY = 'apiType';
+  var QUERY_KEY = 'query';
+  var TYPE_KEY = 'type';
+  var STATUS_KEY = 'status';
+
   return {
     restrict: 'E',
     template:
       '<div ng-cloak="ng-cloak" class="banner is-plain api-filter clearfix">' +
       '  <div class="form-select-menu">' +
-      '    <button ng-repeat="apiType in $ctrl.apiTypes" ng-if="$ctrl.apiType === apiType" class="form-select-button has-symbol" ng-click="$ctrl.toggleMenu()"><strong>Type:</strong><span class="symbol {{apiType.cssClass}}" ng-if="apiType.cssClass !== \'stable\'" ></span>{{apiType.title}}</button>'+
-      '    <button class="form-select-button is-default" ng-if="$ctrl.apiType === null" ng-click="$ctrl.toggleMenu()"><strong>All Types</strong></button>'+
-      '    <ul class="form-select-dropdown" ng-class="{ visible: $ctrl.showMenu === true }">' +
-      '      <li ng-class="{ active: !$ctrl.apiType }" ng-click="$ctrl.clearType()">All Types</li>' +
-      '      <li ng-repeat="apiType in $ctrl.apiTypes" ng-class="{ active: $ctrl.apiType === apiType }" ng-click="$ctrl.setType(apiType)"><span class="symbol {{apiType.cssClass}}"></span>{{apiType.title}}</li>' +
+      '    <button ng-repeat="type in $ctrl.types" ng-if="$ctrl.type === type.matches[0]" class="form-select-button has-symbol" ng-click="$ctrl.toggleMenu(\'type\')"><strong>Type:</strong><span class="symbol {{type.cssClass}}" ng-if="type.cssClass !== \'stable\'" ></span>{{type.title}}</button>'+
+      '    <button class="form-select-button is-default" ng-if="$ctrl.type === null" ng-click="$ctrl.toggleMenu(\'type\')"><strong>Type: All</strong></button>'+
+      '    <ul class="form-select-dropdown" ng-class="{ visible: $ctrl.showTypeMenu === true }">' +
+      '      <li ng-class="{ active: !$ctrl.type }" ng-click="$ctrl.clear(\'type\')">All</li>' +
+      '      <li ng-repeat="type in $ctrl.types" ng-class="{ active: $ctrl.type === type }" ng-click="$ctrl.set(type, \'type\')"><span class="symbol {{type.cssClass}}"></span>{{type.title}}</li>' +
       '    </ul>' +
-      '    <div class="overlay" ng-class="{ visible: $ctrl.showMenu === true }" ng-click="$ctrl.toggleMenu()"></div>' +
+      '    <div class="overlay" ng-class="{ visible: $ctrl.showTypeMenu === true }" ng-click="$ctrl.toggleMenu(\'type\')"></div>' +
       '  </div>' +
+      '        ' +
+      '  <div class="form-select-menu" ng-if="!$ctrl.isForDart">' +
+      '    <button ng-repeat="status in $ctrl.statuses" ng-if="$ctrl.status === status.matches[0]" class="form-select-button" ng-click="$ctrl.toggleMenu(\'status\')"><strong>Status:</strong>{{status.title}}</button>'+
+      '    <button class="form-select-button is-default" ng-if="$ctrl.status === null" ng-click="$ctrl.toggleMenu(\'status\')"><strong>Status: All</strong></button>'+
+      '    <ul class="form-select-dropdown" ng-class="{ visible: $ctrl.showStatusMenu === true }">' +
+      '      <li ng-class="{ active: !$ctrl.status }" ng-click="$ctrl.clear(\'status\')">All</li>' +
+      '      <li ng-repeat="status in $ctrl.statuses" ng-class="{ active: $ctrl.status === status }" ng-click="$ctrl.set(status, \'status\')">{{status.title}}</li>' +
+      '    </ul>' +
+      '    <div class="overlay" ng-class="{ visible: $ctrl.showStatusMenu === true }" ng-click="$ctrl.toggleMenu(\'status\')"></div>' +
+      '  </div>' +
+      '        ' +
       '  <div class="form-search">' +
       '    <i class="material-icons">search</i>' +
-      '    <input placeholder="Filter" ng-model="$ctrl.apiFilter" ng-model-options="{updateOn: \'default blur\', debounce: {\'default\': 350, \'blur\': 0}}">' +
+      '    <input placeholder="Filter" ng-model="$ctrl.query" ng-model-options="{updateOn: \'default blur\', debounce: {\'default\': 350, \'blur\': 0}}">' +
       '  </div>' +
       '</div>' +
+      '      ' +
       '<article class="l-content-small grid-fluid docs-content">' +
-      '  <div ng-repeat="section in $ctrl.groupedSections" ng-if="$ctrl.isFiltered(section)" ng-cloak="ng-cloak">' +
+      '  <div ng-repeat="section in $ctrl.groupedSections" ng-if="$ctrl.filterSections(section)" ng-cloak="ng-cloak">' +
       '    <h2>{{ section.title }}</h2>' +
       '    <ul class="api-list">' +
       '      <li ng-repeat="item in section.items" ng-show="item.show" class="api-item">' +
@@ -31,14 +56,18 @@ angularIO.directive('apiList', function () {
       '</article>',
     controllerAs: '$ctrl',
     controller: function($scope, $attrs, $http, $location) {
+      // DEFAULT VALUES
       var $ctrl = this;
+      $ctrl.showTypeMenu = false;
+      $ctrl.showStatusMenu = false;
+      $ctrl.status = null;
+      $ctrl.query = null;
+      $ctrl.type = null;
+      $ctrl.groupedSections = [];
 
-      $ctrl.showMenu = false;
 
-      var isForDart = $attrs.lang === 'dart';
-
-      $ctrl.apiTypes = [
-        { cssClass: 'stable', title: 'Only Stable', matches: ['stable']},
+      // API TYPES
+      $ctrl.types = [
         { cssClass: 'directive', title: 'Directive', matches: ['directive'] },
         { cssClass: 'pipe', title: 'Pipe', matches: ['pipe'] },
         { cssClass: 'decorator', title: 'Decorator', matches: ['decorator'] },
@@ -46,95 +75,195 @@ angularIO.directive('apiList', function () {
         { cssClass: 'interface', title: 'Interface', matches: ['interface'] },
         { cssClass: 'function', title: 'Function', matches: ['function'] },
         { cssClass: 'enum', title: 'Enum', matches: ['enum'] },
-        { cssClass: 'const', title: 'Const', matches: ['var', 'let', 'const'] }
+        { cssClass: 'type-alias', title: 'Type Alias', matches: ['type-alias'] },
+        { cssClass: 'const', title: 'Const', matches: ['const', 'var', 'let'] }
       ];
 
-      if (isForDart) $ctrl.apiTypes = $ctrl.apiTypes.filter(function (t) {
-        return !t.cssClass.match(/^(stable|directive|decorator|interface|enum)$/);
-      });
+      // STATUSES
+      $ctrl.statuses = [
+        { cssClass: 'stable', title: 'Stable', matches: ['stable']},
+        { cssClass: 'deprecated', title: 'Deprecated', matches: ['deprecated']},
+        { cssClass: 'experimental', title: 'Experimental', matches: ['experimental']},
+        { cssClass: 'security', title: 'Security Risk', matches: ['security']}
+      ];
 
-      $ctrl.apiFilter = getApiFilterFromLocation();
-      $ctrl.apiType = getApiTypeFromLocation();
-      $ctrl.groupedSections = [];
 
-      $ctrl.setType = function (type) {
-        if (type === $ctrl.apiType) $ctrl.apiType = null;
-        else $ctrl.apiType = type;
-        $ctrl.showMenu = !$ctrl.showMenu;
-      };
+      // SET FILTER VALUES
+      getFilterValues();
 
-      $ctrl.clearType = function () {
-        $ctrl.apiType = null;
-        $ctrl.showMenu = !$ctrl.showMenu;
-      };
-
-      $ctrl.toggleMenu = function () {
-        $ctrl.showMenu = !$ctrl.showMenu;
-      };
-
-      $ctrl.isFiltered = function(section) {
-        var apiFilter = ($ctrl.apiFilter || '').toLowerCase();
-        var matchesModule = $ctrl.apiFilter === '' || $ctrl.apiFilter === null || section.title.toLowerCase().indexOf($ctrl.apiFilter.toLowerCase()) !== -1;
-        var isVisible = false;
-
-        section.items.forEach(function(item) {
-
-          // Filter by stability (ericjim: only 'stable' for now)
-          if ($ctrl.apiType && $ctrl.apiType.matches.length === 1 &&
-              $ctrl.apiType.matches[0] === 'stable' && item.stability === 'stable') {
-            item.show = true;
-            isVisible = true;
-            return isVisible;
-          }  // NOTE: other checks can be performed for stability (experimental, deprecated, etc)
-
-          // Filter by docType
-          var matchesDocType = !$ctrl.apiType || $ctrl.apiType.matches.indexOf(item.docType) !== -1;
-          var matchesTitle = !apiFilter || item.title.toLowerCase().indexOf(apiFilter) !== -1;
-          item.show = matchesDocType && (matchesTitle || matchesModule);
-
-          if (item.show) {
-            isVisible = true;
-          }
-        });
-
-        return isVisible;
-      };
 
+      // GRAB DATA FOR SECTIONS
       $http.get($attrs.src).then(function(response) {
-        $ctrl.sections = response.data;
+        $ctrl.sections =  response.data;
+
         $ctrl.groupedSections = Object.keys($ctrl.sections).map(function(title) {
           return { title: title, items: $ctrl.sections[title] };
         });
       });
 
-      $scope.$watchGroup(
-        [function() { return $ctrl.apiFilter; }, function() { return $ctrl.apiType; }, function() { return $ctrl.sections; }],
-        function() {
-          var apiFilter = ($ctrl.apiFilter || '').toLowerCase();
 
-          $location.search(API_FILTER_KEY, apiFilter || null);
-          $location.search(API_TYPE_KEY, $ctrl.apiType && $ctrl.apiType.title || null);
+      // SET SELECTED VALUE FROM MENUS/FORM
+      $ctrl.set = function(item, kind) {
+        var value = (item && item.matches) ? item.matches[0] : null;
+
+        switch(kind) {
+          case 'type': $ctrl.type = value ; break;
+          case 'query': $ctrl.query = value ; break;
+          case 'status': $ctrl.status = value ; break;
+        }
+
+        $ctrl.toggleMenu(kind);
+      }
+
+
+      // CLEAR SELECTED VALUE FROM MENUS/FORM
+      $ctrl.clear = function (kind) {
+        switch(kind) {
+          case 'type': $ctrl.type = null ; break;
+          case 'query': $ctrl.query = null ; break;
+          case 'status': $ctrl.status = null ; break;
+        }
+
+        $ctrl.toggleMenu(kind);
+      };
+
+
+      // TOGGLE MENU
+      $ctrl.toggleMenu = function(kind) {
+        switch(kind) {
+          case 'type': $ctrl.showTypeMenu = !$ctrl.showTypeMenu; ; break;
+          case 'status': $ctrl.showStatusMenu = !$ctrl.showStatusMenu; ; break;
+        }
+      }
+
+
+      // UPDATE VALUES IF DART API
+      var isForDart = $attrs.lang === 'dart';
+      if (isForDart) {
+        $ctrl.isForDart = true;
+        $ctrl.statuses = [];
+        $ctrl.types = $ctrl.types.filter(function (t) {
+          return t.cssClass.match(/^(class|function|const)$/);
+        });
+      }
+
+
+      // SET URL WITH VALUES
+      $scope.$watchGroup(
+        [
+          function() { return $ctrl.query; },
+          function() { return $ctrl.type; },
+          function() { return $ctrl.status; },
+          function() { return $ctrl.sections; }
+        ],
+
+        function() {
+          var queryURL = $ctrl.query ? $ctrl.query.toLowerCase() : null;
+          var typeURL = $ctrl.type || null;
+          var statusURL = $ctrl.status || null;
+
+          // SET URLS
+          $location.search(QUERY_KEY, queryURL);
+          $location.search(STATUS_KEY, statusURL);
+          $location.search(TYPE_KEY, typeURL);
         }
       );
 
-      function getApiFilterFromLocation() {
-        return $location.search()[API_FILTER_KEY] || null;
+
+      // GET VALUES FROM URL
+      function getFilterValues() {
+        var urlParams =  $location.search();
+
+        $ctrl.status = urlParams[STATUS_KEY] || null;
+        $ctrl.query = urlParams[QUERY_KEY] || null;;
+        $ctrl.type = urlParams[TYPE_KEY] || null;;
       }
 
-      function getApiTypeFromLocation() {
-        var apiFilter = $location.search()[API_TYPE_KEY];
-        if (!apiFilter) {
-          return null;
-        } else if (!$ctrl.apiFilter || $ctrl.apiFilter.title != apiFilter) {
-          for (var i = 0, ii = $ctrl.apiTypes.length; i < ii; i++) {
-            if ($ctrl.apiTypes[i].title == apiFilter) {
-              return $ctrl.apiTypes[i];
-            }
-          }
+
+      // CHECK IF IT'S A CONSTANT TYPE
+      function isConst(item) {
+        var isConst = false;
+
+        switch(item.docType) {
+          case 'let': isConst = true; break;
+          case 'var': isConst = true; break;
+          case 'const': isConst = true; break;
+          default: isConst = false;
         }
-        // If we get here then the apiType query didn't match any apiTypes
-        $location.search(API_TYPE_KEY, null);
+
+        return isConst;
       }
+
+      // FILTER SECTION & ITEMS LOOP
+      $ctrl.filterSections = function(section) {
+        var showSection = false;
+
+        section.items.forEach(function(item) {
+          item.show = false;
+
+          // CHECK IF TYPE IS NULL & STATUS, QUERY
+          if (($ctrl.type === null) && statusSelected(item) && queryEntered(section, item)) {
+            item.show = true;
+          }
+
+          // CHECK IF TYPE IS SELECTED & STATUS, QUERY
+          if (($ctrl.type === item.docType) && statusSelected(item) && queryEntered(section, item)) {
+            item.show = true;
+          }
+
+          // CHECK IF TYPE IS CONST & STATUS, QUERY
+          if (($ctrl.type === 'const') && isConst(item) && statusSelected(item) && queryEntered(section, item)) {
+            item.show = true;
+          }
+
+          // SHOW SECTION IF ONE ITEM IS VISIBLE
+          if(!showSection && item.show) {
+            showSection = true;
+          }
+        });
+
+        return showSection;
+      }
+
+
+      // CHECK FOR QUERY
+      function queryEntered(section, item) {
+        var isVisible = false;
+
+        // CHECK IF QUERY MATCH SECTION OR ITEM
+        var query = ($ctrl.query || '').toLowerCase();
+        var matchesSection = $ctrl.query === '' || $ctrl.query === null || section.title.toLowerCase().indexOf($ctrl.query.toLowerCase()) !== -1;
+        var matchesTitle = !query || item.title.toLowerCase().indexOf(query) !== -1;
+
+        // FILTER BY QUERY
+        if(matchesTitle || matchesSection) {
+          isVisible = true;
+        }
+
+        return isVisible;
+      }
+
+
+      // CHECK IF AN API ITEM IS VISIBLE BY STATUS
+      function statusSelected(item) {
+        var status = item.stability;
+        var insecure = item.secure === 'false' ? false : true;
+        var isVisible = false;
+
+        if($ctrl.status === null) {
+          isVisible = true;
+        }
+
+        if(status === $ctrl.status) {
+          isVisible = true;
+        }
+
+        if(($ctrl.status === 'security') && insecure) {
+          isVisible = true;
+        }
+
+        return isVisible;
+      };
     }
   };
 });
\ No newline at end of file
diff --git a/public/search/_data.json b/public/search/_data.json
new file mode 100644
index 0000000000..008dc88fe8
--- /dev/null
+++ b/public/search/_data.json
@@ -0,0 +1,6 @@
+{
+  "index": {
+    "title": "Search Results",
+    "subtitle": "Developer Documentation"
+  }
+}
diff --git a/public/search/_layout.jade b/public/search/_layout.jade
new file mode 100644
index 0000000000..17c73545b2
--- /dev/null
+++ b/public/search/_layout.jade
@@ -0,0 +1,16 @@
+doctype html public
+html(lang="en")
+  head
+    != partial("../_includes/_head-include")
+
+  body.l-offset-nav
+    != partial("../_includes/_main-nav")
+    != partial("../_includes/_hero")
+
+
+
+    article(class="l-docs-content")
+      != yield
+
+    != partial("../_includes/_footer")
+    != partial("../_includes/_scripts-minimum")
\ No newline at end of file
diff --git a/public/search/index.jade b/public/search/index.jade
new file mode 100644
index 0000000000..5a88e395f9
--- /dev/null
+++ b/public/search/index.jade
@@ -0,0 +1,3 @@
+.search-results
+  input(type="text" class="st-default-search-input search-field" placeholder="SEARCH DOCS...")
+  .st-search-container
\ No newline at end of file
diff --git a/scripts/examples-install.sh b/scripts/examples-install.sh
index 2501ad2b8d..06fea39aa5 100755
--- a/scripts/examples-install.sh
+++ b/scripts/examples-install.sh
@@ -3,6 +3,5 @@
 set -ex -o pipefail
 
 (cd public/docs/_examples && npm install --no-optional)
-(cd public/docs/_examples/_protractor && npm install --no-optional)
-npm run webdriver:update --prefix public/docs/_examples/_protractor
+npm run webdriver:update --prefix public/docs/_examples
 gulp add-example-boilerplate
diff --git a/tools/dart-api-builder/dab.js b/tools/dart-api-builder/dab.js
index ff11500cb6..31383cc315 100644
--- a/tools/dart-api-builder/dab.js
+++ b/tools/dart-api-builder/dab.js
@@ -219,12 +219,10 @@ block head-extra
   // generated Dart API page template: head-extra
   //- <base> is required because all the links in dartdoc generated pages are "pseudo-absolute"
   base(href="${baseHref}")
-  link(rel="stylesheet" href="static-assets/styles.css")
 
 block breadcrumbs
   // generated Dart API page template: breadcrumbs
-  .banner
-    ol.breadcrumbs.gt-separated.hidden-xs
+  ol.breadcrumbs.gt-separated.hidden-xs
 ${breadcrumbs}
 
 block main-content
diff --git a/tools/plunker-builder/builder.js b/tools/plunker-builder/builder.js
index 3f0fdacdd1..9d893f3304 100644
--- a/tools/plunker-builder/builder.js
+++ b/tools/plunker-builder/builder.js
@@ -209,14 +209,14 @@ class PlunkerBuilder {
 
   _getPlunkerFiles() {
     // Assume plunker version is sibling of node_modules version
-    this.readme = fs.readFileSync(this.basePath +  '/plunker.README.md', 'utf-8');
-    var systemJsConfigPath = '/systemjs.config.plunker.js';
+    this.readme = fs.readFileSync(this.basePath +  '/_boilerplate/plunker.README.md', 'utf-8');
+    var systemJsConfigPath = '/_boilerplate/systemjs.config.plunker.js';
     if (this.options.build) {
-      systemJsConfigPath = '/systemjs.config.plunker.build.js';
+      systemJsConfigPath = '/_boilerplate/systemjs.config.plunker.build.js';
     }
     this.systemjsConfig = fs.readFileSync(this.basePath + systemJsConfigPath, 'utf-8');
     this.systemjsConfig +=  this.copyrights.jsCss;
-    this.tsconfig = fs.readFileSync(`${this.basePath}/tsconfig.json`, 'utf-8');
+    this.tsconfig = fs.readFileSync(`${this.basePath}/_boilerplate/tsconfig.json`, 'utf-8');
   }
 
   _htmlToElement(document, html) {