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

PR Close #19248

aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css

@@ -28,13 +28,6 @@
     background: rgb(83,109,254);
 }
 
-.md-title-icon > i {
-  background-image: url("assets/ng.png");
-  background-repeat: no-repeat;
-  background-position: center center;
-  padding: 1em 2em;
-}
-
 .mdl-layout__header-row {
   height: 56px;
   padding: 0 16px 0 72px;

aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css

@@ -28,13 +28,6 @@
     background: rgb(83,109,254);
 }
 
-.md-title-icon > i {
-  background-image: url("assets/ng.png");
-  background-repeat: no-repeat;
-  background-position: center center;
-  padding: 1em 2em;
-}
-
 .mdl-layout__header-row {
   height: 56px;
   padding: 0 16px 0 72px;

aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts

@@ -3,7 +3,7 @@
 import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
 
-import { HeroService } from './index';
+import { HeroService } from './hero.service';
 
 // #docregion example
 @Injectable()

aio/content/examples/styleguide/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent { }

aio/content/examples/styleguide/src/app/app.module.ts

@@ -0,0 +1,89 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule }            from '@angular/platform-browser';
+
+import { HttpModule }           from '@angular/http';
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+
+import { RouterModule } from '@angular/router';
+
+import { HashLocationStrategy,
+         LocationStrategy } from '@angular/common';
+
+import { HeroData }     from '../app/hero-data';
+import { AppComponent } from '../app/app.component';
+
+import * as s0101 from '../01-01/app/app.module';
+import * as s0205 from '../02-05/app/app.module';
+import * as s0207 from '../02-07/app/app.module';
+import * as s0208 from '../02-08/app/app.module';
+import * as s0301 from '../03-01/app/app.module';
+import * as s0302 from '../03-02/app/app.module';
+import * as s0303 from '../03-03/app/app.module';
+import * as s0304 from '../03-04/app/app.module';
+import * as s0306 from '../03-06/app/app.module';
+import * as s0408 from '../04-08/app/app.module';
+import * as s0410 from '../04-10/app/app.module';
+import * as s0411 from '../04-11/app/app.module';
+import * as s0412 from '../04-12/app/app.module';
+import * as s0502 from '../05-02/app/app.module';
+import * as s0503 from '../05-03/app/app.module';
+import * as s0504 from '../05-04/app/app.module';
+import * as s0512 from '../05-12/app/app.module';
+import * as s0513 from '../05-13/app/app.module';
+import * as s0514 from '../05-14/app/app.module';
+import * as s0515 from '../05-15/app/app.module';
+import * as s0516 from '../05-16/app/app.module';
+import * as s0517 from '../05-17/app/app.module';
+import * as s0601 from '../06-01/app/app.module';
+import * as s0603 from '../06-03/app/app.module';
+import * as s0701 from '../07-01/app/app.module';
+import * as s0703 from '../07-03/app/app.module';
+import * as s0704 from '../07-04/app/app.module';
+import * as s0901 from '../09-01/app/app.module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    HttpModule,
+    InMemoryWebApiModule.forRoot(HeroData),
+
+    s0101.AppModule,
+    s0205.AppModule,
+    s0207.AppModule,
+    s0208.AppModule,
+    s0301.AppModule,
+    s0302.AppModule,
+    s0303.AppModule,
+    s0304.AppModule,
+    s0306.AppModule,
+    s0408.AppModule,
+    s0410.AppModule,
+    s0411.AppModule,
+    s0412.AppModule,
+    s0502.AppModule,
+    s0503.AppModule,
+    s0504.AppModule,
+    s0512.AppModule,
+    s0513.AppModule,
+    s0514.AppModule,
+    s0515.AppModule,
+    s0516.AppModule,
+    s0517.AppModule,
+    s0601.AppModule,
+    s0603.AppModule,
+    s0701.AppModule,
+    s0703.AppModule,
+    s0704.AppModule,
+    s0901.AppModule,
+
+    RouterModule.forRoot([
+      { path: '', redirectTo: '/01-01', pathMatch: 'full' }
+    ], {/* enableTracing: true */}),
+  ],
+  providers: [
+    { provide: LocationStrategy, useClass: HashLocationStrategy }
+  ],
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }

