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

PR Close #19248
2017-09-21 17:05:54 -07:00
parent 344a5ca545
commit 9bbf009dff
377 changed files with 2338 additions and 1747 deletions
@@ -1,8 +1,22 @@
 # boilerplate files
+**/src/environments/environment.prod.ts
+**/src/environments/environment.ts
+**/src/assets/.gitkeep
 **/src/styles.css
 **/src/systemjs-angular-loader.js
 **/src/systemjs.config.js
 **/src/tsconfig.json
+**/src/favicon.ico
+**/src/polyfills.ts
+**/src/test.ts
+**/src/tsconfig.app.json
+**/src/tsconfig.spec.json
+**/src/typings.d.ts
+**/e2e/app.po.ts
+**/e2e/tsconfig.e2e.json
+**/.angular-cli.json
+**/.editorconfig
+**/tsconfig.json
 **/bs-config.e2e.json
 **/bs-config.json
 **/package.json
@@ -53,14 +67,18 @@ dist/

 # testing
 !testing/src/browser-test-shim.js
-!testing/karma*.js

 # webpack
 !webpack/**/config/*.js
 !webpack/**/*webpack*.js
+!webpack/src/polyfills.ts

 # styleguide
 !styleguide/src/systemjs.custom.js

 # plunkers
 *plnkr.no-link.html
+
+# ngUpgrade testing
+!upgrade-phonecat-*/**/karma.conf.js
+!upgrade-phonecat-*/**/karma-test-shim.js
@@ -83,7 +83,7 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
  }

  function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
