docs: update to Angular 4.0 (#3415)

Author: filipesilva

.travis.yml

@@ -10,17 +10,18 @@ env:
     - DBUS_SESSION_BUS_ADDRESS=/dev/null
     - DISPLAY=:99.0
     - CHROME_BIN=chromium-browser
-    - LATEST_RELEASE=2.4.0
-    - LATEST_RELEASE_BRANCH=2.4.x
+    - LATEST_RELEASE=4.0.0
+    # Temporarily disabled until there is a new release branch for 4.0.0
+    # - LATEST_RELEASE_BRANCH=2.4.x
     - TASK_FLAGS="--dgeni-log=warn"
   matrix:
     # current angular release jobs
     - TASK=lint
     - TASK="run-e2e-tests --fast" SCRIPT=examples-install.sh
     - TASK=build-compile SCRIPT=deploy-install.sh WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v"
     # current angular release branch jobs
-    - TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH
-    - TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v"
+    # - TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH
+    # - TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v"
     # angular master jobs
     - TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=master
     - TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=master WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v"
@@ -29,8 +30,8 @@ matrix:
   allow_failures:
     # allow current angular release branch and master to fail
     # these should be moved to a daily task instead of being ran on every PR
-    - env: TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH
-    - env: TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v"
+    # - env: TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH
+    # - env: TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=$LATEST_RELEASE_BRANCH WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v"
     - env: TASK="run-e2e-tests --fast" SCRIPT=examples-install-preview.sh PREVIEW_BRANCH=master
     - env: TASK=build-compile SCRIPT=deploy-install-preview.sh PREVIEW_BRANCH=master WAIT="travis_wait 50" POST_SCRIPT="check-docs.sh -v"
 before_install:

gulpfile.js

@@ -71,13 +71,13 @@ var _devguideShredJadeOptions =  {
 
 var _apiShredOptions =  {
   lang: 'ts',
-  examplesDir: path.join(ANGULAR_PROJECT_PATH, 'modules/@angular/examples'),
+  examplesDir: path.join(ANGULAR_PROJECT_PATH, 'packages/examples'),
   fragmentsDir: path.join(DOCS_PATH, '_fragments/_api'),
   zipDir: path.join(RESOURCES_PATH, 'zips/api'),
   logLevel: _dgeniLogLevel
 };
 
-var _excludePatterns = ['**/node_modules/**', '**/packages/**'];
+var _excludePatterns = ['**/node_modules/**'];
 
 var _excludeMatchers = _excludePatterns.map(function(excludePattern){
   return new Minimatch(excludePattern)
@@ -1197,7 +1197,7 @@ function devGuideExamplesWatch(shredOptions, postShredAction, focus) {
   // var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');
   // gulp.watch([includePattern, excludePattern], {readDelay: 500}, function (event, done) {
   var ignoreThese = [ '**/node_modules/**', '**/_fragments/**', '**/dist/**',
-                      '**/dart/.pub/**', '**/dart/build/**', '**/dart/packages/**'];
+                      '**/dart/.pub/**', '**/dart/build/**'];
   ignoreThese = ignoreThese.concat(_exampleBoilerplateFiles.map((file) => `public/docs/_examples/*/*/${file}`));
   var files = globby.sync( [includePattern], { ignore: ignoreThese });
   gulp.watch([files], {readDelay: 500}, function (event, done) {

public/docs/_examples/_boilerplate/src/systemjs.config.js

@@ -14,15 +14,20 @@
       'app': 'app',
 
       // angular bundles
+      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
+      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
+      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
+      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
 
       // other libraries
       'rxjs':                      'npm:rxjs',

public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js

@@ -38,10 +38,13 @@
       'app': 'app',
 
       // angular bundles
+      '@angular/animations': 'ng:animations-builds/master/bundles/animations.umd.js',
+      '@angular/animations/browser': 'ng:animations-builds/master/bundles/animations-browser.umd.js',
       '@angular/core': 'ng:core-builds/master/bundles/core.umd.js',
       '@angular/common': 'ng:common-builds/master/bundles/common.umd.js',
       '@angular/compiler': 'ng:compiler-builds/master/bundles/compiler.umd.js',
       '@angular/platform-browser': 'ng:platform-browser-builds/master/bundles/platform-browser.umd.js',
+      '@angular/platform-browser/animations': 'ng:animations-builds/master/bundles/platform-browser-animations.umd.js',
       '@angular/platform-browser-dynamic': 'ng:platform-browser-dynamic-builds/master/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'ng:http-builds/master/bundles/http.umd.js',
       '@angular/router': 'ng:router-builds/master/bundles/router.umd.js',
@@ -64,7 +67,7 @@
       'rxjs':                      'npm:[email protected]',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
       'ts':                        'npm:[email protected]/lib/plugin.js',
-      'typescript':                'npm:typescript@2.0.10/lib/typescript.js',
+      'typescript':                'npm:typescript@2.2.1/lib/typescript.js',
 
     },
     // packages tells the System loader how to load when no filename and/or no extension

public/docs/_examples/_boilerplate/src/systemjs.config.web.js

@@ -35,10 +35,13 @@
       'app': 'app',
 
       // angular bundles
+      '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
+      '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
+      '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
@@ -51,7 +54,7 @@
       'rxjs':                      'npm:[email protected]',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
       'ts':                        'npm:[email protected]/lib/plugin.js',
-      'typescript':                'npm:typescript@2.0.10/lib/typescript.js',
+      'typescript':                'npm:typescript@2.2.1/lib/typescript.js',
 
     },
     // packages tells the System loader how to load when no filename and/or no extension

public/docs/_examples/animations/ts/src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { HeroTeamBuilderComponent } from './hero-team-builder.component';
 import { HeroListBasicComponent } from './hero-list-basic.component';
@@ -14,7 +15,7 @@ import { HeroListMultistepComponent } from './hero-list-multistep.component';
 import { HeroListTimingsComponent } from './hero-list-timings.component';
 
 @NgModule({
-  imports: [ BrowserModule ],
+  imports: [ BrowserModule, BrowserAnimationsModule ],
   declarations: [
     HeroTeamBuilderComponent,
     HeroListBasicComponent,

public/docs/_examples/animations/ts/src/app/hero-list-auto.component.ts

@@ -1,12 +1,14 @@
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
   animate,
   transition
-} from '@angular/core';
+} from '@angular/animations';
 
 import { Heroes } from './hero.service';
 

public/docs/_examples/animations/ts/src/app/hero-list-basic.component.ts

@@ -3,13 +3,15 @@
 // #docregion imports
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
-  transition,
-  animate
-} from '@angular/core';
+  animate,
+  transition
+} from '@angular/animations';
 // #enddocregion imports
 
 import { Heroes } from './hero.service';

public/docs/_examples/animations/ts/src/app/hero-list-combined-transitions.component.ts

@@ -2,13 +2,15 @@
 // #docregion imports
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
-  transition,
-  animate
-} from '@angular/core';
+  animate,
+  transition
+} from '@angular/animations';
 // #enddocregion imports
 
 import { Heroes } from './hero.service';

public/docs/_examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts

@@ -1,12 +1,14 @@
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
   animate,
   transition
-} from '@angular/core';
+} from '@angular/animations';
 
 import { Heroes } from './hero.service';
 