aio/content/examples/styleguide/src/index.html

@@ -1,29 +1,16 @@
 <!DOCTYPE html>
 <!-- #docregion -->
-<html>
+<html lang="en">
   <head>
     <base href="/">
 
     <title>Style Guide Sample</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-
-    <!-- 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 src="systemjs.custom.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
   </head>
 
   <body>
-    <my-app>loading...</my-app>
+    <app-root></app-root>
   </body>
 
 </html>

aio/content/examples/styleguide/src/main.ts

@@ -1,99 +1,6 @@
-import { NgModule } from '@angular/core';
 import { platformBrowserDynamic }   from '@angular/platform-browser-dynamic';
-import { BrowserModule }            from '@angular/platform-browser';
-
-import { HttpModule }           from '@angular/http';
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
-
-import { RouterModule } from '@angular/router';
-
-import { HashLocationStrategy,
-         LocationStrategy } from '@angular/common';
+import { AppModule } from './app/app.module';
 
 import 'rxjs/add/operator/map';
 
-import { HeroData }     from './app/hero-data';
-import { AppComponent } from './app/app.component';
-
-import * as s0101 from './01-01/app/app.module';
-import * as s0205 from './02-05/app/app.module';
-import * as s0207 from './02-07/app/app.module';
-import * as s0208 from './02-08/app/app.module';
-import * as s0301 from './03-01/app/app.module';
-import * as s0302 from './03-02/app/app.module';
-import * as s0303 from './03-03/app/app.module';
-import * as s0304 from './03-04/app/app.module';
-import * as s0306 from './03-06/app/app.module';
-import * as s0408 from './04-08/app/app.module';
-import * as s0410 from './04-10/app/app.module';
-import * as s0411 from './04-11/app/app.module';
-import * as s0412 from './04-12/app/app.module';
-import * as s0502 from './05-02/app/app.module';
-import * as s0503 from './05-03/app/app.module';
-import * as s0504 from './05-04/app/app.module';
-import * as s0512 from './05-12/app/app.module';
-import * as s0513 from './05-13/app/app.module';
-import * as s0514 from './05-14/app/app.module';
-import * as s0515 from './05-15/app/app.module';
-import * as s0516 from './05-16/app/app.module';
-import * as s0517 from './05-17/app/app.module';
-import * as s0601 from './06-01/app/app.module';
-import * as s0603 from './06-03/app/app.module';
-import * as s0701 from './07-01/app/app.module';
-import * as s0703 from './07-03/app/app.module';
-import * as s0704 from './07-04/app/app.module';
-import * as s0901 from './09-01/app/app.module';
-
-///////////////////
-const moduleMetadata = {
-  imports: [
-    BrowserModule,
-    HttpModule,
-    InMemoryWebApiModule.forRoot(HeroData),
-
-    s0101.AppModule,
-    s0205.AppModule,
-    s0207.AppModule,
-    s0208.AppModule,
-    s0301.AppModule,
-    s0302.AppModule,
-    s0303.AppModule,
-    s0304.AppModule,
-    s0306.AppModule,
-    s0408.AppModule,
-    s0410.AppModule,
-    s0411.AppModule,
-    s0412.AppModule,
-    s0502.AppModule,
-    s0503.AppModule,
-    s0504.AppModule,
-    s0512.AppModule,
-    s0513.AppModule,
-    s0514.AppModule,
-    s0515.AppModule,
-    s0516.AppModule,
-    s0517.AppModule,
-    s0601.AppModule,
-    s0603.AppModule,
-    s0701.AppModule,
-    s0703.AppModule,
-    s0704.AppModule,
-    s0901.AppModule,
-
-    RouterModule.forRoot([
-      { path: '', redirectTo: '/01-01', pathMatch: 'full' }
-    ], {/* enableTracing: true */}),
-  ],
-  providers: [
-    { provide: LocationStrategy, useClass: HashLocationStrategy }
-  ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
-};
-
-@NgModule(moduleMetadata)
-class MainModule { }
-
-platformBrowserDynamic().bootstrapModule(MainModule);
-
-
+platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/styleguide/src/systemjs.custom.js

@@ -1,51 +0,0 @@
-(function(global) {
-  // extra local packages
-  var packageNames = [
-    '01-01', '01-01/app', '01-01/app/heroes', '01-01/app/heroes/shared',
-    '02-05', '02-05/app',
-    '02-07', '02-07/app', '02-07/app/heroes', '02-07/app/users',
-    '02-08', '02-08/app', '02-08/app/shared',
-    '03-01', '03-01/app', '03-01/app/core',
-    '03-02', '03-02/app', '03-02/app/core',
-    '03-03', '03-03/app', '03-03/app/core',
-    '03-04', '03-04/app', '03-04/app/core',
-    '03-05', '03-05/app', '03-05/app/core', '03-05/app/core/spinner', '03-05/app/core/toast',
-      '03-05/app/heroes', '03-05/app/heroes/shared',
-    '03-06', '03-06/app', '03-06/app/core', '03-06/app/core/spinner', '03-06/app/core/toast',
-      '03-06/app/heroes', '03-06/app/heroes/shared',
-    '04-08', '04-08/app', '04-08/app/heroes',
-    '04-10', '04-10/app', '04-10/app/shared', '04-10/app/heroes', '04-10/app/shared/spinner', '04-10/app/shared/toast',
-      '04-10/app/shared/filter-text',
-    '04-11', '04-11/app', '04-11/app/core', '04-11/app/heroes', '04-11/app/core/spinner',
-      '04-11/app/core/nav',
-    '04-12', '04-12/app', '04-12/app/core', '04-12/app/heroes', '04-12/app/core/nav',
-    '05-02', '05-02/app', '05-02/app/heroes', '05-02/app/heroes/shared', '05-02/app/heroes/shared/hero-button',
-    '05-03', '05-03/app', '05-03/app/heroes', '05-03/app/heroes/shared', '05-03/app/heroes/shared/hero-button',
-    '05-04', '05-04/app', '05-04/app/heroes', '05-04/app/heroes/shared',
-    '05-12', '05-12/app', '05-12/app/heroes', '05-12/app/heroes/shared', '05-12/app/heroes/shared/hero-button',
-    '05-13', '05-13/app', '05-13/app/heroes', '05-13/app/heroes/shared', '05-13/app/heroes/shared/hero-button',
-    '05-14', '05-14/app', '05-14/app/shared', '05-14/app/shared/toast',
-    '05-15', '05-15/app', '05-15/app/heroes', '05-15/app/heroes/hero-list', '05-15/app/heroes/shared',
-    '05-16', '05-16/app', '05-16/app/heroes',
-    '05-17', '05-17/app', '05-17/app/heroes', '05-17/app/heroes/hero', '05-17/app/heroes/hero-list',
-    '05-17/app/heroes/shared',
-    '06-01', '06-01/app', '06-01/app/shared',
-    '06-03', '06-03/app', '06-03/app/shared',
-    '07-01', '07-01/app', '07-01/app/heroes', '07-01/app/heroes/shared',
-    '07-03', '07-03/app', '07-03/app/heroes', '07-03/app/heroes/hero-list', '07-03/app/heroes/shared',
-    '07-04', '07-04/app', '07-04/app/heroes', '07-04/app/heroes/shared',
-    '09-01', '09-01/app', '09-01/app/heroes', '09-01/app/heroes/shared', '09-01/app/heroes/shared/hero-button'
-  ];
-
-  var packages = {};
-  packageNames.forEach(function(pkgName) {
-    packages[pkgName] = { main: 'index.js', defaultExtension: 'js', meta: { './*.js': { loader: 'systemjs-angular-loader.js' }} };
-  });
-
-  var config = {
-    packages: packages
-  }
-
-  System.config(config);
-
-})(this);