-    let posterButton = element(by.css('movie-list tr > th > button'));
+    let posterButton = element(by.css('app-movie-list tr > th > button'));
    expect(posterButton.getText()).toBe(expectedButtonText);

    posterButton.click().then(function () {
@@ -92,11 +92,11 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
  }

  function getMovieRows() {
-    return element.all(by.css('movie-list tbody > tr'));
+    return element.all(by.css('app-movie-list tbody > tr'));
  }

  function testFavoriteHero(heroName: string, expectedLabel: string) {
-    let movieListComp = element(by.tagName('movie-list'));
+    let movieListComp = element(by.tagName('app-movie-list'));
    let heroInput = movieListComp.element(by.tagName('input'));
    let favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
    let resultLabel = movieListComp.element(by.css('span > p'));
@@ -4,7 +4,7 @@ import { MovieService } from './movie.service';
 import { IMovie } from './movie';

@Component({
-  selector: 'my-app',
+  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [ MovieService ]
@@ -8,7 +8,7 @@ import { MovieService } from './movie.service';

 // #docregion component
@Component({
-  selector: 'movie-list',
+  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
 // #docregion style-url
  styleUrls: [ './movie-list.component.css' ],
@@ -8,7 +8,7 @@ export class MovieService {
    return [
      {
        hero: 'Celeritas',
-        imageurl: 'images/hero.png',
+        imageurl: 'assets/images/hero.png',
        movieId: 1,
        mpaa: 'pg-13',
        releaseDate: '2015-12-19T00:00:00',
@@ -19,7 +19,7 @@ export class MovieService {
      },
      {
        hero: 'Mr. Nice',
-        imageurl: 'images/villain.png',
+        imageurl: 'assets/images/villain.png',
        movieId: 2,
        mpaa: 'pg-13',
        releaseDate: '2015-12-18T00:00:00',
@@ -30,7 +30,7 @@ export class MovieService {
      },
      {
        hero: 'Angular',
-        imageurl: 'images/ng-logo.png',
+        imageurl: 'assets/images/ng-logo.png',
        movieId: 3,
        mpaa: 'pg-13',
        releaseDate: '2015-12-17T00:00:00',
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <base href="/">
    <meta charset="UTF-8">
@@ -8,21 +8,10 @@
    <!-- #docregion style -->
    <link rel="stylesheet" href="styles.css">
    <!-- #enddocregion style -->
-
-    <!-- Polyfills -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
  </head>

  <body>
-    <my-app>Loading app...</my-app>
+    <app-root></app-root>
  </body>

 </html>
@@ -1,5 +1,12 @@
 // #docregion
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}

 platformBrowserDynamic().bootstrapModule(AppModule);
@@ -29,7 +29,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-basic'));
+      host = element(by.css('app-hero-list-basic'));
    });

    it('animates between active and inactive', () => {
@@ -58,7 +58,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(function() {
-      host = element(by.css('hero-list-inline-styles'));
+      host = element(by.css('app-hero-list-inline-styles'));
    });

    it('are not kept after animation', () => {
@@ -79,7 +79,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-combined-transitions'));
+      host = element(by.css('app-hero-list-combined-transitions'));
    });

    it('animates between active and inactive', () => {
@@ -108,7 +108,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-twoway'));
+      host = element(by.css('app-hero-list-twoway'));
    });

    it('animates between active and inactive', () => {
@@ -137,7 +137,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-enter-leave'));
+      host = element(by.css('app-hero-list-enter-leave'));
    });

    it('adds and removes element', () => {
@@ -157,7 +157,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(function() {
-      host = element(by.css('hero-list-enter-leave-states'));
+      host = element(by.css('app-hero-list-enter-leave-states'));
    });

    it('adds and removes and animates between active and inactive', () => {
@@ -186,7 +186,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(function() {
-      host = element(by.css('hero-list-auto'));
+      host = element(by.css('app-hero-list-auto'));
    });

    it('adds and removes element', () => {
@@ -206,7 +206,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-timings'));
+      host = element(by.css('app-hero-list-timings'));
    });

    it('adds and removes element', () => {
@@ -227,7 +227,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-multistep'));
+      host = element(by.css('app-hero-list-multistep'));
    });

    it('adds and removes element', () => {
@@ -248,7 +248,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-groups'));
+      host = element(by.css('app-hero-list-groups'));
    });

    it('adds and removes element', () => {
@@ -269,7 +269,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-basic'));
+      host = element(by.css('app-hero-list-basic'));
    });

    it('animates between active and inactive', () => {
@@ -13,7 +13,7 @@ import {
 import { Hero } from './hero.service';

@Component({
-  selector: 'hero-list-auto',
+  selector: 'app-hero-list-auto',
  // #docregion template
  template: `
    <ul>
@@ -17,7 +17,7 @@ import {
 import { Hero } from './hero.service';

@Component({
-  selector: 'hero-list-basic',
+  selector: 'app-hero-list-basic',
  // #enddocregion
  /* The click event calls hero.toggleState(), which
   * causes the state of that hero to switch from
@@ -16,7 +16,7 @@ import {
 import { Hero } from './hero.service';

@Component({
- selector: 'hero-list-combined-transitions',
+ selector: 'app-hero-list-combined-transitions',
 // #docregion template
 template: `
   <ul>
@@ -13,7 +13,7 @@ import {
 import { Hero } from './hero.service';

@Component({
-  selector: 'hero-list-enter-leave-states',
+  selector: 'app-hero-list-enter-leave-states',
  // #docregion template
  template: `
    <ul>
@@ -13,7 +13,7 @@ import {
 import { Hero } from './hero.service';

@Component({
-  selector: 'hero-list-enter-leave',
+  selector: 'app-hero-list-enter-leave',
  // #docregion template
  template: `
    <ul>
@@ -14,7 +14,7 @@ import {
 import { Hero } from './hero.service';

@Component({
-  selector: 'hero-list-groups',
+  selector: 'app-hero-list-groups',
  template: `
    <ul>
      <li *ngFor="let hero of heroes"
@@ -15,7 +15,7 @@ import {
 import { Hero } from './hero.service';

@Component({
- selector: 'hero-list-inline-styles',
+ selector: 'app-hero-list-inline-styles',
 // #docregion template
 template: `
   <ul>
@@ -15,7 +15,7 @@ import {
 import { Hero } from './hero.service';

@Component({
-  selector: 'hero-list-multistep',
+  selector: 'app-hero-list-multistep',
  // #docregion template
  template: `
    <ul>
@@ -13,7 +13,7 @@ import {
 import { Hero } from './hero.service';

@Component({
-  selector: 'hero-list-timings',
+  selector: 'app-hero-list-timings',
  template: `
    <ul>
      <li *ngFor="let hero of heroes"
@@ -16,7 +16,7 @@ import {
 import { Hero } from './hero.service';

@Component({
- selector: 'hero-list-twoway',
+ selector: 'app-hero-list-twoway',
 // #docregion template
 template: `
   <ul>
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { Hero, HeroService } from './hero.service';

@Component({
-  selector: 'hero-team-builder',
+  selector: 'app-root',
  template: `
    <div class="buttons">
      <button [disabled]="!heroService.canAdd()" (click)="heroService.addInactive()">Add inactive hero</button>
@@ -15,27 +15,27 @@ import { Hero, HeroService } from './hero.service';
      <div class="column">
        <h4>Basic State</h4>
        <p>Switch between active/inactive on click.</p>
-        <hero-list-basic [heroes]="heroes"></hero-list-basic>
+        <app-hero-list-basic [heroes]="heroes"></app-hero-list-basic>
      </div>
      <div class="column">
        <h4>Styles inline in transitions</h4>
-        <p>Animated effect on click, no persistent end styles.</p>
-        <hero-list-inline-styles [heroes]="heroes"></hero-list-inline-styles>
+        <p>Animated effect on click, no persistend end styles.</p>
+        <app-hero-list-inline-styles [heroes]="heroes"></app-hero-list-inline-styles>
      </div>
      <div class="column">
        <h4>Combined transition syntax</h4>
        <p>Switch between active/inactive on click. Define just one transition used in both directions.</p>
-        <hero-list-combined-transitions [heroes]="heroes"></hero-list-combined-transitions>
+        <app-hero-list-combined-transitions [heroes]="heroes"></app-hero-list-combined-transitions>
      </div>
      <div class="column">
        <h4>Two-way transition syntax</h4>
        <p>Switch between active/inactive on click. Define just one transition used in both directions using the <=> syntax.</p>
-        <hero-list-twoway [heroes]="heroes"></hero-list-twoway>
+        <app-hero-list-twoway [heroes]="heroes"></app-hero-list-twoway>
      </div>
      <div class="column">
        <h4>Enter & Leave</h4>
        <p>Enter and leave animations using the void state.</p>
-        <hero-list-enter-leave [heroes]="heroes"></hero-list-enter-leave>
+        <app-hero-list-enter-leave [heroes]="heroes"></app-hero-list-enter-leave>
      </div>
    </div>
    <div class="columns">
@@ -45,27 +45,27 @@ import { Hero, HeroService } from './hero.service';
          Enter and leave animations combined with active/inactive state animations.
          Different enter and leave transitions depending on state.
        </p>
-        <hero-list-enter-leave-states [heroes]="heroes"></hero-list-enter-leave-states>
+        <app-hero-list-enter-leave-states [heroes]="heroes"></app-hero-list-enter-leave-states>
      </div>
      <div class="column">
        <h4>Auto Style Calc</h4>
        <p>Leave animation from the current computed height using the auto-style value *.</p>
-        <hero-list-auto [heroes]="heroes"></hero-list-auto>
+        <app-hero-list-auto [heroes]="heroes"></app-hero-list-auto>
      </div>
      <div class="column">
        <h4>Different Timings</h4>
        <p>Enter and leave animations with different easings, ease-in for enter, ease-out for leave.</p>
-        <hero-list-timings [heroes]="heroes"></hero-list-timings>
+        <app-hero-list-timings [heroes]="heroes"></app-hero-list-timings>
      </div>
      <div class="column">
        <h4>Multiple Keyframes</h4>
        <p>Enter and leave animations with three keyframes in each, to give the transition some bounce.</p>
-        <hero-list-multistep [heroes]="heroes"></hero-list-multistep>
+        <app-hero-list-multistep [heroes]="heroes"></app-hero-list-multistep>
      </div>
      <div class="column">
        <h4>Parallel Groups</h4>
        <p>Enter and leave animations with multiple properties animated in parallel with different timings.</p>
-        <hero-list-groups [heroes]="heroes"></hero-list-groups>
+        <app-hero-list-groups [heroes]="heroes"></app-hero-list-groups>
      </div>
    </div>
  `,
@@ -5,26 +5,14 @@
    <title>Animations</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill for Web Animations -->
    <script src="https://unpkg.com/[email protected]"></script>
-
-    <!-- Polyfills -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
  </head>

  <body>
    <h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
-    <hero-team-builder></hero-team-builder>
+    <app-root></app-root>
    <button style="visibility: hidden;">External button for E2E test</button>
    <ul style="visibility: hidden;">
      <li>External list for E2E test</li>
@@ -1,4 +1,11 @@
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}

 platformBrowserDynamic().bootstrapModule(AppModule);
@@ -1,3 +1,4 @@
 {
-  "build": "build:aot"
+  "build": "build:aot",
+  "projectType": "systemjs"
 }
@@ -1,6 +1,6 @@
 <!-- #docregion -->
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <title>Ahead of time compilation (JIT)</title>
    <base href="/">
@@ -1,6 +1,6 @@
 <!-- #docregion -->
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <title>Ahead of time compilation</title>
    <base href="/">
@@ -79,10 +79,10 @@ function salesTaxTests() {

 function getPageElts() {
  return {
-    heroes: element.all(by.css('my-app li')),
-    heroDetail: element(by.css('my-app hero-detail')),
-    salesTaxAmountInput: element(by.css('my-app sales-tax input')),
-    salesTaxDetail: element(by.css('my-app sales-tax div'))
+    heroes: element.all(by.css('app-root li')),
+    heroDetail: element(by.css('app-root app-hero-detail')),
+    salesTaxAmountInput: element(by.css('app-root app-sales-tax input')),
+    salesTaxDetail: element(by.css('app-root app-sales-tax div'))
  };
 }

@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
 // #enddocregion import

@Component({
-  selector: 'my-app',
+  selector: 'app-root',
  template: `
-    <hero-list></hero-list>
-    <sales-tax></sales-tax>
+    <app-hero-list></app-hero-list>
+    <app-sales-tax></app-sales-tax>
  `
 })
 // #docregion export
@@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';

@Component({
-  selector: 'hero-detail',
+  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html'
 })
 export class HeroDetailComponent {
--- a/Show More
+++ b/Show More