public/docs/_examples/animations/ts/src/app/hero-list-enter-leave.component.ts

@@ -1,12 +1,14 @@
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
   animate,
   transition
-} from '@angular/core';
+} from '@angular/animations';
 
 import { Heroes } from './hero.service';
 

public/docs/_examples/animations/ts/src/app/hero-list-groups.component.ts

@@ -1,13 +1,15 @@
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
   animate,
   transition,
   group
-} from '@angular/core';
+} from '@angular/animations';
 
 import { Heroes } from './hero.service';
 

public/docs/_examples/animations/ts/src/app/hero-list-inline-styles.component.ts

@@ -3,11 +3,13 @@
 import {
   Component,
   Input,
+} from '@angular/core';
+import {
   trigger,
   style,
-  transition,
-  animate
-} from '@angular/core';
+  animate,
+  transition
+} from '@angular/animations';
 // #enddocregion imports
 
 import { Heroes } from './hero.service';

public/docs/_examples/animations/ts/src/app/hero-list-multistep.component.ts

@@ -1,14 +1,16 @@
 import {
   Component,
   Input,
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
   animate,
   transition,
   keyframes,
-  AnimationTransitionEvent
-} from '@angular/core';
+  AnimationEvent
+} from '@angular/animations';
 
 import { Heroes } from './hero.service';
 
@@ -59,11 +61,11 @@ import { Heroes } from './hero.service';
 export class HeroListMultistepComponent {
   @Input() heroes: Heroes;
 
-  animationStarted(event: AnimationTransitionEvent) {
+  animationStarted(event: AnimationEvent) {
     console.warn('Animation started: ', event);
   }
 
-  animationDone(event: AnimationTransitionEvent) {
+  animationDone(event: AnimationEvent) {
     console.warn('Animation done: ', event);
   }
 }

public/docs/_examples/animations/ts/src/app/hero-list-timings.component.ts

@@ -1,12 +1,14 @@
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
   animate,
   transition
-} from '@angular/core';
+} from '@angular/animations';
 
 import { Heroes } from './hero.service';
 

public/docs/_examples/animations/ts/src/app/hero-list-twoway.component.ts

@@ -2,13 +2,15 @@
 // #docregion imports
 import {
   Component,
-  Input,
+  Input
+} from '@angular/core';
+import {
   trigger,
   state,
   style,
-  transition,
-  animate
-} from '@angular/core';
+  animate,
+  transition
+} from '@angular/animations';
 // #enddocregion imports
 
 import { Heroes } from './hero.service';

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

@@ -9,7 +9,7 @@ describe('AOT Compilation', function () {
         browser.get('');
     });
 
-    it('should load page and click button', function (done) {
+    it('should load page and click button', function (done: any) {
       let headingSelector = element.all(by.css('h1')).get(0);
       expect(headingSelector.getText()).toEqual('Hello Angular');
 

public/docs/_examples/cb-ts-to-js/js/example-config.json

@@ -0,0 +1,3 @@
+{
+  "build": "build:babel"
+}

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

@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by, ElementFinder } from 'protractor';
 
@@ -163,7 +163,7 @@ describe('Dependency Injection Tests', function () {
 
     describe('after button click', function() {
 
-      beforeAll(function (done) {
+      beforeAll(function (done: any) {
         let buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0);
         buttonEle.click().then(done, done);
       });