;
-
- ngOnInit() {
- this.heroes = this.heroService.getAllHeroes();
- this.afterGetHeroes();
- }
-
- // Post-process heroes in derived class override.
- protected afterGetHeroes() {}
-
-// #docregion injection
-}
-// #enddocregion heroes-base,injection
-
-/////// SortedHeroesComponent /////
-// #docregion sorted-heroes
-@Component({
- selector: 'app-sorted-heroes',
- template: `{{hero.name}}
`,
- providers: [HeroService]
-})
-export class SortedHeroesComponent extends HeroesBaseComponent {
- constructor(heroService: HeroService) {
- super(heroService);
- }
-
- protected afterGetHeroes() {
- this.heroes = this.heroes.sort((h1, h2) => {
- return h1.name < h2.name ? -1 :
- (h1.name > h2.name ? 1 : 0);
- });
- }
-}
-// #enddocregion sorted-heroes
diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/user-context.service.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/user-context.service.ts
deleted file mode 100644
index ed394fc734..0000000000
--- a/docs_app/content/examples/dependency-injection-in-action/src/app/user-context.service.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// #docplaster
-// #docregion
-import { Injectable } from '@angular/core';
-
-import { LoggerService } from './logger.service';
-import { UserService } from './user.service';
-
-// #docregion injectables, injectable
-@Injectable()
-export class UserContextService {
-// #enddocregion injectables, injectable
- name: string;
- role: string;
- loggedInSince: Date;
-
- // #docregion ctor, injectables
- constructor(private userService: UserService, private loggerService: LoggerService) {
- // #enddocregion ctor, injectables
- this.loggedInSince = new Date();
- // #docregion ctor, injectables
- }
- // #enddocregion ctor, injectables
-
- loadUser(userId: number) {
- let user = this.userService.getUserById(userId);
- this.name = user.name;
- this.role = user.role;
-
- this.loggerService.logDebug('loaded User');
- }
-// #docregion injectables, injectable
-}
-// #enddocregion injectables, injectable
diff --git a/docs_app/content/examples/dependency-injection-in-action/src/app/user.service.ts b/docs_app/content/examples/dependency-injection-in-action/src/app/user.service.ts
deleted file mode 100644
index c48b025a08..0000000000
--- a/docs_app/content/examples/dependency-injection-in-action/src/app/user.service.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class UserService {
-
- getUserById(userId: number): any {
- return {name: 'Bombasto', role: 'Admin'};
- }
-}
diff --git a/docs_app/content/examples/dependency-injection-in-action/src/assets/sample.css b/docs_app/content/examples/dependency-injection-in-action/src/assets/sample.css
deleted file mode 100644
index a8b59efd05..0000000000
--- a/docs_app/content/examples/dependency-injection-in-action/src/assets/sample.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.di-component{
- padding: 10px;
- width:300px;
- margin-bottom: 10px;
-}
-div[myHighlight] {
- padding: 2px 8px;
-}
-
-/* Parent Finder */
-.a, .b, .c {
- margin: 6px 2px 6px;
- padding: 4px 6px;
-}
-.a {
- border: solid 2px black;
-}
-.b {
- background: lightblue;
- border: solid 1px darkblue;
- display: flex;
-}
-.c {
- background: pink;
- border: solid 1px red;
-}
\ No newline at end of file
diff --git a/docs_app/content/examples/dependency-injection-in-action/src/index.html b/docs_app/content/examples/dependency-injection-in-action/src/index.html
deleted file mode 100644
index 8b36042f0c..0000000000
--- a/docs_app/content/examples/dependency-injection-in-action/src/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
- Dependency Injection
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/dependency-injection-in-action/src/main.ts b/docs_app/content/examples/dependency-injection-in-action/src/main.ts
deleted file mode 100644
index 0740658908..0000000000
--- a/docs_app/content/examples/dependency-injection-in-action/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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);
diff --git a/docs_app/content/examples/dependency-injection-in-action/stackblitz.json b/docs_app/content/examples/dependency-injection-in-action/stackblitz.json
deleted file mode 100644
index 20569051c1..0000000000
--- a/docs_app/content/examples/dependency-injection-in-action/stackblitz.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "description": "Dependency Injection",
- "files":[
- "!**/*.d.ts",
- "!**/*.js",
- "!**/*.[1].*"
- ],
- "tags":["cookbook"]
-}
diff --git a/docs_app/content/examples/dependency-injection/e2e/app.e2e-spec.ts b/docs_app/content/examples/dependency-injection/e2e/app.e2e-spec.ts
deleted file mode 100644
index 12fe6ae474..0000000000
--- a/docs_app/content/examples/dependency-injection/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-'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;
-
- beforeAll(function () {
- browser.get('');
- });
-
- describe('Cars:', function() {
-
- it('DI car displays as expected', function () {
- expectedMsg = 'DI car with 4 cylinders and Flintstone tires.';
- expect(element(by.css('#di')).getText()).toEqual(expectedMsg);
- });
-
- it('No DI car displays as expected', function () {
- expectedMsg = 'No DI car with 4 cylinders and Flintstone tires.';
- expect(element(by.css('#nodi')).getText()).toEqual(expectedMsg);
- });
-
- it('Injector car displays as expected', function () {
- expectedMsg = 'Injector car with 4 cylinders and Flintstone tires.';
- expect(element(by.css('#injector')).getText()).toEqual(expectedMsg);
- });
-
- it('Factory car displays as expected', function () {
- expectedMsg = 'Factory car with 4 cylinders and Flintstone tires.';
- expect(element(by.css('#factory')).getText()).toEqual(expectedMsg);
- });
-
- it('Simple car displays as expected', function () {
- expectedMsg = 'Simple car with 4 cylinders and Flintstone tires.';
- expect(element(by.css('#simple')).getText()).toEqual(expectedMsg);
- });
-
- it('Super car displays as expected', function () {
- expectedMsg = 'Super car with 12 cylinders and Flintstone tires.';
- expect(element(by.css('#super')).getText()).toEqual(expectedMsg);
- });
-
- it('Test car displays as expected', function () {
- expectedMsg = 'Test car with 8 cylinders and YokoGoodStone tires.';
- expect(element(by.css('#test')).getText()).toEqual(expectedMsg);
- });
- });
-
- describe('Other Injections:', function() {
- it('DI car displays as expected', function () {
- expectedMsg = 'DI car with 4 cylinders and Flintstone tires.';
- expect(element(by.css('#car')).getText()).toEqual(expectedMsg);
- });
-
- it('Hero displays as expected', function () {
- expectedMsg = 'Mr. Nice';
- expect(element(by.css('#hero')).getText()).toEqual(expectedMsg);
- });
-
- it('Optional injection displays as expected', function () {
- expectedMsg = 'R.O.U.S.\'s? I don\'t think they exist!';
- expect(element(by.css('#rodent')).getText()).toEqual(expectedMsg);
- });
- });
-
- describe('Tests:', function() {
-
- it('Tests display as expected', function () {
- expectedMsgRx = /Tests passed/;
- expect(element(by.css('#tests')).getText()).toMatch(expectedMsgRx);
- });
-
- });
-
- describe('Provider variations:', function() {
-
- it('P1 (class) displays as expected', function () {
- expectedMsg = 'Hello from logger provided with Logger class';
- expect(element(by.css('#p1')).getText()).toEqual(expectedMsg);
- });
-
- it('P3 (provide) displays as expected', function () {
- expectedMsg = 'Hello from logger provided with useClass:Logger';
- expect(element(by.css('#p3')).getText()).toEqual(expectedMsg);
- });
-
- it('P4 (useClass:BetterLogger) displays as expected', function () {
- expectedMsg = 'Hello from logger provided with useClass:BetterLogger';
- expect(element(by.css('#p4')).getText()).toEqual(expectedMsg);
- });
-
- it('P5 (useClass:EvenBetterLogger - dependency) displays as expected', function () {
- expectedMsg = 'Message to Bob: Hello from EvenBetterlogger';
- expect(element(by.css('#p5')).getText()).toEqual(expectedMsg);
- });
-
- it('P6a (no alias) displays as expected', function () {
- expectedMsg = 'Hello OldLogger (but we want NewLogger)';
- expect(element(by.css('#p6a')).getText()).toEqual(expectedMsg);
- });
-
- it('P6b (alias) displays as expected', function () {
- expectedMsg = 'Hello from NewLogger (via aliased OldLogger)';
- expect(element(by.css('#p6b')).getText()).toEqual(expectedMsg);
- });
-
- it('P7 (useValue) displays as expected', function () {
- expectedMsg = 'Silent logger says "Shhhhh!". Provided via "useValue"';
- expect(element(by.css('#p7')).getText()).toEqual(expectedMsg);
- });
-
- it('P8 (useFactory) displays as expected', function () {
- expectedMsg = 'Hero service injected successfully via heroServiceProvider';
- expect(element(by.css('#p8')).getText()).toEqual(expectedMsg);
- });
-
- it('P9 (InjectionToken) displays as expected', function () {
- expectedMsg = 'APP_CONFIG Application title is Dependency Injection';
- expect(element(by.css('#p9')).getText()).toEqual(expectedMsg);
- });
-
- it('P10 (optional dependency) displays as expected', function () {
- expectedMsg = 'Optional logger was not available';
- expect(element(by.css('#p10')).getText()).toEqual(expectedMsg);
- });
- });
-
- describe('User/Heroes:', function() {
- it('User is Bob - unauthorized', function () {
- expectedMsgRx = /Bob, is not authorized/;
- expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx);
- });
-
- it('should have button', function () {
- expect(element.all(by.cssContainingText('button', 'Next User'))
- .get(0).isDisplayed()).toBe(true, '\'Next User\' button should be displayed');
- });
-
- it('unauthorized user should have multiple unauthorized heroes', function () {
- let heroes = element.all(by.css('#unauthorized app-hero-list div'));
- expect(heroes.count()).toBeGreaterThan(0);
- });
-
- it('unauthorized user should have no secret heroes', function () {
- let heroes = element.all(by.css('#unauthorized app-hero-list div'));
- expect(heroes.count()).toBeGreaterThan(0);
-
- let filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
- return elem.getText().then((text: string) => {
- return /secret/.test(text);
- });
- });
-
- expect(filteredHeroes.count()).toEqual(0);
- });
-
- it('unauthorized user should have no authorized heroes listed', function () {
- expect(element.all(by.css('#authorized app-hero-list div')).count()).toEqual(0);
- });
-
- describe('after button click', function() {
-
- beforeAll(function (done: any) {
- let buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0);
- buttonEle.click().then(done, done);
- });
-
- it('User is Alice - authorized', function () {
- expectedMsgRx = /Alice, is authorized/;
- expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx);
- });
-
- it('authorized user should have multiple authorized heroes ', function () {
- let heroes = element.all(by.css('#authorized app-hero-list div'));
- expect(heroes.count()).toBeGreaterThan(0);
- });
-
- it('authorized user should have multiple authorized heroes with tree-shakeable HeroesService', function () {
- let heroes = element.all(by.css('#tspAuthorized app-hero-list div'));
- expect(heroes.count()).toBeGreaterThan(0);
- });
-
- it('authorized user should have secret heroes', function () {
- let heroes = element.all(by.css('#authorized app-hero-list div'));
- expect(heroes.count()).toBeGreaterThan(0);
-
- let filteredHeroes = heroes.filter(function(elem: ElementFinder, index: number) {
- return elem.getText().then(function(text: string) {
- return /secret/.test(text);
- });
- });
-
- expect(filteredHeroes.count()).toBeGreaterThan(0);
- });
-
- it('authorized user should have no unauthorized heroes listed', function () {
- expect(element.all(by.css('#unauthorized app-hero-list div')).count()).toEqual(0);
- });
- });
- });
-});
diff --git a/docs_app/content/examples/dependency-injection/example-config.json b/docs_app/content/examples/dependency-injection/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/dependency-injection/src/app/app-config.ts b/docs_app/content/examples/dependency-injection/src/app/app-config.ts
deleted file mode 100644
index 81c0479ffd..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/app-config.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- Must put this interface in its own file instead of app.config.ts
- or else TypeScript gives a (bogus) warning:
- WARNING in ./src/app/... .ts
- "export 'AppConfig' was not found in './app.config'
-*/
-export interface AppConfig {
- apiEndpoint: string;
- title: string;
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/app.component.1.ts b/docs_app/content/examples/dependency-injection/src/app/app.component.1.ts
deleted file mode 100644
index a33782dc90..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/app.component.1.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- template: `
- {{title}}
-
-
- `
-})
-
-export class AppComponent {
- title = 'Dependency Injection';
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/app.component.2.ts b/docs_app/content/examples/dependency-injection/src/app/app.component.2.ts
deleted file mode 100644
index c8a2c996b2..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/app.component.2.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// #docregion
-// #docregion imports
-import { Component, Inject } from '@angular/core';
-
-import { APP_CONFIG, AppConfig } from './app.config';
-// #enddocregion imports
-
-@Component({
- selector: 'app-root',
- template: `
- {{title}}
-
-
- `
-})
-export class AppComponent {
- title: string;
-
- // #docregion ctor
- constructor(@Inject(APP_CONFIG) config: AppConfig) {
- this.title = config.title;
- }
- // #enddocregion ctor
-}
-// #enddocregion
-
diff --git a/docs_app/content/examples/dependency-injection/src/app/app.component.ts b/docs_app/content/examples/dependency-injection/src/app/app.component.ts
deleted file mode 100644
index b69856fa0a..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/app.component.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion imports
-import { Component, Inject } from '@angular/core';
-
-import { APP_CONFIG, AppConfig } from './app.config';
-import { UserService } from './user.service';
-// #enddocregion imports
-
-@Component({
- selector: 'app-root',
- template: `
- {{title}}
-
-
-
- User
-
- {{userInfo}}
- Next User
-
-
-
-
-
- `
-})
-export class AppComponent {
- title: string;
-
- // #docregion ctor
- constructor(
- @Inject(APP_CONFIG) config: AppConfig,
- private userService: UserService) {
- this.title = config.title;
- }
- // #enddocregion ctor
-
- get isAuthorized() { return this.user.isAuthorized; }
- nextUser() { this.userService.getNewUser(); }
- get user() { return this.userService.user; }
-
- get userInfo() {
- return `Current user, ${this.user.name}, is ` +
- `${this.isAuthorized ? '' : 'not'} authorized. `;
- }
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/app.config.ts b/docs_app/content/examples/dependency-injection/src/app/app.config.ts
deleted file mode 100644
index 74af1cb194..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/app.config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { AppConfig } from './app-config';
-export { AppConfig } from './app-config';
-
-// #docregion token
-import { InjectionToken } from '@angular/core';
-
-export const APP_CONFIG = new InjectionToken('app.config');
-// #enddocregion token
-
-// #docregion config
-export const HERO_DI_CONFIG: AppConfig = {
- apiEndpoint: 'api.heroes.com',
- title: 'Dependency Injection'
-};
diff --git a/docs_app/content/examples/dependency-injection/src/app/app.module.ts b/docs_app/content/examples/dependency-injection/src/app/app.module.ts
deleted file mode 100644
index 85becdb3b9..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/app.module.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-// #docplaster
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { APP_CONFIG, HERO_DI_CONFIG } from './app.config';
-import { AppComponent } from './app.component';
-import { CarComponent } from './car/car.component';
-import { HeroesComponent } from './heroes/heroes.component';
-import { HeroesTspComponent } from './heroes/heroes-tsp.component';
-import { HeroListComponent } from './heroes/hero-list.component';
-import { InjectorComponent } from './injector.component';
-import { Logger } from './logger.service';
-import { TestComponent } from './test.component';
-import { UserService } from './user.service';
-
-import { ProvidersModule } from './providers.module';
-
-// #docregion ngmodule
-@NgModule({
- imports: [
- BrowserModule,
- ProvidersModule
- ],
- declarations: [
- AppComponent,
- CarComponent,
- HeroesComponent,
- // #enddocregion ngmodule
- HeroesTspComponent,
- HeroListComponent,
- InjectorComponent,
- TestComponent
- // #docregion ngmodule
- ],
- // #docregion providers, providers-2
- providers: [
- // #enddocregion providers
- Logger,
- // #docregion providers
- UserService,
- { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
- ],
- // #enddocregion providers, providers-2
- exports: [ CarComponent, HeroesComponent ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/dependency-injection/src/app/car/car-creations.ts b/docs_app/content/examples/dependency-injection/src/app/car/car-creations.ts
deleted file mode 100644
index c758c72951..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/car/car-creations.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// Examples with car and engine variations
-
-// #docplaster
-import { Car, Engine, Tires } from './car';
-
-///////// example 1 ////////////
-export function simpleCar() {
- // #docregion car-ctor-instantiation
- // Simple car with 4 cylinders and Flintstone tires.
- let car = new Car(new Engine(), new Tires());
- // #enddocregion car-ctor-instantiation
- car.description = 'Simple';
- return car;
-}
-
-
-///////// example 2 ////////////
-// #docregion car-ctor-instantiation-with-param
- class Engine2 {
- constructor(public cylinders: number) { }
- }
-// #enddocregion car-ctor-instantiation-with-param
-export function superCar() {
-// #docregion car-ctor-instantiation-with-param
- // Super car with 12 cylinders and Flintstone tires.
- let bigCylinders = 12;
- let car = new Car(new Engine2(bigCylinders), new Tires());
-// #enddocregion car-ctor-instantiation-with-param
- car.description = 'Super';
- return car;
-}
-
-/////////// example 3 //////////
- // #docregion car-ctor-instantiation-with-mocks
- class MockEngine extends Engine { cylinders = 8; }
- class MockTires extends Tires { make = 'YokoGoodStone'; }
-
- // #enddocregion car-ctor-instantiation-with-mocks
-export function testCar() {
- // #docregion car-ctor-instantiation-with-mocks
- // Test car with 8 cylinders and YokoGoodStone tires.
- let car = new Car(new MockEngine(), new MockTires());
- // #enddocregion car-ctor-instantiation-with-mocks
- car.description = 'Test';
- return car;
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/car/car-factory.ts b/docs_app/content/examples/dependency-injection/src/app/car/car-factory.ts
deleted file mode 100644
index 06daafe63b..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/car/car-factory.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// #docregion
-import { Engine, Tires, Car } from './car';
-
-// BAD pattern!
-export class CarFactory {
- createCar() {
- let car = new Car(this.createEngine(), this.createTires());
- car.description = 'Factory';
- return car;
- }
-
- createEngine() {
- return new Engine();
- }
-
- createTires() {
- return new Tires();
- }
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/car/car-injector.ts b/docs_app/content/examples/dependency-injection/src/app/car/car-injector.ts
deleted file mode 100644
index 4f7498ee4e..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/car/car-injector.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { ReflectiveInjector } from '@angular/core';
-
-import { Car, Engine, Tires } from './car';
-import { Logger } from '../logger.service';
-
-// #docregion injector
-export function useInjector() {
- let injector: ReflectiveInjector;
- // #enddocregion injector
- /*
- // #docregion injector-no-new
- // Cannot instantiate an ReflectiveInjector like this!
- let injector = new ReflectiveInjector([Car, Engine, Tires]);
- // #enddocregion injector-no-new
- */
- // #docregion injector, injector-create-and-call
- injector = ReflectiveInjector.resolveAndCreate([Car, Engine, Tires]);
- // #docregion injector-call
- let car = injector.get(Car);
- // #enddocregion injector-call, injector-create-and-call
- car.description = 'Injector';
-
- injector = ReflectiveInjector.resolveAndCreate([Logger]);
- let logger = injector.get(Logger);
- logger.log('Injector car.drive() said: ' + car.drive());
- return car;
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/car/car-no-di.ts b/docs_app/content/examples/dependency-injection/src/app/car/car-no-di.ts
deleted file mode 100644
index 9026edebc2..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/car/car-no-di.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// Car without DI
-import { Engine, Tires } from './car';
-
-// #docregion car
-export class Car {
-
- // #docregion car-ctor
- public engine: Engine;
- public tires: Tires;
- public description = 'No DI';
-
- constructor() {
- this.engine = new Engine();
- this.tires = new Tires();
- }
- // #enddocregion car-ctor
-
- // Method using the engine and tires
- drive() {
- return `${this.description} car with ` +
- `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;
- }
-}
-// #enddocregion car
diff --git a/docs_app/content/examples/dependency-injection/src/app/car/car.component.ts b/docs_app/content/examples/dependency-injection/src/app/car/car.component.ts
deleted file mode 100644
index 481ccd6cee..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/car/car.component.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-import { Car, Engine, Tires } from './car';
-import { Car as CarNoDi } from './car-no-di';
-import { CarFactory } from './car-factory';
-
-import { testCar,
- simpleCar,
- superCar } from './car-creations';
-
-import { useInjector } from './car-injector';
-
-
-@Component({
- selector: 'app-car',
- template: `
- Cars
- {{car.drive()}}
- {{noDiCar.drive()}}
- {{injectorCar.drive()}}
- {{factoryCar.drive()}}
- {{simpleCar.drive()}}
- {{superCar.drive()}}
- {{testCar.drive()}}
- `,
- providers: [Car, Engine, Tires]
-})
-export class CarComponent {
- factoryCar = (new CarFactory).createCar();
- injectorCar = useInjector();
- noDiCar = new CarNoDi;
- simpleCar = simpleCar();
- superCar = superCar();
- testCar = testCar();
-
- constructor(public car: Car) {}
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/car/car.ts b/docs_app/content/examples/dependency-injection/src/app/car/car.ts
deleted file mode 100644
index 37162c570b..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/car/car.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Injectable } from '@angular/core';
-
-export class Engine {
- public cylinders = 4;
-}
-
-export class Tires {
- public make = 'Flintstone';
- public model = 'Square';
-}
-
-@Injectable()
-export class Car {
- // #docregion car-ctor
- public description = 'DI';
-
- constructor(public engine: Engine, public tires: Tires) { }
- // #enddocregion car-ctor
-
- // Method using the engine and tires
- drive() {
- return `${this.description} car with ` +
- `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;
- }
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/dummy.module.ts b/docs_app/content/examples/dependency-injection/src/app/dummy.module.ts
deleted file mode 100644
index e65fdf3c46..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/dummy.module.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-
-/// Dummy modules to satisfy Angular Language Service
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AppModule } from './app.module';
-
-////////
-
-import { AppComponent as AppComponent1 } from './app.component.1';
-
-@NgModule({
- imports: [ CommonModule, AppModule ],
- declarations: [ AppComponent1 ]
-})
-export class DummyModule1 {}
-
-/////////
-
-import { AppComponent as AppComponent2 } from './app.component.2';
-
-@NgModule({
- imports: [ CommonModule, AppModule ],
- declarations: [ AppComponent2 ]
-})
-export class DummyModule2 {}
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/dummy.module.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/dummy.module.ts
deleted file mode 100644
index 2e1f001771..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/dummy.module.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-
-/// Dummy modules to satisfy Angular Language Service
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-////////
-
-import { HeroListComponent as HeroListComponent1 } from './hero-list.component.1';
-
-@NgModule({
- imports: [ CommonModule ],
- declarations: [ HeroListComponent1 ],
- exports: [ HeroListComponent1 ]
-})
-export class DummyModule1 {}
-
-/////////
-
-import { HeroListComponent as HeroListComponent2 } from './hero-list.component.2';
-
-@NgModule({
- imports: [ CommonModule ],
- declarations: [ HeroListComponent2 ]
-})
-export class DummyModule2 {}
-
-/////////
-
-import { HeroesComponent as HeroesComponent1 } from './heroes.component.1';
-
-@NgModule({
- imports: [ CommonModule, DummyModule1 ],
- declarations: [ HeroesComponent1 ]
-})
-export class DummyModule3 {}
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts
deleted file mode 100644
index 5c216f4d03..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-import { HEROES } from './mock-heroes';
-
-@Component({
- selector: 'app-hero-list',
- template: `
-
- {{hero.id}} - {{hero.name}}
-
- `
-})
-// #docregion class
-export class HeroListComponent {
- heroes = HEROES;
-}
-// #enddocregion class
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts
deleted file mode 100644
index 11f27ed4b1..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-import { Hero } from './hero';
-// #enddocregion
-import { HeroService } from './hero.service.1';
-/*
-// #docregion
-import { HeroService } from './hero.service';
-// #enddocregion
-*/
-// #docregion
-
-@Component({
- selector: 'app-hero-list',
- template: `
-
- {{hero.id}} - {{hero.name}}
-
- `
-})
-export class HeroListComponent {
- heroes: Hero[];
-
- // #docregion ctor
- constructor(heroService: HeroService) {
- this.heroes = heroService.getHeroes();
- }
- // #enddocregion ctor
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts
deleted file mode 100644
index 4536a04489..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/* tslint:disable:one-line */
-// #docregion
-import { Component } from '@angular/core';
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
-
-@Component({
- selector: 'app-hero-list',
- template: `
-
- {{hero.id}} - {{hero.name}}
- ({{hero.isSecret ? 'secret' : 'public'}})
-
- `,
-})
-export class HeroListComponent {
- heroes: Hero[];
-
- // #docregion ctor-signature
- constructor(heroService: HeroService)
- // #enddocregion ctor-signature
- {
- this.heroes = heroService.getHeroes();
- }
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.module.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.module.ts
deleted file mode 100644
index 7f422d5d79..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.module.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-
-@NgModule({})
-export class HeroModule {
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts
deleted file mode 100644
index c8136b7db5..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.0.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
- providedIn: 'root',
-})
-export class HeroService {
- constructor() { }
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts
deleted file mode 100644
index 908d75ee65..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.1.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { HEROES } from './mock-heroes';
-
-@Injectable({
- providedIn: 'root',
-})
-export class HeroService {
- getHeroes() { return HEROES; }
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts
deleted file mode 100644
index a4c1adcd1b..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.2.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { HEROES } from './mock-heroes';
-import { Logger } from '../logger.service';
-
-@Injectable({
- providedIn: 'root',
-})
-export class HeroService {
-
- // #docregion ctor
- constructor(private logger: Logger) { }
- // #enddocregion ctor
-
- getHeroes() {
- this.logger.log('Getting heroes ...');
- return HEROES;
- }
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts
deleted file mode 100644
index 2d43704de0..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.3.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { HEROES } from './mock-heroes';
-
-@Injectable({
- // we declare that this service should be created
- // by the root application injector.
-
- providedIn: 'root',
-})
-export class HeroService {
- getHeroes() { return HEROES; }
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.4.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.4.ts
deleted file mode 100644
index 0b77c78545..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.4.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { HeroModule } from './hero.module';
-import { HEROES } from './mock-heroes';
-
-@Injectable({
- // we declare that this service should be created
- // by any injector that includes HeroModule.
-
- providedIn: HeroModule,
-})
-export class HeroService {
- getHeroes() { return HEROES; }
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts
deleted file mode 100644
index 6de4ebee90..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.provider.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/* tslint:disable:one-line */
-// #docregion
-import { HeroService } from './hero.service';
-import { Logger } from '../logger.service';
-import { UserService } from '../user.service';
-
-// #docregion factory
-let heroServiceFactory = (logger: Logger, userService: UserService) => {
- return new HeroService(logger, userService.user.isAuthorized);
-};
-// #enddocregion factory
-
-// #docregion provider
-export let heroServiceProvider =
- { provide: HeroService,
- useFactory: heroServiceFactory,
- deps: [Logger, UserService]
- };
-// #enddocregion provider
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.ts
deleted file mode 100644
index 6c6fc27037..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.service.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { HEROES } from './mock-heroes';
-import { Logger } from '../logger.service';
-import { UserService } from '../user.service';
-
-@Injectable({
- providedIn: 'root',
- useFactory: (logger: Logger, userService: UserService) =>
- new HeroService(logger, userService.user.isAuthorized),
- deps: [Logger, UserService],
-})
-export class HeroService {
- // #docregion internals
- constructor(
- private logger: Logger,
- private isAuthorized: boolean) { }
-
- getHeroes() {
- let auth = this.isAuthorized ? 'authorized ' : 'unauthorized';
- this.logger.log(`Getting heroes for ${auth} user.`);
- return HEROES.filter(hero => this.isAuthorized || !hero.isSecret);
- }
- // #enddocregion internals
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/hero.ts
deleted file mode 100644
index 5c49328241..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/hero.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// #docregion
-export class Hero {
- id: number;
- name: string;
- isSecret = false;
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/heroes-tsp.component.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/heroes-tsp.component.ts
deleted file mode 100644
index 4d6c01b231..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/heroes-tsp.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-
-/**
- * A version of `HeroesComponent` that does not provide the `HeroService` (and thus relies on its
- * `Injectable`-declared provider) in order to function.
- *
- * TSP stands for Tree-Shakeable Provider.
- */
-@Component({
- selector: 'app-heroes-tsp',
- template: `
- Heroes
-
- `
-})
-export class HeroesTspComponent { }
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts
deleted file mode 100644
index 962f95fcb3..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// #docplaster
-// #docregion, v1
-import { Component } from '@angular/core';
-// #enddocregion v1
-import { HeroService } from './hero.service';
-
-// #docregion v1
-@Component({
- selector: 'app-heroes',
- // #enddocregion v1
- providers: [ HeroService ],
- // #docregion v1
- template: `
- Heroes
-
- `
-})
-export class HeroesComponent { }
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/heroes.component.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/heroes.component.ts
deleted file mode 100644
index 97040c09f0..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/heroes.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-import { heroServiceProvider } from './hero.service.provider';
-
-@Component({
- selector: 'app-heroes',
- providers: [ heroServiceProvider ],
- template: `
- Heroes
-
- `
-})
-export class HeroesComponent { }
diff --git a/docs_app/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts b/docs_app/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts
deleted file mode 100644
index a836faa1bd..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/heroes/mock-heroes.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import { Hero } from './hero';
-
-export const HEROES: Hero[] = [
- { id: 11, isSecret: false, name: 'Mr. Nice' },
- { id: 12, isSecret: false, name: 'Narco' },
- { id: 13, isSecret: false, name: 'Bombasto' },
- { id: 14, isSecret: false, name: 'Celeritas' },
- { id: 15, isSecret: false, name: 'Magneta' },
- { id: 16, isSecret: false, name: 'RubberMan' },
- { id: 17, isSecret: false, name: 'Dynama' },
- { id: 18, isSecret: true, name: 'Dr IQ' },
- { id: 19, isSecret: true, name: 'Magma' },
- { id: 20, isSecret: true, name: 'Tornado' }
-];
diff --git a/docs_app/content/examples/dependency-injection/src/app/injector.component.ts b/docs_app/content/examples/dependency-injection/src/app/injector.component.ts
deleted file mode 100644
index 403a6c427b..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/injector.component.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-// #docplaster
-// #docregion
-import { Component, Injector, OnInit } from '@angular/core';
-
-import { Car, Engine, Tires } from './car/car';
-import { Hero } from './heroes/hero';
-import { HeroService } from './heroes/hero.service';
-import { heroServiceProvider } from './heroes/hero.service.provider';
-import { Logger } from './logger.service';
-
-// #docregion injector
-@Component({
- selector: 'app-injectors',
- template: `
- Other Injections
- {{car.drive()}}
- {{hero.name}}
- {{rodent}}
- `,
- providers: [Car, Engine, Tires, heroServiceProvider, Logger]
-})
-export class InjectorComponent implements OnInit {
- car: Car;
-
- // #docregion get-hero-service
- heroService: HeroService;
- // #enddocregion get-hero-service
- hero: Hero;
-
- constructor(private injector: Injector) { }
-
- ngOnInit() {
- this.car = this.injector.get(Car);
- this.heroService = this.injector.get(HeroService);
- this.hero = this.heroService.getHeroes()[0];
- }
-
- get rodent() {
- let rousDontExist = `R.O.U.S.'s? I don't think they exist!`;
- return this.injector.get(ROUS, rousDontExist);
- }
-}
-// #enddocregion injector
-
-/**
- * R.O.U.S. - Rodents Of Unusual Size
- * // https://www.youtube.com/watch?v=BOv5ZjAOpC8
- */
-class ROUS { }
diff --git a/docs_app/content/examples/dependency-injection/src/app/logger.service.ts b/docs_app/content/examples/dependency-injection/src/app/logger.service.ts
deleted file mode 100644
index e943523ad2..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/logger.service.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class Logger {
- logs: string[] = []; // capture logs for testing
-
- log(message: string) {
- this.logs.push(message);
- console.log(message);
- }
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/providers.component.ts b/docs_app/content/examples/dependency-injection/src/app/providers.component.ts
deleted file mode 100644
index 6b40f04787..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/providers.component.ts
+++ /dev/null
@@ -1,280 +0,0 @@
-/*
- * A collection of demo components showing different ways to provide services
- * in @Component metadata
- */
-import { Component, Inject, Injectable, OnInit } from '@angular/core';
-
-import {
- APP_CONFIG,
- AppConfig,
- HERO_DI_CONFIG } from './app.config';
-
-import { HeroService } from './heroes/hero.service';
-import { heroServiceProvider } from './heroes/hero.service.provider';
-import { Logger } from './logger.service';
-import { UserService } from './user.service';
-
-const template = '{{log}}';
-
-@Component({
- selector: 'provider-1',
- template: template,
- // #docregion providers-1, providers-logger
- providers: [Logger]
- // #enddocregion providers-1, providers-logger
-})
-export class Provider1Component {
- log: string;
- constructor(logger: Logger) {
- logger.log('Hello from logger provided with Logger class');
- this.log = logger.logs[0];
- }
-}
-
-//////////////////////////////////////////
-
-@Component({
- selector: 'provider-3',
- template: template,
- providers:
- // #docregion providers-3
- [{ provide: Logger, useClass: Logger }]
- // #enddocregion providers-3
-})
-export class Provider3Component {
- log: string;
- constructor(logger: Logger) {
- logger.log('Hello from logger provided with useClass:Logger');
- this.log = logger.logs[0];
- }
-}
-
-//////////////////////////////////////////
-export class BetterLogger extends Logger {}
-
-@Component({
- selector: 'provider-4',
- template: template,
- providers:
- // #docregion providers-4
- [{ provide: Logger, useClass: BetterLogger }]
- // #enddocregion providers-4
-})
-export class Provider4Component {
- log: string;
- constructor(logger: Logger) {
- logger.log('Hello from logger provided with useClass:BetterLogger');
- this.log = logger.logs[0];
- }
-}
-
-//////////////////////////////////////////
-
-// #docregion EvenBetterLogger
-@Injectable()
-export class EvenBetterLogger extends Logger {
- constructor(private userService: UserService) { super(); }
-
- log(message: string) {
- let name = this.userService.user.name;
- super.log(`Message to ${name}: ${message}`);
- }
-}
-// #enddocregion EvenBetterLogger
-
-@Component({
- selector: 'provider-5',
- template: template,
- providers:
- // #docregion providers-5
- [ UserService,
- { provide: Logger, useClass: EvenBetterLogger }]
- // #enddocregion providers-5
-})
-export class Provider5Component {
- log: string;
- constructor(logger: Logger) {
- logger.log('Hello from EvenBetterlogger');
- this.log = logger.logs[0];
- }
-}
-
-//////////////////////////////////////////
-
-export class NewLogger extends Logger {}
-
-export class OldLogger {
- logs: string[] = [];
- log(message: string) {
- throw new Error('Should not call the old logger!');
- };
-}
-
-@Component({
- selector: 'provider-6a',
- template: template,
- providers:
- // #docregion providers-6a
- [ NewLogger,
- // Not aliased! Creates two instances of `NewLogger`
- { provide: OldLogger, useClass: NewLogger}]
- // #enddocregion providers-6a
-})
-export class Provider6aComponent {
- log: string;
- constructor(newLogger: NewLogger, oldLogger: OldLogger) {
- if (newLogger === oldLogger) {
- throw new Error('expected the two loggers to be different instances');
- }
- oldLogger.log('Hello OldLogger (but we want NewLogger)');
- // The newLogger wasn't called so no logs[]
- // display the logs of the oldLogger.
- this.log = newLogger.logs[0] || oldLogger.logs[0];
- }
-}
-
-@Component({
- selector: 'provider-6b',
- template: template,
- providers:
- // #docregion providers-6b
- [ NewLogger,
- // Alias OldLogger w/ reference to NewLogger
- { provide: OldLogger, useExisting: NewLogger}]
- // #enddocregion providers-6b
-})
-export class Provider6bComponent {
- log: string;
- constructor(newLogger: NewLogger, oldLogger: OldLogger) {
- if (newLogger !== oldLogger) {
- throw new Error('expected the two loggers to be the same instance');
- }
- oldLogger.log('Hello from NewLogger (via aliased OldLogger)');
- this.log = newLogger.logs[0];
- }
-}
-
-//////////////////////////////////////////
-
-// #docregion silent-logger
-// An object in the shape of the logger service
-export function SilentLoggerFn() {}
-
-const silentLogger = {
- logs: ['Silent logger says "Shhhhh!". Provided via "useValue"'],
- log: SilentLoggerFn
-};
-// #enddocregion silent-logger
-
-@Component({
- selector: 'provider-7',
- template: template,
- providers:
- // #docregion providers-7
- [{ provide: Logger, useValue: silentLogger }]
- // #enddocregion providers-7
-})
-export class Provider7Component {
- log: string;
- constructor(logger: Logger) {
- logger.log('Hello from logger provided with useValue');
- this.log = logger.logs[0];
- }
-}
-
-/////////////////
-
-@Component({
- selector: 'provider-8',
- template: template,
- providers: [heroServiceProvider, Logger, UserService]
-})
-export class Provider8Component {
- // must be true else this component would have blown up at runtime
- log = 'Hero service injected successfully via heroServiceProvider';
-
- // #docregion provider-8-ctor
- constructor(heroService: HeroService) { }
- // #enddocregion provider-8-ctor
-}
-
-/////////////////
-
-@Component({
- selector: 'provider-9',
- template: template,
- /*
- // #docregion providers-9-interface
- // FAIL! Can't use interface as provider token
- [{ provide: AppConfig, useValue: HERO_DI_CONFIG })]
- // #enddocregion providers-9-interface
- */
- // #docregion providers-9
- providers: [{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }]
- // #enddocregion providers-9
-})
-export class Provider9Component implements OnInit {
- log: string;
- /*
- // #docregion provider-9-ctor-interface
- // FAIL! Can't inject using the interface as the parameter type
- constructor(private config: AppConfig){ }
- // #enddocregion provider-9-ctor-interface
- */
- // #docregion provider-9-ctor
- constructor(@Inject(APP_CONFIG) private config: AppConfig) { }
- // #enddocregion provider-9-ctor
-
- ngOnInit() {
- this.log = 'APP_CONFIG Application title is ' + this.config.title;
- }
-}
-
-//////////////////////////////////////////
-// Sample providers 1 to 7 illustrate a required logger dependency.
-// Optional logger, can be null
-// #docregion import-optional
-import { Optional } from '@angular/core';
-// #enddocregion import-optional
-
-let some_message = 'Hello from the injected logger';
-
-@Component({
- selector: 'provider-10',
- template: template,
- providers: [{ provide: Logger, useValue: null }]
-})
-export class Provider10Component implements OnInit {
- log: string;
- // #docregion provider-10-ctor
- constructor(@Optional() private logger: Logger) {
- if (this.logger) {
- this.logger.log(some_message);
- }
- }
- // #enddocregion provider-10-ctor
-
- ngOnInit() {
- this.log = this.logger ? this.logger.logs[0] : 'Optional logger was not available';
- }
-}
-
-/////////////////
-
-@Component({
- selector: 'app-providers',
- template: `
- Provider variations
-
-
-
-
-
-
-
-
-
-
- `
-})
-export class ProvidersComponent { }
diff --git a/docs_app/content/examples/dependency-injection/src/app/providers.module.ts b/docs_app/content/examples/dependency-injection/src/app/providers.module.ts
deleted file mode 100644
index 5dc27192a8..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/providers.module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import {
- Provider1Component,
- Provider3Component,
- Provider4Component,
- Provider5Component,
- Provider6aComponent,
- Provider6bComponent,
- Provider7Component,
- Provider8Component,
- Provider9Component,
- Provider10Component,
- ProvidersComponent,
-} from './providers.component';
-
-@NgModule({
- declarations: [
- Provider1Component,
- Provider3Component,
- Provider4Component,
- Provider5Component,
- Provider6aComponent,
- Provider6bComponent,
- Provider7Component,
- Provider8Component,
- Provider9Component,
- Provider10Component,
- ProvidersComponent,
- ],
- exports: [ ProvidersComponent ]
- })
- export class ProvidersModule {}
diff --git a/docs_app/content/examples/dependency-injection/src/app/test.component.ts b/docs_app/content/examples/dependency-injection/src/app/test.component.ts
deleted file mode 100644
index fcc7b5cc1d..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/test.component.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/* tslint:disable */
-// Simulate a simple test
-// Reader should look to the testing chapter for the real thing
-
-import { Component } from '@angular/core';
-
-import { Hero } from './heroes/hero';
-import { HeroService } from './heroes/hero.service';
-import { HeroListComponent } from './heroes/hero-list.component';
-
-@Component({
- selector: 'app-tests',
- template: `
- Tests
- Tests {{results.pass}}: {{results.message}}
- `
-})
-export class TestComponent {
- results = runTests();
-}
-
-/////////////////////////////////////
-function runTests() {
-
- // #docregion spec
- const expectedHeroes = [{name: 'A'}, {name: 'B'}]
- const mockService = {getHeroes: () => expectedHeroes }
-
- it('should have heroes when HeroListComponent created', () => {
- // Pass the mock to the constructor as the Angular injector would
- const component = new HeroListComponent(mockService);
- expect(component.heroes.length).toEqual(expectedHeroes.length);
- });
- // #enddocregion spec
-
- return testResults;
-}
-
-//////////////////////////////////
-// Fake Jasmine infrastructure
-var testName: string;
-var testResults: {pass: string; message: string};
-
-function expect(actual: any) {
- return {
- toEqual: function(expected: any){
- testResults = actual === expected ?
- {pass: 'passed', message: testName} :
- {pass: 'failed', message: `${testName}; expected ${actual} to equal ${expected}.`};
- }
- };
-}
-
-function it(label: string, test: () => void) {
- testName = label;
- test();
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/app.module.ts b/docs_app/content/examples/dependency-injection/src/app/tree-shaking/app.module.ts
deleted file mode 100644
index 31d79ffc23..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/app.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-import { ServiceModule } from './service-and-module';
-
-// #docregion
-@NgModule({
- imports: [
- BrowserModule,
- RouterModule.forRoot([]),
- ServiceModule,
- ],
-})
-export class AppModule {
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service-and-module.ts b/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service-and-module.ts
deleted file mode 100644
index 11100e3ffe..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service-and-module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import { Injectable, NgModule } from '@angular/core';
-
-@Injectable()
-export class Service {
- doSomething(): void {
- }
-}
-
-@NgModule({
- providers: [Service],
-})
-export class ServiceModule {
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service.0.ts b/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service.0.ts
deleted file mode 100644
index 50607d7375..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service.0.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Injectable } from '@angular/core';
-
-// #docregion
-@Injectable({
- providedIn: 'root',
- useFactory: () => new Service('dependency'),
-})
-export class Service {
- constructor(private dep: string) {
- }
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service.ts b/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service.ts
deleted file mode 100644
index 2013120432..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/tree-shaking/service.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Injectable } from '@angular/core';
-
-// #docregion
-@Injectable({
- providedIn: 'root',
-})
-export class Service {
-}
diff --git a/docs_app/content/examples/dependency-injection/src/app/user.service.ts b/docs_app/content/examples/dependency-injection/src/app/user.service.ts
deleted file mode 100644
index 8fdda925db..0000000000
--- a/docs_app/content/examples/dependency-injection/src/app/user.service.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-export class User {
- constructor(
- public name: string,
- public isAuthorized = false) { }
-}
-
-// Todo: get the user; don't 'new' it.
-let alice = new User('Alice', true);
-let bob = new User('Bob', false);
-
-@Injectable()
-export class UserService {
- user = bob; // initial user is Bob
-
- // swap users
- getNewUser() {
- return this.user = this.user === bob ? alice : bob;
- }
-}
diff --git a/docs_app/content/examples/dependency-injection/src/index.html b/docs_app/content/examples/dependency-injection/src/index.html
deleted file mode 100644
index 4736378237..0000000000
--- a/docs_app/content/examples/dependency-injection/src/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
- Dependency Injection
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/dependency-injection/src/main.ts b/docs_app/content/examples/dependency-injection/src/main.ts
deleted file mode 100644
index bf6732fff7..0000000000
--- a/docs_app/content/examples/dependency-injection/src/main.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-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();
-}
-
-// #docregion bootstrap
-platformBrowserDynamic().bootstrapModule(AppModule);
-// #enddocregion bootstrap
diff --git a/docs_app/content/examples/dependency-injection/stackblitz.json b/docs_app/content/examples/dependency-injection/stackblitz.json
deleted file mode 100644
index 131d2a671c..0000000000
--- a/docs_app/content/examples/dependency-injection/stackblitz.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "description": "Dependency Injection",
- "files":[
- "!**/*.d.ts",
- "!**/*.js",
- "!**/*.[0,1,2,3,4].*",
- "!**/dummy.module.ts"
- ],
- "tags": ["dependency", "di"]
-}
diff --git a/docs_app/content/examples/displaying-data/e2e/app.e2e-spec.ts b/docs_app/content/examples/displaying-data/e2e/app.e2e-spec.ts
deleted file mode 100644
index 96c52c5d00..0000000000
--- a/docs_app/content/examples/displaying-data/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-'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';
-
- beforeAll(function () {
- browser.get('');
- });
-
- it('should display correct title: ' + _title, function () {
- expect(element(by.css('h1')).getText()).toEqual(_title);
- });
-
- it('should have correct default hero: ' + _defaultHero, function () {
- expect(element(by.css('h2')).getText()).toContain(_defaultHero);
- });
-
- it('should have heroes', function () {
- let heroEls = element.all(by.css('li'));
- expect(heroEls.count()).not.toBe(0, 'should have heroes');
- });
-
- it('should display "there are many heroes!"', function () {
- expect(element(by.css('ul ~ p')).getText()).toContain('There are many heroes!');
- });
-});
diff --git a/docs_app/content/examples/displaying-data/example-config.json b/docs_app/content/examples/displaying-data/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/displaying-data/src/app/app-ctor.component.ts b/docs_app/content/examples/displaying-data/src/app/app-ctor.component.ts
deleted file mode 100644
index 5fd9d45073..0000000000
--- a/docs_app/content/examples/displaying-data/src/app/app-ctor.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-ctor',
- template: `
- {{title}} [Ctor version]
- My favorite hero is: {{myHero}}
- `
-})
-// #docregion class
-export class AppCtorComponent {
- title: string;
- myHero: string;
-
- constructor() {
- this.title = 'Tour of Heroes';
- this.myHero = 'Windstorm';
- }
-}
diff --git a/docs_app/content/examples/displaying-data/src/app/app.component.1.ts b/docs_app/content/examples/displaying-data/src/app/app.component.1.ts
deleted file mode 100644
index 674ac5622b..0000000000
--- a/docs_app/content/examples/displaying-data/src/app/app.component.1.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- // #docregion template
- template: `
- {{title}}
- My favorite hero is: {{myHero}}
- `
- // #enddocregion template
-})
-export class AppComponent {
- title = 'Tour of Heroes';
- myHero = 'Windstorm';
-}
diff --git a/docs_app/content/examples/displaying-data/src/app/app.component.2.ts b/docs_app/content/examples/displaying-data/src/app/app.component.2.ts
deleted file mode 100644
index 4d4e2d50e5..0000000000
--- a/docs_app/content/examples/displaying-data/src/app/app.component.2.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- // #docregion template
- template: `
- {{title}}
- My favorite hero is: {{myHero}}
- Heroes:
-
- // #docregion li
-
- {{ hero }}
-
- // #enddocregion li
-
- `
- // #enddocregion template
-})
-// #docregion class
-export class AppComponent {
- title = 'Tour of Heroes';
- heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
- myHero = this.heroes[0];
-}
diff --git a/docs_app/content/examples/displaying-data/src/app/app.component.3.ts b/docs_app/content/examples/displaying-data/src/app/app.component.3.ts
deleted file mode 100644
index 435a9be767..0000000000
--- a/docs_app/content/examples/displaying-data/src/app/app.component.3.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-// #docregion import
-import { Hero } from './hero';
-// #enddocregion import
-
-@Component({
- selector: 'app-root',
- // #docregion template
- template: `
- {{title}}
- My favorite hero is: {{myHero.name}}
- Heroes:
-
- `
- // #enddocregion template
-})
-// #docregion class
-export class AppComponent {
- title = 'Tour of Heroes';
- // #docregion heroes
- heroes = [
- new Hero(1, 'Windstorm'),
- new Hero(13, 'Bombasto'),
- new Hero(15, 'Magneta'),
- new Hero(20, 'Tornado')
- ];
- myHero = this.heroes[0];
- // #enddocregion heroes
-}
diff --git a/docs_app/content/examples/displaying-data/src/app/app.component.ts b/docs_app/content/examples/displaying-data/src/app/app.component.ts
deleted file mode 100644
index a03f3de1dd..0000000000
--- a/docs_app/content/examples/displaying-data/src/app/app.component.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// #docplaster
-// #docregion final
-import { Component } from '@angular/core';
-
-import { Hero } from './hero';
-
-@Component({
- selector: 'app-root',
- template: `
- {{title}}
- My favorite hero is: {{myHero.name}}
- Heroes:
-
- // #docregion message
- 3">There are many heroes!
- // #enddocregion message
-`
-})
-export class AppComponent {
- title = 'Tour of Heroes';
- heroes = [
- new Hero(1, 'Windstorm'),
- new Hero(13, 'Bombasto'),
- new Hero(15, 'Magneta'),
- new Hero(20, 'Tornado')
- ];
- myHero = this.heroes[0];
-}
diff --git a/docs_app/content/examples/displaying-data/src/app/app.module.ts b/docs_app/content/examples/displaying-data/src/app/app.module.ts
deleted file mode 100644
index 362f3401fa..0000000000
--- a/docs_app/content/examples/displaying-data/src/app/app.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
- imports: [
- BrowserModule
- ],
- declarations: [
- AppComponent
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/displaying-data/src/app/hero.ts b/docs_app/content/examples/displaying-data/src/app/hero.ts
deleted file mode 100644
index f89d26ad63..0000000000
--- a/docs_app/content/examples/displaying-data/src/app/hero.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-export class Hero {
- constructor(
- // #docregion id
- public id: number,
- // #enddocregion id
- public name: string) { }
-}
-// #enddocregion
diff --git a/docs_app/content/examples/displaying-data/src/index.html b/docs_app/content/examples/displaying-data/src/index.html
deleted file mode 100644
index 3e5cbf7bea..0000000000
--- a/docs_app/content/examples/displaying-data/src/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
- Displaying Data
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/displaying-data/src/main.ts b/docs_app/content/examples/displaying-data/src/main.ts
deleted file mode 100644
index 0740658908..0000000000
--- a/docs_app/content/examples/displaying-data/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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);
diff --git a/docs_app/content/examples/displaying-data/stackblitz.json b/docs_app/content/examples/displaying-data/stackblitz.json
deleted file mode 100644
index 9f2f816f14..0000000000
--- a/docs_app/content/examples/displaying-data/stackblitz.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "description": "Displaying Data",
- "files": [
- "!**/*.d.ts",
- "!**/*.js",
- "!**/app-ctor.component.ts",
- "!**/*.[1,2,3].*"
- ],
- "tags": ["Template"]
-}
diff --git a/docs_app/content/examples/docs-style-guide/e2e/app.e2e-spec.ts b/docs_app/content/examples/docs-style-guide/e2e/app.e2e-spec.ts
deleted file mode 100644
index 68cf02313b..0000000000
--- a/docs_app/content/examples/docs-style-guide/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('Docs Style Guide', function () {
- let _title = 'Authors Style Guide Sample';
-
- beforeAll(function () {
- browser.get('');
- });
-
- it('should display correct title: ' + _title, function () {
- expect(element(by.css('h1')).getText()).toEqual(_title);
- });
-});
diff --git a/docs_app/content/examples/docs-style-guide/example-config.json b/docs_app/content/examples/docs-style-guide/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/docs-style-guide/package.1.json b/docs_app/content/examples/docs-style-guide/package.1.json
deleted file mode 100644
index 8e5d6c6ec3..0000000000
--- a/docs_app/content/examples/docs-style-guide/package.1.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "scripts": {
- "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
- "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
- "lint": "tslint ./src/**/*.ts -t verbose"
- }
-}
diff --git a/docs_app/content/examples/docs-style-guide/second.stackblitz.json b/docs_app/content/examples/docs-style-guide/second.stackblitz.json
deleted file mode 100644
index ca2bfdaf3b..0000000000
--- a/docs_app/content/examples/docs-style-guide/second.stackblitz.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "description": "Second authors style guide stackblitz (non-executing)",
- "files": [
- "src/index.2.html"
- ],
- "main": "src/index.2.html",
- "tags": ["author", "style guide"]
-}
diff --git a/docs_app/content/examples/docs-style-guide/src/app/app.component.css b/docs_app/content/examples/docs-style-guide/src/app/app.component.css
deleted file mode 100644
index cc999f8458..0000000000
--- a/docs_app/content/examples/docs-style-guide/src/app/app.component.css
+++ /dev/null
@@ -1,51 +0,0 @@
-/* #docregion heroes */
-.heroes {
- margin: 0 0 2em 0;
- list-style-type: none;
- padding: 0;
- width: 15em;
-}
-/* #enddocregion heroes */
-
-.heroes li {
- cursor: pointer;
- position: relative;
- left: 0;
- background-color: #EEE;
- margin: .5em;
- padding: .3em 0;
- height: 1.6em;
- border-radius: 4px;
-}
-.heroes li.selected:hover {
- background-color: #BBD8DC !important;
- color: white;
-}
-.heroes li:hover {
- color: #607D8B;
- background-color: #DDD;
- left: .1em;
-}
-.heroes .text {
- position: relative;
- top: -3px;
-}
-.heroes .badge {
- display: inline-block;
- font-size: small;
- color: white;
- padding: 0.8em 0.7em 0 0.7em;
- background-color: #607D8B;
- line-height: 1em;
- position: relative;
- left: -1px;
- top: -4px;
- height: 1.8em;
- margin-right: .8em;
- border-radius: 4px 0 0 4px;
-}
-
-.selected {
- background-color: #CFD8DC !important;
- color: white;
-}
diff --git a/docs_app/content/examples/docs-style-guide/src/app/app.component.html b/docs_app/content/examples/docs-style-guide/src/app/app.component.html
deleted file mode 100644
index 924599f6e9..0000000000
--- a/docs_app/content/examples/docs-style-guide/src/app/app.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-{{title}}
-My Heroes
-
-
- {{hero.id}} {{hero.name}}
-
-
-
-
{{selectedHero.name}} details!
-
id: {{selectedHero.id}}
-
- name:
-
-
-
-
-
diff --git a/docs_app/content/examples/docs-style-guide/src/app/app.component.ts b/docs_app/content/examples/docs-style-guide/src/app/app.component.ts
deleted file mode 100644
index bc2667c804..0000000000
--- a/docs_app/content/examples/docs-style-guide/src/app/app.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-import { Hero, HEROES } from './hero';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
-})
-// #docregion class, class-skeleton
-export class AppComponent {
-// #enddocregion class-skeleton
- title = 'Authors Style Guide Sample';
- heroes = HEROES;
- selectedHero: Hero;
-
- onSelect(hero: Hero): void {
- this.selectedHero = hero;
- }
-// #docregion class-skeleton
-}
-// #enddocregion class, class-skeleton
diff --git a/docs_app/content/examples/docs-style-guide/src/app/app.module.ts b/docs_app/content/examples/docs-style-guide/src/app/app.module.ts
deleted file mode 100644
index cbcb090547..0000000000
--- a/docs_app/content/examples/docs-style-guide/src/app/app.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-
-import { AppComponent } from './app.component';
-
-// #docregion class
-@NgModule({
- imports: [ BrowserModule, FormsModule ],
- declarations: [ AppComponent ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
-// #enddocregion class
diff --git a/docs_app/content/examples/docs-style-guide/src/app/hero.ts b/docs_app/content/examples/docs-style-guide/src/app/hero.ts
deleted file mode 100644
index fadbdbf9ed..0000000000
--- a/docs_app/content/examples/docs-style-guide/src/app/hero.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export class Hero {
- id: number;
- name: string;
-}
-
-export const HEROES: Hero[] = [
- { id: 11, name: 'Mr. Nice' },
- { id: 12, name: 'Narco' },
- { id: 13, name: 'Bombasto' },
- { id: 14, name: 'Celeritas' }
-];
diff --git a/docs_app/content/examples/docs-style-guide/src/index.2.html b/docs_app/content/examples/docs-style-guide/src/index.2.html
deleted file mode 100644
index a85f58e57e..0000000000
--- a/docs_app/content/examples/docs-style-guide/src/index.2.html
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
- Second Authors Style Guide
-
-
- Second Authors Style Guide
- Placeholder. Does nothing at all.
-
-
diff --git a/docs_app/content/examples/docs-style-guide/src/index.html b/docs_app/content/examples/docs-style-guide/src/index.html
deleted file mode 100644
index 2705e7ee96..0000000000
--- a/docs_app/content/examples/docs-style-guide/src/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
- Docs Style Guide
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/docs-style-guide/src/main.ts b/docs_app/content/examples/docs-style-guide/src/main.ts
deleted file mode 100644
index 0740658908..0000000000
--- a/docs_app/content/examples/docs-style-guide/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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);
diff --git a/docs_app/content/examples/docs-style-guide/stackblitz.json b/docs_app/content/examples/docs-style-guide/stackblitz.json
deleted file mode 100644
index f19943ee1e..0000000000
--- a/docs_app/content/examples/docs-style-guide/stackblitz.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "description": "Authors style guide",
- "files": [
- "!**/*.d.ts",
- "!**/*.js",
- "!**/*.[1,2,3].*"
- ],
- "tags": ["author", "style guide"]
-}
diff --git a/docs_app/content/examples/dynamic-component-loader/e2e/app.e2e-spec.ts b/docs_app/content/examples/dynamic-component-loader/e2e/app.e2e-spec.ts
deleted file mode 100644
index b04412c28b..0000000000
--- a/docs_app/content/examples/dynamic-component-loader/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-/* tslint:disable:quotemark */
-describe('Dynamic Component Loader', function () {
-
- beforeEach(function () {
- browser.get('');
- });
-
- it('should load ad banner', function () {
- let headline = element(by.xpath("//h4[text()='Featured Hero Profile']"));
- let name = element(by.xpath("//h3[text()='Bombasto']"));
- let bio = element(by.xpath("//p[text()='Brave as they come']"));
-
- expect(name).toBeDefined();
- expect(headline).toBeDefined();
- expect(bio).toBeDefined();
- });
-});
diff --git a/docs_app/content/examples/dynamic-component-loader/example-config.json b/docs_app/content/examples/dynamic-component-loader/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts b/docs_app/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
deleted file mode 100644
index ec86f69349..0000000000
--- a/docs_app/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-// #docregion
-import { Component, Input, OnInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
-
-import { AdDirective } from './ad.directive';
-import { AdItem } from './ad-item';
-import { AdComponent } from './ad.component';
-
-@Component({
- selector: 'app-ad-banner',
- // #docregion ad-host
- template: `
-
-
Advertisements
-
-
- `
- // #enddocregion ad-host
-})
-// #docregion class
-export class AdBannerComponent implements OnInit, OnDestroy {
- @Input() ads: AdItem[];
- currentAdIndex = -1;
- @ViewChild(AdDirective) adHost: AdDirective;
- interval: any;
-
- constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
-
- ngOnInit() {
- this.loadComponent();
- this.getAds();
- }
-
- ngOnDestroy() {
- clearInterval(this.interval);
- }
-
- loadComponent() {
- this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
- let adItem = this.ads[this.currentAdIndex];
-
- let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
-
- let viewContainerRef = this.adHost.viewContainerRef;
- viewContainerRef.clear();
-
- let componentRef = viewContainerRef.createComponent(componentFactory);
- (componentRef.instance).data = adItem.data;
- }
-
- getAds() {
- this.interval = setInterval(() => {
- this.loadComponent();
- }, 3000);
- }
-}
-// #enddocregion class
diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/ad-item.ts b/docs_app/content/examples/dynamic-component-loader/src/app/ad-item.ts
deleted file mode 100644
index ef8ca70577..0000000000
--- a/docs_app/content/examples/dynamic-component-loader/src/app/ad-item.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// #docregion
-import { Type } from '@angular/core';
-
-export class AdItem {
- constructor(public component: Type, public data: any) {}
-}
diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/ad.component.ts b/docs_app/content/examples/dynamic-component-loader/src/app/ad.component.ts
deleted file mode 100644
index dee3b47953..0000000000
--- a/docs_app/content/examples/dynamic-component-loader/src/app/ad.component.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// #docregion
-export interface AdComponent {
- data: any;
-}
diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/ad.directive.ts b/docs_app/content/examples/dynamic-component-loader/src/app/ad.directive.ts
deleted file mode 100644
index 312e605228..0000000000
--- a/docs_app/content/examples/dynamic-component-loader/src/app/ad.directive.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { Directive, ViewContainerRef } from '@angular/core';
-
-@Directive({
- selector: '[ad-host]',
-})
-export class AdDirective {
- constructor(public viewContainerRef: ViewContainerRef) { }
-}
-
diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/ad.service.ts b/docs_app/content/examples/dynamic-component-loader/src/app/ad.service.ts
deleted file mode 100644
index 91b0758771..0000000000
--- a/docs_app/content/examples/dynamic-component-loader/src/app/ad.service.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-import { HeroJobAdComponent } from './hero-job-ad.component';
-import { HeroProfileComponent } from './hero-profile.component';
-import { AdItem } from './ad-item';
-
-@Injectable()
-export class AdService {
- getAds() {
- return [
- new AdItem(HeroProfileComponent, {name: 'Bombasto', bio: 'Brave as they come'}),
-
- new AdItem(HeroProfileComponent, {name: 'Dr IQ', bio: 'Smart as they come'}),
-
- new AdItem(HeroJobAdComponent, {headline: 'Hiring for several positions',
- body: 'Submit your resume today!'}),
-
- new AdItem(HeroJobAdComponent, {headline: 'Openings in all departments',
- body: 'Apply today'}),
- ];
- }
-}
diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/app.component.ts b/docs_app/content/examples/dynamic-component-loader/src/app/app.component.ts
deleted file mode 100644
index 1a5fa94dbc..0000000000
--- a/docs_app/content/examples/dynamic-component-loader/src/app/app.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-
-import { AdService } from './ad.service';
-import { AdItem } from './ad-item';
-
-@Component({
- selector: 'app-root',
- template: `
-
- `
-})
-export class AppComponent implements OnInit {
- ads: AdItem[];
-
- constructor(private adService: AdService) {}
-
- ngOnInit() {
- this.ads = this.adService.getAds();
- }
-}
-
diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/app.module.ts b/docs_app/content/examples/dynamic-component-loader/src/app/app.module.ts
deleted file mode 100644
index a65d394709..0000000000
--- a/docs_app/content/examples/dynamic-component-loader/src/app/app.module.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// #docregion
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-import { HeroJobAdComponent } from './hero-job-ad.component';
-import { AdBannerComponent } from './ad-banner.component';
-import { HeroProfileComponent } from './hero-profile.component';
-import { AdDirective } from './ad.directive';
-import { AdService } from './ad.service';
-
-@NgModule({
- imports: [ BrowserModule ],
- providers: [AdService],
- declarations: [ AppComponent,
- AdBannerComponent,
- HeroJobAdComponent,
- HeroProfileComponent,
- AdDirective ],
- // #docregion entry-components
- entryComponents: [ HeroJobAdComponent, HeroProfileComponent ],
- // #enddocregion entry-components
- bootstrap: [ AppComponent ]
-})
-export class AppModule {
- constructor() {}
-}
-
diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts b/docs_app/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts
deleted file mode 100644
index 762b815872..0000000000
--- a/docs_app/content/examples/dynamic-component-loader/src/app/hero-job-ad.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// #docregion
-import { Component, Input } from '@angular/core';
-
-import { AdComponent } from './ad.component';
-
-@Component({
- template: `
-
-
{{data.headline}}
-
- {{data.body}}
-
- `
-})
-export class HeroJobAdComponent implements AdComponent {
- @Input() data: any;
-
-}
-
diff --git a/docs_app/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts b/docs_app/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts
deleted file mode 100644
index d543683d8c..0000000000
--- a/docs_app/content/examples/dynamic-component-loader/src/app/hero-profile.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docregion
-import { Component, Input } from '@angular/core';
-
-import { AdComponent } from './ad.component';
-
-@Component({
- template: `
-
-
Featured Hero Profile
-
{{data.name}}
-
-
{{data.bio}}
-
-
Hire this hero today!
-
- `
-})
-export class HeroProfileComponent implements AdComponent {
- @Input() data: any;
-}
-
-
diff --git a/docs_app/content/examples/dynamic-component-loader/src/assets/sample.css b/docs_app/content/examples/dynamic-component-loader/src/assets/sample.css
deleted file mode 100644
index 7a2ca1f2dc..0000000000
--- a/docs_app/content/examples/dynamic-component-loader/src/assets/sample.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.hero-profile {
- border: 1px solid gray;
- padding: 5px;
- padding-bottom: 20px;
- padding-left: 20px;
- border-radius: 10px;
- background-color: lightgreen;
- color: black;
-}
-
-.job-ad {
- border: 1px solid gray;
- padding: 5px;
- padding-bottom: 20px;
- padding-left: 20px;
- border-radius: 10px;
- background-color: lightblue;
- color: black;
-}
-
-.ad-banner {
- width: 400px;
-}
\ No newline at end of file
diff --git a/docs_app/content/examples/dynamic-component-loader/src/index.html b/docs_app/content/examples/dynamic-component-loader/src/index.html
deleted file mode 100644
index 67c9b6c221..0000000000
--- a/docs_app/content/examples/dynamic-component-loader/src/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
-
- Dynamic Component Loader
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/dynamic-component-loader/src/main.ts b/docs_app/content/examples/dynamic-component-loader/src/main.ts
deleted file mode 100644
index 0740658908..0000000000
--- a/docs_app/content/examples/dynamic-component-loader/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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);
diff --git a/docs_app/content/examples/dynamic-component-loader/stackblitz.json b/docs_app/content/examples/dynamic-component-loader/stackblitz.json
deleted file mode 100644
index 2b6c153129..0000000000
--- a/docs_app/content/examples/dynamic-component-loader/stackblitz.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "description": "Dynamic Component Loader",
- "files":[
- "!**/*.d.ts",
- "!**/*.js"
- ],
- "tags":["cookbook component"]
-}
diff --git a/docs_app/content/examples/dynamic-form/e2e/app.e2e-spec.ts b/docs_app/content/examples/dynamic-form/e2e/app.e2e-spec.ts
deleted file mode 100644
index 49eaba3f9c..0000000000
--- a/docs_app/content/examples/dynamic-form/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-/* tslint:disable:quotemark */
-describe('Dynamic Form', function () {
-
- beforeAll(function () {
- browser.get('');
- });
-
- it('should submit form', function () {
- let firstNameElement = element.all(by.css('input[id=firstName]')).get(0);
- expect(firstNameElement.getAttribute('value')).toEqual('Bombasto');
-
- let emailElement = element.all(by.css('input[id=emailAddress]')).get(0);
- let email = 'test@test.com';
- emailElement.sendKeys(email);
- expect(emailElement.getAttribute('value')).toEqual(email);
-
- element(by.css('select option[value="solid"]')).click();
-
- let saveButton = element.all(by.css('button')).get(0);
- saveButton.click().then(function() {
- expect(element(by.xpath("//strong[contains(text(),'Saved the following values')]")).isPresent()).toBe(true);
- });
- });
-
-});
diff --git a/docs_app/content/examples/dynamic-form/example-config.json b/docs_app/content/examples/dynamic-form/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/dynamic-form/src/app/app.component.ts b/docs_app/content/examples/dynamic-form/src/app/app.component.ts
deleted file mode 100644
index 51d154cc78..0000000000
--- a/docs_app/content/examples/dynamic-form/src/app/app.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-import { QuestionService } from './question.service';
-
-@Component({
- selector: 'app-root',
- template: `
-
-
Job Application for Heroes
-
-
- `,
- providers: [QuestionService]
-})
-export class AppComponent {
- questions: any[];
-
- constructor(service: QuestionService) {
- this.questions = service.getQuestions();
- }
-}
diff --git a/docs_app/content/examples/dynamic-form/src/app/app.module.ts b/docs_app/content/examples/dynamic-form/src/app/app.module.ts
deleted file mode 100644
index 7a68e45a92..0000000000
--- a/docs_app/content/examples/dynamic-form/src/app/app.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// #docregion
-import { BrowserModule } from '@angular/platform-browser';
-import { ReactiveFormsModule } from '@angular/forms';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-import { DynamicFormComponent } from './dynamic-form.component';
-import { DynamicFormQuestionComponent } from './dynamic-form-question.component';
-
-@NgModule({
- imports: [ BrowserModule, ReactiveFormsModule ],
- declarations: [ AppComponent, DynamicFormComponent, DynamicFormQuestionComponent ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule {
- constructor() {
- }
-}
diff --git a/docs_app/content/examples/dynamic-form/src/app/dynamic-form-question.component.html b/docs_app/content/examples/dynamic-form/src/app/dynamic-form-question.component.html
deleted file mode 100644
index 9f1b8cd4a6..0000000000
--- a/docs_app/content/examples/dynamic-form/src/app/dynamic-form-question.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
{{question.label}}
-
-
-
-
-
-
- {{opt.value}}
-
-
-
-
-
{{question.label}} is required
-
diff --git a/docs_app/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts b/docs_app/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts
deleted file mode 100644
index 9a4c25829f..0000000000
--- a/docs_app/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import { Component, Input } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-
-import { QuestionBase } from './question-base';
-
-@Component({
- selector: 'app-question',
- templateUrl: './dynamic-form-question.component.html'
-})
-export class DynamicFormQuestionComponent {
- @Input() question: QuestionBase;
- @Input() form: FormGroup;
- get isValid() { return this.form.controls[this.question.key].valid; }
-}
diff --git a/docs_app/content/examples/dynamic-form/src/app/dynamic-form.component.html b/docs_app/content/examples/dynamic-form/src/app/dynamic-form.component.html
deleted file mode 100644
index 33c8f0bb51..0000000000
--- a/docs_app/content/examples/dynamic-form/src/app/dynamic-form.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
-
-
- Saved the following values {{payLoad}}
-
-
diff --git a/docs_app/content/examples/dynamic-form/src/app/dynamic-form.component.ts b/docs_app/content/examples/dynamic-form/src/app/dynamic-form.component.ts
deleted file mode 100644
index 4167b4617f..0000000000
--- a/docs_app/content/examples/dynamic-form/src/app/dynamic-form.component.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-// #docregion
-import { Component, Input, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-
-import { QuestionBase } from './question-base';
-import { QuestionControlService } from './question-control.service';
-
-@Component({
- selector: 'app-dynamic-form',
- templateUrl: './dynamic-form.component.html',
- providers: [ QuestionControlService ]
-})
-export class DynamicFormComponent implements OnInit {
-
- @Input() questions: QuestionBase[] = [];
- form: FormGroup;
- payLoad = '';
-
- constructor(private qcs: QuestionControlService) { }
-
- ngOnInit() {
- this.form = this.qcs.toFormGroup(this.questions);
- }
-
- onSubmit() {
- this.payLoad = JSON.stringify(this.form.value);
- }
-}
diff --git a/docs_app/content/examples/dynamic-form/src/app/question-base.ts b/docs_app/content/examples/dynamic-form/src/app/question-base.ts
deleted file mode 100644
index 8249a38bee..0000000000
--- a/docs_app/content/examples/dynamic-form/src/app/question-base.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// #docregion
-export class QuestionBase {
- value: T;
- key: string;
- label: string;
- required: boolean;
- order: number;
- controlType: string;
-
- constructor(options: {
- value?: T,
- key?: string,
- label?: string,
- required?: boolean,
- order?: number,
- controlType?: string
- } = {}) {
- this.value = options.value;
- this.key = options.key || '';
- this.label = options.label || '';
- this.required = !!options.required;
- this.order = options.order === undefined ? 1 : options.order;
- this.controlType = options.controlType || '';
- }
-}
diff --git a/docs_app/content/examples/dynamic-form/src/app/question-control.service.ts b/docs_app/content/examples/dynamic-form/src/app/question-control.service.ts
deleted file mode 100644
index 1378ba8490..0000000000
--- a/docs_app/content/examples/dynamic-form/src/app/question-control.service.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
-
-import { QuestionBase } from './question-base';
-
-@Injectable()
-export class QuestionControlService {
- constructor() { }
-
- toFormGroup(questions: QuestionBase[] ) {
- let group: any = {};
-
- questions.forEach(question => {
- group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
- : new FormControl(question.value || '');
- });
- return new FormGroup(group);
- }
-}
diff --git a/docs_app/content/examples/dynamic-form/src/app/question-dropdown.ts b/docs_app/content/examples/dynamic-form/src/app/question-dropdown.ts
deleted file mode 100644
index 35a9074c74..0000000000
--- a/docs_app/content/examples/dynamic-form/src/app/question-dropdown.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #docregion
-import { QuestionBase } from './question-base';
-
-export class DropdownQuestion extends QuestionBase {
- controlType = 'dropdown';
- options: {key: string, value: string}[] = [];
-
- constructor(options: {} = {}) {
- super(options);
- this.options = options['options'] || [];
- }
-}
diff --git a/docs_app/content/examples/dynamic-form/src/app/question-textbox.ts b/docs_app/content/examples/dynamic-form/src/app/question-textbox.ts
deleted file mode 100644
index aaa7edf267..0000000000
--- a/docs_app/content/examples/dynamic-form/src/app/question-textbox.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #docregion
-import { QuestionBase } from './question-base';
-
-export class TextboxQuestion extends QuestionBase {
- controlType = 'textbox';
- type: string;
-
- constructor(options: {} = {}) {
- super(options);
- this.type = options['type'] || '';
- }
-}
diff --git a/docs_app/content/examples/dynamic-form/src/app/question.service.ts b/docs_app/content/examples/dynamic-form/src/app/question.service.ts
deleted file mode 100644
index bb452cf5e6..0000000000
--- a/docs_app/content/examples/dynamic-form/src/app/question.service.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-import { DropdownQuestion } from './question-dropdown';
-import { QuestionBase } from './question-base';
-import { TextboxQuestion } from './question-textbox';
-
-@Injectable()
-export class QuestionService {
-
- // Todo: get from a remote source of question metadata
- // Todo: make asynchronous
- getQuestions() {
-
- let questions: QuestionBase[] = [
-
- new DropdownQuestion({
- key: 'brave',
- label: 'Bravery Rating',
- options: [
- {key: 'solid', value: 'Solid'},
- {key: 'great', value: 'Great'},
- {key: 'good', value: 'Good'},
- {key: 'unproven', value: 'Unproven'}
- ],
- order: 3
- }),
-
- new TextboxQuestion({
- key: 'firstName',
- label: 'First name',
- value: 'Bombasto',
- required: true,
- order: 1
- }),
-
- new TextboxQuestion({
- key: 'emailAddress',
- label: 'Email',
- type: 'email',
- order: 2
- })
- ];
-
- return questions.sort((a, b) => a.order - b.order);
- }
-}
diff --git a/docs_app/content/examples/dynamic-form/src/assets/sample.css b/docs_app/content/examples/dynamic-form/src/assets/sample.css
deleted file mode 100644
index fe2cc28481..0000000000
--- a/docs_app/content/examples/dynamic-form/src/assets/sample.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.errorMessage{
- color:red;
-}
-
-.form-row{
- margin-top: 10px;
-}
\ No newline at end of file
diff --git a/docs_app/content/examples/dynamic-form/src/index.html b/docs_app/content/examples/dynamic-form/src/index.html
deleted file mode 100644
index 20688f2405..0000000000
--- a/docs_app/content/examples/dynamic-form/src/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
-
- Dynamic Form
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/dynamic-form/src/main.ts b/docs_app/content/examples/dynamic-form/src/main.ts
deleted file mode 100644
index 0740658908..0000000000
--- a/docs_app/content/examples/dynamic-form/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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);
diff --git a/docs_app/content/examples/dynamic-form/stackblitz.json b/docs_app/content/examples/dynamic-form/stackblitz.json
deleted file mode 100644
index 9dd6ff0236..0000000000
--- a/docs_app/content/examples/dynamic-form/stackblitz.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "description": "Dynamic Form",
- "files":[
- "!**/*.d.ts",
- "!**/*.js",
- "!**/*.[1].*"
- ],
- "tags":["cookbook"]
-}
diff --git a/docs_app/content/examples/elements/src/app/app.component.ts b/docs_app/content/examples/elements/src/app/app.component.ts
deleted file mode 100644
index 092a8c8ba2..0000000000
--- a/docs_app/content/examples/elements/src/app/app.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// #docregion
-import { Component, Injector } from '@angular/core';
-import { createNgElementConstructor } from '../elements-dist';
-import { PopupService } from './popup.service';
-import { PopupComponent } from './popup.component';
-
-@Component({
- selector: 'app-root',
- template: `
-
-
- Show as component
-
- Show as element
- `
-})
-
-export class AppComponent {
- constructor(private injector: Injector, public popup: PopupService) {
- // on init, convert PopupComponent to a custom element
- const PopupElement =
-createNgElementConstructor(PopupComponent, {injector: this.injector});
- // register the custom element with the browser.
- customElements.define('popup-element', PopupElement);
- }
-}
diff --git a/docs_app/content/examples/elements/src/app/app.module.ts b/docs_app/content/examples/elements/src/app/app.module.ts
deleted file mode 100644
index 0c2eec1938..0000000000
--- a/docs_app/content/examples/elements/src/app/app.module.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docregion
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-import { PopupService } from './popup.service';
-import { PopupComponent } from './popup.component';
-
-// include the PopupService provider,
-// but exclude PopupComponent from compilation,
-// because it will be added dynamically
-
-@NgModule({
- declarations: [AppComponent, PopupComponent],
- imports: [BrowserModule, BrowserAnimationsModule],
- providers: [PopupService],
- bootstrap: [AppComponent],
- entryComponents: [PopupComponent],
-})
-
-export class AppModule {}
diff --git a/docs_app/content/examples/elements/src/app/popup.component.ts b/docs_app/content/examples/elements/src/app/popup.component.ts
deleted file mode 100644
index 8272c37234..0000000000
--- a/docs_app/content/examples/elements/src/app/popup.component.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-// #docregion
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { AnimationEvent } from '@angular/animations';
-import { animate, state, style, transition, trigger } from '@angular/animations';
-
-@Component({
- selector: 'my-popup',
- template: 'Popup: {{message}}',
- host: {
- '[@state]': 'state',
- '(@state.done)': 'onAnimationDone($event)',
- },
- animations: [
- trigger('state', [
- state('opened', style({transform: 'translateY(0%)'})),
- state('void, closed', style({transform: 'translateY(100%)', opacity: 0})),
- transition('* => *', animate('100ms ease-in')),
- ])
- ],
- styles: [`
- :host {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- background: #009cff;
- height: 48px;
- padding: 16px;
- display: flex;
- align-items: center;
- border-top: 1px solid black;
- font-size: 24px;
- }
- `]
-})
-
-export class PopupComponent {
- private state: 'opened' | 'closed' = 'closed';
-
- @Input()
- set message(message: string) {
- this._message = message;
- this.state = 'opened';
-
- setTimeout(() => this.state = 'closed', 2000);
- }
- get message(): string { return this._message; }
- _message: string;
-
- @Output()
- closed = new EventEmitter();
-
- onAnimationDone(e: AnimationEvent) {
- if (e.toState === 'closed') {
- this.closed.next();
- }
- }
-}
diff --git a/docs_app/content/examples/elements/src/app/popup.service.ts b/docs_app/content/examples/elements/src/app/popup.service.ts
deleted file mode 100644
index 0c44615e84..0000000000
--- a/docs_app/content/examples/elements/src/app/popup.service.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-
-// #docregion
-import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
-
-import { PopupComponent } from './popup.component';
-import { NgElementConstructor } from '../elements-dist';
-
-@Injectable()
-export class PopupService {
- constructor(private injector: Injector,
- private applicationRef: ApplicationRef,
- private componentFactoryResolver: ComponentFactoryResolver) {}
-
- // Previous dynamic-loading method required you to set up infrastructure
- // before adding the popup to the DOM.
- showAsComponent(message: string) {
- // Create element
- const popup = document.createElement('popup-component');
-
- // Create the component and wire it up with the element
- const factory = this.componentFactoryResolver.resolveComponentFactory(PopupComponent);
- const popupComponentRef = factory.create(this.injector, [], popup);
-
- // Attach to the view so that the change detector knows to run
- this.applicationRef.attachView(popupComponentRef.hostView);
-
- // Listen to the close event
- popupComponentRef.instance.closed.subscribe(() => {
- document.body.removeChild(popup);
- this.applicationRef.detachView(popupComponentRef.hostView);
- });
-
- // Set the message
- popupComponentRef.instance.message = message;
-
- // Add to the DOM
- document.body.appendChild(popup);
- }
-
- // This uses the new custom-element method to add the popup to the DOM.
- showAsElement(message: string) {
- // Create element
- const popupEl = document.createElement('popup-element');
-
- // Listen to the close event
- popupEl.addEventListener('closed', () => document.body.removeChild(popupEl));
-
- // Set the message
- popupEl.message = message;
-
- // Add to the DOM
- document.body.appendChild(popupEl);
- }
-}
diff --git a/docs_app/content/examples/feature-modules/e2e/app.e2e-spec.ts b/docs_app/content/examples/feature-modules/e2e/app.e2e-spec.ts
deleted file mode 100644
index 899a1ad037..0000000000
--- a/docs_app/content/examples/feature-modules/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { AppPage } from './app.po';
-
-describe('feature-modules App', () => {
- let page: AppPage;
-
- beforeEach(() => {
- page = new AppPage();
- });
-
- it('should display message saying app works', () => {
- page.navigateTo();
- expect(page.getParagraphText()).toEqual('app works!');
- });
-});
-
-
-
diff --git a/docs_app/content/examples/feature-modules/example-config.json b/docs_app/content/examples/feature-modules/example-config.json
deleted file mode 100644
index 313764c3c6..0000000000
--- a/docs_app/content/examples/feature-modules/example-config.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "build": "build:cli",
- "run": "serve:cli"
-}
diff --git a/docs_app/content/examples/feature-modules/src/app/app.component.css b/docs_app/content/examples/feature-modules/src/app/app.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/feature-modules/src/app/app.component.html b/docs_app/content/examples/feature-modules/src/app/app.component.html
deleted file mode 100644
index ecfd45507b..0000000000
--- a/docs_app/content/examples/feature-modules/src/app/app.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
- {{title}}
-
-
-
-
-
diff --git a/docs_app/content/examples/feature-modules/src/app/app.component.spec.ts b/docs_app/content/examples/feature-modules/src/app/app.component.spec.ts
deleted file mode 100644
index 13c632d676..0000000000
--- a/docs_app/content/examples/feature-modules/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [
- AppComponent
- ],
- });
- TestBed.compileComponents();
- });
-
- it('should create the app', async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app).toBeTruthy();
- }));
-
- it(`should have as title 'app works!'`, async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app.title).toEqual('app works!');
- }));
-
- it('should render title in a h1 tag', async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- fixture.detectChanges();
- const compiled = fixture.debugElement.nativeElement;
- expect(compiled.querySelector('h1').textContent).toContain('app works!');
- }));
-});
diff --git a/docs_app/content/examples/feature-modules/src/app/app.component.ts b/docs_app/content/examples/feature-modules/src/app/app.component.ts
deleted file mode 100644
index ff63e05048..0000000000
--- a/docs_app/content/examples/feature-modules/src/app/app.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
-})
-export class AppComponent {
- title = 'app works!';
-}
diff --git a/docs_app/content/examples/feature-modules/src/app/app.module.ts b/docs_app/content/examples/feature-modules/src/app/app.module.ts
deleted file mode 100644
index 503d6a46a1..0000000000
--- a/docs_app/content/examples/feature-modules/src/app/app.module.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// #docplaster
-// #docregion app-module
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
-
-import { AppComponent } from './app.component';
-// import the feature module here so you can add it to the imports array below
-import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';
-
-
-@NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- FormsModule,
- HttpModule,
- CustomerDashboardModule // add the feature module here
- ],
- providers: [],
- bootstrap: [AppComponent]
-})
-export class AppModule { }
-// #enddocregion app-module
diff --git a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts b/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts
deleted file mode 100644
index 4df17d96c4..0000000000
--- a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard.module.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-// #docplaster
-// #docregion customer-dashboard
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-// #enddocregion customer-dashboard
-// #docregion customer-dashboard-component
-// import the new component
-import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component';
-// #enddocregion customer-dashboard-component
-
-
-// #docregion customer-dashboard-component
-@NgModule({
- imports: [
- CommonModule
- ],
- declarations: [
- CustomerDashboardComponent
- ],
- // #enddocregion customer-dashboard-component
- // #docregion component-exports
- exports: [
- CustomerDashboardComponent
- ]
- // #enddocregion component-exports
- // #docregion customer-dashboard-component
-})
-
-// #enddocregion customer-dashboard-component
-
-// #docregion customer-dashboard
-export class CustomerDashboardModule { }
-
-// #enddocregion customer-dashboard
diff --git a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.css b/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html b/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html
deleted file mode 100644
index e3e295f5c7..0000000000
--- a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
-
- customer-dashboard works!
-
-
diff --git a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.spec.ts b/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.spec.ts
deleted file mode 100644
index 2420d05521..0000000000
--- a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CustomerDashboardComponent } from './customer-dashboard.component';
-
-describe('CustomerDashboardComponent', () => {
- let component: CustomerDashboardComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ CustomerDashboardComponent ]
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(CustomerDashboardComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts b/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts
deleted file mode 100644
index b4dcf2e8fe..0000000000
--- a/docs_app/content/examples/feature-modules/src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-customer-dashboard',
- templateUrl: './customer-dashboard.component.html',
- styleUrls: ['./customer-dashboard.component.css']
-})
-export class CustomerDashboardComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit() {
- }
-
-}
diff --git a/docs_app/content/examples/feature-modules/src/index.html b/docs_app/content/examples/feature-modules/src/index.html
deleted file mode 100644
index 6e42a2c5d5..0000000000
--- a/docs_app/content/examples/feature-modules/src/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
- Feature Modules
-
-
-
-
-
-
- Loading...
-
-
diff --git a/docs_app/content/examples/feature-modules/src/main.ts b/docs_app/content/examples/feature-modules/src/main.ts
deleted file mode 100644
index a9ca1caf8c..0000000000
--- a/docs_app/content/examples/feature-modules/src/main.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-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);
diff --git a/docs_app/content/examples/feature-modules/stackblitz.json b/docs_app/content/examples/feature-modules/stackblitz.json
deleted file mode 100644
index e0cbd2e29d..0000000000
--- a/docs_app/content/examples/feature-modules/stackblitz.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "description": "Feature Modules",
- "files": [
- "!**/*.d.ts",
- "!**/*.js",
- "!**/*.[1,2].*"
- ],
- "file": "src/app/app.component.ts",
- "tags": ["feature modules"]
-}
diff --git a/docs_app/content/examples/form-validation/e2e/app.e2e-spec.ts b/docs_app/content/examples/form-validation/e2e/app.e2e-spec.ts
deleted file mode 100644
index 8956ace183..0000000000
--- a/docs_app/content/examples/form-validation/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-'use strict'; // necessary for node!
-
-import { browser, element, by, protractor, ElementFinder, ElementArrayFinder } from 'protractor';
-
-// THESE TESTS ARE INCOMPLETE
-describe('Form Validation Tests', function () {
-
- beforeAll(function () {
- browser.get('');
- });
-
- describe('Template-driven form', () => {
- beforeAll(() => {
- getPage('app-hero-form-template');
- });
-
- tests('Template-Driven Form');
- bobTests();
- });
-
- describe('Reactive form', () => {
- beforeAll(() => {
- getPage('app-hero-form-reactive');
- });
-
- tests('Reactive Form');
- bobTests();
- });
-});
-
-//////////
-
-const testName = 'Test Name';
-
-let page: {
- section: ElementFinder,
- form: ElementFinder,
- title: ElementFinder,
- nameInput: ElementFinder,
- alterEgoInput: ElementFinder,
- powerSelect: ElementFinder,
- powerOption: ElementFinder,
- errorMessages: ElementArrayFinder,
- heroFormButtons: ElementArrayFinder,
- heroSubmitted: ElementFinder
-};
-
-function getPage(sectionTag: string) {
- let section = element(by.css(sectionTag));
- let buttons = section.all(by.css('button'));
-
- page = {
- section: section,
- form: section.element(by.css('form')),
- title: section.element(by.css('h1')),
- nameInput: section.element(by.css('#name')),
- alterEgoInput: section.element(by.css('#alterEgo')),
- powerSelect: section.element(by.css('#power')),
- powerOption: section.element(by.css('#power option')),
- errorMessages: section.all(by.css('div.alert')),
- heroFormButtons: buttons,
- heroSubmitted: section.element(by.css('.submitted-message'))
- };
-}
-
-function tests(title: string) {
-
- it('should display correct title', function () {
- expect(page.title.getText()).toContain(title);
- });
-
- it('should not display submitted message before submit', function () {
- expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(false);
- });
-
- it('should have form buttons', function () {
- expect(page.heroFormButtons.count()).toEqual(2);
- });
-
- it('should have error at start', function () {
- expectFormIsInvalid();
- });
-
- // it('showForm', function () {
- // page.form.getInnerHtml().then(html => console.log(html));
- // });
-
- it('should have disabled submit button', function () {
- expect(page.heroFormButtons.get(0).isEnabled()).toBe(false);
- });
-
- it('resetting name to valid name should clear errors', function () {
- const ele = page.nameInput;
- expect(ele.isPresent()).toBe(true, 'nameInput should exist');
- ele.clear();
- ele.sendKeys(testName);
- expectFormIsValid();
- });
-
- it('should produce "required" error after clearing name', function () {
- page.nameInput.clear();
- // page.alterEgoInput.click(); // to blur ... didn't work
- page.nameInput.sendKeys('x', protractor.Key.BACK_SPACE); // ugh!
- expect(page.form.getAttribute('class')).toMatch('ng-invalid');
- expect(page.errorMessages.get(0).getText()).toContain('required');
- });
-
- it('should produce "at least 4 characters" error when name="x"', function () {
- page.nameInput.clear();
- page.nameInput.sendKeys('x'); // too short
- expectFormIsInvalid();
- expect(page.errorMessages.get(0).getText()).toContain('at least 4 characters');
- });
-
- it('resetting name to valid name again should clear errors', function () {
- page.nameInput.sendKeys(testName);
- expectFormIsValid();
- });
-
- it('should have enabled submit button', function () {
- const submitBtn = page.heroFormButtons.get(0);
- expect(submitBtn.isEnabled()).toBe(true);
- });
-
- it('should hide form after submit', function () {
- page.heroFormButtons.get(0).click();
- expect(page.heroFormButtons.get(0).isDisplayed()).toBe(false);
- });
-
- it('submitted form should be displayed', function () {
- expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(true);
- });
-
- it('submitted form should have new hero name', function () {
- expect(page.heroSubmitted.getText()).toContain(testName);
- });
-
- it('clicking edit button should reveal form again', function () {
- const newFormBtn = page.heroSubmitted.element(by.css('button'));
- newFormBtn.click();
- expect(page.heroSubmitted.isElementPresent(by.css('p')))
- .toBe(false, 'submitted hidden again');
- expect(page.title.isDisplayed()).toBe(true, 'can see form title');
- });
-}
-
-function expectFormIsValid() {
- expect(page.form.getAttribute('class')).toMatch('ng-valid');
-}
-
-function expectFormIsInvalid() {
- expect(page.form.getAttribute('class')).toMatch('ng-invalid');
-}
-
-function bobTests() {
- const emsg = 'Name cannot be Bob.';
-
- it('should produce "no bob" error after setting name to "Bobby"', function () {
- // Re-populate select element
- page.powerSelect.click();
- page.powerOption.click();
-
- page.nameInput.clear();
- page.nameInput.sendKeys('Bobby');
- expectFormIsInvalid();
- expect(page.errorMessages.get(0).getText()).toBe(emsg);
- });
-
- it('should be ok again with valid name', function () {
- page.nameInput.clear();
- page.nameInput.sendKeys(testName);
- expectFormIsValid();
- });
-}
diff --git a/docs_app/content/examples/form-validation/example-config.json b/docs_app/content/examples/form-validation/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/form-validation/src/app/app.component.ts b/docs_app/content/examples/form-validation/src/app/app.component.ts
deleted file mode 100644
index dd7141f45e..0000000000
--- a/docs_app/content/examples/form-validation/src/app/app.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- template: `
-
- `
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/form-validation/src/app/app.module.ts b/docs_app/content/examples/form-validation/src/app/app.module.ts
deleted file mode 100644
index 0a5d1cf455..0000000000
--- a/docs_app/content/examples/form-validation/src/app/app.module.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { HeroFormTemplateComponent } from './template/hero-form-template.component';
-import { HeroFormReactiveComponent } from './reactive/hero-form-reactive.component';
-import { ForbiddenValidatorDirective } from './shared/forbidden-name.directive';
-
-
-@NgModule({
- imports: [
- BrowserModule,
- FormsModule,
- ReactiveFormsModule
- ],
- declarations: [
- AppComponent,
- HeroFormTemplateComponent,
- HeroFormReactiveComponent,
- ForbiddenValidatorDirective
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html b/docs_app/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html
deleted file mode 100644
index 36cebbaca4..0000000000
--- a/docs_app/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.html
+++ /dev/null
@@ -1,62 +0,0 @@
-
-
-
-
Reactive Form
-
-
-
-
-
You've submitted your hero, {{ heroForm.value.name }}!
-
Add new hero
-
-
diff --git a/docs_app/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts b/docs_app/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts
deleted file mode 100644
index e1b3d6bc8b..0000000000
--- a/docs_app/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/* tslint:disable: member-ordering forin */
-// #docplaster
-// #docregion
-import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
-
-@Component({
- selector: 'app-hero-form-reactive',
- templateUrl: './hero-form-reactive.component.html'
-})
-export class HeroFormReactiveComponent implements OnInit {
-
- powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
-
- hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]};
-
- heroForm: FormGroup;
-
- // #docregion form-group
- ngOnInit(): void {
- // #docregion custom-validator
- this.heroForm = new FormGroup({
- 'name': new FormControl(this.hero.name, [
- Validators.required,
- Validators.minLength(4),
- forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
- ]),
- 'alterEgo': new FormControl(this.hero.alterEgo),
- 'power': new FormControl(this.hero.power, Validators.required)
- });
- // #enddocregion custom-validator
- }
-
- get name() { return this.heroForm.get('name'); }
-
- get power() { return this.heroForm.get('power'); }
- // #enddocregion form-group
-}
-// #enddocregion
diff --git a/docs_app/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts b/docs_app/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
deleted file mode 100644
index 277a31bd33..0000000000
--- a/docs_app/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// #docregion
-import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } from '@angular/forms';
-
-// #docregion custom-validator
-/** A hero's name can't match the given regular expression */
-export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
- return (control: AbstractControl): {[key: string]: any} => {
- const forbidden = nameRe.test(control.value);
- return forbidden ? {'forbiddenName': {value: control.value}} : null;
- };
-}
-// #enddocregion custom-validator
-
-// #docregion directive
-@Directive({
- selector: '[appForbiddenName]',
- // #docregion directive-providers
- providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
- // #enddocregion directive-providers
-})
-export class ForbiddenValidatorDirective implements Validator {
- @Input('appForbiddenName') forbiddenName: string;
-
- validate(control: AbstractControl): {[key: string]: any} {
- return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
- : null;
- }
-}
-// #enddocregion directive
-
diff --git a/docs_app/content/examples/form-validation/src/app/template/hero-form-template.component.html b/docs_app/content/examples/form-validation/src/app/template/hero-form-template.component.html
deleted file mode 100644
index c695abaa26..0000000000
--- a/docs_app/content/examples/form-validation/src/app/template/hero-form-template.component.html
+++ /dev/null
@@ -1,66 +0,0 @@
-
-
-
-
Template-Driven Form
-
-
-
-
diff --git a/docs_app/content/examples/form-validation/src/app/template/hero-form-template.component.ts b/docs_app/content/examples/form-validation/src/app/template/hero-form-template.component.ts
deleted file mode 100644
index cc8bd0b30f..0000000000
--- a/docs_app/content/examples/form-validation/src/app/template/hero-form-template.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/* tslint:disable: member-ordering */
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-hero-form-template',
- templateUrl: './hero-form-template.component.html'
-})
-export class HeroFormTemplateComponent {
-
- powers = ['Really Smart', 'Super Flexible', 'Weather Changer'];
-
- hero = {name: 'Dr.', alterEgo: 'Dr. What', power: this.powers[0]};
-
-}
diff --git a/docs_app/content/examples/form-validation/src/assets/forms.css b/docs_app/content/examples/form-validation/src/assets/forms.css
deleted file mode 100644
index 1d388f656d..0000000000
--- a/docs_app/content/examples/form-validation/src/assets/forms.css
+++ /dev/null
@@ -1,8 +0,0 @@
-
-.ng-valid[required], .ng-valid.required {
- border-left: 5px solid #42A948; /* green */
-}
-
-.ng-invalid:not(form) {
- border-left: 5px solid #a94442; /* red */
-}
diff --git a/docs_app/content/examples/form-validation/src/index.html b/docs_app/content/examples/form-validation/src/index.html
deleted file mode 100644
index 859ac12299..0000000000
--- a/docs_app/content/examples/form-validation/src/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
- Hero Form with Validation
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/form-validation/src/main.ts b/docs_app/content/examples/form-validation/src/main.ts
deleted file mode 100644
index 0740658908..0000000000
--- a/docs_app/content/examples/form-validation/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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);
diff --git a/docs_app/content/examples/form-validation/stackblitz.json b/docs_app/content/examples/form-validation/stackblitz.json
deleted file mode 100644
index 4871b07c6e..0000000000
--- a/docs_app/content/examples/form-validation/stackblitz.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "description": "Validation",
- "files":[
- "!**/*.d.ts",
- "!**/*.js"
- ]
-}
diff --git a/docs_app/content/examples/forms/e2e/app.e2e-spec.ts b/docs_app/content/examples/forms/e2e/app.e2e-spec.ts
deleted file mode 100644
index d3d3cff970..0000000000
--- a/docs_app/content/examples/forms/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { browser, element, by } from 'protractor';
-
-describe('Forms Tests', function () {
-
- beforeEach(function () {
- browser.get('');
- });
-
- it('should display correct title', function () {
- expect(element.all(by.css('h1')).get(0).getText()).toEqual('Hero Form');
- });
-
-
- it('should not display message before submit', function () {
- let ele = element(by.css('h2'));
- expect(ele.isDisplayed()).toBe(false);
- });
-
- it('should hide form after submit', function () {
- let ele = element.all(by.css('h1')).get(0);
- expect(ele.isDisplayed()).toBe(true);
- let b = element.all(by.css('button[type=submit]')).get(0);
- b.click().then(function() {
- expect(ele.isDisplayed()).toBe(false);
- });
- });
-
- it('should display message after submit', function () {
- let b = element.all(by.css('button[type=submit]')).get(0);
- b.click().then(function() {
- expect(element(by.css('h2')).getText()).toContain('You submitted the following');
- });
- });
-
- it('should hide form after submit', function () {
- let alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
- expect(alterEgoEle.isDisplayed()).toBe(true);
- let submitButtonEle = element.all(by.css('button[type=submit]')).get(0);
- submitButtonEle.click().then(function() {
- expect(alterEgoEle.isDisplayed()).toBe(false);
- });
- });
-
- it('should reflect submitted data after submit', 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: string) {
- alterEgoEle.sendKeys(test);
- newValue = value + test;
- expect(alterEgoEle.getAttribute('value')).toEqual(newValue);
- let b = element.all(by.css('button[type=submit]')).get(0);
- return b.click();
- }).then(function() {
- let alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego'));
- expect(alterEgoTextEle.isPresent()).toBe(true, 'cannot locate "Alter Ego" label');
- let divEle = element(by.cssContainingText('div', newValue));
- expect(divEle.isPresent()).toBe(true, 'cannot locate div with this text: ' + newValue);
- });
- });
-});
-
diff --git a/docs_app/content/examples/forms/example-config.json b/docs_app/content/examples/forms/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/forms/src/app/app.component.css b/docs_app/content/examples/forms/src/app/app.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/forms/src/app/app.component.html b/docs_app/content/examples/forms/src/app/app.component.html
deleted file mode 100644
index 84d14ff8f6..0000000000
--- a/docs_app/content/examples/forms/src/app/app.component.html
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/docs_app/content/examples/forms/src/app/app.component.ts b/docs_app/content/examples/forms/src/app/app.component.ts
deleted file mode 100644
index f7baece9b5..0000000000
--- a/docs_app/content/examples/forms/src/app/app.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/forms/src/app/app.module.ts b/docs_app/content/examples/forms/src/app/app.module.ts
deleted file mode 100644
index 51b9b9afe2..0000000000
--- a/docs_app/content/examples/forms/src/app/app.module.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-
-import { AppComponent } from './app.component';
-import { HeroFormComponent } from './hero-form/hero-form.component';
-
-@NgModule({
- imports: [
- BrowserModule,
- FormsModule
- ],
- declarations: [
- AppComponent,
- HeroFormComponent
- ],
- providers: [],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.css b/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.html b/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.html
deleted file mode 100644
index 73b703f789..0000000000
--- a/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.html
+++ /dev/null
@@ -1,212 +0,0 @@
-
-
-
-
-
-
-
-
-
You submitted the following:
-
-
Name
-
{{ model.name }}
-
-
-
Alter Ego
-
{{ model.alterEgo }}
-
-
-
Power
-
{{ model.power }}
-
-
-
Edit
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- TODO: remove this: {{model.name}}
-
-
-
-
- TODO: remove this: {{model.name}}
-
-
-
-
-
TODO: remove this: {{spy.className}}
-
-
-
diff --git a/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.ts b/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.ts
deleted file mode 100644
index bc5fe12ef8..0000000000
--- a/docs_app/content/examples/forms/src/app/hero-form/hero-form.component.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-// #docplaster
-// #docregion , v1, final
-import { Component } from '@angular/core';
-
-import { Hero } from '../hero';
-
-@Component({
- selector: 'app-hero-form',
- templateUrl: './hero-form.component.html',
- styleUrls: ['./hero-form.component.css']
-})
-export class HeroFormComponent {
-
- powers = ['Really Smart', 'Super Flexible',
- 'Super Hot', 'Weather Changer'];
-
- model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');
-
- // #docregion submitted
- submitted = false;
-
- onSubmit() { this.submitted = true; }
- // #enddocregion submitted
-
- // #enddocregion final
- // TODO: Remove this when we're done
- get diagnostic() { return JSON.stringify(this.model); }
- // #enddocregion v1
-
- // #docregion final, new-hero
- newHero() {
- this.model = new Hero(42, '', '');
- }
- // #enddocregion final, new-hero
-
- skyDog(): Hero {
- // #docregion SkyDog
- let myHero = new Hero(42, 'SkyDog',
- 'Fetch any object at any distance',
- 'Leslie Rollover');
- console.log('My hero is called ' + myHero.name); // "My hero is called SkyDog"
- // #enddocregion SkyDog
- return myHero;
- }
-
- //////// NOT SHOWN IN DOCS ////////
-
- // Reveal in html:
- // Name via form.controls = {{showFormControls(heroForm)}}
- showFormControls(form: any) {
- return form && form.controls['name'] &&
- // #docregion form-controls
- form.controls['name'].value; // Dr. IQ
- // #enddocregion form-controls
- }
-
- /////////////////////////////
-
- // #docregion v1, final
-}
diff --git a/docs_app/content/examples/forms/src/app/hero.ts b/docs_app/content/examples/forms/src/app/hero.ts
deleted file mode 100644
index c128626452..0000000000
--- a/docs_app/content/examples/forms/src/app/hero.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-export class Hero {
-
- constructor(
- public id: number,
- public name: string,
- public power: string,
- public alterEgo?: string
- ) { }
-
-}
diff --git a/docs_app/content/examples/forms/src/assets/forms.css b/docs_app/content/examples/forms/src/assets/forms.css
deleted file mode 100644
index 13ffbe1203..0000000000
--- a/docs_app/content/examples/forms/src/assets/forms.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/* #docregion */
-.ng-valid[required], .ng-valid.required {
- border-left: 5px solid #42A948; /* green */
-}
-
-.ng-invalid:not(form) {
- border-left: 5px solid #a94442; /* red */
-}
-/* #enddocregion */
diff --git a/docs_app/content/examples/forms/src/index.html b/docs_app/content/examples/forms/src/index.html
deleted file mode 100644
index 44a5c33b05..0000000000
--- a/docs_app/content/examples/forms/src/index.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
-
-
- Hero Form
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/forms/src/main.ts b/docs_app/content/examples/forms/src/main.ts
deleted file mode 100644
index 0740658908..0000000000
--- a/docs_app/content/examples/forms/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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);
diff --git a/docs_app/content/examples/forms/src/styles.1.css b/docs_app/content/examples/forms/src/styles.1.css
deleted file mode 100644
index 167a66be4f..0000000000
--- a/docs_app/content/examples/forms/src/styles.1.css
+++ /dev/null
@@ -1 +0,0 @@
-@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');
diff --git a/docs_app/content/examples/forms/stackblitz.json b/docs_app/content/examples/forms/stackblitz.json
deleted file mode 100644
index 9e0797f0e9..0000000000
--- a/docs_app/content/examples/forms/stackblitz.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "description": "Forms",
- "files":[
- "!**/*.d.ts",
- "!**/*.js"
- ]
-}
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/e2e/app.e2e-spec.ts b/docs_app/content/examples/hierarchical-dependency-injection/e2e/app.e2e-spec.ts
deleted file mode 100644
index 09a4f3d27b..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, by, element } from 'protractor';
-
-describe('Hierarchical dependency injection', () => {
-
- beforeAll(() => {
- browser.get('');
- });
-
- describe('Heroes Scenario', () => {
- let page = {
- heroName: '',
- income: '',
-
- // queries
- heroEl: element.all(by.css('app-heroes-list li')).get(0), // first hero
- heroCardEl: element(by.css('app-heroes-list app-hero-tax-return')), // first hero tax-return
- taxReturnNameEl: element.all(by.css('app-heroes-list app-hero-tax-return #name')).get(0),
- incomeInputEl: element.all(by.css('app-heroes-list app-hero-tax-return input')).get(0),
- cancelButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Cancel')),
- closeButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Close')),
- saveButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Save'))
- };
-
- it('should list multiple heroes', () => {
- expect(element.all(by.css('app-heroes-list li')).count()).toBeGreaterThan(1);
- });
-
- it('should show no hero tax-returns at the start', () => {
- expect(element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0);
- });
-
- it('should open first hero in app-hero-tax-return view after click', () => {
- page.heroEl.getText()
- .then(val => {
- page.heroName = val;
- })
- .then(() => page.heroEl.click())
- .then(() => {
- expect(page.heroCardEl.isDisplayed()).toBe(true);
- });
- });
-
- it('hero tax-return should have first hero\'s name', () => {
- // Not `page.tax-returnNameInputEl.getAttribute('value')` although later that is essential
- expect(page.taxReturnNameEl.getText()).toEqual(page.heroName);
- });
-
- it('should be able to cancel change', () => {
- page.incomeInputEl.clear()
- .then(() => page.incomeInputEl.sendKeys('777'))
- .then(() => {
- expect(page.incomeInputEl.getAttribute('value')).toBe('777', 'income should be 777');
- return page.cancelButtonEl.click();
- })
- .then(() => {
- expect(page.incomeInputEl.getAttribute('value')).not.toBe('777', 'income should not be 777');
- });
- });
-
- it('should be able to save change', () => {
- page.incomeInputEl.clear()
- .then(() => page.incomeInputEl.sendKeys('999'))
- .then(() => {
- expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should be 999');
- return page.saveButtonEl.click();
- })
- .then(() => {
- expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should still be 999');
- });
- });
-
- it('should be able to close tax-return', () => {
- page.saveButtonEl.click()
- .then(() => {
- expect(element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0);
- });
- });
-
- });
-
- describe('Villains Scenario', () => {
- it('should list multiple villains', () => {
- expect(element.all(by.css('app-villains-list li')).count()).toBeGreaterThan(1);
- });
- });
-
- describe('Cars Scenario', () => {
-
- it('A-component should use expected services', () => {
- expect(element(by.css('a-car')).getText()).toContain('C1-E1-T1');
- });
-
- it('B-component should use expected services', () => {
- expect(element(by.css('b-car')).getText()).toContain('C2-E2-T1');
- });
-
- it('C-component should use expected services', () => {
- expect(element(by.css('c-car')).getText()).toContain('C3-E2-T1');
- });
- });
-});
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/example-config.json b/docs_app/content/examples/hierarchical-dependency-injection/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/app.component.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/app.component.ts
deleted file mode 100644
index ad9d08fa64..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/app.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- template: `
- Heroes
- Villains
- Cars
-
- Hierarchical Dependency Injection
-
-
-
-
- `
-})
-export class AppComponent {
- showCars = true;
- showHeroes = true;
- showVillains = true;
-}
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/app.module.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/app.module.ts
deleted file mode 100644
index 6ea18655af..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/app.module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-
-import { AppComponent } from './app.component';
-import { HeroTaxReturnComponent } from './hero-tax-return.component';
-import { HeroesListComponent } from './heroes-list.component';
-import { HeroesService } from './heroes.service';
-import { VillainsListComponent } from './villains-list.component';
-
-import { carComponents, carServices } from './car.components';
-
-@NgModule({
- imports: [
- BrowserModule,
- FormsModule
- ],
- providers: [
- carServices,
- HeroesService
- ],
- declarations: [
- AppComponent,
- carComponents,
- HeroesListComponent,
- HeroTaxReturnComponent,
- VillainsListComponent
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
-
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/car.components.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/car.components.ts
deleted file mode 100644
index 259f54b9a4..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/car.components.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Component } from '@angular/core';
-
-import {
- CarService, CarService2, CarService3,
- EngineService, EngineService2, TiresService
-} from './car.services';
-
-////////// CCarComponent ////////////
-@Component({
- selector: 'c-car',
- template: `C: {{description}}
`,
- providers: [
- { provide: CarService, useClass: CarService3 }
- ]
-})
-export class CCarComponent {
- description: string;
- constructor(carService: CarService) {
- this.description = `${carService.getCar().description} (${carService.name})`;
- }
-}
-
-////////// BCarComponent ////////////
-@Component({
- selector: 'b-car',
- template: `
- B: {{description}}
-
- `,
- providers: [
- { provide: CarService, useClass: CarService2 },
- { provide: EngineService, useClass: EngineService2 }
- ]
-})
-export class BCarComponent {
- description: string;
- constructor(carService: CarService) {
- this.description = `${carService.getCar().description} (${carService.name})`;
- }
-}
-
-////////// ACarComponent ////////////
-@Component({
- selector: 'a-car',
- template: `
- A: {{description}}
- `
-})
-export class ACarComponent {
- description: string;
- constructor(carService: CarService) {
- this.description = `${carService.getCar().description} (${carService.name})`;
- }
-}
-////////// CarsComponent ////////////
-@Component({
- selector: 'app-cars',
- template: `
- Cars
- `
-})
-export class CarsComponent { }
-
-////////////////
-
-export const carComponents = [
- CarsComponent,
- ACarComponent, BCarComponent, CCarComponent
-];
-
-// generic car-related services
-export const carServices = [
- CarService, EngineService, TiresService
-];
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/car.services.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/car.services.ts
deleted file mode 100644
index 03c79270b0..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/car.services.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Injectable } from '@angular/core';
-
-/// Model ///
-export class Car {
- name = 'Avocado Motors';
- constructor(public engine: Engine, public tires: Tires) { }
-
- get description() {
- return `${this.name} car with ` +
- `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`;
- }
-}
-
-export class Engine {
- cylinders = 4;
-}
-
-export class Tires {
- make = 'Flintstone';
- model = 'Square';
-}
-
-//// Engine services ///
-@Injectable()
-export class EngineService {
- id = 'E1';
- getEngine() { return new Engine(); }
-}
-
-@Injectable()
-export class EngineService2 {
- id = 'E2';
- getEngine() {
- const eng = new Engine();
- eng.cylinders = 8;
- return eng;
- }
-}
-
-//// Tire services ///
-@Injectable()
-export class TiresService {
- id = 'T1';
- getTires() { return new Tires(); }
-}
-
-/// Car Services ///
-@Injectable()
-export class CarService {
- id = 'C1';
- constructor(
- protected engineService: EngineService,
- protected tiresService: TiresService) { }
-
- getCar() {
- return new Car(
- this.engineService.getEngine(),
- this.tiresService.getTires());
- }
-
- get name() {
- return `${this.id}-${this.engineService.id}-${this.tiresService.id}`;
- }
-}
-
-@Injectable()
-export class CarService2 extends CarService {
- id = 'C2';
- constructor(
- protected engineService: EngineService,
- protected tiresService: TiresService) {
- super(engineService, tiresService);
- }
- getCar() {
- const car = super.getCar();
- car.name = 'BamBam Motors, BroVan 2000';
- return car;
- }
-}
-
-@Injectable()
-export class CarService3 extends CarService2 {
- id = 'C3';
- constructor(
- protected engineService: EngineService,
- protected tiresService: TiresService) {
- super(engineService, tiresService);
- }
- getCar() {
- const car = super.getCar();
- car.name = 'Chizzamm Motors, Calico UltraMax Supreme';
- return car;
- }
-}
-
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.css b/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.css
deleted file mode 100644
index 1d29a1d168..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.tax-return { border: thin dashed green; margin: 1em; padding: 1em; width: 18em; position: relative }
-#name { font-weight: bold;}
-#tid { float: right; }
-input { font-size: 100%; padding-left: 2px; width: 6em; }
-input.num { text-align: right; padding-left: 0; padding-right: 4px; width: 4em;}
-fieldset { border: 0 none;}
-
-.msg {
- color: white;
- font-size: 150%;
- position: absolute;
- /*opacity: 0.3;*/
- left: 2px;
- top: 3em;
- width: 98%;
- background-color: green;
- text-align: center;
-}
-.msg.canceled {
- color: white;
- background-color: red;
-}
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html b/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html
deleted file mode 100644
index ebf2dcbaaa..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
{{message}}
-
- {{taxReturn.name}}
- TID: {{taxReturn.tid}}
-
-
-
- Income:
-
-
-
- Tax: {{taxReturn.tax}}
-
-
- Save
- Cancel
- Close
-
-
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts
deleted file mode 100644
index 0696e5f96b..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// #docregion
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { HeroTaxReturn } from './hero';
-import { HeroTaxReturnService } from './hero-tax-return.service';
-
-@Component({
- selector: 'app-hero-tax-return',
- templateUrl: './hero-tax-return.component.html',
- styleUrls: [ './hero-tax-return.component.css' ],
- // #docregion providers
- providers: [ HeroTaxReturnService ]
- // #enddocregion providers
-})
-export class HeroTaxReturnComponent {
- message = '';
- @Output() close = new EventEmitter();
-
- get taxReturn(): HeroTaxReturn {
- return this.heroTaxReturnService.taxReturn;
- }
- @Input()
- set taxReturn (htr: HeroTaxReturn) {
- this.heroTaxReturnService.taxReturn = htr;
- }
-
- constructor(private heroTaxReturnService: HeroTaxReturnService ) { }
-
- onCanceled() {
- this.flashMessage('Canceled');
- this.heroTaxReturnService.restoreTaxReturn();
- };
-
- onClose() { this.close.emit(); };
-
- onSaved() {
- this.flashMessage('Saved');
- this.heroTaxReturnService.saveTaxReturn();
- }
-
- flashMessage(msg: string) {
- this.message = msg;
- setTimeout(() => this.message = '', 500);
- }
-}
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts
deleted file mode 100644
index d6ff0f7fff..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.service.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { HeroTaxReturn } from './hero';
-import { HeroesService } from './heroes.service';
-
-@Injectable()
-export class HeroTaxReturnService {
- private currentTaxReturn: HeroTaxReturn;
- private originalTaxReturn: HeroTaxReturn;
-
- constructor(private heroService: HeroesService) { }
-
- set taxReturn (htr: HeroTaxReturn) {
- this.originalTaxReturn = htr;
- this.currentTaxReturn = htr.clone();
- }
-
- get taxReturn (): HeroTaxReturn {
- return this.currentTaxReturn;
- }
-
- restoreTaxReturn() {
- this.taxReturn = this.originalTaxReturn;
- }
-
- saveTaxReturn() {
- this.taxReturn = this.currentTaxReturn;
- this.heroService.saveTaxReturn(this.currentTaxReturn).subscribe();
- }
-}
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero.ts
deleted file mode 100644
index 4ad6ccd8eb..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/hero.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// #docregion
-
-export class Hero {
- id: number;
- name: string;
- tid: string; // tax id
-}
-
-//// HeroTaxReturn ////
-let nextId = 100;
-
-export class HeroTaxReturn {
- constructor(
- public id = nextId++,
- public hero: Hero,
- public income = 0 ) {
- if (id === 0) { id = nextId++; }
- }
-
- get name() { return this.hero.name; }
- get tax() { return this.income ? .10 * this.income : 0; }
- get tid() { return this.hero.tid; }
-
- toString() {
- return `${this.hero.name}`;
- }
-
- clone() {
- return new HeroTaxReturn(this.id, this.hero, this.income);
- }
-}
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts
deleted file mode 100644
index 7e598a8038..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-
-import { Hero, HeroTaxReturn } from './hero';
-import { HeroesService } from './heroes.service';
-
-@Component({
- selector: 'app-heroes-list',
- template: `
-
-
Hero Tax Returns
-
-
-
-
- `,
- styles: [ 'li {cursor: pointer;}' ]
-})
-export class HeroesListComponent {
- heroes: Observable;
- selectedTaxReturns: HeroTaxReturn[] = [];
-
- constructor(private heroesService: HeroesService) {
- this.heroes = heroesService.getHeroes();
- }
-
- showTaxReturn(hero: Hero) {
- this.heroesService.getTaxReturn(hero)
- .subscribe(htr => {
- // show if not currently shown
- if (!this.selectedTaxReturns.find(tr => tr.id === htr.id)) {
- this.selectedTaxReturns.push(htr);
- }
- });
- }
-
- closeTaxReturn(ix: number) {
- this.selectedTaxReturns.splice(ix, 1);
- }
-}
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts
deleted file mode 100644
index c4d08c7b8f..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/heroes.service.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { Observable, Observer } from 'rxjs';
-
-import { Hero, HeroTaxReturn } from './hero';
-
-@Injectable()
-export class HeroesService {
- heroes: Hero[] = [
- { id: 1, name: 'RubberMan', tid: '082-27-5678'},
- { id: 2, name: 'Tornado', tid: '099-42-4321'}
- ];
-
- heroTaxReturns: HeroTaxReturn[] = [
- new HeroTaxReturn(10, this.heroes[0], 35000),
- new HeroTaxReturn(20, this.heroes[1], 1250000)
- ];
-
- getHeroes(): Observable {
- return new Observable((observer: Observer) => {
- observer.next(this.heroes);
- observer.complete();
- });
- }
-
- getTaxReturn(hero: Hero): Observable {
- return new Observable((observer: Observer) => {
- const htr = this.heroTaxReturns.find(t => t.hero.id === hero.id);
- observer.next(htr || new HeroTaxReturn(0, hero));
- observer.complete();
- });
- }
-
- saveTaxReturn(heroTaxReturn: HeroTaxReturn): Observable {
- return new Observable((observer: Observer) => {
- const htr = this.heroTaxReturns.find(t => t.id === heroTaxReturn.id);
- if (htr) {
- heroTaxReturn = Object.assign(htr, heroTaxReturn); // demo: mutate
- } else {
- this.heroTaxReturns.push(heroTaxReturn);
- }
- observer.next(heroTaxReturn);
- observer.complete();
- });
- }
-}
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.html b/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.html
deleted file mode 100644
index 75e5ba3237..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts
deleted file mode 100644
index aa70bdf3cb..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-
-import { Villain, VillainsService } from './villains.service';
-
-// #docregion metadata
-@Component({
- selector: 'app-villains-list',
- templateUrl: './villains-list.component.html',
- providers: [ VillainsService ]
-})
-// #enddocregion metadata
-export class VillainsListComponent {
- villains: Observable;
-
- constructor(private villainsService: VillainsService) {
- this.villains = villainsService.getVillains();
- }
-}
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts
deleted file mode 100644
index a8605bd11d..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/app/villains.service.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { of } from 'rxjs';
-
-export interface Villain { id: number; name: string; }
-
-@Injectable()
-export class VillainsService {
- villains: Villain[] = [
- { id: 1, name: 'Dr. Evil'},
- { id: 2, name: 'Moriarty'}
- ];
-
- getVillains() {
- return of(this.villains);
- }
-}
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/index.html b/docs_app/content/examples/hierarchical-dependency-injection/src/index.html
deleted file mode 100644
index dd35fec6ae..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
- Hierarchical Injectors
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/src/main.ts b/docs_app/content/examples/hierarchical-dependency-injection/src/main.ts
deleted file mode 100644
index 0740658908..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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);
diff --git a/docs_app/content/examples/hierarchical-dependency-injection/stackblitz.json b/docs_app/content/examples/hierarchical-dependency-injection/stackblitz.json
deleted file mode 100644
index 7bb2331163..0000000000
--- a/docs_app/content/examples/hierarchical-dependency-injection/stackblitz.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "description": "Hierarchical Dependency Injection",
- "files":[
- "!**/*.d.ts",
- "!**/*.js"
- ],
- "tags": ["dependency", "injection"]
-}
diff --git a/docs_app/content/examples/http/e2e/app.e2e-spec.ts b/docs_app/content/examples/http/e2e/app.e2e-spec.ts
deleted file mode 100644
index d0a77b5239..0000000000
--- a/docs_app/content/examples/http/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-import { browser, element, by, ElementFinder } from 'protractor';
-import { resolve } from 'path';
-
-const page = {
- configClearButton: element.all(by.css('app-config > div button')).get(2),
- configErrorButton: element.all(by.css('app-config > div button')).get(3),
- configErrorMessage: element(by.css('app-config p')),
- configGetButton: element.all(by.css('app-config > div button')).get(0),
- configGetResponseButton: element.all(by.css('app-config > div button')).get(1),
- configSpan: element(by.css('app-config span')),
- downloadButton: element.all(by.css('app-downloader button')).get(0),
- downloadClearButton: element.all(by.css('app-downloader button')).get(1),
- downloadMessage: element(by.css('app-downloader p')),
- heroesListAddButton: element.all(by.css('app-heroes > div button')).get(0),
- heroesListInput: element(by.css('app-heroes > div input')),
- heroesListSearchButton: element.all(by.css('app-heroes > div button')).get(1),
- heroesListItems: element.all(by.css('app-heroes ul li')),
- logClearButton: element(by.css('app-messages button')),
- logList: element(by.css('app-messages ol')),
- logListItems: element.all(by.css('app-messages ol li')),
- searchInput: element(by.css('app-package-search input#name')),
- searchListItems: element.all(by.css('app-package-search li')),
- uploadInput: element(by.css('app-uploader input')),
- uploadMessage: element(by.css('app-uploader p'))
-};
-
-let checkLogForMessage = (message: string) => {
- expect(page.logList.getText()).toContain(message);
-};
-
-// TODO(i): temorarily disable these tests because angular-in-memory-web-api is not compatible with rxjs v6 yet
-// and we don't have the backwards compatibility package yet.
-// Reenable after rxjs v6 compatibility package is out or angular-in-memory-web-api is compatible with rxjs v6
-xdescribe('Http Tests', function() {
- beforeEach(() => {
- browser.get('');
- });
-
- describe('Heroes', () => {
- it('retrieves the list of heroes at startup', () => {
- expect(page.heroesListItems.count()).toBe(4);
- expect(page.heroesListItems.get(0).getText()).toContain('Mr. Nice');
- checkLogForMessage('GET "api/heroes"');
- });
-
- it('makes a POST to add a new hero', () => {
- page.heroesListInput.sendKeys('Magneta');
- page.heroesListAddButton.click();
- expect(page.heroesListItems.count()).toBe(5);
- checkLogForMessage('POST "api/heroes"');
- });
-
- it('makes a GET to search for a hero', () => {
- page.heroesListInput.sendKeys('Celeritas');
- page.heroesListSearchButton.click();
- checkLogForMessage('GET "api/heroes?name=Celeritas"');
- });
- });
-
- describe('Messages', () => {
- it('can clear the logs', () => {
- expect(page.logListItems.count()).toBe(1);
- page.logClearButton.click();
- expect(page.logListItems.count()).toBe(0);
- });
- });
-
- describe('Configuration', () => {
- it('can fetch the configuration JSON file', () => {
- page.configGetButton.click();
- checkLogForMessage('GET "assets/config.json"');
- expect(page.configSpan.getText()).toContain('Heroes API URL is "api/heroes"');
- expect(page.configSpan.getText()).toContain('Textfile URL is "assets/textfile.txt"');
- });
-
- it('can fetch the configuration JSON file with headers', () => {
- page.configGetResponseButton.click();
- checkLogForMessage('GET "assets/config.json"');
- expect(page.configSpan.getText()).toContain('Response headers:');
- expect(page.configSpan.getText()).toContain('content-type: application/json; charset=UTF-8');
- });
-
- it('can clear the configuration log', () => {
- page.configGetResponseButton.click();
- expect(page.configSpan.getText()).toContain('Response headers:');
- page.configClearButton.click();
- expect(page.configSpan.isPresent()).toBeFalsy();
- });
-
- it('throws an error for a non valid url', () => {
- page.configErrorButton.click();
- checkLogForMessage('GET "not/a/real/url"');
- expect(page.configErrorMessage.getText()).toContain('"Something bad happened; please try again later."');
- });
- });
-
- describe('Download', () => {
- it('can download a txt file and show it', () => {
- page.downloadButton.click();
- checkLogForMessage('DownloaderService downloaded "assets/textfile.txt"');
- checkLogForMessage('GET "assets/textfile.txt"');
- expect(page.downloadMessage.getText()).toContain('Contents: "This is the downloaded text file "');
- });
-
- it('can clear the log of the download', () => {
- page.downloadButton.click();
- expect(page.downloadMessage.getText()).toContain('Contents: "This is the downloaded text file "');
- page.downloadClearButton.click();
- expect(page.downloadMessage.isPresent()).toBeFalsy();
- });
- });
-
- describe('Upload', () => {
- it('can upload a file', () => {
- const filename = 'app.po.ts';
- const url = resolve(__dirname, filename);
- page.uploadInput.sendKeys(url);
- checkLogForMessage('POST "/upload/file" succeeded in');
- expect(page.uploadMessage.getText()).toContain(
- `File "${filename}" was completely uploaded!`);
- });
- });
-
- describe('PackageSearch', () => {
- it('can search for npm package and find in cache', () => {
- const packageName = 'angular';
- page.searchInput.sendKeys(packageName);
- checkLogForMessage(
- 'Caching response from "https://npmsearch.com/query?q=angular"');
- expect(page.searchListItems.count()).toBeGreaterThan(1, 'angular items');
-
- page.searchInput.clear();
- page.searchInput.sendKeys(' ');
- expect(page.searchListItems.count()).toBe(0, 'search empty');
-
- page.searchInput.clear();
- page.searchInput.sendKeys(packageName);
- checkLogForMessage(
- 'Found cached response for "https://npmsearch.com/query?q=angular"');
- });
- });
-});
diff --git a/docs_app/content/examples/http/example-config.json b/docs_app/content/examples/http/example-config.json
deleted file mode 100644
index 317e9458f3..0000000000
--- a/docs_app/content/examples/http/example-config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "projectType": "testing"
-}
diff --git a/docs_app/content/examples/http/specs.stackblitz.json b/docs_app/content/examples/http/specs.stackblitz.json
deleted file mode 100644
index 1442c98f3a..0000000000
--- a/docs_app/content/examples/http/specs.stackblitz.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "description": "Http Guide Testing",
- "files":[
- "src/app/heroes/heroes.service.ts",
- "src/app/heroes/heroes.service.spec.ts",
-
- "src/app/http-error-handler.service.ts",
- "src/app/message.service.ts",
- "src/testing/*.ts",
-
- "src/styles.css",
- "src/test.css",
- "src/main-specs.ts",
- "src/index-specs.html"
- ],
- "main": "src/index-specs.html",
- "tags": ["http", "testing"]
-}
diff --git a/docs_app/content/examples/http/src/app/app.component.html b/docs_app/content/examples/http/src/app/app.component.html
deleted file mode 100644
index e5d5dec909..0000000000
--- a/docs_app/content/examples/http/src/app/app.component.html
+++ /dev/null
@@ -1,24 +0,0 @@
-HTTP Sample
-
-
- Heroes
-
-
- Config
-
-
- Downloader
-
-
- Uploader
-
-
- Search
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/http/src/app/app.component.ts b/docs_app/content/examples/http/src/app/app.component.ts
deleted file mode 100644
index 655b550276..0000000000
--- a/docs_app/content/examples/http/src/app/app.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html'
-})
-export class AppComponent {
- showHeroes = true;
- showConfig = true;
- showDownloader = true;
- showUploader = true;
- showSearch = true;
-
- toggleHeroes() { this.showHeroes = !this.showHeroes; }
- toggleConfig() { this.showConfig = !this.showConfig; }
- toggleDownloader() { this.showDownloader = !this.showDownloader; }
- toggleUploader() { this.showUploader = !this.showUploader; }
- toggleSearch() { this.showSearch = !this.showSearch; }
- }
diff --git a/docs_app/content/examples/http/src/app/app.module.ts b/docs_app/content/examples/http/src/app/app.module.ts
deleted file mode 100644
index 0929ec3a9b..0000000000
--- a/docs_app/content/examples/http/src/app/app.module.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-// #docplaster
-// #docregion sketch
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-// #enddocregion sketch
-import { FormsModule } from '@angular/forms';
-// #docregion sketch
-import { HttpClientModule } from '@angular/common/http';
-// #enddocregion sketch
-import { HttpClientXsrfModule } from '@angular/common/http';
-
-import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
-import { InMemoryDataService } from './in-memory-data.service';
-
-import { RequestCache, RequestCacheWithMap } from './request-cache.service';
-
-import { AppComponent } from './app.component';
-import { AuthService } from './auth.service';
-import { ConfigComponent } from './config/config.component';
-import { DownloaderComponent } from './downloader/downloader.component';
-import { HeroesComponent } from './heroes/heroes.component';
-import { HttpErrorHandler } from './http-error-handler.service';
-import { MessageService } from './message.service';
-import { MessagesComponent } from './messages/messages.component';
-import { PackageSearchComponent } from './package-search/package-search.component';
-import { UploaderComponent } from './uploader/uploader.component';
-
-import { httpInterceptorProviders } from './http-interceptors/index';
-// #docregion sketch
-
-@NgModule({
-// #docregion xsrf
- imports: [
-// #enddocregion xsrf
- BrowserModule,
-// #enddocregion sketch
- FormsModule,
-// #docregion sketch
- // import HttpClientModule after BrowserModule.
-// #docregion xsrf
- HttpClientModule,
-// #enddocregion sketch
- HttpClientXsrfModule.withOptions({
- cookieName: 'My-Xsrf-Cookie',
- headerName: 'My-Xsrf-Header',
- }),
-// #enddocregion xsrf
-
- // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
- // and returns simulated server responses.
- // Remove it when a real server is ready to receive requests.
- HttpClientInMemoryWebApiModule.forRoot(
- InMemoryDataService, {
- dataEncapsulation: false,
- passThruUnknownUrl: true,
- put204: false // return entity after PUT/update
- }
- )
-// #docregion sketch, xsrf
- ],
-// #enddocregion xsrf
- declarations: [
- AppComponent,
-// #enddocregion sketch
- ConfigComponent,
- DownloaderComponent,
- HeroesComponent,
- MessagesComponent,
- UploaderComponent,
- PackageSearchComponent,
-// #docregion sketch
- ],
-// #enddocregion sketch
-// #docregion interceptor-providers
- providers: [
- // #enddocregion interceptor-providers
- AuthService,
- HttpErrorHandler,
- MessageService,
- { provide: RequestCache, useClass: RequestCacheWithMap },
- // #docregion interceptor-providers
- httpInterceptorProviders
- ],
-// #enddocregion interceptor-providers
-// #docregion sketch
- bootstrap: [ AppComponent ]
-})
-export class AppModule {}
-// #enddocregion sketch
diff --git a/docs_app/content/examples/http/src/app/auth.service.ts b/docs_app/content/examples/http/src/app/auth.service.ts
deleted file mode 100644
index 67a4eb4dc5..0000000000
--- a/docs_app/content/examples/http/src/app/auth.service.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-/** Mock client-side authentication/authorization service */
-@Injectable()
-export class AuthService {
- getAuthorizationToken() {
- return 'some-auth-token';
- }
-}
diff --git a/docs_app/content/examples/http/src/app/config/config.component.html b/docs_app/content/examples/http/src/app/config/config.component.html
deleted file mode 100644
index e17e9bc109..0000000000
--- a/docs_app/content/examples/http/src/app/config/config.component.html
+++ /dev/null
@@ -1,18 +0,0 @@
-Get configuration from JSON file
-
-
get
-
getResponse
-
clear
-
error
-
- Heroes API URL is "{{config.heroesUrl}}"
- Textfile URL is "{{config.textfile}}"
-
-
-
-{{error | json}}
diff --git a/docs_app/content/examples/http/src/app/config/config.component.ts b/docs_app/content/examples/http/src/app/config/config.component.ts
deleted file mode 100644
index c082e81030..0000000000
--- a/docs_app/content/examples/http/src/app/config/config.component.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-import { Config, ConfigService } from './config.service';
-import { MessageService } from '../message.service';
-
-@Component({
- selector: 'app-config',
- templateUrl: './config.component.html',
- providers: [ ConfigService ],
- styles: ['.error {color: red;}']
-})
-export class ConfigComponent {
- error: any;
- headers: string[];
- // #docregion v2
- config: Config;
-
- // #enddocregion v2
- constructor(private configService: ConfigService) {}
-
- clear() {
- this.config = undefined;
- this.error = undefined;
- this.headers = undefined;
- }
-
- // #docregion v1, v2, v3
- showConfig() {
- this.configService.getConfig()
- // #enddocregion v1, v2
- .subscribe(
- (data: Config) => this.config = { ...data }, // success path
- error => this.error = error // error path
- );
- }
- // #enddocregion v3
-
- showConfig_v1() {
- this.configService.getConfig_1()
- // #docregion v1, v1_callback
- .subscribe((data: Config) => this.config = {
- heroesUrl: data['heroesUrl'],
- textfile: data['textfile']
- });
- // #enddocregion v1_callback
- }
- // #enddocregion v1
-
- showConfig_v2() {
- this.configService.getConfig()
- // #docregion v2, v2_callback
- // clone the data object, using its known Config shape
- .subscribe((data: Config) => this.config = { ...data });
- // #enddocregion v2_callback
- }
- // #enddocregion v2
-
-// #docregion showConfigResponse
- showConfigResponse() {
- this.configService.getConfigResponse()
- // resp is of type `HttpResponse`
- .subscribe(resp => {
- // display its headers
- const keys = resp.headers.keys();
- this.headers = keys.map(key =>
- `${key}: ${resp.headers.get(key)}`);
-
- // access the body directly, which is typed as `Config`.
- this.config = { ... resp.body };
- });
- }
-// #enddocregion showConfigResponse
- makeError() {
- this.configService.makeIntentionalError().subscribe(null, error => this.error = error );
- }
-}
-// #enddocregion
diff --git a/docs_app/content/examples/http/src/app/config/config.service.ts b/docs_app/content/examples/http/src/app/config/config.service.ts
deleted file mode 100644
index 4dd71c69ab..0000000000
--- a/docs_app/content/examples/http/src/app/config/config.service.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-// #docplaster
-// #docregion , proto
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-// #enddocregion proto
-import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
-
-// #docregion rxjs-imports
-import { Observable, throwError } from 'rxjs';
-import { catchError, retry } from 'rxjs/operators';
-// #enddocregion rxjs-imports
-
-// #docregion config-interface
-export interface Config {
- heroesUrl: string;
- textfile: string;
-}
-// #enddocregion config-interface
-// #docregion proto
-
-@Injectable()
-export class ConfigService {
- // #enddocregion proto
- // #docregion getConfig_1
- configUrl = 'assets/config.json';
-
- // #enddocregion getConfig_1
- // #docregion proto
- constructor(private http: HttpClient) { }
- // #enddocregion proto
-
- // #docregion getConfig, getConfig_1, getConfig_2, getConfig_3
- getConfig() {
- // #enddocregion getConfig_1, getConfig_2, getConfig_3
- return this.http.get(this.configUrl)
- .pipe(
- retry(3), // retry a failed request up to 3 times
- catchError(this.handleError) // then handle the error
- );
- }
- // #enddocregion getConfig
-
- getConfig_1() {
- // #docregion getConfig_1
- return this.http.get(this.configUrl);
- }
- // #enddocregion getConfig_1
-
- getConfig_2() {
- // #docregion getConfig_2
- // now returns an Observable of Config
- return this.http.get(this.configUrl);
- }
- // #enddocregion getConfig_2
-
- getConfig_3() {
- // #docregion getConfig_3
- return this.http.get(this.configUrl)
- .pipe(
- catchError(this.handleError)
- );
- }
- // #enddocregion getConfig_3
-
- // #docregion getConfigResponse
- getConfigResponse(): Observable> {
- return this.http.get(
- this.configUrl, { observe: 'response' });
- }
- // #enddocregion getConfigResponse
-
- // #docregion handleError
- private handleError(error: HttpErrorResponse) {
- if (error.error instanceof ErrorEvent) {
- // A client-side or network error occurred. Handle it accordingly.
- console.error('An error occurred:', error.error.message);
- } else {
- // The backend returned an unsuccessful response code.
- // The response body may contain clues as to what went wrong,
- console.error(
- `Backend returned code ${error.status}, ` +
- `body was: ${error.error}`);
- }
- // return an observable with a user-facing error message
- return throwError(
- 'Something bad happened; please try again later.');
- };
- // #enddocregion handleError
-
- makeIntentionalError() {
- return this.http.get('not/a/real/url')
- .pipe(
- catchError(this.handleError)
- );
- }
-
-// #docregion proto
-}
-// #enddocregion proto
diff --git a/docs_app/content/examples/http/src/app/downloader/downloader.component.html b/docs_app/content/examples/http/src/app/downloader/downloader.component.html
deleted file mode 100644
index 3eb9516472..0000000000
--- a/docs_app/content/examples/http/src/app/downloader/downloader.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-Download the textfile
-Download
-clear
-Contents: "{{contents}}"
diff --git a/docs_app/content/examples/http/src/app/downloader/downloader.component.ts b/docs_app/content/examples/http/src/app/downloader/downloader.component.ts
deleted file mode 100644
index 21216d1c63..0000000000
--- a/docs_app/content/examples/http/src/app/downloader/downloader.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component } from '@angular/core';
-import { DownloaderService } from './downloader.service';
-
-@Component({
- selector: 'app-downloader',
- templateUrl: './downloader.component.html',
- providers: [ DownloaderService ]
-})
-export class DownloaderComponent {
- contents: string;
- constructor(private downloaderService: DownloaderService) {}
-
- clear() {
- this.contents = undefined;
- }
-
- // #docregion download
- download() {
- this.downloaderService.getTextFile('assets/textfile.txt')
- .subscribe(results => this.contents = results);
- }
- // #enddocregion download
-}
diff --git a/docs_app/content/examples/http/src/app/downloader/downloader.service.ts b/docs_app/content/examples/http/src/app/downloader/downloader.service.ts
deleted file mode 100644
index e10a4f2b35..0000000000
--- a/docs_app/content/examples/http/src/app/downloader/downloader.service.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-
-import { tap } from 'rxjs/operators';
-
-import { MessageService } from '../message.service';
-
-@Injectable()
-export class DownloaderService {
- constructor(
- private http: HttpClient,
- private messageService: MessageService) { }
-
- // #docregion getTextFile
- getTextFile(filename: string) {
- // The Observable returned by get() is of type Observable
- // because a text response was specified.
- // There's no need to pass a type parameter to get().
- return this.http.get(filename, {responseType: 'text'})
- .pipe(
- tap( // Log the result or error
- data => this.log(filename, data),
- error => this.logError(filename, error)
- )
- );
- }
- // #enddocregion getTextFile
-
- private log(filename: string, data: string) {
- const message = `DownloaderService downloaded "${filename}" and got "${data}".`;
- this.messageService.add(message);
- }
-
- private logError(filename: string, error: any) {
- const message = `DownloaderService failed to download "${filename}"; got error "${error.message}".`;
- console.error(message);
- this.messageService.add(message);
- }
-}
diff --git a/docs_app/content/examples/http/src/app/heroes/hero.ts b/docs_app/content/examples/http/src/app/heroes/hero.ts
deleted file mode 100644
index a61b497759..0000000000
--- a/docs_app/content/examples/http/src/app/heroes/hero.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface Hero {
- id: number;
- name: string;
-}
diff --git a/docs_app/content/examples/http/src/app/heroes/heroes.component.css b/docs_app/content/examples/http/src/app/heroes/heroes.component.css
deleted file mode 100644
index 89a07c17bf..0000000000
--- a/docs_app/content/examples/http/src/app/heroes/heroes.component.css
+++ /dev/null
@@ -1,89 +0,0 @@
-/* HeroesComponent's private CSS styles */
-.heroes {
- margin: 0 0 2em 0;
- list-style-type: none;
- padding: 0;
- width: 15em;
-}
-.heroes li {
- position: relative;
- cursor: pointer;
- background-color: #EEE;
- margin: .5em;
- padding: .3em 0;
- height: 1.6em;
- border-radius: 4px;
- width: 19em;
-}
-
-.heroes li:hover {
- color: #607D8B;
- background-color: #DDD;
- left: .1em;
-}
-
-.heroes a {
- color: #888;
- text-decoration: none;
- position: relative;
- display: block;
- width: 250px;
-}
-
-.heroes a:hover {
- color:#607D8B;
-}
-
-.heroes .badge {
- display: inline-block;
- font-size: small;
- color: white;
- padding: 0.8em 0.7em 0 0.7em;
- background-color: #607D8B;
- line-height: 1em;
- position: relative;
- left: -1px;
- top: -4px;
- height: 1.8em;
- min-width: 16px;
- text-align: right;
- margin-right: .8em;
- border-radius: 4px 0 0 4px;
-}
-
-.button {
- background-color: #eee;
- border: none;
- padding: 5px 10px;
- border-radius: 4px;
- cursor: pointer;
- cursor: hand;
- font-family: Arial;
-}
-
-button:hover {
- background-color: #cfd8dc;
-}
-
-button.delete {
- position: relative;
- left: 24em;
- top: -32px;
- background-color: gray !important;
- color: white;
- display: inherit;
- padding: 5px 8px;
- width: 2em;
-}
-
-input {
- font-size: 100%;
- margin-bottom: 2px;
- width: 11em;
-}
-
-.heroes input {
- position: relative;
- top: -3px;
- width: 12em;
-}
diff --git a/docs_app/content/examples/http/src/app/heroes/heroes.component.html b/docs_app/content/examples/http/src/app/heroes/heroes.component.html
deleted file mode 100644
index 4bb3597a71..0000000000
--- a/docs_app/content/examples/http/src/app/heroes/heroes.component.html
+++ /dev/null
@@ -1,32 +0,0 @@
-Heroes
-
-
- Hero name:
-
-
-
-
- add
-
-
- search
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/http/src/app/heroes/heroes.component.ts b/docs_app/content/examples/http/src/app/heroes/heroes.component.ts
deleted file mode 100644
index d44f80e9ff..0000000000
--- a/docs_app/content/examples/http/src/app/heroes/heroes.component.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { Hero } from './hero';
-import { HeroesService } from './heroes.service';
-
-@Component({
- selector: 'app-heroes',
- templateUrl: './heroes.component.html',
- providers: [ HeroesService ],
- styleUrls: ['./heroes.component.css']
-})
-export class HeroesComponent implements OnInit {
- heroes: Hero[];
- editHero: Hero; // the hero currently being edited
-
- constructor(private heroesService: HeroesService) { }
-
- ngOnInit() {
- this.getHeroes();
- }
-
- getHeroes(): void {
- this.heroesService.getHeroes()
- .subscribe(heroes => this.heroes = heroes);
- }
-
- add(name: string): void {
- this.editHero = undefined;
- name = name.trim();
- if (!name) { return; }
-
- // The server will generate the id for this new hero
- const newHero: Hero = { name } as Hero;
- // #docregion add-hero-subscribe
- this.heroesService.addHero(newHero)
- .subscribe(hero => this.heroes.push(hero));
- // #enddocregion add-hero-subscribe
- }
-
- delete(hero: Hero): void {
- this.heroes = this.heroes.filter(h => h !== hero);
- // #docregion delete-hero-subscribe
- this.heroesService.deleteHero(hero.id).subscribe();
- // #enddocregion delete-hero-subscribe
- /*
- // #docregion delete-hero-no-subscribe
- // oops ... subscribe() is missing so nothing happens
- this.heroesService.deleteHero(hero.id);
- // #enddocregion delete-hero-no-subscribe
- */
- }
-
- edit(hero) {
- this.editHero = hero;
- }
-
- search(searchTerm: string) {
- this.editHero = undefined;
- if (searchTerm) {
- this.heroesService.searchHeroes(searchTerm)
- .subscribe(heroes => this.heroes = heroes);
- }
- }
-
- update() {
- if (this.editHero) {
- this.heroesService.updateHero(this.editHero)
- .subscribe(hero => {
- // replace the hero in the heroes list with update from server
- const ix = hero ? this.heroes.findIndex(h => h.id === hero.id) : -1;
- if (ix > -1) { this.heroes[ix] = hero; }
- });
- this.editHero = undefined;
- }
- }
-}
diff --git a/docs_app/content/examples/http/src/app/heroes/heroes.service.spec.ts b/docs_app/content/examples/http/src/app/heroes/heroes.service.spec.ts
deleted file mode 100644
index bfc204b4ad..0000000000
--- a/docs_app/content/examples/http/src/app/heroes/heroes.service.spec.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-
-// Other imports
-import { TestBed } from '@angular/core/testing';
-import { HttpClient, HttpResponse } from '@angular/common/http';
-
-import { Hero } from './hero';
-import { HeroesService } from './heroes.service';
-import { HttpErrorHandler } from '../http-error-handler.service';
-import { MessageService } from '../message.service';
-
-describe('HeroesService', () => {
- let httpClient: HttpClient;
- let httpTestingController: HttpTestingController;
- let heroService: HeroesService;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- // Import the HttpClient mocking services
- imports: [ HttpClientTestingModule ],
- // Provide the service-under-test and its dependencies
- providers: [
- HeroesService,
- HttpErrorHandler,
- MessageService
- ]
- });
-
- // Inject the http, test controller, and service-under-test
- // as they will be referenced by each test.
- httpClient = TestBed.get(HttpClient);
- httpTestingController = TestBed.get(HttpTestingController);
- heroService = TestBed.get(HeroesService);
- });
-
- afterEach(() => {
- // After every test, assert that there are no more pending requests.
- httpTestingController.verify();
- });
-
- /// HeroService method tests begin ///
-
- describe('#getHeroes', () => {
- let expectedHeroes: Hero[];
-
- beforeEach(() => {
- heroService = TestBed.get(HeroesService);
- expectedHeroes = [
- { id: 1, name: 'A' },
- { id: 2, name: 'B' },
- ] as Hero[];
- });
-
- it('should return expected heroes (called once)', () => {
-
- heroService.getHeroes().subscribe(
- heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
- fail
- );
-
- // HeroService should have made one request to GET heroes from expected URL
- const req = httpTestingController.expectOne(heroService.heroesUrl);
- expect(req.request.method).toEqual('GET');
-
- // Respond with the mock heroes
- req.flush(expectedHeroes);
- });
-
- it('should be OK returning no heroes', () => {
-
- heroService.getHeroes().subscribe(
- heroes => expect(heroes.length).toEqual(0, 'should have empty heroes array'),
- fail
- );
-
- const req = httpTestingController.expectOne(heroService.heroesUrl);
- req.flush([]); // Respond with no heroes
- });
-
- // This service reports the error but finds a way to let the app keep going.
- it('should turn 404 into an empty heroes result', () => {
-
- heroService.getHeroes().subscribe(
- heroes => expect(heroes.length).toEqual(0, 'should return empty heroes array'),
- fail
- );
-
- const req = httpTestingController.expectOne(heroService.heroesUrl);
-
- // respond with a 404 and the error message in the body
- const msg = 'deliberate 404 error';
- req.flush(msg, {status: 404, statusText: 'Not Found'});
- });
-
- it('should return expected heroes (called multiple times)', () => {
-
- heroService.getHeroes().subscribe();
- heroService.getHeroes().subscribe();
- heroService.getHeroes().subscribe(
- heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
- fail
- );
-
- const requests = httpTestingController.match(heroService.heroesUrl);
- expect(requests.length).toEqual(3, 'calls to getHeroes()');
-
- // Respond to each request with different mock hero results
- requests[0].flush([]);
- requests[1].flush([{id: 1, name: 'bob'}]);
- requests[2].flush(expectedHeroes);
- });
- });
-
- describe('#updateHero', () => {
- // Expecting the query form of URL so should not 404 when id not found
- const makeUrl = (id: number) => `${heroService.heroesUrl}/?id=${id}`;
-
- it('should update a hero and return it', () => {
-
- const updateHero: Hero = { id: 1, name: 'A' };
-
- heroService.updateHero(updateHero).subscribe(
- data => expect(data).toEqual(updateHero, 'should return the hero'),
- fail
- );
-
- // HeroService should have made one request to PUT hero
- const req = httpTestingController.expectOne(heroService.heroesUrl);
- expect(req.request.method).toEqual('PUT');
- expect(req.request.body).toEqual(updateHero);
-
- // Expect server to return the hero after PUT
- const expectedResponse = new HttpResponse(
- { status: 200, statusText: 'OK', body: updateHero });
- req.event(expectedResponse);
- });
-
- // This service reports the error but finds a way to let the app keep going.
- it('should turn 404 error into return of the update hero', () => {
- const updateHero: Hero = { id: 1, name: 'A' };
-
- heroService.updateHero(updateHero).subscribe(
- data => expect(data).toEqual(updateHero, 'should return the update hero'),
- fail
- );
-
- const req = httpTestingController.expectOne(heroService.heroesUrl);
-
- // respond with a 404 and the error message in the body
- const msg = 'deliberate 404 error';
- req.flush(msg, {status: 404, statusText: 'Not Found'});
- });
- });
-
- // TODO: test other HeroService methods
-});
diff --git a/docs_app/content/examples/http/src/app/heroes/heroes.service.ts b/docs_app/content/examples/http/src/app/heroes/heroes.service.ts
deleted file mode 100644
index a0c079027f..0000000000
--- a/docs_app/content/examples/http/src/app/heroes/heroes.service.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-// #docplaster
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
-// #docregion http-options
-import { HttpHeaders } from '@angular/common/http';
-
-// #enddocregion http-options
-
-import { Observable } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-
-import { Hero } from './hero';
-import { HttpErrorHandler, HandleError } from '../http-error-handler.service';
-
-// #docregion http-options
-const httpOptions = {
- headers: new HttpHeaders({
- 'Content-Type': 'application/json',
- 'Authorization': 'my-auth-token'
- })
-};
-// #enddocregion http-options
-
-@Injectable()
-export class HeroesService {
- heroesUrl = 'api/heroes'; // URL to web api
- private handleError: HandleError;
-
- constructor(
- private http: HttpClient,
- httpErrorHandler: HttpErrorHandler) {
- this.handleError = httpErrorHandler.createHandleError('HeroesService');
- }
-
- /** GET heroes from the server */
- getHeroes (): Observable {
- return this.http.get(this.heroesUrl)
- .pipe(
- catchError(this.handleError('getHeroes', []))
- );
- }
-
- // #docregion searchHeroes
- /* GET heroes whose name contains search term */
- searchHeroes(term: string): Observable {
- term = term.trim();
-
- // Add safe, URL encoded search parameter if there is a search term
- const options = term ?
- { params: new HttpParams().set('name', term) } : {};
-
- return this.http.get(this.heroesUrl, options)
- .pipe(
- catchError(this.handleError('searchHeroes', []))
- );
- }
- // #enddocregion searchHeroes
-
- //////// Save methods //////////
-
- // #docregion addHero
- /** POST: add a new hero to the database */
- addHero (hero: Hero): Observable {
- return this.http.post(this.heroesUrl, hero, httpOptions)
- .pipe(
- catchError(this.handleError('addHero', hero))
- );
- }
- // #enddocregion addHero
-
- // #docregion deleteHero
- /** DELETE: delete the hero from the server */
- deleteHero (id: number): Observable<{}> {
- const url = `${this.heroesUrl}/${id}`; // DELETE api/heroes/42
- return this.http.delete(url, httpOptions)
- .pipe(
- catchError(this.handleError('deleteHero'))
- );
- }
- // #enddocregion deleteHero
-
- // #docregion updateHero
- /** PUT: update the hero on the server. Returns the updated hero upon success. */
- updateHero (hero: Hero): Observable {
- // #enddocregion updateHero
- // #docregion update-headers
- httpOptions.headers =
- httpOptions.headers.set('Authorization', 'my-new-auth-token');
- // #enddocregion update-headers
-
- // #docregion updateHero
- return this.http.put(this.heroesUrl, hero, httpOptions)
- .pipe(
- catchError(this.handleError('updateHero', hero))
- );
- }
- // #enddocregion updateHero
-}
diff --git a/docs_app/content/examples/http/src/app/http-error-handler.service.ts b/docs_app/content/examples/http/src/app/http-error-handler.service.ts
deleted file mode 100644
index c7d0926fbd..0000000000
--- a/docs_app/content/examples/http/src/app/http-error-handler.service.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpErrorResponse } from '@angular/common/http';
-
-import { Observable, of } from 'rxjs';
-
-import { MessageService } from './message.service';
-
-/** Type of the handleError function returned by HttpErrorHandler.createHandleError */
-export type HandleError =
- (operation?: string, result?: T) => (error: HttpErrorResponse) => Observable;
-
-/** Handles HttpClient errors */
-@Injectable()
-export class HttpErrorHandler {
- constructor(private messageService: MessageService) { }
-
- /** Create curried handleError function that already knows the service name */
- createHandleError = (serviceName = '') =>
- (operation = 'operation', result = {} as T) => this.handleError(serviceName, operation, result);
-
- /**
- * Returns a function that handles Http operation failures.
- * This error handler lets the app continue to run as if no error occurred.
- * @param serviceName = name of the data service that attempted the operation
- * @param operation - name of the operation that failed
- * @param result - optional value to return as the observable result
- */
- handleError (serviceName = '', operation = 'operation', result = {} as T) {
-
- return (error: HttpErrorResponse): Observable => {
- // TODO: send the error to remote logging infrastructure
- console.error(error); // log to console instead
-
- const message = (error.error instanceof ErrorEvent) ?
- error.error.message :
- `server returned code ${error.status} with body "${error.error}"`;
-
- // TODO: better job of transforming error for user consumption
- this.messageService.add(`${serviceName}: ${operation} failed: ${message}`);
-
- // Let the app keep running by returning a safe result.
- return of( result );
- };
-
- }
-}
diff --git a/docs_app/content/examples/http/src/app/http-interceptors/auth-interceptor.ts b/docs_app/content/examples/http/src/app/http-interceptors/auth-interceptor.ts
deleted file mode 100644
index 85fb760450..0000000000
--- a/docs_app/content/examples/http/src/app/http-interceptors/auth-interceptor.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-// #docplaster
-import { Injectable } from '@angular/core';
-import {
- HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
-} from '@angular/common/http';
-
-// #docregion
-import { AuthService } from '../auth.service';
-
-@Injectable()
-export class AuthInterceptor implements HttpInterceptor {
-
- constructor(private auth: AuthService) {}
-
- intercept(req: HttpRequest, next: HttpHandler) {
- // Get the auth token from the service.
- const authToken = this.auth.getAuthorizationToken();
-
- // #enddocregion
- /*
- * The verbose way:
- // #docregion
- // Clone the request and replace the original headers with
- // cloned headers, updated with the authorization.
- const authReq = req.clone({
- headers: req.headers.set('Authorization', authToken)
- });
- // #enddocregion
- */
- // #docregion set-header-shortcut
- // Clone the request and set the new header in one step.
- const authReq = req.clone({ setHeaders: { Authorization: authToken } });
- // #enddocregion set-header-shortcut
- // #docregion
-
- // send cloned request with header to the next handler.
- return next.handle(authReq);
- }
-}
-// #enddocregion
diff --git a/docs_app/content/examples/http/src/app/http-interceptors/caching-interceptor.ts b/docs_app/content/examples/http/src/app/http-interceptors/caching-interceptor.ts
deleted file mode 100644
index 5ebb631ac2..0000000000
--- a/docs_app/content/examples/http/src/app/http-interceptors/caching-interceptor.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-// #docplaster
-import { Injectable } from '@angular/core';
-import {
- HttpEvent, HttpHeaders, HttpRequest, HttpResponse,
- HttpInterceptor, HttpHandler
-} from '@angular/common/http';
-
-import { Observable, of } from 'rxjs';
-import { startWith, tap } from 'rxjs/operators';
-
-import { RequestCache } from '../request-cache.service';
-import { searchUrl } from '../package-search/package-search.service';
-
-
-/**
- * If request is cachable (e.g., package search) and
- * response is in cache return the cached response as observable.
- * If has 'x-refresh' header that is true,
- * then also re-run the package search, using response from next(),
- * returning an observable that emits the cached response first.
- *
- * If not in cache or not cachable,
- * pass request through to next()
- */
-// #docregion v1
-@Injectable()
-export class CachingInterceptor implements HttpInterceptor {
- constructor(private cache: RequestCache) {}
-
- intercept(req: HttpRequest, next: HttpHandler) {
- // continue if not cachable.
- if (!isCachable(req)) { return next.handle(req); }
-
- const cachedResponse = this.cache.get(req);
- // #enddocregion v1
- // #docregion intercept-refresh
- // cache-then-refresh
- if (req.headers.get('x-refresh')) {
- const results$ = sendRequest(req, next, this.cache);
- return cachedResponse ?
- results$.pipe( startWith(cachedResponse) ) :
- results$;
- }
- // cache-or-fetch
- // #docregion v1
- return cachedResponse ?
- of(cachedResponse) : sendRequest(req, next, this.cache);
- // #enddocregion intercept-refresh
- }
-}
-// #enddocregion v1
-
-
-/** Is this request cachable? */
-function isCachable(req: HttpRequest) {
- // Only GET requests are cachable
- return req.method === 'GET' &&
- // Only npm package search is cachable in this app
- -1 < req.url.indexOf(searchUrl);
-}
-
-// #docregion send-request
-/**
- * Get server response observable by sending request to `next()`.
- * Will add the response to the cache on the way out.
- */
-function sendRequest(
- req: HttpRequest,
- next: HttpHandler,
- cache: RequestCache): Observable> {
-
- // No headers allowed in npm search request
- const noHeaderReq = req.clone({ headers: new HttpHeaders() });
-
- return next.handle(noHeaderReq).pipe(
- tap(event => {
- // There may be other events besides the response.
- if (event instanceof HttpResponse) {
- cache.put(req, event); // Update the cache.
- }
- })
- );
-}
-// #enddocregion send-request
-
diff --git a/docs_app/content/examples/http/src/app/http-interceptors/ensure-https-interceptor.ts b/docs_app/content/examples/http/src/app/http-interceptors/ensure-https-interceptor.ts
deleted file mode 100644
index ad6c9f6281..0000000000
--- a/docs_app/content/examples/http/src/app/http-interceptors/ensure-https-interceptor.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Injectable } from '@angular/core';
-import {
- HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
-} from '@angular/common/http';
-
-import { Observable } from 'rxjs';
-
-@Injectable()
-export class EnsureHttpsInterceptor implements HttpInterceptor {
- intercept(req: HttpRequest, next: HttpHandler): Observable> {
- // #docregion excerpt
- // clone request and replace 'http://' with 'https://' at the same time
- const secureReq = req.clone({
- url: req.url.replace('http://', 'https://')
- });
- // send the cloned, "secure" request to the next handler.
- return next.handle(secureReq);
- // #enddocregion excerpt
- }
-}
diff --git a/docs_app/content/examples/http/src/app/http-interceptors/index.ts b/docs_app/content/examples/http/src/app/http-interceptors/index.ts
deleted file mode 100644
index a44f18f5f9..0000000000
--- a/docs_app/content/examples/http/src/app/http-interceptors/index.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-// #docplaster
-// #docregion interceptor-providers
-/* "Barrel" of Http Interceptors */
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
-
-// #enddocregion interceptor-providers
-import { AuthInterceptor } from './auth-interceptor';
-import { CachingInterceptor } from './caching-interceptor';
-import { EnsureHttpsInterceptor } from './ensure-https-interceptor';
-import { LoggingInterceptor } from './logging-interceptor';
-// #docregion interceptor-providers
-import { NoopInterceptor } from './noop-interceptor';
-// #enddocregion interceptor-providers
-import { TrimNameInterceptor } from './trim-name-interceptor';
-import { UploadInterceptor } from './upload-interceptor';
-
-// #docregion interceptor-providers
-
-/** Http interceptor providers in outside-in order */
-export const httpInterceptorProviders = [
- // #docregion noop-provider
- { provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true },
- // #enddocregion noop-provider, interceptor-providers
-
- { provide: HTTP_INTERCEPTORS, useClass: EnsureHttpsInterceptor, multi: true },
- { provide: HTTP_INTERCEPTORS, useClass: TrimNameInterceptor, multi: true },
- { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
- { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true },
- { provide: HTTP_INTERCEPTORS, useClass: UploadInterceptor, multi: true },
- { provide: HTTP_INTERCEPTORS, useClass: CachingInterceptor, multi: true },
-
- // #docregion interceptor-providers
-];
-// #enddocregion interceptor-providers
diff --git a/docs_app/content/examples/http/src/app/http-interceptors/logging-interceptor.ts b/docs_app/content/examples/http/src/app/http-interceptors/logging-interceptor.ts
deleted file mode 100644
index d5fc1bb65c..0000000000
--- a/docs_app/content/examples/http/src/app/http-interceptors/logging-interceptor.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Injectable } from '@angular/core';
-import {
- HttpEvent, HttpInterceptor, HttpHandler,
- HttpRequest, HttpResponse
-} from '@angular/common/http';
-
-// #docregion excerpt
-import { finalize, tap } from 'rxjs/operators';
-import { MessageService } from '../message.service';
-
-@Injectable()
-export class LoggingInterceptor implements HttpInterceptor {
- constructor(private messenger: MessageService) {}
-
- intercept(req: HttpRequest, next: HttpHandler) {
- const started = Date.now();
- let ok: string;
-
- // extend server response observable with logging
- return next.handle(req)
- .pipe(
- tap(
- // Succeeds when there is a response; ignore other events
- event => ok = event instanceof HttpResponse ? 'succeeded' : '',
- // Operation failed; error is an HttpErrorResponse
- error => ok = 'failed'
- ),
- // Log when response observable either completes or errors
- finalize(() => {
- const elapsed = Date.now() - started;
- const msg = `${req.method} "${req.urlWithParams}"
- ${ok} in ${elapsed} ms.`;
- this.messenger.add(msg);
- })
- );
- }
-}
-// #enddocregion excerpt
diff --git a/docs_app/content/examples/http/src/app/http-interceptors/noop-interceptor.ts b/docs_app/content/examples/http/src/app/http-interceptors/noop-interceptor.ts
deleted file mode 100644
index 51d4020804..0000000000
--- a/docs_app/content/examples/http/src/app/http-interceptors/noop-interceptor.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Injectable } from '@angular/core';
-import {
- HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
-} from '@angular/common/http';
-
-import { Observable } from 'rxjs';
-
-/** Pass untouched request through to the next request handler. */
-@Injectable()
-export class NoopInterceptor implements HttpInterceptor {
-
- intercept(req: HttpRequest, next: HttpHandler):
- Observable> {
- return next.handle(req);
- }
-}
diff --git a/docs_app/content/examples/http/src/app/http-interceptors/trim-name-interceptor.ts b/docs_app/content/examples/http/src/app/http-interceptors/trim-name-interceptor.ts
deleted file mode 100644
index 23858ebdd2..0000000000
--- a/docs_app/content/examples/http/src/app/http-interceptors/trim-name-interceptor.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Injectable } from '@angular/core';
-import {
- HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
-} from '@angular/common/http';
-
-import { Observable } from 'rxjs';
-
-@Injectable()
-export class TrimNameInterceptor implements HttpInterceptor {
- intercept(req: HttpRequest, next: HttpHandler): Observable> {
- const body = req.body;
- if (!body || !body.name ) {
- return next.handle(req);
- }
- // #docregion excerpt
- // copy the body and trim whitespace from the name property
- const newBody = { ...body, name: body.name.trim() };
- // clone request and set its body
- const newReq = req.clone({ body: newBody });
- // send the cloned request to the next handler.
- return next.handle(newReq);
- // #enddocregion excerpt
- }
-}
diff --git a/docs_app/content/examples/http/src/app/http-interceptors/upload-interceptor.ts b/docs_app/content/examples/http/src/app/http-interceptors/upload-interceptor.ts
deleted file mode 100644
index 6acb5d0cdb..0000000000
--- a/docs_app/content/examples/http/src/app/http-interceptors/upload-interceptor.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Injectable } from '@angular/core';
-import {
- HttpEvent, HttpInterceptor, HttpHandler,
- HttpRequest, HttpResponse,
- HttpEventType, HttpProgressEvent
-} from '@angular/common/http';
-
-import { Observable } from 'rxjs';
-
-/** Simulate server replying to file upload request */
-@Injectable()
-export class UploadInterceptor implements HttpInterceptor {
- intercept(req: HttpRequest, next: HttpHandler): Observable> {
- if (req.url.indexOf('/upload/file') === -1) {
- return next.handle(req);
- }
- const delay = 300; // Todo: inject delay?
- return createUploadEvents(delay);
- }
-}
-
-/** Create simulation of upload event stream */
-function createUploadEvents(delay: number) {
- // Simulate XHR behavior which would provide this information in a ProgressEvent
- const chunks = 5;
- const total = 12345678;
- const chunkSize = Math.ceil(total / chunks);
-
- return new Observable>(observer => {
- // notify the event stream that the request was sent.
- observer.next({type: HttpEventType.Sent});
-
- uploadLoop(0);
-
- function uploadLoop(loaded: number) {
- // N.B.: Cannot use setInterval or rxjs delay (which uses setInterval)
- // because e2e test won't complete. A zone thing?
- // Use setTimeout and tail recursion instead.
- setTimeout(() => {
- loaded += chunkSize;
-
- if (loaded >= total) {
- const doneResponse = new HttpResponse({
- status: 201, // OK but no body;
- });
- observer.next(doneResponse);
- observer.complete();
- return;
- }
-
- const progressEvent: HttpProgressEvent = {
- type: HttpEventType.UploadProgress,
- loaded,
- total
- };
- observer.next(progressEvent);
- uploadLoop(loaded);
- }, delay);
- }
- });
-}
diff --git a/docs_app/content/examples/http/src/app/in-memory-data.service.ts b/docs_app/content/examples/http/src/app/in-memory-data.service.ts
deleted file mode 100644
index 606e77f8f5..0000000000
--- a/docs_app/content/examples/http/src/app/in-memory-data.service.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { InMemoryDbService } from 'angular-in-memory-web-api';
-
-export class InMemoryDataService implements InMemoryDbService {
- createDb() {
- const heroes = [
- { id: 11, name: 'Mr. Nice' },
- { id: 12, name: 'Narco' },
- { id: 13, name: 'Bombasto' },
- { id: 14, name: 'Celeritas' },
- ];
- return {heroes};
- }
-}
diff --git a/docs_app/content/examples/http/src/app/message.service.ts b/docs_app/content/examples/http/src/app/message.service.ts
deleted file mode 100644
index 1c56a49e70..0000000000
--- a/docs_app/content/examples/http/src/app/message.service.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class MessageService {
- messages: string[] = [];
-
- add(message: string) {
- this.messages.push(message);
- }
-
- clear() {
- this.messages = [];
- }
-}
diff --git a/docs_app/content/examples/http/src/app/messages/messages.component.html b/docs_app/content/examples/http/src/app/messages/messages.component.html
deleted file mode 100644
index d17b895692..0000000000
--- a/docs_app/content/examples/http/src/app/messages/messages.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
Messages
-
clear
-
-
- {{message}}
-
-
diff --git a/docs_app/content/examples/http/src/app/messages/messages.component.ts b/docs_app/content/examples/http/src/app/messages/messages.component.ts
deleted file mode 100644
index d54a121665..0000000000
--- a/docs_app/content/examples/http/src/app/messages/messages.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { MessageService } from '../message.service';
-
-@Component({
- selector: 'app-messages',
- templateUrl: './messages.component.html'
-})
-export class MessagesComponent {
- constructor(public messageService: MessageService) {}
-}
diff --git a/docs_app/content/examples/http/src/app/package-search/package-search.component.html b/docs_app/content/examples/http/src/app/package-search/package-search.component.html
deleted file mode 100644
index b1bd56d561..0000000000
--- a/docs_app/content/examples/http/src/app/package-search/package-search.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-Search Npm Packages
-Searches when typing stops. Caches for 30 seconds.
-
-
-
-
-with refresh
-
-
-
-
- {{package.name}} v.{{package.version}} -
- {{package.description}}
-
-
-
diff --git a/docs_app/content/examples/http/src/app/package-search/package-search.component.ts b/docs_app/content/examples/http/src/app/package-search/package-search.component.ts
deleted file mode 100644
index f020da50c2..0000000000
--- a/docs_app/content/examples/http/src/app/package-search/package-search.component.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { Observable, Subject } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
-
-import { NpmPackageInfo, PackageSearchService } from './package-search.service';
-
-@Component({
- selector: 'app-package-search',
- templateUrl: './package-search.component.html',
- providers: [ PackageSearchService ]
-})
-export class PackageSearchComponent implements OnInit {
- // #docregion debounce
- withRefresh = false;
- packages$: Observable;
- private searchText$ = new Subject();
-
- search(packageName: string) {
- this.searchText$.next(packageName);
- }
-
- ngOnInit() {
- this.packages$ = this.searchText$.pipe(
- debounceTime(500),
- distinctUntilChanged(),
- switchMap(packageName =>
- this.searchService.search(packageName, this.withRefresh))
- );
- }
-
- constructor(private searchService: PackageSearchService) { }
-
- // #enddocregion debounce
-
- toggleRefresh() { this.withRefresh = ! this.withRefresh; }
-
-}
diff --git a/docs_app/content/examples/http/src/app/package-search/package-search.service.ts b/docs_app/content/examples/http/src/app/package-search/package-search.service.ts
deleted file mode 100644
index b026e03e06..0000000000
--- a/docs_app/content/examples/http/src/app/package-search/package-search.service.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-
-import { Observable, of } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
-
-import { HttpErrorHandler, HandleError } from '../http-error-handler.service';
-
-export interface NpmPackageInfo {
- name: string;
- version: string;
- description: string;
-}
-
-export const searchUrl = 'https://npmsearch.com/query';
-
-const httpOptions = {
- headers: new HttpHeaders({
- 'x-refresh': 'true'
- })
-};
-
-function createHttpOptions(packageName: string, refresh = false) {
- // npm package name search api
- // e.g., http://npmsearch.com/query?q=dom'
- const params = new HttpParams({ fromObject: { q: packageName } });
- const headerMap = refresh ? {'x-refresh': 'true'} : {};
- const headers = new HttpHeaders(headerMap) ;
- return { headers, params };
-}
-
-@Injectable()
-export class PackageSearchService {
- private handleError: HandleError;
-
- constructor(
- private http: HttpClient,
- httpErrorHandler: HttpErrorHandler) {
- this.handleError = httpErrorHandler.createHandleError('HeroesService');
- }
-
- search (packageName: string, refresh = false): Observable {
- // clear if no pkg name
- if (!packageName.trim()) { return of([]); }
-
- const options = createHttpOptions(packageName, refresh);
-
- // TODO: Add error handling
- return this.http.get(searchUrl, options).pipe(
- map((data: any) => {
- return data.results.map(entry => ({
- name: entry.name[0],
- version: entry.version[0],
- description: entry.description[0]
- } as NpmPackageInfo )
- );
- }),
- catchError(this.handleError('search', []))
- );
- }
-}
diff --git a/docs_app/content/examples/http/src/app/request-cache.service.ts b/docs_app/content/examples/http/src/app/request-cache.service.ts
deleted file mode 100644
index a055a74d75..0000000000
--- a/docs_app/content/examples/http/src/app/request-cache.service.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpRequest, HttpResponse } from '@angular/common/http';
-
-import { MessageService } from './message.service';
-
-export interface RequestCacheEntry {
- url: string;
- response: HttpResponse;
- lastRead: number;
-}
-
-// #docregion request-cache
-export abstract class RequestCache {
- abstract get(req: HttpRequest): HttpResponse | undefined;
- abstract put(req: HttpRequest, response: HttpResponse): void
-}
-// #enddocregion request-cache
-
-const maxAge = 30000; // maximum cache age (ms)
-
-@Injectable()
-export class RequestCacheWithMap implements RequestCache {
-
- cache = new Map();
-
- constructor(private messenger: MessageService) { }
-
- get(req: HttpRequest): HttpResponse | undefined {
- const url = req.urlWithParams;
- const cached = this.cache.get(url);
-
- if (!cached) {
- return undefined;
- }
-
- const isExpired = cached.lastRead < (Date.now() - maxAge);
- const expired = isExpired ? 'expired ' : '';
- this.messenger.add(
- `Found ${expired}cached response for "${url}".`);
- return isExpired ? undefined : cached.response;
- }
-
- put(req: HttpRequest, response: HttpResponse): void {
- const url = req.urlWithParams;
- this.messenger.add(`Caching response from "${url}".`);
-
- const entry = { url, response, lastRead: Date.now() };
- this.cache.set(url, entry);
-
- // remove expired cache entries
- const expired = Date.now() - maxAge;
- this.cache.forEach(entry => {
- if (entry.lastRead < expired) {
- this.cache.delete(entry.url);
- }
- });
-
- this.messenger.add(`Request cache size: ${this.cache.size}.`);
- }
-}
diff --git a/docs_app/content/examples/http/src/app/uploader/uploader.component.html b/docs_app/content/examples/http/src/app/uploader/uploader.component.html
deleted file mode 100644
index 2f477ef110..0000000000
--- a/docs_app/content/examples/http/src/app/uploader/uploader.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-Upload file
-
diff --git a/docs_app/content/examples/http/src/app/uploader/uploader.component.ts b/docs_app/content/examples/http/src/app/uploader/uploader.component.ts
deleted file mode 100644
index f4d2427813..0000000000
--- a/docs_app/content/examples/http/src/app/uploader/uploader.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Component } from '@angular/core';
-import { UploaderService } from './uploader.service';
-
-@Component({
- selector: 'app-uploader',
- templateUrl: './uploader.component.html',
- providers: [ UploaderService ]
-})
-export class UploaderComponent {
- message: string;
-
- constructor(private uploaderService: UploaderService) {}
-
- onPicked(input: HTMLInputElement) {
- const file = input.files[0];
- if (file) {
- this.uploaderService.upload(file).subscribe(
- msg => {
- input.value = null;
- this.message = msg;
- }
- );
- }
- }
-}
diff --git a/docs_app/content/examples/http/src/app/uploader/uploader.service.ts b/docs_app/content/examples/http/src/app/uploader/uploader.service.ts
deleted file mode 100644
index 8bc659f26f..0000000000
--- a/docs_app/content/examples/http/src/app/uploader/uploader.service.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { Injectable } from '@angular/core';
-import {
- HttpClient, HttpEvent, HttpEventType, HttpProgressEvent,
- HttpRequest, HttpResponse, HttpErrorResponse
-} from '@angular/common/http';
-
-import { of } from 'rxjs';
-import { catchError, last, map, tap } from 'rxjs/operators';
-
-import { MessageService } from '../message.service';
-
-@Injectable()
-export class UploaderService {
- constructor(
- private http: HttpClient,
- private messenger: MessageService) {}
-
- // If uploading multiple files, change to:
- // upload(files: FileList) {
- // const formData = new FormData();
- // files.forEach(f => formData.append(f.name, f));
- // new HttpRequest('POST', '/upload/file', formData, {reportProgress: true});
- // ...
- // }
-
- upload(file: File) {
- if (!file) { return; }
-
- // COULD HAVE WRITTEN:
- // return this.http.post('/upload/file', file, {
- // reportProgress: true,
- // observe: 'events'
- // }).pipe(
-
- // Create the request object that POSTs the file to an upload endpoint.
- // The `reportProgress` option tells HttpClient to listen and return
- // XHR progress events.
- // #docregion upload-request
- const req = new HttpRequest('POST', '/upload/file', file, {
- reportProgress: true
- });
- // #enddocregion upload-request
-
- // #docregion upload-body
- // The `HttpClient.request` API produces a raw event stream
- // which includes start (sent), progress, and response events.
- return this.http.request(req).pipe(
- map(event => this.getEventMessage(event, file)),
- tap(message => this.showProgress(message)),
- last(), // return last (completed) message to caller
- catchError(this.handleError(file))
- );
- // #enddocregion upload-body
- }
-
- // #docregion getEventMessage
- /** Return distinct message for sent, upload progress, & response events */
- private getEventMessage(event: HttpEvent, file: File) {
- switch (event.type) {
- case HttpEventType.Sent:
- return `Uploading file "${file.name}" of size ${file.size}.`;
-
- case HttpEventType.UploadProgress:
- // Compute and show the % done:
- const percentDone = Math.round(100 * event.loaded / event.total);
- return `File "${file.name}" is ${percentDone}% uploaded.`;
-
- case HttpEventType.Response:
- return `File "${file.name}" was completely uploaded!`;
-
- default:
- return `File "${file.name}" surprising upload event: ${event.type}.`;
- }
- }
- // #enddocregion getEventMessage
-
- /**
- * Returns a function that handles Http upload failures.
- * @param file - File object for file being uploaded
- *
- * When no `UploadInterceptor` and no server,
- * you'll end up here in the error handler.
- */
- private handleError(file: File) {
- const userMessage = `${file.name} upload failed.`;
-
- return (error: HttpErrorResponse) => {
- // TODO: send the error to remote logging infrastructure
- console.error(error); // log to console instead
-
- const message = (error.error instanceof Error) ?
- error.error.message :
- `server returned code ${error.status} with body "${error.error}"`;
-
- this.messenger.add(`${userMessage} ${message}`);
-
- // Let app keep running but indicate failure.
- return of(userMessage);
- };
- }
-
- private showProgress(message: string) {
- this.messenger.add(message);
- }
-}
diff --git a/docs_app/content/examples/http/src/assets/config.json b/docs_app/content/examples/http/src/assets/config.json
deleted file mode 100644
index a6f2505140..0000000000
--- a/docs_app/content/examples/http/src/assets/config.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "heroesUrl": "api/heroes",
- "textfile": "assets/textfile.txt"
-}
diff --git a/docs_app/content/examples/http/src/assets/textfile.txt b/docs_app/content/examples/http/src/assets/textfile.txt
deleted file mode 100644
index 282575a15a..0000000000
--- a/docs_app/content/examples/http/src/assets/textfile.txt
+++ /dev/null
@@ -1 +0,0 @@
-This is the downloaded text file
diff --git a/docs_app/content/examples/http/src/index-specs.html b/docs_app/content/examples/http/src/index-specs.html
deleted file mode 100644
index 26286a5083..0000000000
--- a/docs_app/content/examples/http/src/index-specs.html
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/docs_app/content/examples/http/src/index.html b/docs_app/content/examples/http/src/index.html
deleted file mode 100644
index 5e56060366..0000000000
--- a/docs_app/content/examples/http/src/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
- HttpClient Demo
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/http/src/main-specs.ts b/docs_app/content/examples/http/src/main-specs.ts
deleted file mode 100644
index c54ce8da2e..0000000000
--- a/docs_app/content/examples/http/src/main-specs.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import './testing/global-jasmine';
-import 'jasmine-core/lib/jasmine-core/jasmine-html.js';
-import 'jasmine-core/lib/jasmine-core/boot.js';
-
-declare var jasmine;
-
-import './polyfills';
-
-import 'zone.js/dist/async-test';
-import 'zone.js/dist/fake-async-test';
-import 'zone.js/dist/long-stack-trace-zone';
-import 'zone.js/dist/proxy.js';
-import 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
-
-import { getTestBed } from '@angular/core/testing';
-import {
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-// Import spec files individually for Stackblitz
-import './app/heroes/heroes.service.spec.ts';
-import './testing/http-client.spec.ts';
-
-//
-bootstrap();
-
-//
-function bootstrap () {
- if (window['jasmineRef']) {
- location.reload();
- return;
- } else {
- window.onload(undefined);
- window['jasmineRef'] = jasmine.getEnv();
- }
-
- // First, initialize the Angular testing environment.
- getTestBed().initTestEnvironment(
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting()
- );
-}
diff --git a/docs_app/content/examples/http/src/main.ts b/docs_app/content/examples/http/src/main.ts
deleted file mode 100644
index 6b6532d428..0000000000
--- a/docs_app/content/examples/http/src/main.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// #docregion
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/docs_app/content/examples/http/src/test.css b/docs_app/content/examples/http/src/test.css
deleted file mode 100644
index 6010a5d9ba..0000000000
--- a/docs_app/content/examples/http/src/test.css
+++ /dev/null
@@ -1 +0,0 @@
-@import "~jasmine-core/lib/jasmine-core/jasmine.css"
diff --git a/docs_app/content/examples/http/src/testing/global-jasmine.ts b/docs_app/content/examples/http/src/testing/global-jasmine.ts
deleted file mode 100644
index 560ff97d66..0000000000
--- a/docs_app/content/examples/http/src/testing/global-jasmine.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import jasmineRequire from 'jasmine-core/lib/jasmine-core/jasmine.js';
-
-window['jasmineRequire'] = jasmineRequire;
diff --git a/docs_app/content/examples/http/src/testing/http-client.spec.ts b/docs_app/content/examples/http/src/testing/http-client.spec.ts
deleted file mode 100644
index 2c5b5ffd46..0000000000
--- a/docs_app/content/examples/http/src/testing/http-client.spec.ts
+++ /dev/null
@@ -1,192 +0,0 @@
-// #docplaster
-// #docregion imports
-// Http testing module and mocking controller
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-
-// Other imports
-import { TestBed } from '@angular/core/testing';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-
-// #enddocregion imports
-import { HttpHeaders } from '@angular/common/http';
-
-interface Data {
- name: string;
-}
-
-const testUrl = '/data';
-
-// #docregion setup
-describe('HttpClient testing', () => {
- let httpClient: HttpClient;
- let httpTestingController: HttpTestingController;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [ HttpClientTestingModule ]
- });
-
- // Inject the http service and test controller for each test
- httpClient = TestBed.get(HttpClient);
- httpTestingController = TestBed.get(HttpTestingController);
- });
- // #enddocregion setup
- // #docregion afterEach
- afterEach(() => {
- // After every test, assert that there are no more pending requests.
- httpTestingController.verify();
- });
- // #enddocregion afterEach
- // #docregion setup
- /// Tests begin ///
- // #enddocregion setup
- // #docregion get-test
- it('can test HttpClient.get', () => {
- const testData: Data = {name: 'Test Data'};
-
- // Make an HTTP GET request
- httpClient.get(testUrl)
- .subscribe(data =>
- // When observable resolves, result should match test data
- expect(data).toEqual(testData)
- );
-
- // The following `expectOne()` will match the request's URL.
- // If no requests or multiple requests matched that URL
- // `expectOne()` would throw.
- const req = httpTestingController.expectOne('/data');
-
- // Assert that the request is a GET.
- expect(req.request.method).toEqual('GET');
-
- // Respond with mock data, causing Observable to resolve.
- // Subscribe callback asserts that correct data was returned.
- req.flush(testData);
-
- // Finally, assert that there are no outstanding requests.
- httpTestingController.verify();
- });
- // #enddocregion get-test
- it('can test HttpClient.get with matching header', () => {
- const testData: Data = {name: 'Test Data'};
-
- // Make an HTTP GET request with specific header
- httpClient.get(testUrl, {
- headers: new HttpHeaders({'Authorization': 'my-auth-token'})
- })
- .subscribe(data =>
- expect(data).toEqual(testData)
- );
-
- // Find request with a predicate function.
- // #docregion predicate
- // Expect one request with an authorization header
- const req = httpTestingController.expectOne(
- req => req.headers.has('Authorization')
- );
- // #enddocregion predicate
- req.flush(testData);
- });
-
- it('can test multiple requests', () => {
- let testData: Data[] = [
- { name: 'bob' }, { name: 'carol' },
- { name: 'ted' }, { name: 'alice' }
- ];
-
- // Make three requests in a row
- httpClient.get(testUrl)
- .subscribe(d => expect(d.length).toEqual(0, 'should have no data'));
-
- httpClient.get(testUrl)
- .subscribe(d => expect(d).toEqual([testData[0]], 'should be one element array'));
-
- httpClient.get(testUrl)
- .subscribe(d => expect(d).toEqual(testData, 'should be expected data'));
-
- // #docregion multi-request
- // get all pending requests that match the given URL
- const requests = httpTestingController.match(testUrl);
- expect(requests.length).toEqual(3);
-
- // Respond to each request with different results
- requests[0].flush([]);
- requests[1].flush([testData[0]]);
- requests[2].flush(testData);
- // #enddocregion multi-request
- });
-
- // #docregion 404
- it('can test for 404 error', () => {
- const emsg = 'deliberate 404 error';
-
- httpClient.get(testUrl).subscribe(
- data => fail('should have failed with the 404 error'),
- (error: HttpErrorResponse) => {
- expect(error.status).toEqual(404, 'status');
- expect(error.error).toEqual(emsg, 'message');
- }
- );
-
- const req = httpTestingController.expectOne(testUrl);
-
- // Respond with mock error
- req.flush(emsg, { status: 404, statusText: 'Not Found' });
- });
- // #enddocregion 404
-
- // #docregion network-error
- it('can test for network error', () => {
- const emsg = 'simulated network error';
-
- httpClient.get(testUrl).subscribe(
- data => fail('should have failed with the network error'),
- (error: HttpErrorResponse) => {
- expect(error.error.message).toEqual(emsg, 'message');
- }
- );
-
- const req = httpTestingController.expectOne(testUrl);
-
- // Create mock ErrorEvent, raised when something goes wrong at the network level.
- // Connection timeout, DNS error, offline, etc
- const errorEvent = new ErrorEvent('so sad', {
- message: emsg,
- // #enddocregion network-error
- // The rest of this is optional and not used.
- // Just showing that you could provide this too.
- filename: 'HeroService.ts',
- lineno: 42,
- colno: 21
- // #docregion network-error
- });
-
- // Respond with mock error
- req.error(errorEvent);
- });
- // #enddocregion network-error
-
- it('httpTestingController.verify should fail if HTTP response not simulated', () => {
- // Sends request
- httpClient.get('some/api').subscribe();
-
- // verify() should fail because haven't handled the pending request.
- expect(() => httpTestingController.verify()).toThrow();
-
- // Now get and flush the request so that afterEach() doesn't fail
- const req = httpTestingController.expectOne('some/api');
- req.flush(null);
- });
-
- // Proves that verify in afterEach() really would catch error
- // if test doesn't simulate the HTTP response.
- //
- // Must disable this test because can't catch an error in an afterEach().
- // Uncomment if you want to confirm that afterEach() does the job.
- // it('afterEach() should fail when HTTP response not simulated',() => {
- // // Sends request which is never handled by this test
- // httpClient.get('some/api').subscribe();
- // });
-// #docregion setup
-});
-// #enddocregion setup
diff --git a/docs_app/content/examples/http/stackblitz.json b/docs_app/content/examples/http/stackblitz.json
deleted file mode 100644
index 6ef625c1a0..0000000000
--- a/docs_app/content/examples/http/stackblitz.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "description": "Http",
- "files":[
- "!**/*.d.ts",
- "!**/*.js",
-
- "!src/testing/*.*",
- "!src/index-specs.html"
- ],
- "tags": ["http"]
-}
diff --git a/docs_app/content/examples/i18n/doc-files/app.component.html b/docs_app/content/examples/i18n/doc-files/app.component.html
deleted file mode 100644
index 98daded79e..0000000000
--- a/docs_app/content/examples/i18n/doc-files/app.component.html
+++ /dev/null
@@ -1,31 +0,0 @@
-
-Hello i18n!
-
-
-
-Hello i18n!
-
-
-
-Hello i18n!
-
-
-
-Hello i18n!
-
-
-
-Hello i18n!
-
-
-
-Hello i18n!
-
-
-
-Hello i18n!
-
-
-
-
-
diff --git a/docs_app/content/examples/i18n/doc-files/app.locale_data.ts b/docs_app/content/examples/i18n/doc-files/app.locale_data.ts
deleted file mode 100644
index 05c83be034..0000000000
--- a/docs_app/content/examples/i18n/doc-files/app.locale_data.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// #docregion import-locale
-import { registerLocaleData } from '@angular/common';
-import localeFr from '@angular/common/locales/fr';
-
-// the second parameter 'fr' is optional
-registerLocaleData(localeFr, 'fr');
-// #enddocregion import-locale
diff --git a/docs_app/content/examples/i18n/doc-files/app.locale_data_extra.ts b/docs_app/content/examples/i18n/doc-files/app.locale_data_extra.ts
deleted file mode 100644
index 05b7b80d53..0000000000
--- a/docs_app/content/examples/i18n/doc-files/app.locale_data_extra.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// #docregion import-locale-extra
-import { registerLocaleData } from '@angular/common';
-import localeFr from '@angular/common/locales/fr';
-import localeFrExtra from '@angular/common/locales/extra/fr';
-
-registerLocaleData(localeFr, 'fr-FR', localeFrExtra);
-// #enddocregion import-locale-extra
diff --git a/docs_app/content/examples/i18n/doc-files/app.module.ts b/docs_app/content/examples/i18n/doc-files/app.module.ts
deleted file mode 100644
index 0f5d2d7e9f..0000000000
--- a/docs_app/content/examples/i18n/doc-files/app.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import { LOCALE_ID, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from '../src/app/app.component';
-
-@NgModule({
- imports: [ BrowserModule ],
- declarations: [ AppComponent ],
- providers: [ { provide: LOCALE_ID, useValue: 'fr' } ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/i18n/doc-files/main.1.ts b/docs_app/content/examples/i18n/doc-files/main.1.ts
deleted file mode 100644
index 0740658908..0000000000
--- a/docs_app/content/examples/i18n/doc-files/main.1.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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);
diff --git a/docs_app/content/examples/i18n/doc-files/main.2.ts b/docs_app/content/examples/i18n/doc-files/main.2.ts
deleted file mode 100644
index 0b68bc10fe..0000000000
--- a/docs_app/content/examples/i18n/doc-files/main.2.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docregion
-import { enableProdMode, TRANSLATIONS, TRANSLATIONS_FORMAT } 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();
-}
-
-// use the require method provided by webpack
-declare const require;
-// we use the webpack raw-loader to return the content as a string
-const translations = require(`raw-loader!./locale/messages.fr.xlf`);
-
-platformBrowserDynamic().bootstrapModule(AppModule, {
- providers: [
- {provide: TRANSLATIONS, useValue: translations},
- {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'}
- ]
-});
diff --git a/docs_app/content/examples/i18n/doc-files/main.3.ts b/docs_app/content/examples/i18n/doc-files/main.3.ts
deleted file mode 100644
index dc5f919e1f..0000000000
--- a/docs_app/content/examples/i18n/doc-files/main.3.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import { MissingTranslationStrategy } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-// ...
-
-platformBrowserDynamic().bootstrapModule(AppModule, {
- missingTranslation: MissingTranslationStrategy.Error,
- providers: [
- // ...
- ]
-});
diff --git a/docs_app/content/examples/i18n/doc-files/messages.fr.xlf.html b/docs_app/content/examples/i18n/doc-files/messages.fr.xlf.html
deleted file mode 100644
index 03635103b7..0000000000
--- a/docs_app/content/examples/i18n/doc-files/messages.fr.xlf.html
+++ /dev/null
@@ -1,74 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- I don't output any element
- Je n'affiche aucun élément
-
-
- Angular logo
- Logo d'Angular
-
-
-
-
- {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other { minutes ago} }
- {VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a minutes} }
-
-
-
-
-
-
- The author is
- L'auteur est
-
-
-
-
- {VAR_SELECT, select, male {male} female {female} other {other} }
- {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }
-
-
-
-
-
-
- Updated:
- Mis à jour:
-
-
-
-
- {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other { minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }
- {VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/i18n/e2e/app.e2e-spec.ts b/docs_app/content/examples/i18n/e2e/app.e2e-spec.ts
deleted file mode 100644
index ebafb55f96..0000000000
--- a/docs_app/content/examples/i18n/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { browser, element, by } from 'protractor';
-
-describe('i18n E2E Tests', () => {
-
- beforeEach(function () {
- browser.get('');
- });
-
- it('should display i18n translated welcome: Bonjour !', function () {
- expect(element(by.css('h1')).getText()).toEqual('Bonjour i18n !');
- });
-
- it('should display the node texts without elements', function () {
- expect(element(by.css('app-root')).getText()).toContain(`Je n'affiche aucun élément`);
- });
-
- it('should display the translated title attribute', function () {
- const title = element(by.css('img')).getAttribute('title');
- expect(title).toBe(`Logo d'Angular`);
- });
-
- it('should display the ICU plural expression', function () {
- expect(element.all(by.css('span')).get(0).getText()).toBe(`Mis à jour à l'instant`);
- });
-
- it('should display the ICU select expression', function () {
- const selectIcuExp = element.all(by.css('span')).get(1);
- expect(selectIcuExp.getText()).toBe(`L'auteur est une femme`);
- element.all(by.css('button')).get(2).click();
- expect(selectIcuExp.getText()).toBe(`L'auteur est un homme`);
- });
-
- it('should display the nested expression', function() {
- const nestedExp = element.all(by.css('span')).get(2);
- const incBtn = element.all(by.css('button')).get(0);
- expect(nestedExp.getText()).toBe(`Mis à jour: à l'instant`);
- incBtn.click();
- expect(nestedExp.getText()).toBe(`Mis à jour: il y a une minute`);
- incBtn.click();
- incBtn.click();
- element.all(by.css('button')).get(4).click();
- expect(nestedExp.getText()).toBe(`Mis à jour: il y a 3 minutes par autre`);
- });
-
-});
diff --git a/docs_app/content/examples/i18n/example-config.json b/docs_app/content/examples/i18n/example-config.json
deleted file mode 100644
index 1188a704a3..0000000000
--- a/docs_app/content/examples/i18n/example-config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "projectType": "i18n"
-}
diff --git a/docs_app/content/examples/i18n/src/app/app.component.html b/docs_app/content/examples/i18n/src/app/app.component.html
deleted file mode 100644
index b9512dfc00..0000000000
--- a/docs_app/content/examples/i18n/src/app/app.component.html
+++ /dev/null
@@ -1,35 +0,0 @@
-
-
-
- Hello i18n!
-
-
-
-
-I don't output any element
-
-
-
-
-
-
-
-
-+ -
-
-Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}
-
-({{minutes}})
-
-♂ ♀ ⚧
-
-The author is {gender, select, male {male} female {female} other {other}}
-
-
-
-Updated: {minutes, plural,
- =0 {just now}
- =1 {one minute ago}
- other {{{minutes}} minutes ago by {gender, select, male {male} female {female} other {other}}}}
-
-
diff --git a/docs_app/content/examples/i18n/src/app/app.component.ts b/docs_app/content/examples/i18n/src/app/app.component.ts
deleted file mode 100644
index d8e79acf50..0000000000
--- a/docs_app/content/examples/i18n/src/app/app.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html'
-})
-export class AppComponent {
- minutes = 0;
- gender = 'female';
- fly = true;
- logo = 'https://angular.io/assets/images/logos/angular/angular.png';
- heroes: string[] = ['Magneta', 'Celeritas', 'Dynama'];
- inc(i: number) {
- this.minutes = Math.min(5, Math.max(0, this.minutes + i));
- }
- male() { this.gender = 'male'; }
- female() { this.gender = 'female'; }
- other() { this.gender = 'other'; }
-}
-
diff --git a/docs_app/content/examples/i18n/src/app/app.module.ts b/docs_app/content/examples/i18n/src/app/app.module.ts
deleted file mode 100644
index 530cd295e7..0000000000
--- a/docs_app/content/examples/i18n/src/app/app.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
- imports: [ BrowserModule ],
- declarations: [ AppComponent ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/i18n/src/index.html b/docs_app/content/examples/i18n/src/index.html
deleted file mode 100644
index 6b26810c50..0000000000
--- a/docs_app/content/examples/i18n/src/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
-
- Angular i18n example
-
-
-
-
- Loading...
-
-
-
diff --git a/docs_app/content/examples/i18n/src/locale/messages.fr.xlf b/docs_app/content/examples/i18n/src/locale/messages.fr.xlf
deleted file mode 100644
index 464488a8c1..0000000000
--- a/docs_app/content/examples/i18n/src/locale/messages.fr.xlf
+++ /dev/null
@@ -1,87 +0,0 @@
-
-
-
-
-
-
- I don't output any element
- Je n'affiche aucun élément
-
- app\app.component.ts
- 10
-
-
-
- Angular logo
- Logo d'Angular
-
- app\app.component.ts
- 16
-
-
-
- Updated
- Mis à jour
-
- app\app.component.ts
- 21
-
-
-
- {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other { minutes ago} }
- {VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a minutes} }
-
- app\app.component.ts
- 21
-
-
-
- The author is
- L'auteur est
-
- app\app.component.ts
- 27
-
-
-
- {VAR_SELECT, select, male {male} female {female} other {other} }
- {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }
-
- app\app.component.ts
- 27
-
-
-
- Updated:
-
- Mis à jour:
-
-
- app\app.component.ts
- 31
-
-
-
- {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other { minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }
- {VAR_PLURAL, plural, =0 {à l'instant} =1 {il y a une minute} other {il y a minutes par {VAR_SELECT, select, male {un homme} female {une femme} other {autre} }} }
-
- app\app.component.ts
- 31
-
-
-
-
-
diff --git a/docs_app/content/examples/i18n/src/locale/messages.xlf b/docs_app/content/examples/i18n/src/locale/messages.xlf
deleted file mode 100644
index c4e45e5b87..0000000000
--- a/docs_app/content/examples/i18n/src/locale/messages.xlf
+++ /dev/null
@@ -1,75 +0,0 @@
-
-
-
-
-
-
- I don't output any element
-
- app/app.component.ts
- 9
-
-
-
- Angular logo
-
- app/app.component.ts
- 15
-
-
-
- Updated
-
- app/app.component.ts
- 20
-
-
-
- {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other { minutes ago} }
-
- app/app.component.ts
- 20
-
-
-
- The author is
-
- app/app.component.ts
- 26
-
-
-
- {VAR_SELECT, select, male {male} female {female} other {other} }
-
- app/app.component.ts
- 26
-
-
-
- Updated:
-
-
- app/app.component.ts
- 30
-
-
-
- {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other { minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }
-
- app/app.component.ts
- 30
-
-
-
-
-
diff --git a/docs_app/content/examples/i18n/src/main.ts b/docs_app/content/examples/i18n/src/main.ts
deleted file mode 100644
index 0740658908..0000000000
--- a/docs_app/content/examples/i18n/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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);
diff --git a/docs_app/content/examples/i18n/zipper.json b/docs_app/content/examples/i18n/zipper.json
deleted file mode 100644
index 7f9c0a43cc..0000000000
--- a/docs_app/content/examples/i18n/zipper.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "files":[
- "!dist/",
- "!**/*.d.ts",
- "!src/**/*.js",
- "!doc-files/**/*",
- "**/*.xlf"
- ],
- "removeSystemJsConfig": true,
- "type": "i18n"
-}
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/e2e/app.e2e-spec.ts b/docs_app/content/examples/lazy-loading-ngmodules/e2e/app.e2e-spec.ts
deleted file mode 100644
index 121d100ccb..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, element, by } from 'protractor';
-
-
-describe('providers App', () => {
- let page: AppPage;
- const buttons = element.all(by.css('button'));
- const customersButton = buttons.get(0);
- const ordersButton = buttons.get(1);
- const homeButton = buttons.get(2);
-
- beforeEach(() => {
- page = new AppPage();
- });
-
- it('should display message saying app works', () => {
- page.navigateTo();
- expect(page.getParagraphText()).toEqual('Lazy loading feature modules');
- });
-
- describe('Customers list', function() {
- beforeEach(function() {
- customersButton.click();
- });
-
- it('should show customers list when the button is clicked', function() {
- let customersMessage = element(by.css('app-customer-list > p'));
- expect(customersMessage.getText()).toBe('customer-list works!');
- });
-
- });
-
- describe('Orders list', function() {
- beforeEach(function() {
- ordersButton.click();
- });
-
- it('should show orders list when the button is clicked', function() {
- let ordersMessage = element(by.css('app-order-list > p'));
- expect(ordersMessage.getText()).toBe('order-list works!');
- });
-
- });
-
-});
-
-
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/example-config.json b/docs_app/content/examples/lazy-loading-ngmodules/example-config.json
deleted file mode 100644
index 313764c3c6..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/example-config.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "build": "build:cli",
- "run": "serve:cli"
-}
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts
deleted file mode 100644
index dc2f71be29..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app-routing.module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// #docplaster
-// #docregion app-routing-module
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-
-// #docregion const-routes
-const routes: Routes = [
- {
- path: 'customers',
- loadChildren: 'app/customers/customers.module#CustomersModule'
- },
- {
- path: 'orders',
- loadChildren: 'app/orders/orders.module#OrdersModule'
- },
- {
- path: '',
- redirectTo: '',
- pathMatch: 'full'
- }
-];
-// #enddocregion const-routes
-
-@NgModule({
- imports: [
- RouterModule.forRoot(routes)
- ],
- exports: [RouterModule],
- providers: []
-})
-export class AppRoutingModule { }
-// #enddocregion app-routing-module
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.css b/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.html b/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.html
deleted file mode 100644
index 329739edf6..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
- {{title}}
-
-
-Customers
-Orders
-Home
-
-
-
-
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.spec.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.spec.ts
deleted file mode 100644
index 41967875b6..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [
- RouterTestingModule
- ],
- declarations: [
- AppComponent
- ],
- });
- TestBed.compileComponents();
- });
-
- it('should create the app', async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app).toBeTruthy();
- }));
-
- it(`should have as title 'app works!'`, async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app.title).toEqual('app works!');
- }));
-
- it('should render title in a h1 tag', async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- fixture.detectChanges();
- const compiled = fixture.debugElement.nativeElement;
- expect(compiled.querySelector('h1').textContent).toContain('app works!');
- }));
-});
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.ts
deleted file mode 100644
index 665b2ef095..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
-})
-export class AppComponent {
- title = 'Lazy loading feature modules';
-}
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.module.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.module.ts
deleted file mode 100644
index fa3ee4def3..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/app.module.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
-import { AppRoutingModule } from './app-routing.module';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- FormsModule,
- HttpModule,
- AppRoutingModule
- ],
- providers: [],
- bootstrap: [AppComponent]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.css b/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.html b/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.html
deleted file mode 100644
index 125b263925..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
- customer-list works!
-
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.spec.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.spec.ts
deleted file mode 100644
index c34e342ba0..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CustomerListComponent } from './customer-list.component';
-
-describe('CustomerListComponent', () => {
- let component: CustomerListComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ CustomerListComponent ]
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(CustomerListComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.ts
deleted file mode 100644
index e3b118ff80..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customer-list/customer-list.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-customer-list',
- templateUrl: './customer-list.component.html',
- styleUrls: ['./customer-list.component.css']
-})
-export class CustomerListComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit() {
- }
-
-}
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts
deleted file mode 100644
index 2c7e16b4f4..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customers-routing.module.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// #docplaster
-// #docregion customers-routing-module
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { CustomerListComponent } from './customer-list/customer-list.component';
-
-
-const routes: Routes = [
- {
- path: '',
- component: CustomerListComponent
- }
-];
-
-@NgModule({
- imports: [RouterModule.forChild(routes)],
- exports: [RouterModule]
-})
-export class CustomersRoutingModule { }
-// #enddocregion customers-routing-module
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts
deleted file mode 100644
index db6909da9b..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/customers/customers.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docplaster
-// #docregion customers-module
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CustomersRoutingModule } from './customers-routing.module';
-import { CustomerListComponent } from './customer-list/customer-list.component';
-
-@NgModule({
- imports: [
- CommonModule,
- CustomersRoutingModule
- ],
- declarations: [CustomerListComponent]
-})
-export class CustomersModule { }
-// #enddocregion customers-module
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.css b/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.html b/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.html
deleted file mode 100644
index ec99b36fea..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
- order-list works!
-
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.spec.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.spec.ts
deleted file mode 100644
index 2688bcf420..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { OrderListComponent } from './order-list.component';
-
-describe('OrderListComponent', () => {
- let component: OrderListComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ OrderListComponent ]
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(OrderListComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.ts
deleted file mode 100644
index 33b31ce8cc..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/order-list/order-list.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-order-list',
- templateUrl: './order-list.component.html',
- styleUrls: ['./order-list.component.css']
-})
-export class OrderListComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit() {
- }
-
-}
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts
deleted file mode 100644
index 4ebb23615f..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/orders-routing.module.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docplaster
-// #docregion orders-routing-module
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-// #docregion orders-routing-module-detail
-import { OrderListComponent } from './order-list/order-list.component';
-
-const routes: Routes = [
- {
- path: '',
- component: OrderListComponent
- }
-];
-// #enddocregion orders-routing-module-detail
-
-@NgModule({
- imports: [RouterModule.forChild(routes)],
- exports: [RouterModule]
-})
-export class OrdersRoutingModule { }
-// #enddocregion orders-routing-module
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts
deleted file mode 100644
index a349d46898..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/app/orders/orders.module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { OrdersRoutingModule } from './orders-routing.module';
-import { OrderListComponent } from './order-list/order-list.component';
-
-@NgModule({
- imports: [
- CommonModule,
- OrdersRoutingModule
- ],
- declarations: [OrderListComponent]
-})
-export class OrdersModule { }
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/index.html b/docs_app/content/examples/lazy-loading-ngmodules/src/index.html
deleted file mode 100644
index a0b9bc029a..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
- Lazy loading feature modules
-
-
-
-
-
-
- Loading...
-
-
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/src/main.ts b/docs_app/content/examples/lazy-loading-ngmodules/src/main.ts
deleted file mode 100644
index a9ca1caf8c..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/src/main.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-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);
diff --git a/docs_app/content/examples/lazy-loading-ngmodules/stackblitz.json b/docs_app/content/examples/lazy-loading-ngmodules/stackblitz.json
deleted file mode 100644
index e6ee97e1cf..0000000000
--- a/docs_app/content/examples/lazy-loading-ngmodules/stackblitz.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "description": "Lazy Loading Feature Modules",
- "files": [
- "!**/*.d.ts",
- "!**/*.js",
- "!**/*.[1,2].*"
- ],
- "file": "src/app/app.component.ts",
- "tags": ["lazy loading"]
-}
diff --git a/docs_app/content/examples/lifecycle-hooks/e2e/app.e2e-spec.ts b/docs_app/content/examples/lifecycle-hooks/e2e/app.e2e-spec.ts
deleted file mode 100644
index 80649e801f..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,181 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('Lifecycle hooks', function () {
-
- beforeAll(function () {
- browser.get('');
- });
-
- it('should open correctly', function () {
- expect(element.all(by.css('h2')).get(0).getText()).toEqual('Peek-A-Boo');
- });
-
- it('should support peek-a-boo', function () {
- let pabComp = element(by.css('peek-a-boo-parent peek-a-boo'));
- expect(pabComp.isPresent()).toBe(false, 'should not be able to find the "peek-a-boo" component');
- let pabButton = element.all(by.css('peek-a-boo-parent button')).get(0);
- let updateHeroButton = element.all(by.css('peek-a-boo-parent button')).get(1);
- expect(pabButton.getText()).toContain('Create Peek');
- pabButton.click().then(function () {
- expect(pabButton.getText()).toContain('Destroy Peek');
- expect(pabComp.isDisplayed()).toBe(true, 'should be able to see the "peek-a-boo" component');
- expect(pabComp.getText()).toContain('Windstorm');
- expect(pabComp.getText()).not.toContain('Windstorm!');
- expect(updateHeroButton.isPresent()).toBe(true, 'should be able to see the update hero button');
- return updateHeroButton.click();
- }).then(function () {
- expect(pabComp.getText()).toContain('Windstorm!');
- return pabButton.click();
- }).then(function () {
- expect(pabComp.isPresent()).toBe(false, 'should no longer be able to find the "peek-a-boo" component');
- });
- });
-
- it('should support OnChanges hook', function () {
- let onChangesViewEle = element.all(by.css('on-changes div')).get(0);
- let inputEles = element.all(by.css('on-changes-parent input'));
- let heroNameInputEle = inputEles.get(1);
- let powerInputEle = inputEles.get(0);
- let titleEle = onChangesViewEle.element(by.css('p'));
- let changeLogEles = onChangesViewEle.all(by.css('div'));
-
- expect(titleEle.getText()).toContain('Windstorm can sing');
- expect(changeLogEles.count()).toEqual(2, 'should start with 2 messages');
- 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 () {
- let doCheckViewEle = element.all(by.css('do-check div')).get(0);
- let inputEles = element.all(by.css('do-check-parent input'));
- let heroNameInputEle = inputEles.get(1);
- let powerInputEle = inputEles.get(0);
- let titleEle = doCheckViewEle.element(by.css('p'));
- let changeLogEles = doCheckViewEle.all(by.css('div'));
- let logCount: number;
-
- expect(titleEle.getText()).toContain('Windstorm can sing');
- changeLogEles.count().then(function(count: number) {
- // 3 messages to start
- expect(count).toEqual(3, 'should start with 3 messages');
- logCount = count;
- return heroNameInputEle.sendKeys('-foo-');
- }).then(function () {
- expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
- return changeLogEles.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-');
- }).then(function () {
- expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
- expect(changeLogEles.count()).toEqual(logCount + 6, 'should add 6 more messages');
- });
- });
-
- it('should support AfterView hooks', function () {
- let parentEle = element(by.tagName('after-view-parent'));
- let buttonEle = parentEle.element(by.tagName('button')); // Reset
- let commentEle = parentEle.element(by.className('comment'));
- let logEles = parentEle.all(by.css('h4 ~ div'));
- let childViewInputEle = parentEle.element(by.css('app-child-view input'));
- let logCount: number;
-
- expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
- expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
-
- logEles.count().then(function(count: number) {
- logCount = count;
- 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: number) {
- expect(logCount + 7).toBeGreaterThan(count - 3,
- '7 additional log messages should have been added');
- expect(logCount + 7).toBeLessThan(count + 3,
- '7 additional log messages should have been added');
- logCount = count;
- return buttonEle.click();
- }).then(function() {
- expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
- });
- });
-
-
- it('should support AfterContent hooks', function () {
- let parentEle = element(by.tagName('after-content-parent'));
- let buttonEle = parentEle.element(by.tagName('button')); // Reset
- let commentEle = parentEle.element(by.className('comment'));
- let logEles = parentEle.all(by.css('h4 ~ div'));
- let childViewInputEle = parentEle.element(by.css('app-child input'));
- let logCount: number;
-
- expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
- expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
-
- logEles.count().then(function(count: number) {
- logCount = count;
- 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: number) {
- expect(logCount + 5).toEqual(count, '5 additional log messages should have been added');
- logCount = count;
- return buttonEle.click();
- }).then(function() {
- expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
- });
- });
-
- it('should support spy\'s OnInit & OnDestroy hooks', function () {
- let inputEle = element(by.css('spy-parent input'));
- let addHeroButtonEle = element(by.cssContainingText('spy-parent button', 'Add Hero'));
- let resetHeroesButtonEle = element(by.cssContainingText('spy-parent button', 'Reset Heroes'));
- let heroEles = element.all(by.css('spy-parent div[mySpy'));
- 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');
- inputEle.sendKeys('-test-').then(function() {
- return addHeroButtonEle.click();
- }).then(function() {
- expect(heroEles.count()).toBe(3, 'should have added one hero');
- expect(heroEles.get(2).getText()).toContain('-test-');
- expect(logEles.count()).toBe(3, 'should now have 3 log entries');
- return resetHeroesButtonEle.click();
- }).then(function() {
- expect(heroEles.count()).toBe(0, 'should no longer have any heroes');
- expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 orig + 1 reset + 3 removeall');
- });
- });
-
- it('should support "spy counter"', function () {
- let updateCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Update'));
- let resetCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Reset'));
- let textEle = element(by.css('counter-parent app-counter > div'));
- let logEles = element.all(by.css('counter-parent h4 ~ div'));
- expect(textEle.getText()).toContain('Counter = 0');
- expect(logEles.count()).toBe(2, 'should start with two log entries');
- updateCounterButtonEle.click().then(function() {
- expect(textEle.getText()).toContain('Counter = 1');
- expect(logEles.count()).toBe(3, 'should now have 3 log entries');
- return resetCounterButtonEle.click();
- }).then(function() {
- expect(textEle.getText()).toContain('Counter = 0');
- expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 prev + 1 reset + 2 destroy + 1 init');
- });
- });
-});
diff --git a/docs_app/content/examples/lifecycle-hooks/example-config.json b/docs_app/content/examples/lifecycle-hooks/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/after-content.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/after-content.component.ts
deleted file mode 100644
index 36d2cff20f..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/after-content.component.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-// #docplaster
-// #docregion
-import { AfterContentChecked, AfterContentInit, Component, ContentChild } from '@angular/core';
-
-import { LoggerService } from './logger.service';
-
-//////////////////
-@Component({
- selector: 'app-child',
- template: ' '
-})
-export class ChildComponent {
- hero = 'Magneta';
-}
-
-//////////////////////
-@Component({
- selector: 'after-content',
-// #docregion template
- template: `
- -- projected content begins --
-
- -- projected content ends --
`
-// #enddocregion template
- + `
-
- `
-})
-// #docregion hooks
-export class AfterContentComponent implements AfterContentChecked, AfterContentInit {
- private prevHero = '';
- comment = '';
-
- // Query for a CONTENT child of type `ChildComponent`
- @ContentChild(ChildComponent) contentChild: ChildComponent;
-
-// #enddocregion hooks
- constructor(private logger: LoggerService) {
- this.logIt('AfterContent constructor');
- }
-
-// #docregion hooks
- ngAfterContentInit() {
- // contentChild is set after the content has been initialized
- this.logIt('AfterContentInit');
- this.doSomething();
- }
-
- ngAfterContentChecked() {
- // contentChild is updated after the content has been checked
- if (this.prevHero === this.contentChild.hero) {
- this.logIt('AfterContentChecked (no change)');
- } else {
- this.prevHero = this.contentChild.hero;
- this.logIt('AfterContentChecked');
- this.doSomething();
- }
- }
-// #enddocregion hooks
-// #docregion do-something
-
- // This surrogate for real business logic sets the `comment`
- private doSomething() {
- this.comment = this.contentChild.hero.length > 10 ? `That's a long name` : '';
- }
-
- private logIt(method: string) {
- let child = this.contentChild;
- let message = `${method}: ${child ? child.hero : 'no'} child content`;
- this.logger.log(message);
- }
-// #docregion hooks
- // ...
-}
-// #enddocregion hooks
-
-//////////////
-@Component({
- selector: 'after-content-parent',
- template: `
-
-
AfterContent
-
-
` +
-// #docregion parent-template
- `
-
- `
-// #enddocregion parent-template
-+ `
-
-
-- AfterContent Logs --
-
Reset
-
{{msg}}
-
- `,
- styles: ['.parent {background: burlywood}'],
- providers: [LoggerService]
-})
-export class AfterContentParentComponent {
- show = true;
-
- constructor(public logger: LoggerService) {
- }
-
- reset() {
- this.logger.clear();
- // quickly remove and reload AfterContentComponent which recreates it
- this.show = false;
- this.logger.tick_then(() => this.show = true);
- }
-}
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/after-view.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/after-view.component.ts
deleted file mode 100644
index fd09962406..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/after-view.component.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-// #docplaster
-// #docregion
-import { AfterViewChecked, AfterViewInit, Component, ViewChild } from '@angular/core';
-
-import { LoggerService } from './logger.service';
-
-//////////////////
-// #docregion child-view
-@Component({
- selector: 'app-child-view',
- template: ' '
-})
-export class ChildViewComponent {
- hero = 'Magneta';
-}
-// #enddocregion child-view
-
-//////////////////////
-@Component({
- selector: 'after-view',
-// #docregion template
- template: `
- -- child view begins --
-
- -- child view ends --
`
-// #enddocregion template
- + `
-
- `
-})
-// #docregion hooks
-export class AfterViewComponent implements AfterViewChecked, AfterViewInit {
- private prevHero = '';
-
- // Query for a VIEW child of type `ChildViewComponent`
- @ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
-
-// #enddocregion hooks
- constructor(private logger: LoggerService) {
- this.logIt('AfterView constructor');
- }
-
-// #docregion hooks
- ngAfterViewInit() {
- // viewChild is set after the view has been initialized
- this.logIt('AfterViewInit');
- this.doSomething();
- }
-
- ngAfterViewChecked() {
- // viewChild is updated after the view has been checked
- if (this.prevHero === this.viewChild.hero) {
- this.logIt('AfterViewChecked (no change)');
- } else {
- this.prevHero = this.viewChild.hero;
- this.logIt('AfterViewChecked');
- this.doSomething();
- }
- }
-// #enddocregion hooks
-
- comment = '';
-
-// #docregion do-something
- // This surrogate for real business logic sets the `comment`
- private doSomething() {
- let c = this.viewChild.hero.length > 10 ? `That's a long name` : '';
- if (c !== this.comment) {
- // Wait a tick because the component's view has already been checked
- this.logger.tick_then(() => this.comment = c);
- }
- }
-// #enddocregion do-something
-
- private logIt(method: string) {
- let child = this.viewChild;
- let message = `${method}: ${child ? child.hero : 'no'} child view`;
- this.logger.log(message);
- }
-// #docregion hooks
- // ...
-}
-// #enddocregion hooks
-
-//////////////
-@Component({
- selector: 'after-view-parent',
- template: `
-
-
AfterView
-
-
-
-
-- AfterView Logs --
-
Reset
-
{{msg}}
-
- `,
- styles: ['.parent {background: burlywood}'],
- providers: [LoggerService]
-})
-export class AfterViewParentComponent {
- show = true;
-
- constructor(public logger: LoggerService) {
- }
-
- reset() {
- this.logger.clear();
- // quickly remove and reload AfterViewComponent which recreates it
- this.show = false;
- this.logger.tick_then(() => this.show = true);
- }
-}
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/app.component.html b/docs_app/content/examples/lifecycle-hooks/src/app/app.component.html
deleted file mode 100644
index d0692e28ac..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/app.component.html
+++ /dev/null
@@ -1,37 +0,0 @@
-
-Component Lifecycle Hooks
-Peek-a-boo: (most) lifecycle hooks
-OnChanges
-DoCheck
-AfterViewInit & AfterViewChecked
-AfterContentInit & AfterContentChecked
-Spy: directive with OnInit & OnDestroy
-Counter: OnChanges + Spy directive
-
-
-
-back to top
-
-
-
-back to top
-
-
-
-back to top
-
-
-
-back to top
-
-
-
-back to top
-
-
-
-back to top
-
-
-
-back to top
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/app.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/app.component.ts
deleted file mode 100644
index 7b3cf496f1..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/app.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html'
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/app.module.ts b/docs_app/content/examples/lifecycle-hooks/src/app/app.module.ts
deleted file mode 100644
index 4d9cabf218..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/app.module.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-
-import { AppComponent } from './app.component';
-
-import {
- AfterContentParentComponent,
- AfterContentComponent,
- ChildComponent
-} from './after-content.component';
-
-import {
- AfterViewParentComponent,
- AfterViewComponent,
- ChildViewComponent
-} from './after-view.component';
-
-import {
- CounterParentComponent,
- MyCounterComponent
-} from './counter.component';
-
-import {
- DoCheckParentComponent,
- DoCheckComponent
-} from './do-check.component';
-
-import {
- OnChangesParentComponent,
- OnChangesComponent
-} from './on-changes.component';
-
-import { PeekABooParentComponent } from './peek-a-boo-parent.component';
-import { PeekABooComponent } from './peek-a-boo.component';
-
-import { SpyParentComponent } from './spy.component';
-import { SpyDirective } from './spy.directive';
-
-@NgModule({
- imports: [
- BrowserModule,
- FormsModule
- ],
- declarations: [
- AppComponent,
- AfterContentParentComponent,
- AfterContentComponent,
- ChildComponent,
- AfterViewParentComponent,
- AfterViewComponent,
- ChildViewComponent,
- CounterParentComponent,
- MyCounterComponent,
- DoCheckParentComponent,
- DoCheckComponent,
- OnChangesParentComponent,
- OnChangesComponent,
- PeekABooParentComponent,
- PeekABooComponent,
- SpyParentComponent,
- SpyDirective
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/counter.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/counter.component.ts
deleted file mode 100644
index f9783b844e..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/counter.component.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-// #docregion
-import {
- Component, Input,
- OnChanges, SimpleChanges,
-} from '@angular/core';
-
-import { LoggerService } from './logger.service';
-
-@Component({
- selector: 'app-counter',
- template: `
-
- Counter = {{counter}}
-
-
-- Counter Change Log --
-
{{chg}}
-
- `,
- styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}']
-})
-export class MyCounterComponent implements OnChanges {
- @Input() counter: number;
- changeLog: string[] = [];
-
- ngOnChanges(changes: SimpleChanges) {
-
- // Empty the changeLog whenever counter goes to zero
- // hint: this is a way to respond programmatically to external value changes.
- if (this.counter === 0) {
- this.changeLog = [];
- }
-
- // A change to `counter` is the only change we care about
- let chng = changes['counter'];
- let cur = chng.currentValue;
- let prev = JSON.stringify(chng.previousValue); // first time is {}; after is integer
- this.changeLog.push(`counter: currentValue = ${cur}, previousValue = ${prev}`);
- }
-}
-
-/***************************************/
-
-@Component({
- selector: 'counter-parent',
- template: `
-
-
Counter Spy
-
-
Update counter
-
Reset Counter
-
-
-
-
-- Spy Lifecycle Hook Log --
-
{{msg}}
-
- `,
- styles: ['.parent {background: gold;}'],
- providers: [LoggerService]
-})
-export class CounterParentComponent {
- value: number;
- spyLog: string[] = [];
-
- private logger: LoggerService;
-
- constructor(logger: LoggerService) {
- this.logger = logger;
- this.spyLog = logger.logs;
- this.reset();
- }
-
- updateCounter() {
- this.value += 1;
- this.logger.tick();
- }
-
- reset() {
- this.logger.log('-- reset --');
- this.value = 0;
- this.logger.tick();
- }
-}
-
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html b/docs_app/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html
deleted file mode 100644
index cf7c2b91ce..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
{{title}}
-
-
-
Reset Log
-
-
-
-
-
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/do-check.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/do-check.component.ts
deleted file mode 100644
index d46b362ab0..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/do-check.component.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-/* tslint:disable:forin */
-// #docregion
-import { Component, DoCheck, Input, ViewChild } from '@angular/core';
-
-class Hero {
- constructor(public name: string) {}
-}
-
-@Component({
- selector: 'do-check',
- template: `
-
-
{{hero.name}} can {{power}}
-
-
-- Change Log --
-
{{chg}}
-
- `,
- styles: [
- '.hero {background: LightYellow; padding: 8px; margin-top: 8px}',
- 'p {background: Yellow; padding: 8px; margin-top: 8px}'
- ]
-})
-export class DoCheckComponent implements DoCheck {
- @Input() hero: Hero;
- @Input() power: string;
-
- changeDetected = false;
- changeLog: string[] = [];
- oldHeroName = '';
- oldPower = '';
- oldLogLength = 0;
- noChangeCount = 0;
-
- // #docregion ng-do-check
- ngDoCheck() {
-
- if (this.hero.name !== this.oldHeroName) {
- this.changeDetected = true;
- this.changeLog.push(`DoCheck: Hero name changed to "${this.hero.name}" from "${this.oldHeroName}"`);
- this.oldHeroName = this.hero.name;
- }
-
- if (this.power !== this.oldPower) {
- this.changeDetected = true;
- this.changeLog.push(`DoCheck: Power changed to "${this.power}" from "${this.oldPower}"`);
- this.oldPower = this.power;
- }
-
- if (this.changeDetected) {
- this.noChangeCount = 0;
- } else {
- // log that hook was called when there was no relevant change.
- let count = this.noChangeCount += 1;
- let noChangeMsg = `DoCheck called ${count}x when no change to hero or power`;
- if (count === 1) {
- // add new "no change" message
- this.changeLog.push(noChangeMsg);
- } else {
- // update last "no change" message
- this.changeLog[this.changeLog.length - 1] = noChangeMsg;
- }
- }
-
- this.changeDetected = false;
- }
- // #enddocregion ng-do-check
-
- reset() {
- this.changeDetected = true;
- this.changeLog = [];
- }
-}
-
-/***************************************/
-
-@Component({
- selector: 'do-check-parent',
- templateUrl: './do-check-parent.component.html',
- styles: ['.parent {background: Lavender}']
-})
-export class DoCheckParentComponent {
- hero: Hero;
- power: string;
- title = 'DoCheck';
- @ViewChild(DoCheckComponent) childView: DoCheckComponent;
-
- constructor() { this.reset(); }
-
- reset() {
- this.hero = new Hero('Windstorm');
- this.power = 'sing';
- if (this.childView) { this.childView.reset(); }
- }
-}
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/logger.service.ts b/docs_app/content/examples/lifecycle-hooks/src/app/logger.service.ts
deleted file mode 100644
index 312b785707..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/logger.service.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class LoggerService {
- logs: string[] = [];
- prevMsg = '';
- prevMsgCount = 1;
-
- log(msg: string) {
- if (msg === this.prevMsg) {
- // Repeat message; update last log entry with count.
- this.logs[this.logs.length - 1] = msg + ` (${this.prevMsgCount += 1}x)`;
- } else {
- // New message; log it.
- this.prevMsg = msg;
- this.prevMsgCount = 1;
- this.logs.push(msg);
- }
- }
-
- clear() { this.logs = []; }
-
- // schedules a view refresh to ensure display catches up
- tick() { this.tick_then(() => { }); }
- tick_then(fn: () => any) { setTimeout(fn, 0); }
-}
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.html b/docs_app/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.html
deleted file mode 100644
index a0fd404931..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/on-changes-parent.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
{{title}}
-
-
-
Reset Log
-
-
-
-
-
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/on-changes.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/on-changes.component.ts
deleted file mode 100644
index e580fffd39..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/on-changes.component.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-/* tslint:disable:forin */
-// #docregion
-import {
- Component, Input, OnChanges,
- SimpleChanges, ViewChild
-} from '@angular/core';
-
-class Hero {
- constructor(public name: string) {}
-}
-
-@Component({
- selector: 'on-changes',
- template: `
-
-
{{hero.name}} can {{power}}
-
-
-- Change Log --
-
{{chg}}
-
- `,
- styles: [
- '.hero {background: LightYellow; padding: 8px; margin-top: 8px}',
- 'p {background: Yellow; padding: 8px; margin-top: 8px}'
- ]
-})
-export class OnChangesComponent implements OnChanges {
-// #docregion inputs
- @Input() hero: Hero;
- @Input() power: string;
-// #enddocregion inputs
-
- changeLog: string[] = [];
-
- // #docregion ng-on-changes
- ngOnChanges(changes: SimpleChanges) {
- for (let propName in changes) {
- let chng = changes[propName];
- let cur = JSON.stringify(chng.currentValue);
- let prev = JSON.stringify(chng.previousValue);
- this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
- }
- }
- // #enddocregion ng-on-changes
-
- reset() { this.changeLog = []; }
-}
-
-/***************************************/
-
-@Component({
- selector: 'on-changes-parent',
- templateUrl: './on-changes-parent.component.html',
- styles: ['.parent {background: Lavender;}']
-})
-export class OnChangesParentComponent {
- hero: Hero;
- power: string;
- title = 'OnChanges';
- @ViewChild(OnChangesComponent) childView: OnChangesComponent;
-
- constructor() {
- this.reset();
- }
-
- reset() {
- // new Hero object every time; triggers onChanges
- this.hero = new Hero('Windstorm');
- // setting power only triggers onChanges if this value is different
- this.power = 'sing';
- if (this.childView) { this.childView.reset(); }
- }
-}
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts
deleted file mode 100644
index 3f2bd8585d..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/peek-a-boo-parent.component.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-import { LoggerService } from './logger.service';
-
-@Component({
- selector: 'peek-a-boo-parent',
- template: `
-
-
Peek-A-Boo
-
-
- {{hasChild ? 'Destroy' : 'Create'}} PeekABooComponent
-
-
Update Hero
-
-
-
-
-
-- Lifecycle Hook Log --
-
{{msg}}
-
- `,
- styles: ['.parent {background: moccasin}'],
- providers: [ LoggerService ]
-})
-export class PeekABooParentComponent {
-
- hasChild = false;
- hookLog: string[];
-
- heroName = 'Windstorm';
- private logger: LoggerService;
-
- constructor(logger: LoggerService) {
- this.logger = logger;
- this.hookLog = logger.logs;
- }
-
- toggleChild() {
- this.hasChild = !this.hasChild;
- if (this.hasChild) {
- this.heroName = 'Windstorm';
- this.logger.clear(); // clear log on create
- }
- this.logger.tick();
- }
-
- updateHero() {
- this.heroName += '!';
- this.logger.tick();
- }
-}
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts
deleted file mode 100644
index dcee428753..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import {
- AfterContentChecked,
- AfterContentInit,
- AfterViewChecked,
- AfterViewInit,
- DoCheck,
- OnChanges,
- OnDestroy,
- OnInit,
- SimpleChanges
-} from '@angular/core';
-import { Component, Input } from '@angular/core';
-import { LoggerService } from './logger.service';
-
-let nextId = 1;
-
-// #docregion ngOnInit
-export class PeekABoo implements OnInit {
- constructor(private logger: LoggerService) { }
-
- // implement OnInit's `ngOnInit` method
- ngOnInit() { this.logIt(`OnInit`); }
-
- logIt(msg: string) {
- this.logger.log(`#${nextId++} ${msg}`);
- }
-}
-// #enddocregion ngOnInit
-
-@Component({
- selector: 'peek-a-boo',
- template: 'Now you see my hero, {{name}}
',
- styles: ['p {background: LightYellow; padding: 8px}']
-})
-// Don't HAVE to mention the Lifecycle Hook interfaces
-// unless we want typing and tool support.
-export class PeekABooComponent extends PeekABoo implements
- OnChanges, OnInit, DoCheck,
- AfterContentInit, AfterContentChecked,
- AfterViewInit, AfterViewChecked,
- OnDestroy {
- @Input() name: string;
-
- private verb = 'initialized';
-
- constructor(logger: LoggerService) {
- super(logger);
-
- let is = this.name ? 'is' : 'is not';
- this.logIt(`name ${is} known at construction`);
- }
-
- // only called for/if there is an @input variable set by parent.
- ngOnChanges(changes: SimpleChanges) {
- let changesMsgs: string[] = [];
- for (let propName in changes) {
- if (propName === 'name') {
- let name = changes['name'].currentValue;
- changesMsgs.push(`name ${this.verb} to "${name}"`);
- } else {
- changesMsgs.push(propName + ' ' + this.verb);
- }
- }
- this.logIt(`OnChanges: ${changesMsgs.join('; ')}`);
- this.verb = 'changed'; // next time it will be a change
- }
-
- // Beware! Called frequently!
- // Called in every change detection cycle anywhere on the page
- ngDoCheck() { this.logIt(`DoCheck`); }
-
- ngAfterContentInit() { this.logIt(`AfterContentInit`); }
-
- // Beware! Called frequently!
- // Called in every change detection cycle anywhere on the page
- ngAfterContentChecked() { this.logIt(`AfterContentChecked`); }
-
- ngAfterViewInit() { this.logIt(`AfterViewInit`); }
-
- // Beware! Called frequently!
- // Called in every change detection cycle anywhere on the page
- ngAfterViewChecked() { this.logIt(`AfterViewChecked`); }
-
- ngOnDestroy() { this.logIt(`OnDestroy`); }
-}
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/spy.component.html b/docs_app/content/examples/lifecycle-hooks/src/app/spy.component.html
deleted file mode 100644
index f7deae9448..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/spy.component.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
Spy Directive
-
-
-
Add Hero
-
Reset Heroes
-
-
-
-
- {{hero}}
-
-
-
-- Spy Lifecycle Hook Log --
-
{{msg}}
-
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/spy.component.ts b/docs_app/content/examples/lifecycle-hooks/src/app/spy.component.ts
deleted file mode 100644
index 08fc0ee8a0..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/spy.component.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-import { LoggerService } from './logger.service';
-
-@Component({
- selector: 'spy-parent',
- templateUrl: './spy.component.html',
- styles: [
- '.parent {background: khaki;}',
- '.heroes {background: LightYellow; padding: 0 8px}'
- ],
- providers: [LoggerService]
-})
-export class SpyParentComponent {
- newName = 'Herbie';
- heroes: string[] = ['Windstorm', 'Magneta'];
-
- constructor(public logger: LoggerService) {
- }
-
- addHero() {
- if (this.newName.trim()) {
- this.heroes.push(this.newName.trim());
- this.newName = '';
- this.logger.tick();
- }
- }
- removeHero(hero: string) {
- this.heroes.splice(this.heroes.indexOf(hero), 1);
- this.logger.tick();
- }
- reset() {
- this.logger.log('-- reset --');
- this.heroes = [];
- this.logger.tick();
- }
-}
diff --git a/docs_app/content/examples/lifecycle-hooks/src/app/spy.directive.ts b/docs_app/content/examples/lifecycle-hooks/src/app/spy.directive.ts
deleted file mode 100644
index 01f3f95880..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/app/spy.directive.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// #docregion
-import { Directive, OnInit, OnDestroy } from '@angular/core';
-
-import { LoggerService } from './logger.service';
-
-let nextId = 1;
-
-// #docregion spy-directive
-// Spy on any element to which it is applied.
-// Usage: ...
-@Directive({selector: '[mySpy]'})
-export class SpyDirective implements OnInit, OnDestroy {
-
- constructor(private logger: LoggerService) { }
-
- ngOnInit() { this.logIt(`onInit`); }
-
- ngOnDestroy() { this.logIt(`onDestroy`); }
-
- private logIt(msg: string) {
- this.logger.log(`Spy #${nextId++} ${msg}`);
- }
-}
-// #enddocregion spy-directive
diff --git a/docs_app/content/examples/lifecycle-hooks/src/assets/sample.css b/docs_app/content/examples/lifecycle-hooks/src/assets/sample.css
deleted file mode 100644
index df17c897c6..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/assets/sample.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.parent {
- color: #666;
- margin: 14px 0;
- padding: 8px;
-}
-input {
- margin: 4px;
- padding: 4px;
-}
-.comment {
- color: red;
- font-style: italic;
-}
diff --git a/docs_app/content/examples/lifecycle-hooks/src/index.html b/docs_app/content/examples/lifecycle-hooks/src/index.html
deleted file mode 100644
index 7446c1feb5..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
-
- Angular Lifecycle Hooks
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/lifecycle-hooks/src/main.ts b/docs_app/content/examples/lifecycle-hooks/src/main.ts
deleted file mode 100644
index a9ca1caf8c..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/src/main.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-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);
diff --git a/docs_app/content/examples/lifecycle-hooks/stackblitz.json b/docs_app/content/examples/lifecycle-hooks/stackblitz.json
deleted file mode 100644
index be2e1f757b..0000000000
--- a/docs_app/content/examples/lifecycle-hooks/stackblitz.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "description": "Lifecycle Hooks",
- "files":["!**/*.d.ts", "!**/*.js"],
- "tags": ["lifecycle", "hooks",
- "OnInit", "OnDestroy", "OnChange", "DoCheck",
- "AfterContentInit", "AfterContentChecked",
- "AfterViewInit", "AfterViewChecked"]
-}
diff --git a/docs_app/content/examples/ngcontainer/example-config.json b/docs_app/content/examples/ngcontainer/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/ngcontainer/src/app/app.component.css b/docs_app/content/examples/ngcontainer/src/app/app.component.css
deleted file mode 100644
index cdb6631713..0000000000
--- a/docs_app/content/examples/ngcontainer/src/app/app.component.css
+++ /dev/null
@@ -1,34 +0,0 @@
-/* #docregion */
-button {
- min-width: 100px;
- font-size: 100%;
-}
-
-code, .code {
- background-color: #eee;
- color: black;
- font-family: Courier, sans-serif;
- font-size: 85%;
-}
-
-div.code {
- width: 400px;
-}
-
-.heroic {
- font-size: 150%;
- font-weight: bold;
-}
-
-hr {
- margin: 40px 0
-}
-
-td, th {
- text-align: left;
- vertical-align: top;
-}
-
-/* #docregion p-span */
-p span { color: red; font-size: 70%; }
-/* #enddocregion p-span */
diff --git a/docs_app/content/examples/ngcontainer/src/app/app.component.html b/docs_app/content/examples/ngcontainer/src/app/app.component.html
deleted file mode 100644
index 33a68fecaf..0000000000
--- a/docs_app/content/examples/ngcontainer/src/app/app.component.html
+++ /dev/null
@@ -1,279 +0,0 @@
-
-
-<ng-container>
-
-
-{{hero.name}}
-
-
-
-
-<ng-container> and CSS
-Examples demonstrating issues with rigid CSS styles.
-
-Toggle hero
-
-#1 <ng-container> and <p>
-
-
- I turned the corner
-
- and saw {{hero.name}}. I waved
-
- and continued on my way.
-
-
-
-
- I turned the corner
-
- and saw {{hero.name}}. I waved
-
- and continued on my way.
-
-
-
-#2 <ng-container> and <p>
-
-
-
-
- {{hero.name}} is
-
- ,
- and
- {{trait}}
- .
-
-
-
-
-
- {{hero.name}} is
-
- ,
- and
- {{trait}}
- .
-
-
-
-
-
-
#3 <ng-container> and <p>
-
-
- Show ID
-
-
-
-
- The
hero.id
in the <span>
- is caught by the
p-span CSS:
-
-
-
- Id: ({{hero.id}})
-
- Name: {{hero.name}}
-
-
-
-
-
- The
hero.id
in the <ng-container>
- is unaffected by the
p-span CSS:
-
-
- Id: ({{hero.id}})
-
- Name: {{hero.name}}
-
-
-
-
- The
hero.id
in the <ng-template *ngIf> disappears:
-
-
- Id: ({{hero.id}})
-
- Name: {{hero.name}}
-
-
-
-
- The
hero.id
in the <ng-template [ngIf]>
- is unaffected by the
p-span CSS:
-
-
- Id: ({{hero.id}})
-
- Name: {{hero.name}}
-
-
-
-
-
-
-
-<ng-container> and layout-sensitive elements
-
- Examples demonstrating issues with layout-sensitive elements
- such as <select> and <table>.
-
-
-#1 <ng-container> and <options>
-
-<select> with <span>
-
- Pick your favorite hero
- ( show sad )
-
-
-
-
-
- {{h.name}} ({{h?.emotion}})
-
-
-
-
-
-<select> with <ng-container>
-
- Pick your favorite hero
- ( show sad )
-
-
-
-
-
- {{h.name}} ({{h?.emotion}})
-
-
-
-
-
-
-
-#2 <ng-container> and <options>
-
-
- Show default traits
-
-
-
-Options with <ng-container>
-
-
-
-
-
- LOYAL
- CLEAN
- REVERENT
-
-
- {{ trait | uppercase }}
-
-
-
-
-
-Options with <span>
-
-
-
-
- LOYAL
- CLEAN
- REVERENT
-
-
- {{ trait | uppercase }}
-
-
-
-
-
-
-<ng-container> and <table>
-
- Attribute directives
- Structural directives
- div with *ngIf
-
-
-
-
- Directive
- Type
- Description
-
-
-
- NgClass A Add or remove multiple CSS classes.
-
-
-
-
-
-
- xxx S div with *ngIf formats crazy.
-
-
- yyy S div with *ngIf formats crazy.
-
-
-
-
-
-
-
-
- NgFor S Repeat the template for each item in a list.
-
-
- NgIf S Add or remove DOM elements.
-
-
-
-
-
-
- NgStyle A Add or remove multiple style attributes.
-
-
-
-
-
- NgSwitch S Include in DOM if case matches the switch value.
-
-
-
-
-
-
-
-Do not confuse <ng-container> with <ng-content>
-
-<ng-container>Inside ng-container</ng-container>
-
-Inside ng-container
-
-
-<ng-content>this is an Angular parse error</ng-content>
-
-
-
-Template parse errors:
-<ng-content> element cannot have content.
-
-Demo of </ng-content>
-
-
- Projected content
-
-
diff --git a/docs_app/content/examples/ngcontainer/src/app/app.component.ts b/docs_app/content/examples/ngcontainer/src/app/app.component.ts
deleted file mode 100644
index 65c511acd2..0000000000
--- a/docs_app/content/examples/ngcontainer/src/app/app.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-import { heroes } from './hero';
-
-@Component({
- selector: 'my-app',
- templateUrl: './app.component.html',
- styleUrls: [ './app.component.css' ]
-})
-export class AppComponent {
- heroes = heroes;
- hero = this.heroes[0];
- heroTraits = [ 'honest', 'brave', 'considerate' ];
-
- // flags for the table
- attrDirs = true;
- strucDirs = true;
- divNgIf = false;
-
- showId = true;
- showDefaultTraits = true;
- showSad = true;
-}
diff --git a/docs_app/content/examples/ngcontainer/src/app/app.module.ts b/docs_app/content/examples/ngcontainer/src/app/app.module.ts
deleted file mode 100644
index 57ac92f518..0000000000
--- a/docs_app/content/examples/ngcontainer/src/app/app.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { ContentComponent } from './content.component';
-import { heroComponents } from './hero.components';
-
-@NgModule({
- imports: [ BrowserModule, FormsModule ],
- declarations: [
- AppComponent,
- ContentComponent,
- heroComponents
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/ngcontainer/src/app/content.component.ts b/docs_app/content/examples/ngcontainer/src/app/content.component.ts
deleted file mode 100644
index a2580b0dee..0000000000
--- a/docs_app/content/examples/ngcontainer/src/app/content.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'content-comp',
- // #docregion template
- template:
- `
-
-
`,
- // #enddocregion template
- styles: [ `
- div { border: medium dashed green; padding: 1em; width: 150px; text-align: center}
- `]
-})
-export class ContentComponent { }
diff --git a/docs_app/content/examples/ngcontainer/src/app/hero.components.ts b/docs_app/content/examples/ngcontainer/src/app/hero.components.ts
deleted file mode 100644
index 77920ebdf9..0000000000
--- a/docs_app/content/examples/ngcontainer/src/app/hero.components.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// #docregion
-import { Component, Input } from '@angular/core';
-import { Hero } from './hero';
-
-@Component({
- selector: 'happy-hero',
- template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
-})
-export class HappyHeroComponent {
- @Input() hero: Hero;
-}
-
-@Component({
- selector: 'sad-hero',
- template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
-})
-export class SadHeroComponent {
- @Input() hero: Hero;
-}
-
-@Component({
- selector: 'confused-hero',
- template: `Are you as confused as {{hero.name}}?`
-})
-export class ConfusedHeroComponent {
- @Input() hero: Hero;
-}
-
-@Component({
- selector: 'unknown-hero',
- template: `{{message}}`
-})
-export class UnknownHeroComponent {
- @Input() hero: Hero;
- get message() {
- return this.hero && this.hero.name ?
- `${this.hero.name} is strange and mysterious.` :
- 'Are you feeling indecisive?';
- }
-}
-
-export const heroComponents =
- [ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ];
diff --git a/docs_app/content/examples/ngcontainer/src/app/hero.ts b/docs_app/content/examples/ngcontainer/src/app/hero.ts
deleted file mode 100644
index 89f0cbfdf8..0000000000
--- a/docs_app/content/examples/ngcontainer/src/app/hero.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-export class Hero {
- id: number;
- name: string;
- emotion?: string;
-}
-
-export const heroes: Hero[] = [
- { id: 1, name: 'Mr. Nice', emotion: 'happy'},
- { id: 2, name: 'Narco', emotion: 'sad' },
- { id: 3, name: 'Windstorm', emotion: 'confused' },
- { id: 4, name: 'Magneta'}
-];
diff --git a/docs_app/content/examples/ngcontainer/src/index.html b/docs_app/content/examples/ngcontainer/src/index.html
deleted file mode 100644
index 38a7c1dff1..0000000000
--- a/docs_app/content/examples/ngcontainer/src/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
- Angular <ng-container>
-
-
-
- Loading...
-
-
-
diff --git a/docs_app/content/examples/ngcontainer/src/main.ts b/docs_app/content/examples/ngcontainer/src/main.ts
deleted file mode 100644
index 0740658908..0000000000
--- a/docs_app/content/examples/ngcontainer/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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);
diff --git a/docs_app/content/examples/ngcontainer/stackblitz.json b/docs_app/content/examples/ngcontainer/stackblitz.json
deleted file mode 100644
index c4cae8f663..0000000000
--- a/docs_app/content/examples/ngcontainer/stackblitz.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "description": "",
- "files": [
- "!**/*.d.ts",
- "!**/*.js"
- ],
- "tags": [
- "ngcontainer", "structural", "directives"
- ]
-}
diff --git a/docs_app/content/examples/ngmodule-faq/contact.1b.stackblitz.json b/docs_app/content/examples/ngmodule-faq/contact.1b.stackblitz.json
deleted file mode 100644
index 2946183c0d..0000000000
--- a/docs_app/content/examples/ngmodule-faq/contact.1b.stackblitz.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "description": "Contact NgModule v.1",
- "files": [
- "src/app/app.component.1b.ts",
- "src/app/app.module.1b.ts",
- "src/app/highlight.directive.ts",
- "src/app/title.component.html",
- "src/app/title.component.ts",
- "src/app/user.service.ts",
-
- "src/app/contact/awesome.pipe.ts",
- "src/app/contact/contact.component.css",
- "src/app/contact/contact.component.html",
- "src/app/contact/contact.component.3.ts",
- "src/app/contact/contact.service.ts",
- "src/app/contact/contact-highlight.directive.ts",
-
- "src/main.1b.ts",
- "src/styles.css",
- "src/index.1b.html"
- ],
- "main": "src/index.1b.html",
- "tags": ["NgModule"]
-}
diff --git a/docs_app/content/examples/ngmodule-faq/contact.2.stackblitz.json b/docs_app/content/examples/ngmodule-faq/contact.2.stackblitz.json
deleted file mode 100644
index 3aaf1474a6..0000000000
--- a/docs_app/content/examples/ngmodule-faq/contact.2.stackblitz.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
- "description": "Contact NgModule v.2",
- "files": [
- "src/app/app.component.2.ts",
- "src/app/app.module.2.ts",
- "src/app/highlight.directive.ts",
- "src/app/title.component.html",
- "src/app/title.component.ts",
- "src/app/user.service.ts",
-
- "src/app/contact/contact.component.css",
- "src/app/contact/contact.component.html",
- "src/app/contact/contact.service.ts",
-
- "src/app/contact/awesome.pipe.ts",
- "src/app/contact/contact.component.3.ts",
- "src/app/contact/contact.module.2.ts",
- "src/app/contact/contact-highlight.directive.ts",
-
- "src/main.2.ts",
- "src/styles.css",
- "src/index.2.html"
- ],
- "main": "src/index.2.html",
- "tags": ["NgModule"]
-}
diff --git a/docs_app/content/examples/ngmodule-faq/e2e/app.e2e-spec.ts b/docs_app/content/examples/ngmodule-faq/e2e/app.e2e-spec.ts
deleted file mode 100644
index 72d1ca9214..0000000000
--- a/docs_app/content/examples/ngmodule-faq/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('NgModule', function () {
-
- // helpers
- const gold = 'rgba(255, 215, 0, 1)';
- const powderblue = 'rgba(176, 224, 230, 1)';
- const lightgray = 'rgba(211, 211, 211, 1)';
- const white = 'rgba(0, 0, 0, 0)';
-
- function getCommonsSectionStruct() {
- const buttons = element.all(by.css('nav a'));
-
- return {
- title: element.all(by.tagName('h1')).get(0),
- welcome: element.all(by.css('app-title p i')).get(0),
- contactButton: buttons.get(0),
- crisisButton: buttons.get(1),
- heroesButton: buttons.get(2)
- };
- }
-
- function getContactSectionStruct() {
- const buttons = element.all(by.css('app-contact form button'));
-
- return {
- header: element.all(by.css('app-contact h2')).get(0),
- popupMessage: element.all(by.css('app-contact div')).get(0),
- contactNameHeader: element.all(by.css('app-contact form h3')).get(0),
- input: element.all(by.css('app-contact form input')).get(0),
- validationError: element.all(by.css('app-contact form .alert')).get(0),
- saveButton: buttons.get(0), // can't be tested
- nextContactButton: buttons.get(1),
- newContactButton: buttons.get(2)
- };
- }
-
- function getCrisisSectionStruct() {
- return {
- title: element.all(by.css('ng-component h3')).get(0),
- items: element.all(by.css('ng-component a')),
- itemId: element.all(by.css('ng-component div')).get(0),
- listLink: element.all(by.css('ng-component a')).get(0),
- };
- }
-
- function getHeroesSectionStruct() {
- return {
- header: element.all(by.css('ng-component h2')).get(0),
- title: element.all(by.css('ng-component h3')).get(0),
- items: element.all(by.css('ng-component a')),
- itemId: element.all(by.css('ng-component ng-component div div')).get(0),
- itemInput: element.all(by.css('ng-component ng-component input')).get(0),
- listLink: element.all(by.css('ng-component ng-component a')).get(0),
- };
- }
-
- // tests
- function appTitleTests(color: string, name?: string) {
- return function() {
- it('should have a gray header', function() {
- const commons = getCommonsSectionStruct();
- expect(commons.title.getCssValue('backgroundColor')).toBe(color);
- });
-
- it('should welcome us', function () {
- const commons = getCommonsSectionStruct();
- expect(commons.welcome.getText()).toBe('Welcome, ' + (name || 'Sherlock Holmes'));
- });
- };
- }
-
- function contactTests(color: string, name?: string) {
- return function() {
- it('shows the contact\'s owner', function() {
- const contacts = getContactSectionStruct();
- expect(contacts.header.getText()).toBe('Contact of ' + (name || 'Sherlock Holmes'));
- });
-
- it('can cycle between contacts', function () {
- const contacts = getContactSectionStruct();
- const nextButton = contacts.nextContactButton;
- expect(contacts.contactNameHeader.getText()).toBe('Awesome Sam Spade');
- expect(contacts.contactNameHeader.getCssValue('backgroundColor')).toBe(color);
- nextButton.click().then(function () {
- expect(contacts.contactNameHeader.getText()).toBe('Awesome Nick Danger');
- return nextButton.click();
- }).then(function () {
- expect(contacts.contactNameHeader.getText()).toBe('Awesome Nancy Drew');
- });
- });
-
- it('can change an existing contact', function () {
- const contacts = getContactSectionStruct();
- contacts.input.sendKeys('a');
- expect(contacts.input.getCssValue('backgroundColor')).toBe(color);
- expect(contacts.contactNameHeader.getText()).toBe('Awesome Sam Spadea');
- });
-
- it('can create a new contact', function () {
- const contacts = getContactSectionStruct();
- const newContactButton = contacts.newContactButton;
- newContactButton.click().then(function () {
- expect(contacts.validationError.getText()).toBe('Name is required');
- contacts.input.sendKeys('John Doe');
- expect(contacts.contactNameHeader.getText()).toBe('Awesome John Doe');
- expect(contacts.validationError.getText()).toBe('');
- });
- });
- };
- }
-
- describe('index.html', function () {
- beforeEach(function () {
- browser.get('');
- });
-
- describe('app-title', appTitleTests(white, 'Miss Marple'));
-
- describe('contact', contactTests(lightgray, 'Miss Marple'));
-
- describe('crisis center', function () {
- beforeEach(function () {
- getCommonsSectionStruct().crisisButton.click();
- });
-
- it('shows a list of crisis', function () {
- const crisis = getCrisisSectionStruct();
- expect(crisis.title.getText()).toBe('Crisis List');
- expect(crisis.items.count()).toBe(4);
- expect(crisis.items.get(0).getText()).toBe('1 - Dragon Burning Cities');
- });
-
- it('can navigate to one crisis details', function () {
- const crisis = getCrisisSectionStruct();
- crisis.items.get(0).click().then(function() {
- expect(crisis.itemId.getText()).toBe('Crisis id: 1');
- return crisis.listLink.click();
- }).then(function () {
- // We are back to the list
- expect(crisis.items.count()).toBe(4);
- });
- });
- });
-
- describe('heroes', function () {
- beforeEach(function () {
- getCommonsSectionStruct().heroesButton.click();
- });
-
- it('shows a list of heroes', function() {
- const heroes = getHeroesSectionStruct();
- expect(heroes.header.getText()).toBe('Heroes of Miss Marple');
- expect(heroes.title.getText()).toBe('Hero List');
- expect(heroes.items.count()).toBe(6);
- expect(heroes.items.get(0).getText()).toBe('11 - Mr. Nice');
- });
-
- it('can navigate and edit one hero details', function () {
- const heroes = getHeroesSectionStruct();
- heroes.items.get(0).click().then(function () {
- expect(heroes.itemId.getText()).toBe('Id: 11');
- heroes.itemInput.sendKeys(' try');
- return heroes.listLink.click();
- }).then(function () {
- // We are back to the list
- expect(heroes.items.count()).toBe(6);
- expect(heroes.items.get(0).getText()).toBe('11 - Mr. Nice try');
- });
- });
- });
- });
-
- // describe('index.0.html', function() {
- // beforeEach(function () {
- // browser.get('index.0.html');
- // });
-
- // it('has a title', function () {
- // const title = element.all(by.tagName('h1')).get(0);
- // expect(title.getText()).toBe('Minimal NgModule');
- // });
- // });
-
- // describe('index.1.html', function () {
- // beforeEach(function () {
- // browser.get('index.1.html');
- // });
-
- // describe('app-title', appTitleTests(powderblue));
- // });
-
- // describe('index.1b.html', function () {
- // beforeEach(function () {
- // browser.get('index.1b.html');
- // });
-
- // describe('app-title', appTitleTests(powderblue));
-
- // describe('contact', contactTests(powderblue));
- // });
-
- // describe('index.2.html', function () {
- // beforeEach(function () {
- // browser.get('index.2.html');
- // });
-
- // describe('app-title', appTitleTests(gold));
-
- // describe('contact', contactTests(powderblue));
- // });
-
- // describe('index.3.html', function () {
- // beforeEach(function () {
- // browser.get('index.3.html');
- // });
-
- // describe('app-title', appTitleTests(gold));
- // });
-
-});
diff --git a/docs_app/content/examples/ngmodule-faq/example-config.json b/docs_app/content/examples/ngmodule-faq/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/ngmodule-faq/minimal.0.stackblitz.json b/docs_app/content/examples/ngmodule-faq/minimal.0.stackblitz.json
deleted file mode 100644
index c1835325d8..0000000000
--- a/docs_app/content/examples/ngmodule-faq/minimal.0.stackblitz.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
- "description": "Minimal NgModule",
- "files": [
- "src/app/app.component.0.ts",
- "src/app/app.module.0.ts",
- "src/main.0.ts",
- "src/styles.css",
- "src/index.0.html"
- ],
- "main": "src/index.0.html",
- "tags": ["NgModule"]
-}
diff --git a/docs_app/content/examples/ngmodule-faq/pre-shared.3.stackblitz.json b/docs_app/content/examples/ngmodule-faq/pre-shared.3.stackblitz.json
deleted file mode 100644
index 39faaf229e..0000000000
--- a/docs_app/content/examples/ngmodule-faq/pre-shared.3.stackblitz.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
- "description": "NgModule v.3",
- "files": [
- "src/app/app.component.3.ts",
- "src/app/app.module.3.ts",
- "src/app/app-routing.module.3.ts",
-
- "src/app/highlight.directive.ts",
- "src/app/title.component.html",
- "src/app/title.component.ts",
- "src/app/user.service.ts",
-
- "src/app/contact/contact.component.css",
- "src/app/contact/contact.component.html",
- "src/app/contact/contact.service.ts",
-
- "src/app/contact/awesome.pipe.ts",
- "src/app/contact/contact.component.3.ts",
- "src/app/contact/contact.module.3.ts",
- "src/app/contact/contact-routing.module.3.ts",
- "src/app/contact/contact-highlight.directive.ts",
-
- "src/app/crisis/*.ts",
-
- "src/app/hero/hero-detail.component.ts",
- "src/app/hero/hero-list.component.ts",
- "src/app/hero/hero.service.ts",
-
- "src/app/hero/hero.component.3.ts",
- "src/app/hero/hero.module.3.ts",
- "src/app/hero/hero-routing.module.3.ts",
- "src/app/hero/highlight.directive.ts",
-
- "src/main.3.ts",
- "src/styles.css",
- "src/index.3.html"
- ],
- "main": "src/index.3.html",
- "tags": ["NgModule"]
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app-routing.module.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/app-routing.module.3.ts
deleted file mode 100644
index f3c68f5050..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/app-routing.module.3.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { ContactModule } from './contact/contact.module.3';
-
-const routes: Routes = [
- { path: '', redirectTo: 'contact', pathMatch: 'full'},
- { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
- { path: 'heroes', loadChildren: 'app/hero/hero.module.3#HeroModule' }
-];
-
-@NgModule({
- imports: [
- ContactModule,
- RouterModule.forRoot(routes)
- ],
- exports: [RouterModule]
-})
-export class AppRoutingModule {}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app-routing.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/app-routing.module.ts
deleted file mode 100644
index 4ce7438bc4..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/app-routing.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { ContactModule } from './contact/contact.module';
-
-// #docregion routes
-const routes: Routes = [
- { path: '', redirectTo: 'contact', pathMatch: 'full'},
- // #docregion lazy-routes
- { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
- { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
- // #enddocregion lazy-routes
-];
-// #enddocregion routes
-
-@NgModule({
- // #docregion imports
- imports: [
- ContactModule,
- // #docregion forRoot
- RouterModule.forRoot(routes),
- // #enddocregion forRoot
- ],
- // #enddocregion imports
- // #docregion exports
- exports: [RouterModule]
- // #enddocregion exports
-})
-export class AppRoutingModule {}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.component.0.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.component.0.ts
deleted file mode 100644
index 9aac868764..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/app.component.0.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- template: '{{title}} ',
-})
-export class AppComponent {
- title = 'Angular Modules';
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.component.1.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.component.1.ts
deleted file mode 100644
index 6cdf540f0e..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/app.component.1.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
-// #enddocregion
- /*
- // #docregion template
- template: '{{title}} '
- // #enddocregion template
- */
-// #docregion
- template: ' '
-})
-export class AppComponent {}
-// #enddocregion
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.component.1b.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.component.1b.ts
deleted file mode 100644
index 36e3005e0a..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/app.component.1b.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- // #docregion template
- template: `
-
-
- `
- // #enddocregion template
-})
-export class AppComponent {}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.component.2.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.component.2.ts
deleted file mode 100644
index f28e4526e9..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/app.component.2.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- template: `
-
-
- `
-})
-export class AppComponent {}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.component.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.component.3.ts
deleted file mode 100644
index cab904e656..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/app.component.3.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- // #docregion template
- template: `
-
-
- Contact
- Crisis Center
- Heroes
-
-
- `
- // #enddocregion template
-})
-export class AppComponent {}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.component.ts
deleted file mode 100644
index 4011f82b0c..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/app.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- template: `
-
-
- Contact
- Crisis Center
- Heroes
-
-
- `
-})
-export class AppComponent {}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.module.0.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.module.0.ts
deleted file mode 100644
index 4cce82ffcf..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/app.module.0.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component.0';
-
-@NgModule({
-// #docregion imports
- imports: [ BrowserModule ],
-// #enddocregion imports
- declarations: [ AppComponent ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.module.1.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.module.1.ts
deleted file mode 100644
index bb0f7ec6f9..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/app.module.1.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-// #docplaster
-// #docregion
-/* Angular Imports */
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-/* App Imports */
-// #enddocregion
-import { AppComponent } from './app.component.1';
-/*
-// #docregion
-import { AppComponent } from './app.component';
-// #enddocregion
-*/
-// #docregion
-import { HighlightDirective } from './highlight.directive';
-import { TitleComponent } from './title.component';
-import { UserService } from './user.service';
-
-/* Contact Related Imports */
-import { FormsModule } from '@angular/forms';
-
-import { AwesomePipe } from './contact/awesome.pipe';
-import { ContactComponent } from './contact/contact.component.3';
-import {
- ContactHighlightDirective as ContactHighlightDirective
-} from './contact/contact-highlight.directive';
-
-@NgModule({
-// #docregion imports
- imports: [ BrowserModule, FormsModule ],
-// #enddocregion imports
-// #docregion declarations, directive, component
- declarations: [
- AppComponent,
- HighlightDirective,
-// #enddocregion directive
- TitleComponent,
-// #enddocregion component
-
- AwesomePipe,
- ContactComponent,
- ContactHighlightDirective
-// #docregion directive, component
- ],
-// #enddocregion declarations, directive, component
-// #docregion providers
- providers: [ UserService ],
-// #enddocregion providers
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.module.1b.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.module.1b.ts
deleted file mode 100644
index 9c848aec30..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/app.module.1b.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// #docplaster
-// #docregion
-/* Angular Imports */
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-
-/* App Imports */
-// #enddocregion
-import { AppComponent } from './app.component.1b';
-/*
-// #docregion
-import { AppComponent } from './app.component';
-// #enddocregion
-*/
-// #docregion
-import { HighlightDirective } from './highlight.directive';
-import { TitleComponent } from './title.component';
-import { UserService } from './user.service';
-
-/* Contact Imports */
-// #enddocregion
-import { ContactComponent } from './contact/contact.component.3';
-/*
-// #docregion
-import { ContactComponent } from './contact/contact.component';
-// #enddocregion
-*/
-// #docregion
-import { AwesomePipe } from './contact/awesome.pipe';
-import { ContactService } from './contact/contact.service';
-import { ContactHighlightDirective } from './contact/contact-highlight.directive';
-
-@NgModule({
- imports: [ BrowserModule, FormsModule ],
-// #docregion declarations
- declarations: [
- AppComponent, HighlightDirective, TitleComponent,
- AwesomePipe, ContactComponent, ContactHighlightDirective
- ],
-// #docregion providers
- providers: [ ContactService, UserService ],
-// #enddocregion providers
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.module.2.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.module.2.ts
deleted file mode 100644
index 0da0fe334f..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/app.module.2.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-// #docplaster
-// #docregion
-/* Angular Imports */
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-/* App Imports */
-// #enddocregion
-import { AppComponent } from './app.component.2';
-/*
-// #docregion
-import { AppComponent } from './app.component';
-// #enddocregion
-*/
-// #docregion
-import { HighlightDirective } from './highlight.directive';
-import { TitleComponent } from './title.component';
-import { UserService } from './user.service';
-
-/* Contact Imports */
-// #enddocregion
-import { ContactModule } from './contact/contact.module.2';
-/*
-// #docregion
-import { ContactModule } from './contact/contact.module';
-// #enddocregion
-*/
-// #docregion
-
-@NgModule({
- imports: [ BrowserModule, ContactModule ],
- declarations: [ AppComponent, HighlightDirective, TitleComponent ],
- providers: [ UserService ],
- bootstrap: [ AppComponent ],
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.module.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.module.3.ts
deleted file mode 100644
index 6fef183d9c..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/app.module.3.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-// #docplaster
-// #docregion
-/* Angular Imports */
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-/* App Imports */
-// #enddocregion
-import { AppComponent } from './app.component.3';
-/*
-// #docregion
-import { AppComponent } from './app.component';
-// #enddocregion
-*/
-// #docregion
-import { HighlightDirective } from './highlight.directive';
-import { TitleComponent } from './title.component';
-import { UserService } from './user.service';
-
-/* Routing Module */
-// #enddocregion
-import { AppRoutingModule } from './app-routing.module.3';
-/*
-// #docregion
-import { AppRoutingModule } from './app-routing.module';
-// #enddocregion
-*/
-// #docregion
-
-@NgModule({
-// #docregion imports
- imports: [
- BrowserModule,
- AppRoutingModule
- ],
-// #enddocregion imports
- providers: [ UserService ],
- declarations: [ AppComponent, HighlightDirective, TitleComponent ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/app.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/app.module.ts
deleted file mode 100644
index c75c445a58..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/app.module.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion v4
-/* Angular Imports */
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-/* App Imports */
-import { AppComponent } from './app.component';
-
-/* Core Modules */
-import { CoreModule } from './core/core.module';
-
-/* Routing Module */
-import { AppRoutingModule } from './app-routing.module';
-
-@NgModule({
- // #docregion import-for-root
- imports: [
- BrowserModule,
-// #enddocregion v4
-// #enddocregion import-for-root
-/*
-// #docregion v4
- CoreModule,
-// #enddocregion v4
-*/
-// #docregion import-for-root
- CoreModule.forRoot({userName: 'Miss Marple'}),
-// #docregion v4
- AppRoutingModule
- ],
- // #enddocregion import-for-root
- declarations: [ AppComponent ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
-// #enddocregion v4
-// #enddocregion
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/awesome.pipe.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/awesome.pipe.ts
deleted file mode 100644
index d6dce99901..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/contact/awesome.pipe.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({ name: 'awesome' })
-/** Precede the input string with the word "Awesome " */
-export class AwesomePipe implements PipeTransform {
- transform(phrase: string) {
- return phrase ? 'Awesome ' + phrase : '';
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-highlight.directive.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-highlight.directive.ts
deleted file mode 100644
index a71dac6742..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-highlight.directive.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docplaster
-// Same directive name and selector as
-// HighlightDirective in parent AppModule
-// It selects for both input boxes and 'highlight' attr
-// and it highlights in blue instead of gold
-
-// #docregion
-import { Directive, ElementRef } from '@angular/core';
-
-// Highlight the host element or any InputElement in blue
-@Directive({ selector: '[highlight], input' })
-export class ContactHighlightDirective {
- constructor(el: ElementRef) {
- el.nativeElement.style.backgroundColor = 'powderblue';
- // #enddocregion
- console.log(`* Contact highlight called for ${el.nativeElement.tagName}`);
- // #docregion
- }
-}
-// #enddocregion
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.3.ts
deleted file mode 100644
index d89119a156..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.3.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { ContactComponent } from './contact.component.3';
-
-const routes = [
- { path: 'contact', component: ContactComponent}
-];
-
-@NgModule({
- imports: [ RouterModule.forChild(routes) ],
- exports: [ RouterModule ]
-})
-export class ContactRoutingModule {}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.ts
deleted file mode 100644
index 46dd15867e..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { ContactComponent } from './contact.component';
-
-// #docregion routing
-const routes = [
- { path: 'contact', component: ContactComponent}
-];
-
-@NgModule({
- imports: [ RouterModule.forChild(routes) ],
- exports: [ RouterModule ]
-})
-export class ContactRoutingModule {}
-// #enddocregion
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.3.ts
deleted file mode 100644
index e674ec1323..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.3.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-
-import { Contact, ContactService } from './contact.service';
-import { UserService } from '../user.service';
-
-@Component({
- selector: 'app-contact',
- templateUrl: './contact.component.html',
- styleUrls: [ './contact.component.css' ]
-})
-export class ContactComponent implements OnInit {
- contact: Contact;
- contacts: Contact[];
-
- msg = 'Loading contacts ...';
- userName = '';
-
- constructor(private contactService: ContactService, userService: UserService) {
- this.userName = userService.userName;
- }
-
- ngOnInit() {
- this.contactService.getContacts().subscribe(contacts => {
- this.msg = '';
- this.contacts = contacts;
- this.contact = contacts[0];
- });
- }
-
- next() {
- let ix = 1 + this.contacts.indexOf(this.contact);
- if (ix >= this.contacts.length) { ix = 0; }
- this.contact = this.contacts[ix];
- }
-
- onSubmit() {
- // POST-DEMO TODO: do something like save it
- this.displayMessage('Saved ' + this.contact.name);
- }
-
- newContact() {
- this.displayMessage('New contact');
- this.contact = {id: 42, name: ''};
- this.contacts.push(this.contact);
- }
-
- /** Display a message briefly, then remove it. */
- displayMessage(msg: string) {
- this.msg = msg;
- setTimeout(() => this.msg = '', 1500);
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.css b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.css
deleted file mode 100644
index d5bd954dde..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/* #docregion */
-.ng-valid[required] {
- border-left: 5px solid #42A948; /* green */
-}
-
-.ng-invalid {
- border-left: 5px solid #a94442; /* red */
-}
-
-.alert {
- padding: 15px;
- margin: 8px 0;
- border: 1px solid transparent;
- border-radius: 4px;
-}
-.alert-danger {
- color: #a94442;
- background-color: #f2dede;
- border-color: #ebccd1;
-}
-
-.msg {
- color: blue;
- background-color: whitesmoke;
- border: 1px solid transparent;
- border-radius: 4px;
- margin-bottom: 20px;
-}
-
-.button-group {
- padding-top: 12px;
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.html b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.html
deleted file mode 100644
index ecd5e62169..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.html
+++ /dev/null
@@ -1,37 +0,0 @@
-
-Contact of {{userName}}
-{{msg}}
-
-
-
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.ts
deleted file mode 100644
index 7fa44eebe5..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.component.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-// Exact copy except import UserService from core
-// #docregion
-import { Component, OnInit } from '@angular/core';
-
-import { Contact, ContactService } from './contact.service';
-import { UserService } from '../core/user.service';
-
-@Component({
- selector: 'app-contact',
- templateUrl: './contact.component.html',
- styleUrls: [ './contact.component.css' ]
-})
-export class ContactComponent implements OnInit {
- contact: Contact;
- contacts: Contact[];
-
- msg = 'Loading contacts ...';
- userName = '';
-
- constructor(private contactService: ContactService, userService: UserService) {
- this.userName = userService.userName;
- }
-
- ngOnInit() {
- this.contactService.getContacts().subscribe(contacts => {
- this.msg = '';
- this.contacts = contacts;
- this.contact = contacts[0];
- });
- }
-
- next() {
- let ix = 1 + this.contacts.indexOf(this.contact);
- if (ix >= this.contacts.length) { ix = 0; }
- this.contact = this.contacts[ix];
- }
-
- onSubmit() {
- // POST-DEMO TODO: do something like save it
- this.displayMessage('Saved ' + this.contact.name);
- }
-
- newContact() {
- this.displayMessage('New contact');
- this.contact = {id: 42, name: ''};
- this.contacts.push(this.contact);
- }
-
- /** Display a message briefly, then remove it. */
- displayMessage(msg: string) {
- this.msg = msg;
- setTimeout(() => this.msg = '', 1500);
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.0.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.0.ts
deleted file mode 100644
index fe2a756bd4..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.0.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@NgModule({
- imports: [
- CommonModule
- ],
- declarations: []
-})
-export class ContactModule { }
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.2.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.2.ts
deleted file mode 100644
index d83a26cd78..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.2.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { AwesomePipe } from './awesome.pipe';
-// #enddocregion
-import { ContactComponent } from './contact.component.3';
-/*
-// #docregion
-import { ContactComponent } from './contact.component';
-// #enddocregion
-*/
-// #docregion
-import { ContactHighlightDirective } from './contact-highlight.directive';
-import { ContactService } from './contact.service';
-
-// #docregion class
-@NgModule({
- imports: [
- CommonModule,
- FormsModule
- ],
- declarations: [
- AwesomePipe,
- ContactComponent,
- ContactHighlightDirective
- ],
- // #docregion exports
- exports: [ ContactComponent ],
- // #enddocregion exports
- providers: [ ContactService ]
-})
-export class ContactModule { }
-// #enddocregion class
-// #enddocregion
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.3.ts
deleted file mode 100644
index 3af9732e76..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.3.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { AwesomePipe } from './awesome.pipe';
-// #enddocregion
-import { ContactComponent } from './contact.component.3';
-/*
-// #docregion
-import { ContactComponent } from './contact.component';
-// #enddocregion
-*/
-// #docregion
-import { ContactHighlightDirective } from './contact-highlight.directive';
-import { ContactService } from './contact.service';
-
-// #enddocregion
-import { ContactRoutingModule } from './contact-routing.module.3';
-/*
-// #docregion
-import { ContactRoutingModule } from './contact-routing.module';
-// #enddocregion
-*/
-// #docregion
-
-// #docregion class
-@NgModule({
- imports: [
- CommonModule,
- FormsModule,
- ContactRoutingModule
- ],
- declarations: [
- AwesomePipe,
- ContactComponent,
- ContactHighlightDirective
- ],
- providers: [ ContactService ]
-})
-export class ContactModule { }
-// #enddocregion class
-// #enddocregion
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.ts
deleted file mode 100644
index 883331dfba..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { SharedModule } from '../shared/shared.module';
-
-import { ContactComponent } from './contact.component';
-import { ContactService } from './contact.service';
-import { ContactRoutingModule } from './contact-routing.module';
-
-// #docregion class
-@NgModule({
- imports: [
- SharedModule,
- ContactRoutingModule
- ],
- declarations: [ ContactComponent ],
- providers: [ ContactService ]
-})
-export class ContactModule { }
-// #enddocregion class
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.service.ts b/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.service.ts
deleted file mode 100644
index ff21a65bce..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/contact/contact.service.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// #docplaster
-// #docregion
-import { Injectable, OnDestroy } from '@angular/core';
-
-import { Observable, of } from 'rxjs';
-import { delay } from 'rxjs/operators';
-
-export class Contact {
- constructor(public id: number, public name: string) { }
-}
-
-const CONTACTS: Contact[] = [
- new Contact(21, 'Sam Spade'),
- new Contact(22, 'Nick Danger'),
- new Contact(23, 'Nancy Drew')
-];
-
-const FETCH_LATENCY = 500;
-
-/** Simulate a data service that retrieves contacts from a server */
-@Injectable()
-export class ContactService implements OnDestroy {
-// #enddocregion
- constructor() { console.log('ContactService instance created.'); }
- ngOnDestroy() { console.log('ContactService instance destroyed.'); }
-
-// #docregion
- getContacts(): Observable {
- return of(CONTACTS).pipe(delay(FETCH_LATENCY));
- }
-
- getContact(id: number | string): Observable {
- return of(CONTACTS.find(contact => contact.id === +id))
- .pipe(delay(FETCH_LATENCY));
- }
-}
-// #enddocregion
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/core/core.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/core/core.module.ts
deleted file mode 100644
index 27cb9a2193..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/core/core.module.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/* tslint:disable:member-ordering no-unused-variable */
-// #docplaster
-// #docregion
-// #docregion v4
-import {
- ModuleWithProviders, NgModule,
- Optional, SkipSelf } from '@angular/core';
-
-import { CommonModule } from '@angular/common';
-
-import { TitleComponent } from './title.component';
-import { UserService } from './user.service';
-// #enddocregion
-import { UserServiceConfig } from './user.service';
-
-// #docregion v4
-@NgModule({
- imports: [ CommonModule ],
- declarations: [ TitleComponent ],
- exports: [ TitleComponent ],
- providers: [ UserService ]
-})
-export class CoreModule {
-// #enddocregion v4
-
- // #docregion ctor
- constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
- if (parentModule) {
- throw new Error(
- 'CoreModule is already loaded. Import it in the AppModule only');
- }
- }
- // #enddocregion ctor
-
- // #docregion for-root
- static forRoot(config: UserServiceConfig): ModuleWithProviders {
- return {
- ngModule: CoreModule,
- providers: [
- {provide: UserServiceConfig, useValue: config }
- ]
- };
- }
- // #enddocregion for-root
-// #docregion v4
-}
-// #enddocregion v4
-// #enddocregion
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/core/title.component.html b/docs_app/content/examples/ngmodule-faq/src/app/core/title.component.html
deleted file mode 100644
index be114caa73..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/core/title.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-
-{{title}}
-
- Welcome, {{user}}
-
-
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/core/title.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/core/title.component.ts
deleted file mode 100644
index 51d9c242db..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/core/title.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// Exact copy of app/title.component.ts except import UserService from shared
-import { Component, Input } from '@angular/core';
-import { UserService } from '../core/user.service';
-
-@Component({
- selector: 'app-title',
- templateUrl: './title.component.html',
-})
-export class TitleComponent {
- title = 'Angular Modules';
- user = '';
-
- constructor(userService: UserService) {
- this.user = userService.userName;
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/core/user.service.ts b/docs_app/content/examples/ngmodule-faq/src/app/core/user.service.ts
deleted file mode 100644
index 8fe839075e..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/core/user.service.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// Crazy copy of the app/user.service
-// Proves that UserService is an app-wide singleton and only instantiated once
-// IFF shared.module follows the `forRoot` pattern
-//
-// If it didn't, a new instance of UserService would be created
-// after each lazy load and the userName would double up.
-
-import { Injectable, Optional } from '@angular/core';
-
-let nextId = 1;
-
-export class UserServiceConfig {
- userName = 'Philip Marlowe';
-}
-
-@Injectable()
-export class UserService {
- id = nextId++;
- private _userName = 'Sherlock Holmes';
-
- // #docregion ctor
- constructor(@Optional() config: UserServiceConfig) {
- if (config) { this._userName = config.userName; }
- }
- // #enddocregion ctor
-
- get userName() {
- // Demo: add a suffix if this service has been created more than once
- const suffix = this.id > 1 ? ` times ${this.id}` : '';
- return this._userName + suffix;
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-detail.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-detail.component.ts
deleted file mode 100644
index 30a1d0e7bf..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-detail.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-@Component({
- template: `
-
Crisis Detail
- Crisis id: {{id}}
-
- Crisis List
- `
-})
-export class CrisisDetailComponent implements OnInit {
- id: number;
- constructor(private route: ActivatedRoute) { }
-
- ngOnInit() {
- this.id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-list.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-list.component.ts
deleted file mode 100644
index 858f749416..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-list.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-
-import { Crisis,
- CrisisService } from './crisis.service';
-
-@Component({
- template: `
- Crisis List
-
- `
-})
-export class CrisisListComponent {
- crises: Observable;
-
- constructor(private crisisService: CrisisService) {
- this.crises = this.crisisService.getCrises();
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-routing.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-routing.module.ts
deleted file mode 100644
index c60efa8cb4..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis-routing.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes,
- RouterModule } from '@angular/router';
-
-import { CrisisListComponent } from './crisis-list.component';
-import { CrisisDetailComponent } from './crisis-detail.component';
-
-const routes: Routes = [
- { path: '', redirectTo: 'list', pathMatch: 'full'},
- { path: 'list', component: CrisisListComponent },
- { path: ':id', component: CrisisDetailComponent }
-];
-
-@NgModule({
- imports: [RouterModule.forChild(routes)],
- exports: [RouterModule]
-})
-export class CrisisRoutingModule {}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis.module.ts
deleted file mode 100644
index f557bd6423..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis.module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { CrisisListComponent } from './crisis-list.component';
-import { CrisisDetailComponent } from './crisis-detail.component';
-import { CrisisService } from './crisis.service';
-import { CrisisRoutingModule } from './crisis-routing.module';
-
-@NgModule({
- imports: [ CommonModule, CrisisRoutingModule ],
- declarations: [ CrisisDetailComponent, CrisisListComponent ],
- providers: [ CrisisService ]
-})
-export class CrisisModule {}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis.service.ts b/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis.service.ts
deleted file mode 100644
index f91eb995ea..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/crisis/crisis.service.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Injectable, OnDestroy } from '@angular/core';
-
-import { Observable, of } from 'rxjs';
-import { delay } from 'rxjs/operators';
-
-export class Crisis {
- constructor(public id: number, public name: string) { }
-}
-
-const CRISES: Crisis[] = [
- new Crisis(1, 'Dragon Burning Cities'),
- new Crisis(2, 'Sky Rains Great White Sharks'),
- new Crisis(3, 'Giant Asteroid Heading For Earth'),
- new Crisis(4, 'Procrastinators Meeting Delayed Again'),
-];
-
-const FETCH_LATENCY = 500;
-
-/** Simulate a data service that retrieves crises from a server */
-@Injectable()
-export class CrisisService implements OnDestroy {
- constructor() { console.log('CrisisService instance created.'); }
- ngOnDestroy() { console.log('CrisisService instance destroyed.'); }
-
- getCrises(): Observable {
- return of(CRISES).pipe(delay(FETCH_LATENCY));
- }
-
- getCrisis(id: number | string): Observable {
- return of(CRISES.find(crisis => crisis.id === +id))
- .pipe(delay(FETCH_LATENCY));
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-detail.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-detail.component.ts
deleted file mode 100644
index 2c46622bc4..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-detail.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-import { Hero,
- HeroService } from './hero.service';
-
-@Component({
- template: `
- Hero Detail
-
-
Id: {{hero.id}}
-
Name:
-
-
-
-
- Hero List
- `
-})
-export class HeroDetailComponent implements OnInit {
- hero: Hero;
-
- constructor(
- private route: ActivatedRoute,
- private heroService: HeroService) { }
-
- ngOnInit() {
- let id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
- this.heroService.getHero(id).subscribe(hero => this.hero = hero);
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-list.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-list.component.ts
deleted file mode 100644
index 8ac492403e..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-list.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-
-import { Hero,
- HeroService } from './hero.service';
-
-@Component({
- template: `
- Hero List
-
- `
-})
-export class HeroListComponent {
- heroes: Observable;
- constructor(private heroService: HeroService) {
- this.heroes = this.heroService.getHeroes();
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.3.ts
deleted file mode 100644
index 588ffd94be..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.3.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes,
- RouterModule } from '@angular/router';
-
-import { HeroComponent } from './hero.component.3';
-import { HeroListComponent } from './hero-list.component';
-import { HeroDetailComponent } from './hero-detail.component';
-
-const routes: Routes = [
- { path: '',
- component: HeroComponent,
- children: [
- { path: '', component: HeroListComponent },
- { path: ':id', component: HeroDetailComponent }
- ]
- }
-];
-
-@NgModule({
- imports: [RouterModule.forChild(routes)],
- exports: [RouterModule]
-})
-export class HeroRoutingModule {}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.ts
deleted file mode 100644
index d97aab3beb..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes,
- RouterModule } from '@angular/router';
-
-import { HeroComponent } from './hero.component';
-import { HeroListComponent } from './hero-list.component';
-import { HeroDetailComponent } from './hero-detail.component';
-
-const routes: Routes = [
- { path: '',
- component: HeroComponent,
- children: [
- { path: '', component: HeroListComponent },
- { path: ':id', component: HeroDetailComponent }
- ]
- }
-];
-
-@NgModule({
- imports: [RouterModule.forChild(routes)],
- exports: [RouterModule]
-})
-export class HeroRoutingModule {}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.component.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.component.3.ts
deleted file mode 100644
index d52bc253df..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.component.3.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component } from '@angular/core';
-
-import { HeroService } from './hero.service';
-import { UserService } from '../user.service';
-
-@Component({
- template: `
- Heroes of {{userName}}
-
- `,
- providers: [ HeroService ]
-})
-export class HeroComponent {
- userName = '';
- constructor(userService: UserService) {
- this.userName = userService.userName;
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.component.ts
deleted file mode 100644
index 86338fb0ae..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// Exact copy except import UserService from core
-import { Component } from '@angular/core';
-
-import { HeroService } from './hero.service';
-import { UserService } from '../core/user.service';
-
-@Component({
- template: `
- Heroes of {{userName}}
-
- `,
- providers: [ HeroService ]
-})
-export class HeroComponent {
- userName = '';
- constructor(userService: UserService) {
- this.userName = userService.userName;
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.module.3.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.module.3.ts
deleted file mode 100644
index acd5e28b15..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.module.3.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { HeroComponent } from './hero.component.3';
-import { HeroDetailComponent } from './hero-detail.component';
-import { HeroListComponent } from './hero-list.component';
-import { HeroRoutingModule } from './hero-routing.module.3';
-
-import { HighlightDirective } from './highlight.directive';
-
-// #docregion class
-@NgModule({
- imports: [ CommonModule, FormsModule, HeroRoutingModule ],
- declarations: [
- HeroComponent, HeroDetailComponent, HeroListComponent,
- HighlightDirective
- ]
-})
-export class HeroModule { }
-// #enddocregion class
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.module.ts
deleted file mode 100644
index 98d7b76b00..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { SharedModule } from '../shared/shared.module';
-
-import { HeroComponent } from './hero.component';
-import { HeroDetailComponent } from './hero-detail.component';
-import { HeroListComponent } from './hero-list.component';
-import { HeroRoutingModule } from './hero-routing.module';
-
-@NgModule({
- imports: [ SharedModule, HeroRoutingModule ],
- declarations: [
- HeroComponent, HeroDetailComponent, HeroListComponent,
- ]
-})
-export class HeroModule { }
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.service.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.service.ts
deleted file mode 100644
index da3677845f..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/hero/hero.service.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Injectable, OnDestroy } from '@angular/core';
-
-import { Observable, of } from 'rxjs';
-import { delay } from 'rxjs/operators';
-
-export class Hero {
- constructor(public id: number, public name: string) { }
-}
-
-const HEROES: Hero[] = [
- new Hero(11, 'Mr. Nice'),
- new Hero(12, 'Narco'),
- new Hero(13, 'Bombasto'),
- new Hero(14, 'Celeritas'),
- new Hero(15, 'Magneta'),
- new Hero(16, 'RubberMan')
-];
-
-const FETCH_LATENCY = 500;
-
-/** Simulate a data service that retrieves heroes from a server */
-@Injectable()
-export class HeroService implements OnDestroy {
-
- constructor() { console.log('HeroService instance created.'); }
- ngOnDestroy() { console.log('HeroService instance destroyed.'); }
-
- getHeroes(): Observable {
- return of(HEROES).pipe(delay(FETCH_LATENCY));
- }
-
- getHero(id: number | string): Observable {
- return of(HEROES.find(hero => hero.id === +id))
- .pipe(delay(FETCH_LATENCY));
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/hero/highlight.directive.ts b/docs_app/content/examples/ngmodule-faq/src/app/hero/highlight.directive.ts
deleted file mode 100644
index d7e39afd05..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/hero/highlight.directive.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import { Directive, ElementRef } from '@angular/core';
-
-// Same directive name and selector as
-// HighlightDirective in parent AppRootModule
-// It selects for both input boxes and 'highlight' attr
-// and it highlights in beige instead of yellow
-@Directive({ selector: '[highlight]' })
-export class HighlightDirective {
- constructor(el: ElementRef) {
- el.nativeElement.style.backgroundColor = 'beige';
- console.log(`* Hero highlight called for ${el.nativeElement.tagName}`);
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/highlight.directive.ts b/docs_app/content/examples/ngmodule-faq/src/app/highlight.directive.ts
deleted file mode 100644
index cf6b75ebfa..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/highlight.directive.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docplaster
-// #docregion
-import { Directive, ElementRef } from '@angular/core';
-
-// Highlight the host element in gold
-@Directive({ selector: '[highlight]' })
-export class HighlightDirective {
- constructor(el: ElementRef) {
- el.nativeElement.style.backgroundColor = 'gold';
- // #enddocregion
- console.log(`* AppRoot highlight called for ${el.nativeElement.tagName}`);
- // #docregion
- }
-}
-// #enddocregion
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/shared/awesome.pipe.ts b/docs_app/content/examples/ngmodule-faq/src/app/shared/awesome.pipe.ts
deleted file mode 100644
index a1a0001d24..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/shared/awesome.pipe.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// Exact copy of contact.awesome.pipe
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({ name: 'awesome' })
-/** Precede the input string with the word "Awesome " */
-export class AwesomePipe implements PipeTransform {
- transform(phrase: string) {
- return phrase ? 'Awesome ' + phrase : '';
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/shared/highlight.directive.ts b/docs_app/content/examples/ngmodule-faq/src/app/shared/highlight.directive.ts
deleted file mode 100644
index ee874fa536..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/shared/highlight.directive.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Exact copy of contact/highlight.directive except for color and message
-import { Directive, ElementRef } from '@angular/core';
-
-@Directive({ selector: '[highlight], input' })
-// Highlight the host element or any InputElement in gray
-export class HighlightDirective {
- constructor(el: ElementRef) {
- el.nativeElement.style.backgroundColor = 'lightgray';
- console.log(
- `* Shared highlight called for ${el.nativeElement.tagName}`);
- }
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/shared/shared.module.ts b/docs_app/content/examples/ngmodule-faq/src/app/shared/shared.module.ts
deleted file mode 100644
index 2da7d7b2a5..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/shared/shared.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { AwesomePipe } from './awesome.pipe';
-import { HighlightDirective } from './highlight.directive';
-
-// #docregion module
-@NgModule({
- imports: [ CommonModule ],
- declarations: [ AwesomePipe, HighlightDirective ],
- exports: [ AwesomePipe, HighlightDirective,
- CommonModule, FormsModule ]
-})
-export class SharedModule { }
-// #enddocregion module
-// #enddocregion
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/title.component.html b/docs_app/content/examples/ngmodule-faq/src/app/title.component.html
deleted file mode 100644
index fa8989ac6c..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/title.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-{{title}}
-
-
-
- Welcome, {{user}}
-
-
-
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/title.component.ts b/docs_app/content/examples/ngmodule-faq/src/app/title.component.ts
deleted file mode 100644
index b0761208a0..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/title.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion v1
-import { Component } from '@angular/core';
-// #enddocregion v1
-import { UserService } from './user.service';
-// #docregion v1
-
-@Component({
- selector: 'app-title',
- templateUrl: './title.component.html'
-})
-export class TitleComponent {
- title = 'Angular Modules';
-// #enddocregion v1
- user = '';
-
- constructor(userService: UserService) {
- this.user = userService.userName;
- }
-// #docregion v1
-}
-// #enddocregion v1
diff --git a/docs_app/content/examples/ngmodule-faq/src/app/user.service.ts b/docs_app/content/examples/ngmodule-faq/src/app/user.service.ts
deleted file mode 100644
index 7d996b26fa..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/app/user.service.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-@Injectable()
-/** Dummy version of an authenticated user service */
-export class UserService {
- userName = 'Sherlock Holmes';
-}
diff --git a/docs_app/content/examples/ngmodule-faq/src/index.0.html b/docs_app/content/examples/ngmodule-faq/src/index.0.html
deleted file mode 100644
index 4802670310..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/index.0.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
- NgModule Minimal
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/ngmodule-faq/src/index.1.html b/docs_app/content/examples/ngmodule-faq/src/index.1.html
deleted file mode 100644
index 2da2e67b4b..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/index.1.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
- NgModule Minimal
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/ngmodule-faq/src/index.1b.html b/docs_app/content/examples/ngmodule-faq/src/index.1b.html
deleted file mode 100644
index 2da2e67b4b..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/index.1b.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
- NgModule Minimal
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/ngmodule-faq/src/index.2.html b/docs_app/content/examples/ngmodule-faq/src/index.2.html
deleted file mode 100644
index 2da2e67b4b..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/index.2.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
- NgModule Minimal
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/ngmodule-faq/src/index.3.html b/docs_app/content/examples/ngmodule-faq/src/index.3.html
deleted file mode 100644
index 2da2e67b4b..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/index.3.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
- NgModule Minimal
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/ngmodule-faq/src/index.html b/docs_app/content/examples/ngmodule-faq/src/index.html
deleted file mode 100644
index cb62943973..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
- NgModule Deluxe
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/ngmodule-faq/src/main-static.ts b/docs_app/content/examples/ngmodule-faq/src/main-static.ts
deleted file mode 100644
index a1bcf466d2..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/main-static.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docplaster
-/*
-// #docregion
-// The browser platform without a compiler
-import { platformBrowser } from '@angular/platform-browser';
-
-// The app module factory produced by the static offline compiler
-import { AppModuleNgFactory } from './app/app.module.ngfactory';
-
-// Launch with the app module factory.
-platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
-// #enddocregion
-*/
diff --git a/docs_app/content/examples/ngmodule-faq/src/main.0.ts b/docs_app/content/examples/ngmodule-faq/src/main.0.ts
deleted file mode 100644
index ed431adb1a..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/main.0.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module.0';
-import { environment } from './environments/environment';
-
-if (environment.production) {
- enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/docs_app/content/examples/ngmodule-faq/src/main.1.ts b/docs_app/content/examples/ngmodule-faq/src/main.1.ts
deleted file mode 100644
index 1b8a770526..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/main.1.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module.1';
-import { environment } from './environments/environment';
-
-if (environment.production) {
- enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/docs_app/content/examples/ngmodule-faq/src/main.1b.ts b/docs_app/content/examples/ngmodule-faq/src/main.1b.ts
deleted file mode 100644
index a0095ac64d..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/main.1b.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module.1b';
-import { environment } from './environments/environment';
-
-if (environment.production) {
- enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/docs_app/content/examples/ngmodule-faq/src/main.2.ts b/docs_app/content/examples/ngmodule-faq/src/main.2.ts
deleted file mode 100644
index 4349ed7403..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/main.2.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module.2';
-import { environment } from './environments/environment';
-
-if (environment.production) {
- enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/docs_app/content/examples/ngmodule-faq/src/main.3.ts b/docs_app/content/examples/ngmodule-faq/src/main.3.ts
deleted file mode 100644
index 633b21147f..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/main.3.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module.3';
-import { environment } from './environments/environment';
-
-if (environment.production) {
- enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/docs_app/content/examples/ngmodule-faq/src/main.ts b/docs_app/content/examples/ngmodule-faq/src/main.ts
deleted file mode 100644
index 0740658908..0000000000
--- a/docs_app/content/examples/ngmodule-faq/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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);
diff --git a/docs_app/content/examples/ngmodule-faq/stackblitz.json b/docs_app/content/examples/ngmodule-faq/stackblitz.json
deleted file mode 100644
index b56eaeebf8..0000000000
--- a/docs_app/content/examples/ngmodule-faq/stackblitz.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
- "description": "NgModule Final",
- "files": [
- "src/app/app.component.ts",
- "src/app/app.module.ts",
- "src/app/app-routing.module.ts",
-
- "src/app/contact/contact.component.css",
- "src/app/contact/contact.component.html",
- "src/app/contact/contact.service.ts",
-
- "src/app/contact/contact.component.ts",
- "src/app/contact/contact.module.ts",
- "src/app/contact/contact-routing.module.ts",
-
- "src/app/crisis/*.ts",
-
- "src/app/hero/hero-detail.component.ts",
- "src/app/hero/hero-list.component.ts",
- "src/app/hero/hero.service.ts",
-
- "src/app/hero/hero.component.ts",
- "src/app/hero/hero.module.ts",
- "src/app/hero/hero-routing.module.ts",
-
- "src/app/core/*.css",
- "src/app/core/*.html",
- "src/app/core/*.ts",
-
- "src/app/shared/*.css",
- "src/app/shared/*.html",
- "src/app/shared/*.ts",
-
- "src/main.ts",
- "src/styles.css",
- "src/index.html"
- ],
- "main": "src/index.html",
- "tags": ["NgModule"]
-}
diff --git a/docs_app/content/examples/ngmodules/e2e/app.e2e-spec.ts b/docs_app/content/examples/ngmodules/e2e/app.e2e-spec.ts
deleted file mode 100644
index e0f080e70f..0000000000
--- a/docs_app/content/examples/ngmodules/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('NgModule-example', function () {
-
- // helpers
- const gold = 'rgba(255, 215, 0, 1)';
- const powderblue = 'rgba(176, 224, 230, 1)';
- const lightgray = 'rgba(239, 238, 237, 1)';
- const white = 'rgba(0, 0, 0, 0)';
-
- function getCommonsSectionStruct() {
- const buttons = element.all(by.css('nav a'));
-
- return {
- title: element.all(by.tagName('h1')).get(0),
- subtitle: element.all(by.css('app-title p i')).get(0),
- contactButton: buttons.get(0),
- itemButton: buttons.get(1),
- customersButton: buttons.get(2)
- };
- }
-
- function getContactSectionStruct() {
- const buttons = element.all(by.css('app-contact form button'));
-
- return {
- header: element.all(by.css('app-contact h2')).get(0),
- popupMessage: element.all(by.css('app-contact div')).get(0),
- contactNameHeader: element.all(by.css('app-contact form h3')).get(0),
- input: element.all(by.css('app-contact form input')).get(0),
- validationError: element.all(by.css('app-contact form .alert')).get(0),
- saveButton: buttons.get(0), // can't be tested
- nextContactButton: buttons.get(1),
- newContactButton: buttons.get(2)
- };
- }
-
- function getItemSectionStruct() {
- return {
- title: element.all(by.css('ng-component h3')).get(0),
- items: element.all(by.css('ng-component a')),
- itemId: element.all(by.css('ng-component div')).get(0),
- listLink: element.all(by.css('ng-component a')).get(0),
- };
- }
-
- function getCustomersSectionStruct() {
- return {
- header: element.all(by.css('ng-component h2')).get(0),
- title: element.all(by.css('ng-component h3')).get(0),
- items: element.all(by.css('ng-component a')),
- itemId: element.all(by.css('ng-component ng-component div div')).get(0),
- itemInput: element.all(by.css('ng-component ng-component input')).get(0),
- listLink: element.all(by.css('ng-component ng-component a')).get(0),
- };
- }
-
- // tests
- function appTitleTests(color: string, name?: string) {
- return function() {
- it('should have a gray header', function() {
- const commons = getCommonsSectionStruct();
- expect(commons.title.getCssValue('backgroundColor')).toBe(color);
- });
-
- it('should welcome us', function () {
- const commons = getCommonsSectionStruct();
- expect(commons.subtitle.getText()).toBe('Welcome, ' + (name || 'Sherlock Holmes'));
- });
- };
- }
-
- function contactTests(color: string, name?: string) {
- return function() {
- it('shows the contact\'s owner', function() {
- const contacts = getContactSectionStruct();
- expect(contacts.header.getText()).toBe('Contact of ' + (name || 'Sherlock Holmes'));
- });
-
- it('can cycle between contacts', function () {
- const contacts = getContactSectionStruct();
- const nextButton = contacts.nextContactButton;
- expect(contacts.contactNameHeader.getText()).toBe('Awesome Yasha');
- expect(contacts.contactNameHeader.getCssValue('backgroundColor')).toBe(color);
- nextButton.click().then(function () {
- expect(contacts.contactNameHeader.getText()).toBe('Awesome Iulia');
- return nextButton.click();
- }).then(function () {
- expect(contacts.contactNameHeader.getText()).toBe('Awesome Karina');
- });
- });
-
- it('can change an existing contact', function () {
- const contacts = getContactSectionStruct();
- contacts.input.sendKeys('a');
- expect(contacts.input.getCssValue('backgroundColor')).toBe(color);
- expect(contacts.contactNameHeader.getText()).toBe('Awesome Yashaa');
- });
-
- it('can create a new contact', function () {
- const contacts = getContactSectionStruct();
- const newContactButton = contacts.newContactButton;
- newContactButton.click().then(function () {
- expect(contacts.validationError.getText()).toBe('Name is required');
- contacts.input.sendKeys('John Doe');
- expect(contacts.contactNameHeader.getText()).toBe('Awesome John Doe');
- expect(contacts.validationError.getText()).toBe('');
- });
- });
- };
- }
-
- describe('index.html', function () {
- beforeEach(function () {
- browser.get('');
- });
-
- describe('app-title', appTitleTests(white, 'Miss Marple'));
-
- describe('contact', contactTests(lightgray, 'Miss Marple'));
-
- describe('item center', function () {
- beforeEach(function () {
- getCommonsSectionStruct().itemButton.click();
- });
-
- it('shows a list of items', function () {
- const item = getItemSectionStruct();
- expect(item.title.getText()).toBe('Items List');
- expect(item.items.count()).toBe(4);
- expect(item.items.get(0).getText()).toBe('1 - Sticky notes');
- });
-
- it('can navigate to one item details', function () {
- const item = getItemSectionStruct();
- item.items.get(0).click().then(function() {
- expect(item.itemId.getText()).toBe('Item id: 1');
- return item.listLink.click();
- }).then(function () {
- // We are back to the list
- expect(item.items.count()).toBe(4);
- });
- });
- });
-
- describe('customers', function () {
- beforeEach(function () {
- getCommonsSectionStruct().customersButton.click();
- });
-
- it('shows a list of customers', function() {
- const customers = getCustomersSectionStruct();
- expect(customers.header.getText()).toBe('Customers of Miss Marple times 2');
- expect(customers.title.getText()).toBe('Customer List');
- expect(customers.items.count()).toBe(6);
- expect(customers.items.get(0).getText()).toBe('11 - Julian');
- });
-
- it('can navigate and edit one customer details', function () {
- const customers = getCustomersSectionStruct();
- customers.items.get(0).click().then(function () {
- expect(customers.itemId.getText()).toBe('Id: 11');
- customers.itemInput.sendKeys(' try');
- return customers.listLink.click();
- }).then(function () {
- // We are back to the list
- expect(customers.items.count()).toBe(6);
- expect(customers.items.get(0).getText()).toBe('11 - Julian try');
- });
- });
- });
- });
-
- // describe('index.0.html', function() {
- // beforeEach(function () {
- // browser.get('index.0.html');
- // });
-
- // it('has a title', function () {
- // const title = element.all(by.tagName('h1')).get(0);
- // expect(title.getText()).toBe('Minimal NgModule');
- // });
- // });
-
- // describe('index.1.html', function () {
- // beforeEach(function () {
- // browser.get('index.1.html');
- // });
-
- // describe('app-title', appTitleTests(powderblue));
- // });
-
- // describe('index.1b.html', function () {
- // beforeEach(function () {
- // browser.get('index.1b.html');
- // });
-
- // describe('app-title', appTitleTests(powderblue));
-
- // describe('contact', contactTests(powderblue));
- // });
-
- // describe('index.2.html', function () {
- // beforeEach(function () {
- // browser.get('index.2.html');
- // });
-
- // describe('app-title', appTitleTests(gold));
-
- // describe('contact', contactTests(powderblue));
- // });
-
- // describe('index.3.html', function () {
- // beforeEach(function () {
- // browser.get('index.3.html');
- // });
-
- // describe('app-title', appTitleTests(gold));
- // });
-
-});
diff --git a/docs_app/content/examples/ngmodules/example-config.json b/docs_app/content/examples/ngmodules/example-config.json
deleted file mode 100644
index 313764c3c6..0000000000
--- a/docs_app/content/examples/ngmodules/example-config.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "build": "build:cli",
- "run": "serve:cli"
-}
diff --git a/docs_app/content/examples/ngmodules/src/app/app-routing.module.ts b/docs_app/content/examples/ngmodules/src/app/app-routing.module.ts
deleted file mode 100644
index f4cd4ba03a..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/app-routing.module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-export const routes: Routes = [
- { path: '', redirectTo: 'contact', pathMatch: 'full'},
- { path: 'items', loadChildren: 'app/items/items.module#ItemsModule' },
- { path: 'customers', loadChildren: 'app/customers/customers.module#CustomersModule' }
-];
-
-@NgModule({
- imports: [RouterModule.forRoot(routes)],
- exports: [RouterModule]
-})
-export class AppRoutingModule {}
diff --git a/docs_app/content/examples/ngmodules/src/app/app.component.css b/docs_app/content/examples/ngmodules/src/app/app.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/ngmodules/src/app/app.component.html b/docs_app/content/examples/ngmodules/src/app/app.component.html
deleted file mode 100644
index b6931b538a..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/app.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
- {{title}}
-
diff --git a/docs_app/content/examples/ngmodules/src/app/app.component.spec.ts b/docs_app/content/examples/ngmodules/src/app/app.component.spec.ts
deleted file mode 100644
index 13c632d676..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [
- AppComponent
- ],
- });
- TestBed.compileComponents();
- });
-
- it('should create the app', async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app).toBeTruthy();
- }));
-
- it(`should have as title 'app works!'`, async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app.title).toEqual('app works!');
- }));
-
- it('should render title in a h1 tag', async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- fixture.detectChanges();
- const compiled = fixture.debugElement.nativeElement;
- expect(compiled.querySelector('h1').textContent).toContain('app works!');
- }));
-});
diff --git a/docs_app/content/examples/ngmodules/src/app/app.component.ts b/docs_app/content/examples/ngmodules/src/app/app.component.ts
deleted file mode 100644
index 41c28b9ed6..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/app.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- template: `
-
-
- Contact
- Items
- Customers
-
-
- `
-})
-export class AppComponent {
-}
diff --git a/docs_app/content/examples/ngmodules/src/app/app.module.ts b/docs_app/content/examples/ngmodules/src/app/app.module.ts
deleted file mode 100644
index a19fbbae52..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/app.module.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
-
-/* App Root */
-import { AppComponent } from './app.component';
-
-/* Feature Modules */
-import { ContactModule } from './contact/contact.module';
-// #docregion import-for-root
-import { CoreModule } from './core/core.module';
-// #enddocregion import-for-root
-
-/* Routing Module */
-import { AppRoutingModule } from './app-routing.module';
-
-
-// #docregion import-for-root
-@NgModule({
- imports: [
- BrowserModule,
- ContactModule,
- CoreModule.forRoot({userName: 'Miss Marple'}),
- AppRoutingModule
- ],
- // #enddocregion import-for-root
- providers: [],
- declarations: [
- AppComponent
- ],
- bootstrap: [AppComponent]
- // #docregion import-for-root
-})
-export class AppModule { }
-// #enddocregion import-for-root
diff --git a/docs_app/content/examples/ngmodules/src/app/contact/contact-routing.module.ts b/docs_app/content/examples/ngmodules/src/app/contact/contact-routing.module.ts
deleted file mode 100644
index 1bd2521873..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/contact/contact-routing.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { ContactComponent } from './contact.component';
-
-const routes = [
- { path: 'contact', component: ContactComponent}
-];
-
-@NgModule({
- imports: [ RouterModule.forChild(routes) ],
- exports: [ RouterModule ]
-})
-export class ContactRoutingModule {}
-
diff --git a/docs_app/content/examples/ngmodules/src/app/contact/contact.component.css b/docs_app/content/examples/ngmodules/src/app/contact/contact.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/ngmodules/src/app/contact/contact.component.html b/docs_app/content/examples/ngmodules/src/app/contact/contact.component.html
deleted file mode 100644
index bd5edd904c..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/contact/contact.component.html
+++ /dev/null
@@ -1,32 +0,0 @@
-
-Contact of {{userName}}
-{{msg}}
-
-
diff --git a/docs_app/content/examples/ngmodules/src/app/contact/contact.component.spec.ts b/docs_app/content/examples/ngmodules/src/app/contact/contact.component.spec.ts
deleted file mode 100644
index 427633e0a0..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/contact/contact.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ContactComponent } from './contact.component';
-
-describe('ContactComponent', () => {
- let component: ContactComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ ContactComponent ]
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(ContactComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/docs_app/content/examples/ngmodules/src/app/contact/contact.component.ts b/docs_app/content/examples/ngmodules/src/app/contact/contact.component.ts
deleted file mode 100644
index 2c4c083ba2..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/contact/contact.component.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-// Exact copy except import UserService from core
-import { Component, OnInit } from '@angular/core';
-
-import { Contact, ContactService } from './contact.service';
-import { UserService } from '../core/user.service';
-
-@Component({
- selector: 'app-contact',
- templateUrl: './contact.component.html',
- styleUrls: [ './contact.component.css' ]
-})
-export class ContactComponent implements OnInit {
- contact: Contact;
- contacts: Contact[];
-
- msg = 'Loading contacts ...';
- userName = '';
-
- constructor(private contactService: ContactService, userService: UserService) {
- this.userName = userService.userName;
- }
-
- ngOnInit() {
- this.contactService.getContacts().subscribe(contacts => {
- this.msg = '';
- this.contacts = contacts;
- this.contact = contacts[0];
- });
- }
-
- next() {
- let ix = 1 + this.contacts.indexOf(this.contact);
- if (ix >= this.contacts.length) { ix = 0; }
- this.contact = this.contacts[ix];
- }
-
- onSubmit() {
- // POST-DEMO TODO: do something like save it
- this.displayMessage('Saved ' + this.contact.name);
- }
-
- newContact() {
- this.displayMessage('New contact');
- this.contact = {id: 42, name: ''};
- this.contacts.push(this.contact);
- }
-
- /** Display a message briefly, then remove it. */
- displayMessage(msg: string) {
- this.msg = msg;
- setTimeout(() => this.msg = '', 1500);
- }
-}
-
diff --git a/docs_app/content/examples/ngmodules/src/app/contact/contact.module.ts b/docs_app/content/examples/ngmodules/src/app/contact/contact.module.ts
deleted file mode 100644
index 008f82433a..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/contact/contact.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { SharedModule } from '../shared/shared.module';
-
-import { ContactComponent } from './contact.component';
-import { ContactService } from './contact.service';
-import { ContactRoutingModule } from './contact-routing.module';
-
-@NgModule({
- imports: [
- SharedModule,
- ContactRoutingModule
- ],
- declarations: [ ContactComponent ],
- providers: [ ContactService ]
-})
-export class ContactModule { }
diff --git a/docs_app/content/examples/ngmodules/src/app/contact/contact.service.ts b/docs_app/content/examples/ngmodules/src/app/contact/contact.service.ts
deleted file mode 100644
index a140538ad9..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/contact/contact.service.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Injectable, OnDestroy } from '@angular/core';
-
-import { Observable, of } from 'rxjs';
-import { delay } from 'rxjs/operators';
-
-export class Contact {
- constructor(public id: number, public name: string) { }
-}
-
-const CONTACTS: Contact[] = [
- new Contact(21, 'Yasha'),
- new Contact(22, 'Iulia'),
- new Contact(23, 'Karina')
-];
-
-const FETCH_LATENCY = 500;
-
-/** Simulate a data service that retrieves contacts from a server */
-@Injectable()
-export class ContactService implements OnDestroy {
-
- constructor() { console.log('ContactService instance created.'); }
- ngOnDestroy() { console.log('ContactService instance destroyed.'); }
-
- getContacts(): Observable {
- return of(CONTACTS).pipe(delay(FETCH_LATENCY));
- }
-
- getContact(id: number | string): Observable {
- const contact$ = of(CONTACTS.find(contact => contact.id === +id));
- return contact$.pipe(delay(FETCH_LATENCY));
- }
-}
-
-
diff --git a/docs_app/content/examples/ngmodules/src/app/core/core.module.ts b/docs_app/content/examples/ngmodules/src/app/core/core.module.ts
deleted file mode 100644
index 0d4c80fe74..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/core/core.module.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// #docregion whole-core-module
-import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
-
-import { CommonModule } from '@angular/common';
-
-import { TitleComponent } from './title.component';
-// #docregion user-service
-import { UserService } from './user.service';
-// #enddocregion user-service
-import { UserServiceConfig } from './user.service';
-
-
-// #docregion user-service
-@NgModule({
- // #enddocregion user-service
- imports: [ CommonModule ],
- declarations: [ TitleComponent ],
- exports: [ TitleComponent ],
- // #docregion user-service
- providers: [ UserService ]
-})
-export class CoreModule {
- // #enddocregion user-service
- // #docregion ctor
- constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
- if (parentModule) {
- throw new Error(
- 'CoreModule is already loaded. Import it in the AppModule only');
- }
- }
- // #enddocregion ctor
-
- // #docregion for-root
- static forRoot(config: UserServiceConfig): ModuleWithProviders {
- return {
- ngModule: CoreModule,
- providers: [
- {provide: UserServiceConfig, useValue: config }
- ]
- };
- }
- // #enddocregion for-root
- // #docregion user-service
-}
-// #enddocregion user-service
-// #enddocregion whole-core-module
diff --git a/docs_app/content/examples/ngmodules/src/app/core/title.component.html b/docs_app/content/examples/ngmodules/src/app/core/title.component.html
deleted file mode 100644
index ff1975fd68..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/core/title.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-{{title}}
-
- Welcome, {{user}}
-
diff --git a/docs_app/content/examples/ngmodules/src/app/core/title.component.ts b/docs_app/content/examples/ngmodules/src/app/core/title.component.ts
deleted file mode 100644
index 979a5803ab..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/core/title.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { UserService } from '../core/user.service';
-
-@Component({
- selector: 'app-title',
- templateUrl: './title.component.html',
-})
-export class TitleComponent {
- title = 'NgModules';
- user = '';
-
- constructor(userService: UserService) {
- this.user = userService.userName;
- }
-}
diff --git a/docs_app/content/examples/ngmodules/src/app/core/user.service.ts b/docs_app/content/examples/ngmodules/src/app/core/user.service.ts
deleted file mode 100644
index d1ab1cd6b3..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/core/user.service.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// Proves that UserService is an app-wide singleton and only instantiated once
-// IFF shared.module follows the `forRoot` pattern.
-//
-// If it didn't, a new instance of UserService would be created
-// after each lazy load and the userName would double up.
-
-import { Injectable, Optional } from '@angular/core';
-
-let nextId = 1;
-
-export class UserServiceConfig {
- userName = 'Philip Marlowe';
-}
-
-@Injectable()
-export class UserService {
- id = nextId++;
- private _userName = 'Sherlock Holmes';
-
- // #docregion ctor
- constructor(@Optional() config: UserServiceConfig) {
- if (config) { this._userName = config.userName; }
- }
- // #enddocregion ctor
-
- get userName() {
- // Demo: add a suffix if this service has been created more than once
- const suffix = this.id > 1 ? ` times ${this.id}` : '';
- return this._userName + suffix;
- }
-}
diff --git a/docs_app/content/examples/ngmodules/src/app/customers/customers-detail.component.ts b/docs_app/content/examples/ngmodules/src/app/customers/customers-detail.component.ts
deleted file mode 100644
index 11683c9d68..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/customers/customers-detail.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-import { Customer,
- CustomersService } from './customers.service';
-
-@Component({
- template: `
-
Customer Detail
-
-
Id: {{customer.id}}
-
Name:
-
-
-
-
- Customer List
- `
-})
-export class CustomersDetailComponent implements OnInit {
- customer: Customer;
-
- constructor(
- private route: ActivatedRoute,
- private customersService: CustomersService) { }
-
- ngOnInit() {
- let id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
- this.customersService.getCustomer(id).subscribe(customer => this.customer = customer);
- }
-}
diff --git a/docs_app/content/examples/ngmodules/src/app/customers/customers-list.component.ts b/docs_app/content/examples/ngmodules/src/app/customers/customers-list.component.ts
deleted file mode 100644
index d29ef6dcfd..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/customers/customers-list.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-
-import { Customer,
- CustomersService } from './customers.service';
-
-@Component({
- template: `
- Customer List
-
- `
-})
-
-export class CustomersListComponent {
- customers: Observable;
- constructor(private customersService: CustomersService) {
- this.customers = this.customersService.getCustomers();
- }
-}
-
diff --git a/docs_app/content/examples/ngmodules/src/app/customers/customers-routing.module.ts b/docs_app/content/examples/ngmodules/src/app/customers/customers-routing.module.ts
deleted file mode 100644
index 3d268d46b6..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/customers/customers-routing.module.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes,
- RouterModule } from '@angular/router';
-
-import { CustomersComponent } from './customers.component';
-import { CustomersListComponent } from './customers-list.component';
-import { CustomersDetailComponent } from './customers-detail.component';
-
-const routes: Routes = [
- { path: '',
- component: CustomersComponent,
- children: [
- { path: '', component: CustomersListComponent },
- { path: ':id', component: CustomersDetailComponent }
- ]
- }
-];
-
-@NgModule({
- imports: [RouterModule.forChild(routes)],
- exports: [RouterModule]
-})
-export class CustomersRoutingModule {}
diff --git a/docs_app/content/examples/ngmodules/src/app/customers/customers.component.ts b/docs_app/content/examples/ngmodules/src/app/customers/customers.component.ts
deleted file mode 100644
index a32ea88712..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/customers/customers.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { CustomersService } from './customers.service';
-import { UserService } from '../core/user.service';
-
-@Component({
- template: `
- Customers of {{userName}}
-
- `,
- providers: [ UserService ]
-})
-export class CustomersComponent {
- userName = '';
- constructor(userService: UserService) {
- this.userName = userService.userName;
- }
-}
-
diff --git a/docs_app/content/examples/ngmodules/src/app/customers/customers.module.ts b/docs_app/content/examples/ngmodules/src/app/customers/customers.module.ts
deleted file mode 100644
index 3249b16ac7..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/customers/customers.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { SharedModule } from '../shared/shared.module';
-
-import { CustomersComponent } from './customers.component';
-import { CustomersDetailComponent } from './customers-detail.component';
-import { CustomersListComponent } from './customers-list.component';
-import { CustomersRoutingModule } from './customers-routing.module';
-import { CustomersService } from './customers.service';
-
-
-@NgModule({
- imports: [ SharedModule, CustomersRoutingModule ],
- declarations: [
- CustomersComponent, CustomersDetailComponent, CustomersListComponent,
- ],
- providers: [CustomersService]
-})
-export class CustomersModule { }
diff --git a/docs_app/content/examples/ngmodules/src/app/customers/customers.service.ts b/docs_app/content/examples/ngmodules/src/app/customers/customers.service.ts
deleted file mode 100644
index 0e4d50960b..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/customers/customers.service.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Injectable, OnDestroy } from '@angular/core';
-
-import { Observable, of } from 'rxjs';
-import { delay } from 'rxjs/operators';
-
-export class Customer {
- constructor(public id: number, public name: string) { }
-}
-
-const CUSTOMERS: Customer[] = [
- new Customer(11, 'Julian'),
- new Customer(12, 'Eric'),
- new Customer(13, 'Momi'),
- new Customer(14, 'Madeleine'),
- new Customer(15, 'Seth'),
- new Customer(16, 'Teresa')
-];
-
-const FETCH_LATENCY = 500;
-
-/** Simulate a data service that retrieves heroes from a server */
-@Injectable()
-export class CustomersService implements OnDestroy {
-
- constructor() { console.log('CustomersService instance created.'); }
- ngOnDestroy() { console.log('CustomersService instance destroyed.'); }
-
- getCustomers(): Observable {
- return of(CUSTOMERS).pipe(delay(FETCH_LATENCY));
- }
-
- getCustomer(id: number | string): Observable {
- const customer$ = of(CUSTOMERS.find(customer => customer.id === +id));
- return customer$.pipe(delay(FETCH_LATENCY));
- }
-}
diff --git a/docs_app/content/examples/ngmodules/src/app/items/items-detail.component.ts b/docs_app/content/examples/ngmodules/src/app/items/items-detail.component.ts
deleted file mode 100644
index a4580ad234..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/items/items-detail.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-
-import { Item,
- ItemService } from './items.service';
-
-@Component({
- template: `
- Item Detail
- Item id: {{id}}
-
- Items List
- `
-})
-export class ItemsDetailComponent implements OnInit {
- id: number;
- constructor(private route: ActivatedRoute) { }
-
- ngOnInit() {
- this.id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
- }
-}
-
diff --git a/docs_app/content/examples/ngmodules/src/app/items/items-list.component.ts b/docs_app/content/examples/ngmodules/src/app/items/items-list.component.ts
deleted file mode 100644
index c4859c93cb..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/items/items-list.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Observable }from 'rxjs';
-
-import { Item,
- ItemService } from './items.service';
-
-@Component({
- template: `
- Items List
-
- `
-})
-export class ItemsListComponent {
- items: Observable- ;
-
- constructor(private itemService: ItemService) {
- this.items = this.itemService.getItems();
- }
-
-}
-
diff --git a/docs_app/content/examples/ngmodules/src/app/items/items-routing.module.ts b/docs_app/content/examples/ngmodules/src/app/items/items-routing.module.ts
deleted file mode 100644
index 55f0947a23..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/items/items-routing.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes,
- RouterModule } from '@angular/router';
-
-import { ItemsListComponent } from './items-list.component';
-import { ItemsDetailComponent } from './items-detail.component';
-
-const routes: Routes = [
- { path: '', redirectTo: 'list', pathMatch: 'full'},
- { path: 'list', component: ItemsListComponent },
- { path: ':id', component: ItemsDetailComponent }
-];
-
-@NgModule({
- imports: [RouterModule.forChild(routes)],
- exports: [RouterModule]
-})
-export class ItemsRoutingModule {}
-
diff --git a/docs_app/content/examples/ngmodules/src/app/items/items.component.css b/docs_app/content/examples/ngmodules/src/app/items/items.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/ngmodules/src/app/items/items.component.html b/docs_app/content/examples/ngmodules/src/app/items/items.component.html
deleted file mode 100644
index c919a92a2a..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/items/items.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
- items works!
-
diff --git a/docs_app/content/examples/ngmodules/src/app/items/items.component.spec.ts b/docs_app/content/examples/ngmodules/src/app/items/items.component.spec.ts
deleted file mode 100644
index b77cce74ec..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/items/items.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ItemsComponent } from './items.component';
-
-describe('ItemsComponent', () => {
- let component: ItemsComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ ItemsComponent ]
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(ItemsComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-});
diff --git a/docs_app/content/examples/ngmodules/src/app/items/items.component.ts b/docs_app/content/examples/ngmodules/src/app/items/items.component.ts
deleted file mode 100644
index 26696de194..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/items/items.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-items',
- templateUrl: './items.component.html',
- styleUrls: ['./items.component.css']
-})
-export class ItemsComponent implements OnInit {
-
- constructor() { }
-
- ngOnInit() {
- }
-
-}
diff --git a/docs_app/content/examples/ngmodules/src/app/items/items.module.ts b/docs_app/content/examples/ngmodules/src/app/items/items.module.ts
deleted file mode 100644
index bc749b582a..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/items/items.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { ItemsComponent } from './items.component';
-import { ItemsListComponent } from './items-list.component';
-import { ItemsDetailComponent } from './items-detail.component';
-import { ItemService } from './items.service';
-import { ItemsRoutingModule } from './items-routing.module';
-
-@NgModule({
- imports: [ CommonModule, ItemsRoutingModule ],
- declarations: [ ItemsComponent, ItemsDetailComponent, ItemsListComponent ],
- providers: [ ItemService ]
-})
-export class ItemsModule {}
diff --git a/docs_app/content/examples/ngmodules/src/app/items/items.service.ts b/docs_app/content/examples/ngmodules/src/app/items/items.service.ts
deleted file mode 100644
index 39968b452f..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/items/items.service.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Injectable, OnDestroy } from '@angular/core';
-
-import { Observable, of } from 'rxjs';
-import { delay } from 'rxjs/operators';
-
-export class Item {
- constructor(public id: number, public name: string) { }
-}
-
-const ITEMS: Item[] = [
- new Item(1, 'Sticky notes'),
- new Item(2, 'Dry erase markers'),
- new Item(3, 'Erasers'),
- new Item(4, 'Whiteboard cleaner'),
-];
-
-const FETCH_LATENCY = 500;
-
-/** Simulate a data service that retrieves crises from a server */
-@Injectable()
-export class ItemService implements OnDestroy {
-
- constructor() { console.log('ItemService instance created.'); }
- ngOnDestroy() { console.log('ItemService instance destroyed.'); }
-
- getItems(): Observable- {
- return of(ITEMS).pipe(delay(FETCH_LATENCY));
- }
-
- getItem(id: number | string): Observable
- {
- const item$ = of(ITEMS.find(item => item.id === +id));
- return item$.pipe(delay(FETCH_LATENCY));
- }
-}
-
-
diff --git a/docs_app/content/examples/ngmodules/src/app/shared/awesome.pipe.ts b/docs_app/content/examples/ngmodules/src/app/shared/awesome.pipe.ts
deleted file mode 100644
index ffe4949f21..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/shared/awesome.pipe.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({ name: 'awesome' })
-/** Precede the input string with the word "Awesome " */
-export class AwesomePipe implements PipeTransform {
- transform(phrase: string) {
- return phrase ? 'Awesome ' + phrase : '';
- }
-}
diff --git a/docs_app/content/examples/ngmodules/src/app/shared/highlight.directive.ts b/docs_app/content/examples/ngmodules/src/app/shared/highlight.directive.ts
deleted file mode 100644
index 7210ddbf16..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/shared/highlight.directive.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/* tslint:disable */
-// Exact copy of contact/highlight.directive except for color and message
-import { Directive, ElementRef } from '@angular/core';
-
-@Directive({ selector: '[highlight], input' })
-/** Highlight the attached element or an InputElement in gray */
-export class HighlightDirective {
- constructor(el: ElementRef) {
- el.nativeElement.style.backgroundColor = '#efeeed';
- console.log(
- `* Shared highlight called for ${el.nativeElement.tagName}`);
- }
-}
diff --git a/docs_app/content/examples/ngmodules/src/app/shared/shared.module.ts b/docs_app/content/examples/ngmodules/src/app/shared/shared.module.ts
deleted file mode 100644
index 477f170c12..0000000000
--- a/docs_app/content/examples/ngmodules/src/app/shared/shared.module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { AwesomePipe } from './awesome.pipe';
-import { HighlightDirective } from './highlight.directive';
-
-@NgModule({
- imports: [ CommonModule ],
- declarations: [ AwesomePipe, HighlightDirective ],
- exports: [ AwesomePipe, HighlightDirective,
- CommonModule, FormsModule ]
-})
-export class SharedModule { }
diff --git a/docs_app/content/examples/ngmodules/src/index.html b/docs_app/content/examples/ngmodules/src/index.html
deleted file mode 100644
index 5e908028fe..0000000000
--- a/docs_app/content/examples/ngmodules/src/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
- NgmodulesExample
-
-
-
-
-
-
- Loading...
-
-
diff --git a/docs_app/content/examples/ngmodules/src/main.ts b/docs_app/content/examples/ngmodules/src/main.ts
deleted file mode 100644
index a9ca1caf8c..0000000000
--- a/docs_app/content/examples/ngmodules/src/main.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-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);
diff --git a/docs_app/content/examples/ngmodules/stackblitz.json b/docs_app/content/examples/ngmodules/stackblitz.json
deleted file mode 100644
index 6bc4252b82..0000000000
--- a/docs_app/content/examples/ngmodules/stackblitz.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "description": "NgModules",
- "files": [
- "!**/*.d.ts",
- "!**/*.js",
- "!**/*.[1,2].*"
- ],
- "file": "src/app/app.component.ts",
- "tags": ["NgModules"]
-}
diff --git a/docs_app/content/examples/observables-in-angular/example-config.json b/docs_app/content/examples/observables-in-angular/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/observables-in-angular/src/main.ts b/docs_app/content/examples/observables-in-angular/src/main.ts
deleted file mode 100644
index c5e95560f5..0000000000
--- a/docs_app/content/examples/observables-in-angular/src/main.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-
-import { Component, Output, OnInit, EventEmitter, NgModule } from '@angular/core';
-import { Observable } from 'rxjs';
-
-// #docregion eventemitter
-
-@Component({
- selector: 'zippy',
- template: `
- `})
-
-export class ZippyComponent {
- visible = true;
- @Output() open = new EventEmitter();
- @Output() close = new EventEmitter();
-
- toggle() {
- this.visible = !this.visible;
- if (this.visible) {
- this.open.emit(null);
- } else {
- this.close.emit(null);
- }
- }
-}
-
-// #enddocregion eventemitter
-
-// #docregion pipe
-
-@Component({
- selector: 'async-observable-pipe',
- template: `observable|async
:
- Time: {{ time | async }}
`
-})
-export class AsyncObservablePipeComponent {
- time = new Observable(observer =>
- setInterval(() => observer.next(new Date().toString()), 1000)
- );
-}
-
-// #enddocregion pipe
-
-// #docregion router
-
-import { Router, NavigationStart } from '@angular/router';
-import { filter } from 'rxjs/operators';
-
-@Component({
- selector: 'app-routable',
- templateUrl: './routable.component.html',
- styleUrls: ['./routable.component.css']
-})
-export class Routable1Component implements OnInit {
-
- navStart: Observable;
-
- constructor(private router: Router) {
- // Create a new Observable the publishes only the NavigationStart event
- this.navStart = router.events.pipe(
- filter(evt => evt instanceof NavigationStart)
- ) as Observable;
- }
-
- ngOnInit() {
- this.navStart.subscribe(evt => console.log('Navigation Started!'));
- }
-}
-
-// #enddocregion router
-
-
-// #docregion activated_route
-
-import { ActivatedRoute } from '@angular/router';
-
-@Component({
- selector: 'app-routable',
- templateUrl: './routable.component.html',
- styleUrls: ['./routable.component.css']
-})
-export class Routable2Component implements OnInit {
- constructor(private activatedRoute: ActivatedRoute) {}
-
- ngOnInit() {
- this.activatedRoute.url
- .subscribe(url => console.log('The URL changed to: ' + url));
- }
-}
-
-// #enddocregion activated_route
-
-
-// #docregion forms
-
-import { FormGroup } from '@angular/forms';
-
-@Component({
- selector: 'my-component',
- template: 'MyComponent Template'
-})
-export class MyComponent implements OnInit {
- nameChangeLog: string[] = [];
- heroForm: FormGroup;
-
- ngOnInit() {
- this.logNameChange();
- }
- logNameChange() {
- const nameControl = this.heroForm.get('name');
- nameControl.valueChanges.forEach(
- (value: string) => this.nameChangeLog.push(value)
- );
- }
-}
-
-// #enddocregion forms
-
-
-
-@NgModule({
- declarations:
- [ZippyComponent, AsyncObservablePipeComponent, Routable1Component, Routable2Component, MyComponent]
-})
-export class AppModule {
-}
diff --git a/docs_app/content/examples/observables/example-config.json b/docs_app/content/examples/observables/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/observables/src/creating.ts b/docs_app/content/examples/observables/src/creating.ts
deleted file mode 100644
index 83003b99bf..0000000000
--- a/docs_app/content/examples/observables/src/creating.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-
-import { Observable } from 'rxjs';
-
-// #docregion subscriber
-
-// This function runs when subscribe() is called
-function sequenceSubscriber(observer) {
- // synchronously deliver 1, 2, and 3, then complete
- observer.next(1);
- observer.next(2);
- observer.next(3);
- observer.complete();
-
- // unsubscribe function doesn't need to do anything in this
- // because values are delivered synchronously
- return {unsubscribe() {}};
-}
-
-// Create a new Observable that will deliver the above sequence
-const sequence = new Observable(sequenceSubscriber);
-
-// execute the Observable and print the result of each notification
-sequence.subscribe({
- next(num) { console.log(num); },
- complete() { console.log('Finished sequence'); }
-});
-
-// Logs:
-// 1
-// 2
-// 3
-// Finished sequence
-
-// #enddocregion subscriber
-
-// #docregion fromevent
-
-function fromEvent(target, eventName) {
- return new Observable((observer) => {
- const handler = (e) => observer.next(e);
-
- // Add the event handler to the target
- target.addEventListener(eventName, handler);
-
- return () => {
- // Detach the event handler from the target
- target.removeEventListener(eventName, handler);
- };
- });
-}
-
-// #enddocregion fromevent
-
-// #docregion fromevent_use
-
-const ESC_KEY = 27;
-const nameInput = document.getElementById('name') as HTMLInputElement;
-
-const subscription = fromEvent(nameInput, 'keydown')
- .subscribe((e: KeyboardEvent) => {
- if (e.keyCode === ESC_KEY) {
- nameInput.value = '';
- }
- });
-
-// #enddocregion fromevent_use
diff --git a/docs_app/content/examples/observables/src/geolocation.ts b/docs_app/content/examples/observables/src/geolocation.ts
deleted file mode 100644
index 7210a51e1d..0000000000
--- a/docs_app/content/examples/observables/src/geolocation.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Observable } from 'rxjs';
-
-// #docregion
-
-// Create an Observable that will start listening to geolocation updates
-// when a consumer subscribes.
-const locations = new Observable((observer) => {
- // Get the next and error callbacks. These will be passed in when
- // the consumer subscribes.
- const {next, error} = observer;
- let watchId;
-
- // Simple geolocation API check provides values to publish
- if ('geolocation' in navigator) {
- watchId = navigator.geolocation.watchPosition(next, error);
- } else {
- error('Geolocation not available');
- }
-
- // When the consumer unsubscribes, clean up data ready for next subscription.
- return {unsubscribe() { navigator.geolocation.clearWatch(watchId); }};
-});
-
-// Call subscribe() to start listening for updates.
-const locationsSubscription = locations.subscribe({
- next(position) { console.log('Current Position: ', position); },
- error(msg) { console.log('Error Getting Location: ', msg); }
-});
-
-// Stop listening for location after 10 seconds
-setTimeout(() => { locationsSubscription.unsubscribe(); }, 10000);
-// #enddocregion
diff --git a/docs_app/content/examples/observables/src/main.ts b/docs_app/content/examples/observables/src/main.ts
deleted file mode 100644
index 31bacebf11..0000000000
--- a/docs_app/content/examples/observables/src/main.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-
-import './geolocation';
-import './subscribing';
-import './creating';
-import './multicasting';
diff --git a/docs_app/content/examples/observables/src/multicasting.ts b/docs_app/content/examples/observables/src/multicasting.ts
deleted file mode 100644
index 449f7b73c7..0000000000
--- a/docs_app/content/examples/observables/src/multicasting.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-
-import { Observable } from 'rxjs';
-
-// #docregion delay_sequence
-
-function sequenceSubscriber(observer) {
- const seq = [1, 2, 3];
- let timeoutId;
-
- // Will run through an array of numbers, emitting one value
- // per second until it gets to the end of the array.
- function doSequence(arr, idx) {
- timeoutId = setTimeout(() => {
- observer.next(arr[idx]);
- if (idx === arr.length - 1) {
- observer.complete();
- } else {
- doSequence(arr, idx++);
- }
- }, 1000);
- }
-
- doSequence(seq, 0);
-
- // Unsubscribe should clear the timeout to stop execution
- return {unsubscribe() {
- clearTimeout(timeoutId);
- }};
-}
-
-// Create a new Observable that will deliver the above sequence
-const sequence = new Observable(sequenceSubscriber);
-
-sequence.subscribe({
- next(num) { console.log(num); },
- complete() { console.log('Finished sequence'); }
-});
-
-// Logs:
-// (at 1 second): 1
-// (at 2 seconds): 2
-// (at 3 seconds): 3
-// (at 3 seconds): Finished sequence
-
-// #enddocregion delay_sequence
-
-// #docregion subscribe_twice
-
-// Subscribe starts the clock, and will emit after 1 second
-sequence.subscribe({
- next(num) { console.log('1st subscribe: ' + num); },
- complete() { console.log('1st sequence finished.'); }
-});
-
-// After 1/2 second, subscribe again.
-setTimeout(() => {
- sequence.subscribe({
- next(num) { console.log('2nd subscribe: ' + num); },
- complete() { console.log('2nd sequence finished.'); }
- });
-}, 500);
-
-// Logs:
-// (at 1 second): 1st subscribe: 1
-// (at 1.5 seconds): 2nd subscribe: 1
-// (at 2 seconds): 1st subscribe: 2
-// (at 2.5 seconds): 2nd subscribe: 2
-// (at 3 seconds): 1st subscribe: 3
-// (at 3 seconds): 1st sequence finished
-// (at 3.5 seconds): 2nd subscribe: 3
-// (at 3.5 seconds): 2nd sequence finished
-
-// #enddocregion subscribe_twice
-
-// #docregion multicast_sequence
-
-function multicastSequenceSubscriber() {
- const seq = [1, 2, 3];
- // Keep track of each observer (one for every active subscription)
- const observers = [];
- // Still a single timeoutId because there will only ever be one
- // set of values being generated, multicasted to each subscriber
- let timeoutId;
-
- // Return the subscriber function (runs when subscribe()
- // function is invoked)
- return (observer) => {
- observers.push(observer);
- // When this is the first subscription, start the sequence
- if (observers.length === 1) {
- timeoutId = doSequence({
- next(val) {
- // Iterate through observers and notify all subscriptions
- observers.forEach(obs => obs.next(val));
- },
- complete() {
- // Notify all complete callbacks
- observers.forEach(obs => obs.complete());
- }
- }, seq, 0);
- }
-
- return {
- unsubscribe() {
- // Remove from the observers array so it's no longer notified
- observers.splice(observers.indexOf(observer), 1);
- // If there's no more listeners, do cleanup
- if (observers.length === 0) {
- clearTimeout(timeoutId);
- }
- }
- };
- };
-}
-
-// Run through an array of numbers, emitting one value
-// per second until it gets to the end of the array.
-function doSequence(observer, arr, idx) {
- return setTimeout(() => {
- observer.next(arr[idx]);
- if (idx === arr.length - 1) {
- observer.complete();
- } else {
- doSequence(observer, arr, idx++);
- }
- }, 1000);
-}
-
-// Create a new Observable that will deliver the above sequence
-const multicastSequence = new Observable(multicastSequenceSubscriber);
-
-// Subscribe starts the clock, and begins to emit after 1 second
-multicastSequence.subscribe({
- next(num) { console.log('1st subscribe: ' + num); },
- complete() { console.log('1st sequence finished.'); }
-});
-
-// After 1 1/2 seconds, subscribe again (should "miss" the first value).
-setTimeout(() => {
- multicastSequence.subscribe({
- next(num) { console.log('2nd subscribe: ' + num); },
- complete() { console.log('2nd sequence finished.'); }
- });
-}, 1500);
-
-// Logs:
-// (at 1 second): 1st subscribe: 1
-// (at 2 seconds): 1st subscribe: 2
-// (at 2 seconds): 2nd subscribe: 2
-// (at 3 seconds): 1st subscribe: 3
-// (at 3 seconds): 1st sequence finished
-// (at 3 seconds): 2nd subscribe: 3
-// (at 3 seconds): 2nd sequence finished
-
-// #enddocregion multicast_sequence
diff --git a/docs_app/content/examples/observables/src/subscribing.ts b/docs_app/content/examples/observables/src/subscribing.ts
deleted file mode 100644
index 4712580b33..0000000000
--- a/docs_app/content/examples/observables/src/subscribing.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-
-import { Observable, of } from 'rxjs';
-
-// #docregion observer
-
-// Create simple observable that emits three values
-const myObservable = Observable.of(1, 2, 3);
-
-// Create observer object
-const myObserver = {
- next: x => console.log('Observer got a next value: ' + x),
- error: err => console.error('Observer got an error: ' + err),
- complete: () => console.log('Observer got a complete notification'),
-};
-
-// Execute with the observer object
-myObservable.subscribe(myObserver);
-// Logs:
-// Observer got a next value: 1
-// Observer got a next value: 2
-// Observer got a next value: 3
-// Observer got a complete notification
-
-// #enddocregion observer
-
-// #docregion sub_fn
-myObservable.subscribe(
- x => console.log('Observer got a next value: ' + x),
- err => console.error('Observer got an error: ' + err),
- () => console.log('Observer got a complete notification')
-);
-// #enddocregion sub_fn
diff --git a/docs_app/content/examples/pipes/e2e/app.e2e-spec.ts b/docs_app/content/examples/pipes/e2e/app.e2e-spec.ts
deleted file mode 100644
index ec9d15cbdf..0000000000
--- a/docs_app/content/examples/pipes/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-const { version: angularVersion } = require('@angular/core/package.json');
-
-describe('Pipes', function () {
-
- beforeAll(function () {
- browser.get('');
- });
-
- it('should open correctly', function () {
- expect(element.all(by.tagName('h1')).get(0).getText()).toEqual('Pipes');
- expect(element(by.css('app-hero-birthday p')).getText()).toEqual(`The hero's birthday is Apr 15, 1988`);
- });
-
- it('should show 4 heroes', function () {
- expect(element.all(by.css('app-hero-list div')).count()).toEqual(4);
- });
-
- it('should show a familiar hero in json', function () {
- expect(element(by.cssContainingText('app-hero-list p', 'Heroes as JSON')).getText()).toContain('Bombasto');
- });
-
- it('should show alternate birthday formats', function () {
- expect(element(by.cssContainingText('app-root > p', `The hero's birthday is Apr 15, 1988`)).isDisplayed()).toBe(true);
- expect(element(by.cssContainingText('app-root > p', `The hero's birthday is 04/15/88`)).isDisplayed()).toBe(true);
- });
-
- it('should be able to toggle birthday formats', function () {
- let birthDayEle = element(by.css('app-hero-birthday2 > p'));
- if (angularVersion.indexOf('4.') === 0) { // Breaking change between v4 and v5 (https://github.com/angular/angular/commit/079d884)
- expect(birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/1988`);
- } else {
- expect(birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/88`);
- }
- let buttonEle = element(by.cssContainingText('app-hero-birthday2 > button', 'Toggle Format'));
- expect(buttonEle.isDisplayed()).toBe(true);
- buttonEle.click().then(function() {
- expect(birthDayEle.getText()).toEqual(`The hero's birthday is Friday, April 15, 1988`);
- });
- });
-
- it('should be able to chain and compose pipes', function () {
- let chainedPipeEles = element.all(by.cssContainingText('app-root p', `The chained hero's`));
- expect(chainedPipeEles.count()).toBe(3, 'should have 3 chained pipe examples');
- expect(chainedPipeEles.get(0).getText()).toContain('APR 15, 1988');
- expect(chainedPipeEles.get(1).getText()).toContain('FRIDAY, APRIL 15, 1988');
- expect(chainedPipeEles.get(2).getText()).toContain('FRIDAY, APRIL 15, 1988');
- });
-
- it('should be able to use ExponentialStrengthPipe pipe', function () {
- let ele = element(by.css('app-power-booster p'));
- expect(ele.getText()).toContain('Super power boost: 1024');
- });
-
- it('should be able to use the exponential calculator', function () {
- let eles = element.all(by.css('app-power-boost-calculator input'));
- let baseInputEle = eles.get(0);
- let factorInputEle = eles.get(1);
- let outputEle = element(by.css('app-power-boost-calculator p'));
- baseInputEle.clear().then(function() {
- baseInputEle.sendKeys('7');
- return factorInputEle.clear();
- }).then(function() {
- factorInputEle.sendKeys('3');
- expect(outputEle.getText()).toContain('343');
- });
- });
-
-
- it('should support flying heroes (pure) ', function () {
- let nameEle = element(by.css('app-flying-heroes input[type="text"]'));
- let canFlyCheckEle = element(by.css('app-flying-heroes #can-fly'));
- let mutateCheckEle = element(by.css('app-flying-heroes #mutate'));
- let resetEle = element(by.css('app-flying-heroes button'));
- let flyingHeroesEle = element.all(by.css('app-flying-heroes #flyers div'));
-
- expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"');
- expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');
- expect(flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly');
-
- 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');
- return resetEle.click();
- })
- .then(function() {
- expect(flyingHeroesEle.count()).toEqual(2, 'reset should restore original flying heroes');
- });
- });
-
-
- it('should support flying heroes (impure) ', function () {
- let nameEle = element(by.css('app-flying-heroes-impure input[type="text"]'));
- let canFlyCheckEle = element(by.css('app-flying-heroes-impure #can-fly'));
- let mutateCheckEle = element(by.css('app-flying-heroes-impure #mutate'));
- let flyingHeroesEle = element.all(by.css('app-flying-heroes-impure #flyers div'));
-
- expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"');
- expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');
- expect(flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly');
-
- 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 () {
- expect(element.all(by.tagName('app-hero-message')).get(0).getText()).toContain('hero');
- });
-
-});
diff --git a/docs_app/content/examples/pipes/example-config.json b/docs_app/content/examples/pipes/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/pipes/src/app/app.component.html b/docs_app/content/examples/pipes/src/app/app.component.html
deleted file mode 100644
index b03b8251bc..0000000000
--- a/docs_app/content/examples/pipes/src/app/app.component.html
+++ /dev/null
@@ -1,83 +0,0 @@
-
-Pipes
-Happy Birthday v1
-Birthday DatePipe
-Happy Birthday v2
-Birthday Pipe Chaining
-Power Booster custom pipe
-Power Boost Calculator custom pipe with params
-Flying Heroes filter pipe (pure)
-Flying Heroes filter pipe (impure)
-Async Hero Message and AsyncPipe
-Hero List with caching FetchJsonPipe
-
-
-
-
-Hero Birthday v1
-
-
-
-
-Birthday DatePipe
-
-The hero's birthday is {{ birthday | date }}
-
-
-
-The hero's birthday is {{ birthday | date:"MM/dd/yy" }}
-
-
-
-
-Hero Birthday v2
-
-
-
-
-Birthday Pipe Chaining
-
-
- The chained hero's birthday is
- {{ birthday | date | uppercase}}
-
-
-
-
-
- The chained hero's birthday is
- {{ birthday | date:'fullDate' | uppercase}}
-
-
-
-
- The chained hero's birthday is
- {{ ( birthday | date:'fullDate' ) | uppercase}}
-
-
-
-
-
-
-
-
-loading
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/pipes/src/app/app.component.ts b/docs_app/content/examples/pipes/src/app/app.component.ts
deleted file mode 100644
index 2b739ed2a0..0000000000
--- a/docs_app/content/examples/pipes/src/app/app.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html'
-})
-export class AppComponent {
- birthday = new Date(1988, 3, 15); // April 15, 1988
-}
diff --git a/docs_app/content/examples/pipes/src/app/app.module.ts b/docs_app/content/examples/pipes/src/app/app.module.ts
deleted file mode 100644
index 325a32e4b2..0000000000
--- a/docs_app/content/examples/pipes/src/app/app.module.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular//common/http';
-
-import { AppComponent } from './app.component';
-import {
- FlyingHeroesComponent,
- FlyingHeroesImpureComponent
-} from './flying-heroes.component';
-import { HeroAsyncMessageComponent } from './hero-async-message.component';
-import { HeroBirthdayComponent } from './hero-birthday1.component';
-import { HeroBirthday2Component } from './hero-birthday2.component';
-import { HeroListComponent } from './hero-list.component';
-import { PowerBoosterComponent } from './power-booster.component';
-import { PowerBoostCalculatorComponent } from './power-boost-calculator.component';
-import {
- FlyingHeroesPipe,
- FlyingHeroesImpurePipe
-} from './flying-heroes.pipe';
-import { FetchJsonPipe } from './fetch-json.pipe';
-import { ExponentialStrengthPipe } from './exponential-strength.pipe';
-
-@NgModule({
- imports: [
- BrowserModule,
- FormsModule,
- HttpClientModule
- ],
- declarations: [
- AppComponent,
- FlyingHeroesComponent,
- FlyingHeroesImpureComponent,
- HeroAsyncMessageComponent,
- HeroBirthdayComponent,
- HeroBirthday2Component,
- HeroListComponent,
- PowerBoosterComponent,
- PowerBoostCalculatorComponent,
- FlyingHeroesPipe,
- FlyingHeroesImpurePipe,
- FetchJsonPipe,
- ExponentialStrengthPipe
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/pipes/src/app/exponential-strength.pipe.ts b/docs_app/content/examples/pipes/src/app/exponential-strength.pipe.ts
deleted file mode 100644
index d277483853..0000000000
--- a/docs_app/content/examples/pipes/src/app/exponential-strength.pipe.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// #docregion
-import { Pipe, PipeTransform } from '@angular/core';
-/*
- * Raise the value exponentially
- * Takes an exponent argument that defaults to 1.
- * Usage:
- * value | exponentialStrength:exponent
- * Example:
- * {{ 2 | exponentialStrength:10 }}
- * formats to: 1024
-*/
-@Pipe({name: 'exponentialStrength'})
-export class ExponentialStrengthPipe implements PipeTransform {
- transform(value: number, exponent: string): number {
- let exp = parseFloat(exponent);
- return Math.pow(value, isNaN(exp) ? 1 : exp);
- }
-}
diff --git a/docs_app/content/examples/pipes/src/app/fetch-json.pipe.ts b/docs_app/content/examples/pipes/src/app/fetch-json.pipe.ts
deleted file mode 100644
index 9fcdf341e1..0000000000
--- a/docs_app/content/examples/pipes/src/app/fetch-json.pipe.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// #docregion
-import { Pipe, PipeTransform } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-// #docregion pipe-metadata
-@Pipe({
- name: 'fetch',
- pure: false
-})
-// #enddocregion pipe-metadata
-export class FetchJsonPipe implements PipeTransform {
- private cachedData: any = null;
- private cachedUrl = '';
-
- constructor(private http: HttpClient) { }
-
- transform(url: string): any {
- if (url !== this.cachedUrl) {
- this.cachedData = null;
- this.cachedUrl = url;
- this.http.get(url).subscribe( result => this.cachedData = result );
- }
-
- return this.cachedData;
- }
-}
diff --git a/docs_app/content/examples/pipes/src/app/flying-heroes-impure.component.html b/docs_app/content/examples/pipes/src/app/flying-heroes-impure.component.html
deleted file mode 100644
index 66bd86f81c..0000000000
--- a/docs_app/content/examples/pipes/src/app/flying-heroes-impure.component.html
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-{{title}}
-
-
-New hero:
-
-
- can fly
-
-
- Mutate array
-
- Reset
-
-
-
-Heroes who fly (piped)
-
-
-
- {{hero.name}}
-
-
-
-
-All Heroes (no pipe)
-
-
-
-
- {{hero.name}}
-
-
-
-
diff --git a/docs_app/content/examples/pipes/src/app/flying-heroes.component.html b/docs_app/content/examples/pipes/src/app/flying-heroes.component.html
deleted file mode 100644
index 93e635b662..0000000000
--- a/docs_app/content/examples/pipes/src/app/flying-heroes.component.html
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-{{title}}
-
-
-New hero:
-
-
- can fly
-
-
- Mutate array
-
- Reset
-
-
-
-Heroes who fly (piped)
-
-
-
- {{hero.name}}
-
-
-
-
-All Heroes (no pipe)
-
-
-
-
- {{hero.name}}
-
-
-
-
diff --git a/docs_app/content/examples/pipes/src/app/flying-heroes.component.ts b/docs_app/content/examples/pipes/src/app/flying-heroes.component.ts
deleted file mode 100644
index 43474c5ba8..0000000000
--- a/docs_app/content/examples/pipes/src/app/flying-heroes.component.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-import { HEROES } from './heroes';
-
-@Component({
- selector: 'app-flying-heroes',
- templateUrl: './flying-heroes.component.html',
- styles: ['#flyers, #all {font-style: italic}']
-})
-// #docregion v1
-export class FlyingHeroesComponent {
- heroes: any[] = [];
- canFly = true;
-// #enddocregion v1
- mutate = true;
- title = 'Flying Heroes (pure pipe)';
-
-// #docregion v1
- constructor() { this.reset(); }
-
- addHero(name: string) {
- name = name.trim();
- if (!name) { return; }
- let hero = {name, canFly: this.canFly};
-// #enddocregion v1
- if (this.mutate) {
- // Pure pipe won't update display because heroes array reference is unchanged
- // Impure pipe will display
-// #docregion v1
-// #docregion push
- this.heroes.push(hero);
-// #enddocregion push
-// #enddocregion v1
- } else {
- // Pipe updates display because heroes array is a new object
-// #docregion concat
- this.heroes = this.heroes.concat(hero);
-// #enddocregion concat
- }
-// #docregion v1
- }
-
- reset() { this.heroes = HEROES.slice(); }
-}
-// #enddocregion v1
-
-////// Identical except for impure pipe //////
-// #docregion impure-component
-@Component({
- selector: 'app-flying-heroes-impure',
- templateUrl: './flying-heroes-impure.component.html',
-// #enddocregion impure-component
- styles: ['.flyers, .all {font-style: italic}'],
-// #docregion impure-component
-})
-export class FlyingHeroesImpureComponent extends FlyingHeroesComponent {
- title = 'Flying Heroes (impure pipe)';
-}
-// #enddocregion impure-component
diff --git a/docs_app/content/examples/pipes/src/app/flying-heroes.pipe.ts b/docs_app/content/examples/pipes/src/app/flying-heroes.pipe.ts
deleted file mode 100644
index 87db9c277e..0000000000
--- a/docs_app/content/examples/pipes/src/app/flying-heroes.pipe.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/* tslint:disable use-pipe-transform-interface */
-// #docregion
-// #docregion pure
-import { Pipe, PipeTransform } from '@angular/core';
-
-import { Flyer } from './heroes';
-
-@Pipe({ name: 'flyingHeroes' })
-export class FlyingHeroesPipe implements PipeTransform {
- transform(allHeroes: Flyer[]) {
- // #docregion filter
- return allHeroes.filter(hero => hero.canFly);
- // #enddocregion filter
- }
-}
-// #enddocregion pure
-
-/////// Identical except for the pure flag
-// #docregion impure
-// #docregion pipe-decorator
-@Pipe({
- name: 'flyingHeroesImpure',
- pure: false
-})
-// #enddocregion pipe-decorator
-export class FlyingHeroesImpurePipe extends FlyingHeroesPipe {}
-// #enddocregion impure
diff --git a/docs_app/content/examples/pipes/src/app/hero-async-message.component.ts b/docs_app/content/examples/pipes/src/app/hero-async-message.component.ts
deleted file mode 100644
index 558e916f53..0000000000
--- a/docs_app/content/examples/pipes/src/app/hero-async-message.component.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-import { Observable, interval } from 'rxjs';
-import { map, take } from 'rxjs/operators';
-
-@Component({
- selector: 'app-hero-message',
- template: `
- Async Hero Message and AsyncPipe
- Message: {{ message$ | async }}
- Resend `,
-})
-export class HeroAsyncMessageComponent {
- message$: Observable;
-
- private messages = [
- 'You are my hero!',
- 'You are the best hero!',
- 'Will you be my hero?'
- ];
-
- constructor() { this.resend(); }
-
- resend() {
- this.message$ = interval(500).pipe(
- map(i => this.messages[i]),
- take(this.messages.length)
- );
- }
-}
-// #enddocregion
-
-// Alternative message$ formula:
-// this.message$ = fromArray(this.messages).pipe(
-// map(message => timer(500),
-// map(() => message)),
-// concatAll()
-// );
diff --git a/docs_app/content/examples/pipes/src/app/hero-birthday1.component.ts b/docs_app/content/examples/pipes/src/app/hero-birthday1.component.ts
deleted file mode 100644
index d51914550f..0000000000
--- a/docs_app/content/examples/pipes/src/app/hero-birthday1.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-hero-birthday',
- // #docregion hero-birthday-template
- template: `The hero's birthday is {{ birthday | date }}
`
- // #enddocregion hero-birthday-template
-})
-export class HeroBirthdayComponent {
- birthday = new Date(1988, 3, 15); // April 15, 1988
-}
diff --git a/docs_app/content/examples/pipes/src/app/hero-birthday2.component.ts b/docs_app/content/examples/pipes/src/app/hero-birthday2.component.ts
deleted file mode 100644
index ce71c2ab1e..0000000000
--- a/docs_app/content/examples/pipes/src/app/hero-birthday2.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-hero-birthday2',
- // #docregion template
- template: `
- The hero's birthday is {{ birthday | date:format }}
- Toggle Format
- `
- // #enddocregion template
-})
-// #docregion class
-export class HeroBirthday2Component {
- birthday = new Date(1988, 3, 15); // April 15, 1988
- toggle = true; // start with true == shortDate
-
- get format() { return this.toggle ? 'shortDate' : 'fullDate'; }
- toggleFormat() { this.toggle = !this.toggle; }
-}
diff --git a/docs_app/content/examples/pipes/src/app/hero-list.component.ts b/docs_app/content/examples/pipes/src/app/hero-list.component.ts
deleted file mode 100644
index ead6e74d57..0000000000
--- a/docs_app/content/examples/pipes/src/app/hero-list.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-hero-list',
- template: `
- Heroes from JSON File
-
-
- {{hero.name}}
-
-
- Heroes as JSON:
- {{'assets/heroes.json' | fetch | json}}
-
`
-})
-export class HeroListComponent { }
diff --git a/docs_app/content/examples/pipes/src/app/heroes.ts b/docs_app/content/examples/pipes/src/app/heroes.ts
deleted file mode 100644
index b2edabe0da..0000000000
--- a/docs_app/content/examples/pipes/src/app/heroes.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface Flyer { canFly: boolean; }
-export const HEROES = [
- {name: 'Windstorm', canFly: true},
- {name: 'Bombasto', canFly: false},
- {name: 'Magneto', canFly: false},
- {name: 'Tornado', canFly: true}
-];
diff --git a/docs_app/content/examples/pipes/src/app/power-boost-calculator.component.ts b/docs_app/content/examples/pipes/src/app/power-boost-calculator.component.ts
deleted file mode 100644
index 5092e18893..0000000000
--- a/docs_app/content/examples/pipes/src/app/power-boost-calculator.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-power-boost-calculator',
- template: `
- Power Boost Calculator
- Normal power:
- Boost factor:
-
- Super Hero Power: {{power | exponentialStrength: factor}}
-
- `
-})
-export class PowerBoostCalculatorComponent {
- power = 5;
- factor = 1;
-}
diff --git a/docs_app/content/examples/pipes/src/app/power-booster.component.ts b/docs_app/content/examples/pipes/src/app/power-booster.component.ts
deleted file mode 100644
index b8d395db0f..0000000000
--- a/docs_app/content/examples/pipes/src/app/power-booster.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-power-booster',
- template: `
- Power Booster
- Super power boost: {{2 | exponentialStrength: 10}}
- `
-})
-export class PowerBoosterComponent { }
diff --git a/docs_app/content/examples/pipes/src/assets/heroes.json b/docs_app/content/examples/pipes/src/assets/heroes.json
deleted file mode 100644
index e5f0b77262..0000000000
--- a/docs_app/content/examples/pipes/src/assets/heroes.json
+++ /dev/null
@@ -1,6 +0,0 @@
-[
- {"name": "Windstorm", "canFly": true},
- {"name": "Bombasto", "canFly": false},
- {"name": "Magneto", "canFly": false},
- {"name": "Tornado", "canFly": true}
-]
diff --git a/docs_app/content/examples/pipes/src/index.html b/docs_app/content/examples/pipes/src/index.html
deleted file mode 100644
index 3500263895..0000000000
--- a/docs_app/content/examples/pipes/src/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
- Pipes
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/pipes/src/main.ts b/docs_app/content/examples/pipes/src/main.ts
deleted file mode 100644
index 0740658908..0000000000
--- a/docs_app/content/examples/pipes/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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);
diff --git a/docs_app/content/examples/pipes/stackblitz.json b/docs_app/content/examples/pipes/stackblitz.json
deleted file mode 100644
index a27408cfec..0000000000
--- a/docs_app/content/examples/pipes/stackblitz.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
- "description": "Pipes",
- "files":[
- "!**/*.d.ts",
- "!**/*.js"],
- "tags": ["pipe"]
-}
diff --git a/docs_app/content/examples/practical-observable-usage/example-config.json b/docs_app/content/examples/practical-observable-usage/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/practical-observable-usage/src/backoff.ts b/docs_app/content/examples/practical-observable-usage/src/backoff.ts
deleted file mode 100644
index 97b53845f1..0000000000
--- a/docs_app/content/examples/practical-observable-usage/src/backoff.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-
-import { pipe, range, timer, zip } from 'rxjs';
-import { ajax } from 'rxjs/ajax';
-import { retryWhen, map, mergeMap } from 'rxjs/operators';
-
-function backoff(maxTries, ms) {
- return pipe(
- retryWhen(attempts => range(1, maxTries)
- .pipe(
- zip(attempts, (i) => i),
- map(i => i * i),
- mergeMap(i => timer(i * ms))
- )
- )
- );
-}
-
-ajax('/api/endpoint')
- .pipe(backoff(3, 250))
- .subscribe(data => handleData(data));
-
-function handleData(data) {
- // ...
-}
diff --git a/docs_app/content/examples/practical-observable-usage/src/main.ts b/docs_app/content/examples/practical-observable-usage/src/main.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/practical-observable-usage/src/typeahead.ts b/docs_app/content/examples/practical-observable-usage/src/typeahead.ts
deleted file mode 100644
index 4bde2c66d0..0000000000
--- a/docs_app/content/examples/practical-observable-usage/src/typeahead.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-
-import { fromEvent } from 'rxjs';
-import { ajax } from 'rxjs/ajax';
-import { map, filter, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
-
-const searchBox = document.getElementById('search-box');
-
-const typeahead = fromEvent(searchBox, 'input').pipe(
- map((e: KeyboardEvent) => e.target.value),
- filter(text => text.length > 2),
- debounceTime(10),
- distinctUntilChanged(),
- switchMap(() => ajax('/api/endpoint'))
-);
-
-typeahead.subscribe(data => {
- // Handle the data from the API
-});
diff --git a/docs_app/content/examples/providers/e2e/app.e2e-spec.ts b/docs_app/content/examples/providers/e2e/app.e2e-spec.ts
deleted file mode 100644
index 46108fd9dc..0000000000
--- a/docs_app/content/examples/providers/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, element, by } from 'protractor';
-
-describe('providers App', () => {
- let page: AppPage;
-
- beforeEach(() => {
- page = new AppPage();
- });
-
- function getUsersStruct() {
- return {
- user: element.all(by.css('ng-component li')).get(0),
- userId: element.all(by.css('ng-component span')).get(0)
- };
- }
-
- function getListSectionStruct() {
- return {
- items: element.all(by.css('app-root li'))
- };
- }
-
- it('should display header that says Users list', () => {
- page.navigateTo();
- expect(page.getParagraphText()).toEqual('Users list');
- });
-
-
- it('shows a list of customers', function() {
- const list = getListSectionStruct();
- expect(list.items.count()).toBe(10);
- expect(list.items.get(0).getText()).toBe('1 Maria');
- expect(list.items.get(9).getText()).toBe('10 Seth');
- });
-
-});
diff --git a/docs_app/content/examples/providers/example-config.json b/docs_app/content/examples/providers/example-config.json
deleted file mode 100644
index 313764c3c6..0000000000
--- a/docs_app/content/examples/providers/example-config.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "build": "build:cli",
- "run": "serve:cli"
-}
diff --git a/docs_app/content/examples/providers/src/app/app.component.css b/docs_app/content/examples/providers/src/app/app.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/providers/src/app/app.component.html b/docs_app/content/examples/providers/src/app/app.component.html
deleted file mode 100644
index 7763b93ba8..0000000000
--- a/docs_app/content/examples/providers/src/app/app.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-
- {{title}}
-
-
-
-{{user.id}} {{user.name}}
-
diff --git a/docs_app/content/examples/providers/src/app/app.component.spec.ts b/docs_app/content/examples/providers/src/app/app.component.spec.ts
deleted file mode 100644
index 13c632d676..0000000000
--- a/docs_app/content/examples/providers/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [
- AppComponent
- ],
- });
- TestBed.compileComponents();
- });
-
- it('should create the app', async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app).toBeTruthy();
- }));
-
- it(`should have as title 'app works!'`, async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app.title).toEqual('app works!');
- }));
-
- it('should render title in a h1 tag', async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- fixture.detectChanges();
- const compiled = fixture.debugElement.nativeElement;
- expect(compiled.querySelector('h1').textContent).toContain('app works!');
- }));
-});
diff --git a/docs_app/content/examples/providers/src/app/app.component.ts b/docs_app/content/examples/providers/src/app/app.component.ts
deleted file mode 100644
index 37c8e53586..0000000000
--- a/docs_app/content/examples/providers/src/app/app.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { User, UserService } from './user.service';
-
-// #docregion component-providers
-@Component({
- // #enddocregion component-providers
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
- // #docregion component-providers
- providers: [UserService]
-})
-// #enddocregion component-providers
-export class AppComponent implements OnInit {
- title = 'Users list';
- users: User[];
-
- constructor(private userService: UserService) { }
-
- ngOnInit(): void {
- this.userService.getUsers().then(users => this.users = users);
- }
-
-}
diff --git a/docs_app/content/examples/providers/src/app/app.module.ts b/docs_app/content/examples/providers/src/app/app.module.ts
deleted file mode 100644
index 7152c203c8..0000000000
--- a/docs_app/content/examples/providers/src/app/app.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { UserService } from './user.service';
-
-@NgModule({
- imports: [ BrowserModule ],
- declarations: [ AppComponent ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/providers/src/app/user.module.ts b/docs_app/content/examples/providers/src/app/user.module.ts
deleted file mode 100644
index 0b3b67514b..0000000000
--- a/docs_app/content/examples/providers/src/app/user.module.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { UserService } from './user.service';
-
-@NgModule({
- providers: [UserService],
-})
-export class UserModule {
-}
diff --git a/docs_app/content/examples/providers/src/app/user.service.0.ts b/docs_app/content/examples/providers/src/app/user.service.0.ts
deleted file mode 100644
index 8988a99309..0000000000
--- a/docs_app/content/examples/providers/src/app/user.service.0.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
- providedIn: 'root',
-})
-export class UserService {
-}
diff --git a/docs_app/content/examples/providers/src/app/user.service.1.ts b/docs_app/content/examples/providers/src/app/user.service.1.ts
deleted file mode 100644
index 64ee94b72d..0000000000
--- a/docs_app/content/examples/providers/src/app/user.service.1.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Injectable } from '@angular/core';
-import { UserModule } from './user.module';
-
-@Injectable({
- providedIn: UserModule,
-})
-export class UserService {
-}
diff --git a/docs_app/content/examples/providers/src/app/user.service.spec.ts b/docs_app/content/examples/providers/src/app/user.service.spec.ts
deleted file mode 100644
index dcf5565717..0000000000
--- a/docs_app/content/examples/providers/src/app/user.service.spec.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { TestBed, inject } from '@angular/core/testing';
-import { UserService } from './user.service';
-
-describe('UserService', () => {
- beforeEach(() => {
- TestBed.configureTestingModule({});
- });
-
- it('should ...', inject([UserService], (service: UserService) => {
- expect(service).toBeTruthy();
- }));
-});
diff --git a/docs_app/content/examples/providers/src/app/user.service.ts b/docs_app/content/examples/providers/src/app/user.service.ts
deleted file mode 100644
index 096d1c8fb1..0000000000
--- a/docs_app/content/examples/providers/src/app/user.service.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Injectable } from '@angular/core';
-
-export class User {
- id: number;
- name: string;
-}
-
-@Injectable({
- providedIn: 'root',
-})
-export class UserService {
-
- constructor() { }
-
- getUsers(): Promise {
- return Promise.resolve([
- { id: 1, name: 'Maria' },
- { id: 2, name: 'Alex' },
- { id: 3, name: 'Chuntao' },
- { id: 4, name: 'Béatrice' },
- { id: 5, name: 'Sarah' },
- { id: 6, name: 'Andrés' },
- { id: 7, name: 'Abdul' },
- { id: 8, name: 'Pierre' },
- { id: 9, name: 'Jiao' },
- { id: 10, name: 'Seth' }
- ]);
- }
-
-}
diff --git a/docs_app/content/examples/providers/src/index.html b/docs_app/content/examples/providers/src/index.html
deleted file mode 100644
index 15d46bb0a7..0000000000
--- a/docs_app/content/examples/providers/src/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
- Providers
-
-
-
-
-
-
- Loading...
-
-
diff --git a/docs_app/content/examples/providers/src/main.ts b/docs_app/content/examples/providers/src/main.ts
deleted file mode 100644
index a9ca1caf8c..0000000000
--- a/docs_app/content/examples/providers/src/main.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-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);
diff --git a/docs_app/content/examples/providers/stackblitz.json b/docs_app/content/examples/providers/stackblitz.json
deleted file mode 100644
index 9f21337a05..0000000000
--- a/docs_app/content/examples/providers/stackblitz.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "description": "Providers",
- "files": [
- "!**/*.d.ts",
- "!**/*.js",
- "!**/*.[0,1,2].*"
- ],
- "file": "src/app/app.component.ts",
- "tags": ["providers"]
-}
diff --git a/docs_app/content/examples/quickstart/bs-config.1.json b/docs_app/content/examples/quickstart/bs-config.1.json
deleted file mode 100644
index 4e58595267..0000000000
--- a/docs_app/content/examples/quickstart/bs-config.1.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "server": {
- "baseDir": "src",
- "routes": {
- "/node_modules": "node_modules"
- }
- }
-}
diff --git a/docs_app/content/examples/quickstart/e2e-spec.ts b/docs_app/content/examples/quickstart/e2e-spec.ts
deleted file mode 100644
index 73921707ee..0000000000
--- a/docs_app/content/examples/quickstart/e2e-spec.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('QuickStart E2E Tests', function () {
-
- let expectedMsg = 'Hello Angular';
-
- beforeEach(function () {
- browser.get('');
- });
-
- it(`should display: ${expectedMsg}`, function () {
- expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
- });
-
-});
diff --git a/docs_app/content/examples/quickstart/example-config.json b/docs_app/content/examples/quickstart/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/quickstart/src/app/app.component.ts b/docs_app/content/examples/quickstart/src/app/app.component.ts
deleted file mode 100644
index 1ef28fc5c4..0000000000
--- a/docs_app/content/examples/quickstart/src/app/app.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'my-app',
- template: `Hello {{name}} `
-})
-export class AppComponent { name = 'Angular'; }
diff --git a/docs_app/content/examples/quickstart/src/app/app.module.ts b/docs_app/content/examples/quickstart/src/app/app.module.ts
deleted file mode 100644
index 50a0e6eb47..0000000000
--- a/docs_app/content/examples/quickstart/src/app/app.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
-
-@NgModule({
- imports: [ BrowserModule ],
- declarations: [ AppComponent ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/quickstart/src/index.html b/docs_app/content/examples/quickstart/src/index.html
deleted file mode 100644
index 21fb56edb9..0000000000
--- a/docs_app/content/examples/quickstart/src/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
- Angular Quickstart
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Loading AppComponent content here ...
-
-
-
-
diff --git a/docs_app/content/examples/quickstart/src/main.ts b/docs_app/content/examples/quickstart/src/main.ts
deleted file mode 100644
index 311c44b76d..0000000000
--- a/docs_app/content/examples/quickstart/src/main.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/docs_app/content/examples/quickstart/src/tsconfig.1.json b/docs_app/content/examples/quickstart/src/tsconfig.1.json
deleted file mode 100644
index 2c7260d1bc..0000000000
--- a/docs_app/content/examples/quickstart/src/tsconfig.1.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "compilerOptions": {
- "target": "es5",
- "module": "commonjs",
- "moduleResolution": "node",
- "sourceMap": true,
- "emitDecoratorMetadata": true,
- "experimentalDecorators": true,
- "lib": [ "es2015", "dom" ],
- "noImplicitAny": true,
- "suppressImplicitAnyIndexErrors": true
- }
-}
diff --git a/docs_app/content/examples/quickstart/stackblitz.json b/docs_app/content/examples/quickstart/stackblitz.json
deleted file mode 100644
index fd606e2ab9..0000000000
--- a/docs_app/content/examples/quickstart/stackblitz.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "description": "QuickStart",
- "files": [
- "src/app/app.component.ts",
- "src/app/app.module.ts",
- "src/main.ts",
- "src/index.html"
- ],
- "file": "src/app/app.component.ts",
- "tags": ["quickstart"]
-}
diff --git a/docs_app/content/examples/reactive-forms/e2e/app.e2e-spec.ts b/docs_app/content/examples/reactive-forms/e2e/app.e2e-spec.ts
deleted file mode 100644
index 59c1ea797d..0000000000
--- a/docs_app/content/examples/reactive-forms/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,1020 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-function finalDemoAddressForm(element: any, index: number) {
- let form = {
- street: element.all(by.css('input[formcontrolname=street]')).get(index).getAttribute('value'),
- city: element.all(by.css('input[formcontrolname=city]')).get(index).getAttribute('value'),
- state: element.all(by.css('select[formcontrolname=state]')).get(index).getAttribute('value'),
- zip: element.all(by.css('input[formcontrolname=zip]')).get(index).getAttribute('value')
- };
- return form;
-}
-
-describe('Reactive forms', function() {
- let select: any;
-
- beforeEach(function() {
- browser.get('');
- select = element(by.css('.container > h4 > select'));
- });
-
- describe('navigation', function() {
- it('should display the title', function() {
- let title = element(by.css('.container > h1'));
- expect(title.getText()).toBe('Reactive Forms');
- });
-
- it('should contain a dropdown with each example', function() {
- expect(select.isDisplayed()).toBe(true);
- });
-
- it('should have 9 options for different demos', function() {
- let options = select.all(by.tagName('option'));
- expect(options.count()).toBe(9);
- });
-
- it('should start with Final Demo', function() {
- select.getAttribute('value').then(function(demo: string) {
- expect(demo).toBe('Final Demo');
- });
- });
- });
-
-// *************Begin Final Demo test*******************************
-
- describe('final demo', function() {
- it('does not select any hero by default', function() {
- let heroSection = element(by.css('app-hero-list > div'));
- expect(heroSection.isPresent()).toBe(false);
- });
-
- it('refreshes the page upon button click', function() {
- // We move to another page...
- let whirlwindButton = element.all(by.css('nav a')).get(0);
- whirlwindButton.click();
- let refresh = element(by.css('button'));
- refresh.click();
- let heroSection = element(by.css('app-hero-list > div'));
- expect(heroSection.isPresent()).toBe(false);
- });
-
- describe('Whirlwind form', function() {
- beforeEach(function() {
- let whirlwindButton = element.all(by.css('nav a')).get(0);
- whirlwindButton.click();
- });
-
- it('should show a hero information when the button is clicked', function() {
- let editMessage = element(by.css('app-hero-list > div > h3'));
- expect(editMessage.getText()).toBe('Editing: Whirlwind');
- });
-
- it('should show a form with the selected hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- expect(nameInput.getAttribute('value')).toBe('Whirlwind');
- let address1 = finalDemoAddressForm(element, 0);
- expect(address1.street).toBe('123 Main');
- expect(address1.state).toBe('CA');
- expect(address1.zip).toBe('94801');
- expect(address1.city).toBe('Anywhere');
- let address2 = finalDemoAddressForm(element, 1);
- expect(address2.street).toBe('456 Maple');
- expect(address2.state).toBe('VA');
- expect(address2.zip).toBe('23226');
- expect(address2.city).toBe('Somewhere');
- });
-
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail > p'));
- expect(json.getText()).toContain('Whirlwind');
- expect(json.getText()).toContain('Anywhere');
- expect(json.getText()).toContain('Somewhere');
- expect(json.getText()).toContain('VA');
- });
-
- it('has two disabled buttons by default', function() {
- let buttons = element.all(by.css('app-hero-detail > form > div > button'));
- expect(buttons.get(0).getAttribute('disabled')).toBe('true');
- expect(buttons.get(1).getAttribute('disabled')).toBe('true');
- });
-
- it('enables the buttons after we edit the form', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- nameInput.sendKeys('a');
- let buttons = element.all(by.css('app-hero-detail > form > div > button'));
- expect(buttons.get(0).getAttribute('disabled')).toBeNull();
- expect(buttons.get(1).getAttribute('disabled')).toBeNull();
- });
-
- it('saves the changes when the save button is clicked', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- nameInput.sendKeys('a');
- let save = element.all(by.css('app-hero-detail > form > div > button')).get(0);
- save.click();
- let editMessage = element(by.css('app-hero-list > div > h3'));
- expect(editMessage.getText()).toBe('Editing: Whirlwinda');
- });
-
- it('reverts the changes when the revert button is clicked', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- nameInput.sendKeys('a');
- let revert = element.all(by.css('app-hero-detail > form > div > button')).get(1);
- revert.click();
- let editMessage = element(by.css('app-hero-list > div > h3'));
- expect(editMessage.getText()).toBe('Editing: Whirlwind');
- expect(nameInput.getAttribute('value')).toBe('Whirlwind');
- });
-
- it('is able to add a new empty address', function() {
- let newLairButton = element.all(by.css('button')).get(3);
- newLairButton.click();
- let address3 = finalDemoAddressForm(element, 2);
- expect(address3.street).toBe('');
- expect(address3.state).toBe('');
- expect(address3.zip).toBe('');
- expect(address3.city).toBe('');
- });
-
- it('should show three radio buttons', function() {
- let radioButtons = element.all(by.css('input[formcontrolname=power]'));
- expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
- expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
- expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
- });
-
- it('should show a checkbox', function() {
- let checkbox = element(by.css('input[formcontrolname=sidekick]'));
- expect(checkbox.getAttribute('checked')).toBe(null);
- });
- });
-
- describe('Bombastic form', function() {
- beforeEach(function() {
- let bombastaButton = element.all(by.css('nav a')).get(1);
- bombastaButton.click();
- });
-
- it('should show a hero information when the button is clicked', function() {
- let editMessage = element(by.css('app-hero-list > div > h3'));
- expect(editMessage.getText()).toBe('Editing: Bombastic');
- });
-
- it('should show a form with the selected hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- expect(nameInput.getAttribute('value')).toBe('Bombastic');
- let address1 = finalDemoAddressForm(element, 0);
- expect(address1.street).toBe('789 Elm');
- // expect(address1.state).toBe('OH');
- expect(address1.zip).toBe('04501');
- expect(address1.city).toBe('Smallville');
- });
-
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail > p'));
- expect(json.getText()).toContain('Bombastic');
- expect(json.getText()).toContain('Smallville');
- expect(json.getText()).toContain('OH');
- expect(json.getText()).toContain('04501');
- });
-
- it('has two disabled buttons by default', function() {
- let buttons = element.all(by.css('app-hero-detail > form > div > button'));
- expect(buttons.get(0).getAttribute('disabled')).toBe('true');
- expect(buttons.get(1).getAttribute('disabled')).toBe('true');
- });
-
- it('enables the buttons after we edit the form', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- nameInput.sendKeys('a');
- let buttons = element.all(by.css('app-hero-detail > form > div > button'));
- expect(buttons.get(0).getAttribute('disabled')).toBeNull();
- expect(buttons.get(1).getAttribute('disabled')).toBeNull();
- });
-
- it('saves the changes when the save button is clicked', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- nameInput.sendKeys('a');
- let save = element.all(by.css('app-hero-detail > form > div > button')).get(0);
- save.click();
- let editMessage = element(by.css('app-hero-list > div > h3'));
- expect(editMessage.getText()).toBe('Editing: Bombastica');
- });
-
- it('reverts the changes when the revert button is clicked', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- nameInput.sendKeys('a');
- let revert = element.all(by.css('app-hero-detail > form > div > button')).get(1);
- revert.click();
- let editMessage = element(by.css('app-hero-list > div > h3'));
- expect(editMessage.getText()).toBe('Editing: Bombastic');
- expect(nameInput.getAttribute('value')).toBe('Bombastic');
- });
-
- it('is able to add a new empty address', function() {
- let newLairButton = element.all(by.css('button')).get(3);
- newLairButton.click();
- let address2 = finalDemoAddressForm(element, 1);
- expect(address2.street).toBe('');
- expect(address2.state).toBe('');
- expect(address2.zip).toBe('');
- expect(address2.city).toBe('');
- });
-
- it('should show three radio buttons', function() {
- let radioButtons = element.all(by.css('input[formcontrolname=power]'));
- expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
- expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
- expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
- });
-
- it('should show a checbox', function() {
- let checkbox = element(by.css('input[formcontrolname=sidekick]'));
- expect(checkbox.getAttribute('checked')).toBe(null);
- });
- });
-
- describe('Magneta form', function() {
-
- beforeEach(function() {
- let magnetaButton = element.all(by.css('nav a')).get(2);
- magnetaButton.click();
- });
-
- it('should show hero information when the button is clicked', function() {
- let editMessage = element(by.css('app-hero-list > div > h3'));
- expect(editMessage.getText()).toBe('Editing: Magneta');
- });
-
- it('should show a form with the selected hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- expect(nameInput.getAttribute('value')).toBe('Magneta');
- });
-
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail > p'));
- expect(json.getText()).toContain('Magneta');
- });
-
- it('has two disabled buttons by default', function() {
- let buttons = element.all(by.css('app-hero-detail > form > div > button'));
- expect(buttons.get(0).getAttribute('disabled')).toBe('true');
- expect(buttons.get(1).getAttribute('disabled')).toBe('true');
- });
-
- it('enables the buttons after we edit the form', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- nameInput.sendKeys('a');
- let buttons = element.all(by.css('app-hero-detail > form > div > button'));
- expect(buttons.get(0).getAttribute('disabled')).toBeNull();
- expect(buttons.get(1).getAttribute('disabled')).toBeNull();
- });
-
- it('saves the changes when the save button is clicked', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- nameInput.sendKeys('a');
- let save = element.all(by.css('app-hero-detail > form > div > button')).get(0);
- save.click();
- let editMessage = element(by.css('app-hero-list > div > h3'));
- expect(editMessage.getText()).toBe('Editing: Magnetaa');
- });
-
- it('reverts the changes when the revert button is clicked', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- nameInput.sendKeys('a');
- let revert = element.all(by.css('app-hero-detail > form > div > button')).get(1);
- revert.click();
- let editMessage = element(by.css('app-hero-list > div > h3'));
- expect(editMessage.getText()).toBe('Editing: Magneta');
- expect(nameInput.getAttribute('value')).toBe('Magneta');
- });
-
- it('is able to add a new empty address', function() {
- let newLairButton = element.all(by.css('button')).get(3);
- newLairButton.click();
- let address = finalDemoAddressForm(element, 0);
- expect(address.street).toBe('');
- expect(address.state).toBe('');
- expect(address.zip).toBe('');
- expect(address.city).toBe('');
- });
-
- it('should show three radio buttons', function() {
- let radioButtons = element.all(by.css('input[formcontrolname=power]'));
- expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
- expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
- expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
- });
-
- it('should show a checkbox', function() {
- let checkbox = element(by.css('input[formcontrolname=sidekick]'));
- expect(checkbox.getAttribute('checked')).toBe(null);
- });
- });
- }); // final demo
-
-// *************Begin FormArray Demo test*******************************
-
-
- describe('formArray demo', function() {
- beforeEach(function() {
- let FormArrayOption = element.all(by.css('select option')).get(7);
- FormArrayOption.click();
- });
-
- it('should show FormArray Demo', function() {
- select.getAttribute('value').then(function(demo: string) {
- expect(demo).toBe('FormArray Demo');
- });
- });
-
- it('does not select any hero by default', function() {
- let heroSection = element(by.css('app-hero-list > div'));
- expect(heroSection.isPresent()).toBe(false);
- });
-
- it('refreshes the page upon button click', function() {
- // We move to another page...
- let whirlwindButton = element.all(by.css('nav a')).get(0);
- whirlwindButton.click();
- let refresh = element(by.css('button'));
- refresh.click();
- let heroSection = element(by.css('app-hero-list > div'));
- expect(heroSection.isPresent()).toBe(false);
- });
-
- describe('Whirlwind form', function() {
- beforeEach(function() {
- let whirlwindButton = element.all(by.css('nav a')).get(0);
- whirlwindButton.click();
- });
-
- it('should show hero information when the button is clicked', function() {
- let editMessage = element(by.css('div.demo > div > div > h3'));
- expect(editMessage.getText()).toBe('Editing: Whirlwind');
- });
-
- it('should show a form with the selected hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- expect(nameInput.getAttribute('value')).toBe('Whirlwind');
- let address1 = finalDemoAddressForm(element, 0);
- expect(address1.street).toBe('123 Main');
- expect(address1.state).toBe('CA');
- expect(address1.zip).toBe('94801');
- expect(address1.city).toBe('Anywhere');
- let address2 = finalDemoAddressForm(element, 1);
- expect(address2.street).toBe('456 Maple');
- expect(address2.state).toBe('VA');
- expect(address2.zip).toBe('23226');
- expect(address2.city).toBe('Somewhere');
- });
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail-8 > p'));
- expect(json.getText()).toContain('Whirlwind');
- expect(json.getText()).toContain('Anywhere');
- expect(json.getText()).toContain('Somewhere');
- expect(json.getText()).toContain('VA');
- });
-
- it('is able to add a new empty address', function() {
- let newLairButton = element.all(by.css('button')).get(1);
- newLairButton.click();
- let address2 = finalDemoAddressForm(element, 2);
- expect(address2.street).toBe('');
- expect(address2.state).toBe('');
- expect(address2.zip).toBe('');
- expect(address2.city).toBe('');
- });
-
- it('should show three radio buttons', function() {
- let radioButtons = element.all(by.css('input[formcontrolname=power]'));
- expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
- expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
- expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
- });
-
- it('should show a checkbox', function() {
- let checkbox = element(by.css('input[formcontrolname=sidekick]'));
- expect(checkbox.getAttribute('checked')).toBe(null);
- });
-
- }); // Whirlwind form
-
- describe('Bombastic FormArray form', function() {
- beforeEach(function() {
- let bombasticButton = element.all(by.css('nav a')).get(1);
- bombasticButton.click();
- });
-
- it('should show a hero information when the button is clicked', function() {
- let editMessage = element(by.css('div.demo > div > div > h3'));
- expect(editMessage.getText()).toBe('Editing: Bombastic');
- });
-
- it('should show a form with the selected hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- // nameInput.getAttribute('value').then(function(name: string) {
- // expect(name).toBe('Whirlwind');
- // });
- expect(nameInput.getAttribute('value')).toBe('Bombastic');
- let address1 = finalDemoAddressForm(element, 0);
- expect(address1.street).toBe('789 Elm');
- // expect(address1.state).toBe('OH');
- // This select should be OH not CA, which it shows in the UI, the JSON shows OH.
- expect(address1.zip).toBe('04501');
- expect(address1.city).toBe('Smallville');
- });
-
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail-8 > p'));
- expect(json.getText()).toContain('Bombastic');
- expect(json.getText()).toContain('Smallville');
- expect(json.getText()).toContain('04501');
- expect(json.getText()).toContain('789 Elm');
- });
-
- it('is able to add a new empty address', function() {
- let newLairButton = element.all(by.css('button')).get(1);
- newLairButton.click();
- let address1 = finalDemoAddressForm(element, 1);
- expect(address1.street).toBe('');
- expect(address1.state).toBe('');
- expect(address1.zip).toBe('');
- expect(address1.city).toBe('');
- });
-
- it('should show three radio buttons', function() {
- let radioButtons = element.all(by.css('input[formcontrolname=power]'));
- expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
- expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
- expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
- });
-
- it('should show a checkbox', function() {
- let checkbox = element(by.css('input[formcontrolname=sidekick]'));
- expect(checkbox.getAttribute('checked')).toBe(null);
- });
-
- }); // Bombastic FormArray form
-
- describe('Magneta FormArray form', function() {
- beforeEach(function() {
- let magnetaButton = element.all(by.css('nav a')).get(2);
- magnetaButton.click();
- });
-
- it('should show a hero information when the button is clicked', function() {
- let editMessage = element(by.css('div.demo > div > div > h3'));
- expect(editMessage.getText()).toBe('Editing: Magneta');
- });
-
- it('should show a form with the selected hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- expect(nameInput.getAttribute('value')).toBe('Magneta');
- });
-
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail-8 > p'));
- expect(json.getText()).toContain('Magneta');
- });
-
- it('is able to add a new empty address', function() {
- let newLairButton = element.all(by.css('button')).get(1);
- newLairButton.click();
- let address1 = finalDemoAddressForm(element, 0);
- expect(address1.street).toBe('');
- expect(address1.state).toBe('');
- expect(address1.zip).toBe('');
- expect(address1.city).toBe('');
- });
-
- it('should show three radio buttons', function() {
- let radioButtons = element.all(by.css('input[formcontrolname=power]'));
- expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
- expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
- expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
- });
-
- it('should show a checkbox', function() {
- let checkbox = element(by.css('input[formcontrolname=sidekick]'));
- expect(checkbox.getAttribute('checked')).toBe(null);
- });
-
- }); // Magneta FormArray form
-
- }); // formArray demo
-
-
-// *************Begin SetValue Demo test*******************************
-
- describe('SetValue demo', function() {
- beforeEach(function() {
- let SetValueOption = element.all(by.css('select option')).get(6);
- SetValueOption.click();
- });
-
- it('should show SetValue Demo', function() {
- select.getAttribute('value').then(function(demo: string) {
- expect(demo).toBe('SetValue Demo');
- });
- });
-
- it('does not select any hero by default', function() {
- let heroSection = element(by.css('app-hero-list > div'));
- expect(heroSection.isPresent()).toBe(false);
- });
-
- it('refreshes the page upon button click', function() {
- // We move to another page...
- let whirlwindButton = element.all(by.css('nav a')).get(0);
- whirlwindButton.click();
- let refresh = element(by.css('button'));
- refresh.click();
- let heroSection = element(by.css('app-hero-list > div'));
- expect(heroSection.isPresent()).toBe(false);
- });
-
- describe('Whirlwind setValue form', function() {
- beforeEach(function() {
- let whirlwindButton = element.all(by.css('nav a')).get(0);
- whirlwindButton.click();
- });
-
- it('should show a hero information when the button is clicked', function() {
- let editMessage = element(by.css('.demo > div > div > h3'));
- expect(editMessage.getText()).toBe('Editing: Whirlwind');
- });
-
- it('should show a form with the selected hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- expect(nameInput.getAttribute('value')).toBe('Whirlwind');
- let address1 = finalDemoAddressForm(element, 0);
- expect(address1.street).toBe('123 Main');
- expect(address1.state).toBe('CA');
- expect(address1.zip).toBe('94801');
- expect(address1.city).toBe('Anywhere');
- });
-
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail-7 > p'));
- expect(json.getText()).toContain('Whirlwind');
- expect(json.getText()).toContain('Anywhere');
- let nameOutput = element(by.css('app-hero-detail-7 > p ~ p'));
- expect(nameOutput.getText()).toContain('Name value: Whirlwind');
- let streetOutput = element(by.css('app-hero-detail-7 > p ~ p ~ p'));
- expect(streetOutput.getText()).toContain('Street value: 123 Main');
- });
-
- it('should show three radio buttons', function() {
- let radioButtons = element.all(by.css('input[formcontrolname=power]'));
- expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
- expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
- expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
- });
-
- it('should show a checkbox', function() {
- let checkbox = element(by.css('input[formcontrolname=sidekick]'));
- expect(checkbox.getAttribute('checked')).toBe(null);
- });
-
- }); // Whirlwind setValue form
-
- describe('Bombastic setValue form', function() {
- beforeEach(function() {
- let bombasticButton = element.all(by.css('nav a')).get(1);
- bombasticButton.click();
- });
-
- it('should show a hero information when the button is clicked', function() {
- let editMessage = element(by.css('.demo > div > div > h3'));
- expect(editMessage.getText()).toBe('Editing: Bombastic');
- });
-
- it('should show a form with the selected hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- expect(nameInput.getAttribute('value')).toBe('Bombastic');
- let address1 = finalDemoAddressForm(element, 0);
- expect(address1.street).toBe('789 Elm');
- expect(address1.state).toBe('OH');
- expect(address1.zip).toBe('04501');
- expect(address1.city).toBe('Smallville');
- });
-
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail-7 > p'));
- expect(json.getText()).toContain('Bombastic');
- expect(json.getText()).toContain('Smallville');
- expect(json.getText()).toContain('04501');
- expect(json.getText()).toContain('789 Elm');
- let nameOutput = element(by.css('app-hero-detail-7 > p ~ p'));
- expect(nameOutput.getText()).toContain('Name value: Bombastic');
- let streetOutput = element(by.css('app-hero-detail-7 > p ~ p ~ p'));
- expect(streetOutput.getText()).toContain('Street value: 789 Elm');
- });
-
- it('should show three radio buttons', function() {
- let radioButtons = element.all(by.css('input[formcontrolname=power]'));
- expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
- expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
- expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
- });
-
- it('should show a checkbox', function() {
- let checkbox = element(by.css('input[formcontrolname=sidekick]'));
- expect(checkbox.getAttribute('checked')).toBe(null);
- });
-
- }); // Bombastic setValue form
-
- describe('Magneta setValue form', function() {
- beforeEach(function() {
- let magnetaButton = element.all(by.css('nav a')).get(2);
- magnetaButton.click();
- });
-
- it('should show a hero information when the button is clicked', function() {
- let editMessage = element(by.css('.demo > div > div > h3'));
- expect(editMessage.getText()).toBe('Editing: Magneta');
- });
-
- it('should show a form with the selected hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- expect(nameInput.getAttribute('value')).toBe('Magneta');
- });
-
- it('should show three radio buttons', function() {
- let radioButtons = element.all(by.css('input[formcontrolname=power]'));
- expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
- expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
- expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
- });
-
- it('should show a checkbox', function() {
- let checkbox = element(by.css('input[formcontrolname=sidekick]'));
- expect(checkbox.getAttribute('checked')).toBe(null);
- });
-
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail-7 > p'));
- expect(json.getText()).toContain('Magneta');
- let nameOutput = element(by.css('app-hero-detail-7 > p ~ p'));
- expect(nameOutput.getText()).toContain('Name value: Magneta');
- let streetOutput = element(by.css('app-hero-detail-7 > p ~ p ~ p'));
- expect(streetOutput.getText()).toContain('Street value:');
- });
-
- }); // Magneta setValue form
- }); // SetValue demo
-
-// *************Begin patchValue Demo test*******************************
-
- describe('patchValue demo', function() {
- beforeEach(function() {
- let SetValueOption = element.all(by.css('select option')).get(5);
- SetValueOption.click();
- });
-
- it('should show patchValue Demo', function() {
- select.getAttribute('value').then(function(demo: string) {
- expect(demo).toBe('PatchValue Demo');
- });
- });
-
- it('does not select any hero by default', function() {
- let heroSection = element(by.css('.demo > div > div'));
- expect(heroSection.isPresent()).toBe(false);
- });
-
- it('refreshes the page upon button click', function() {
- // We move to another page...
- let whirlwindButton = element.all(by.css('nav a')).get(0);
- whirlwindButton.click();
- let refresh = element(by.css('button'));
- refresh.click();
- let heroSection = element(by.css('.demo > div > div'));
- expect(heroSection.isPresent()).toBe(false);
- });
-
- describe('Whirlwind patchValue form', function() {
- beforeEach(function() {
- let whirlwindButton = element.all(by.css('nav a')).get(0);
- whirlwindButton.click();
- });
-
- it('should show a hero information when the button is clicked', function() {
- let editMessage = element(by.css('h2 ~ h3'));
- expect(editMessage.getText()).toBe('Editing: Whirlwind');
- });
-
- it('should show a form with the selected hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- expect(nameInput.getAttribute('value')).toBe('Whirlwind');
- let address1 = finalDemoAddressForm(element, 0);
- expect(address1.street).toBe('');
- expect(address1.state).toBe('');
- expect(address1.zip).toBe('');
- expect(address1.city).toBe('');
- });
-
- it('should show three radio buttons', function() {
- let radioButtons = element.all(by.css('input[formcontrolname=power]'));
- expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
- expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
- expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
- });
-
- it('should show a checkbox', function() {
- let checkbox = element(by.css('input[formcontrolname=sidekick]'));
- expect(checkbox.getAttribute('checked')).toBe(null);
- });
-
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail-6 > p'));
- expect(json.getText()).toContain('Whirlwind');
- let nameOutput = element(by.css('app-hero-detail-6 > p ~ p'));
- expect(nameOutput.getText()).toContain('Name value: Whirlwind');
- let streetOutput = element(by.css('app-hero-detail-6 > p ~ p ~ p'));
- expect(streetOutput.getText()).toContain('Street value:');
- });
-
-
- }); // Bombastic patchValue form
- describe('Bombastic patchValue form', function() {
- beforeEach(function() {
- let bombasticButton = element.all(by.css('nav a')).get(1);
- bombasticButton.click();
- });
-
- it('should show a hero information when the button is clicked', function() {
- let editMessage = element(by.css('h2 ~ h3'));
- expect(editMessage.getText()).toBe('Editing: Bombastic');
- });
-
- it('should show a form with the selected hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- expect(nameInput.getAttribute('value')).toBe('Bombastic');
- let address1 = finalDemoAddressForm(element, 0);
- expect(address1.street).toBe('');
- expect(address1.state).toBe('');
- expect(address1.zip).toBe('');
- expect(address1.city).toBe('');
- });
-
- it('should show three radio buttons', function() {
- let radioButtons = element.all(by.css('input[formcontrolname=power]'));
- expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
- expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
- expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
- });
-
- it('should show a checkbox', function() {
- let checkbox = element(by.css('input[formcontrolname=sidekick]'));
- expect(checkbox.getAttribute('checked')).toBe(null);
- });
-
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail-6 > p'));
- expect(json.getText()).toContain('Bombastic');
- let nameOutput = element(by.css('app-hero-detail-6 > p ~ p'));
- expect(nameOutput.getText()).toContain('Name value: Bombastic');
- let streetOutput = element(by.css('app-hero-detail-6 > p ~ p ~ p'));
- expect(streetOutput.getText()).toContain('Street value:');
- });
- }); // Bombastic patchValue form
-
- describe('Magneta patchValue form', function() {
- beforeEach(function() {
- let magnetaButton = element.all(by.css('nav a')).get(2);
- magnetaButton.click();
- });
-
- it('should show a hero information when the button is clicked', function() {
- let editMessage = element(by.css('h2 ~ h3'));
- expect(editMessage.getText()).toBe('Editing: Magneta');
- });
-
- it('should show a form with the selected hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- expect(nameInput.getAttribute('value')).toBe('Magneta');
- let address1 = finalDemoAddressForm(element, 0);
- expect(address1.street).toBe('');
- expect(address1.state).toBe('');
- expect(address1.zip).toBe('');
- expect(address1.city).toBe('');
- });
-
- it('should show three radio buttons', function() {
- let radioButtons = element.all(by.css('input[formcontrolname=power]'));
- expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
- expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
- expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
- });
-
- it('should show a checkbox', function() {
- let checkbox = element(by.css('input[formcontrolname=sidekick]'));
- expect(checkbox.getAttribute('checked')).toBe(null);
- });
-
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail-6 > p'));
- expect(json.getText()).toContain('Magneta');
- let nameOutput = element(by.css('app-hero-detail-6 > p ~ p'));
- expect(nameOutput.getText()).toContain('Name value: Magneta');
- let streetOutput = element(by.css('app-hero-detail-6 > p ~ p ~ p'));
- expect(streetOutput.getText()).toContain('Street value:');
- });
-
- }); // Magneta patchValue form
- }); // PatchValue demo
-
-
-
-// *************Begin Nested FormBuilder Demo test*******************************
-
- describe('Nested FormBuilder demo', function() {
- beforeEach(function() {
- let NestedFormBuilderOption = element.all(by.css('select option')).get(4);
- NestedFormBuilderOption.click();
- });
-
- it('should show Nested FormBuilder Demo', function() {
- select.getAttribute('value').then(function(demo: string) {
- expect(demo).toBe('Nested FormBuilder group Demo');
- });
- });
-
- it('should show a form for hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- expect(nameInput.getAttribute('value')).toBe('');
- let address1 = finalDemoAddressForm(element, 0);
- expect(address1.street).toBe('');
- expect(address1.state).toBe('');
- expect(address1.zip).toBe('');
- expect(address1.city).toBe('');
- });
-
- it('should show three radio buttons', function() {
- let radioButtons = element.all(by.css('input[formcontrolname=power]'));
- expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
- expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
- expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
- });
-
- it('should show a checkbox', function() {
- let checkbox = element(by.css('input[formcontrolname=sidekick]'));
- expect(checkbox.getAttribute('checked')).toBe(null);
- });
-
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail-5 > p'));
- expect(json.getText()).toContain('address');
- let nameOutput = element(by.css('app-hero-detail-5 > p ~ p'));
- expect(nameOutput.getText()).toContain('Name value:');
- let streetOutput = element(by.css('app-hero-detail-5 > p ~ p ~ p'));
- expect(streetOutput.getText()).toContain('Street value:');
- });
-
- }); // Nested FormBuilder demo
-
-// *************Begin Group with multiple controls Demo test*******************************
-
- describe('Group with multiple controls demo', function() {
- beforeEach(function() {
- let NestedFormBuilderOption = element.all(by.css('select option')).get(3);
- NestedFormBuilderOption.click();
- });
-
- it('should show Group with multiple controls Demo', function() {
- select.getAttribute('value').then(function(demo: string) {
- expect(demo).toBe('Group with multiple controls Demo');
- });
- });
-
- it('should show header', function() {
- let header = element(by.css('app-hero-detail-4 > h3'));
- expect(header.getText()).toBe('A FormGroup with multiple FormControls');
- });
-
- it('should show a form for hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- expect(nameInput.getAttribute('value')).toBe('');
- let address1 = finalDemoAddressForm(element, 0);
- expect(address1.street).toBe('');
- expect(address1.state).toBe('');
- expect(address1.zip).toBe('');
- expect(address1.city).toBe('');
- });
-
- it('should show three radio buttons', function() {
- let radioButtons = element.all(by.css('input[formcontrolname=power]'));
- expect(radioButtons.get(0).getAttribute('value')).toBe('flight');
- expect(radioButtons.get(1).getAttribute('value')).toBe('x-ray vision');
- expect(radioButtons.get(2).getAttribute('value')).toBe('strength');
- });
- it('should show a checkbox', function() {
- let checkbox = element(by.css('input[formcontrolname=sidekick]'));
- expect(checkbox.getAttribute('checked')).toBe(null);
- });
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail-4 > p'));
- expect(json.getText()).toContain('power');
- });
-
-}); // Group with multiple controls demo
-
-
-
-// *************Begin Group with multiple controls Demo test*******************************
-
- describe('Simple FormBuilder Group demo', function() {
- beforeEach(function() {
- let SimpleFormBuilderOption = element.all(by.css('select option')).get(2);
- SimpleFormBuilderOption.click();
- });
-
- it('should show Simple FormBuilder group Demo', function() {
- select.getAttribute('value').then(function(demo: string) {
- expect(demo).toBe('Simple FormBuilder group Demo');
- });
- });
-
- it('should show header', function() {
- let header = element(by.css('app-hero-detail-3 > h3'));
- expect(header.getText()).toBe('A FormGroup with a single FormControl using FormBuilder');
- });
-
- it('should show a form for hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- expect(nameInput.getAttribute('value')).toBe('');
- });
-
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail-3 > p'));
- expect(json.getText()).toContain('name');
- let validStatus = element(by.css('app-hero-detail-3 > p ~ p'));
- expect(validStatus.getText()).toContain('INVALID');
- });
-
-}); // Group with multiple controls demo
-
-
-// *************Begin FormControl in a FormGroup Demo test*******************************
-
- describe('FormControl in a FormGroup demo', function() {
- beforeEach(function() {
- let SimpleFormBuilderOption = element.all(by.css('select option')).get(1);
- SimpleFormBuilderOption.click();
- });
-
- it('should show FormControl in a FormGroup Demo', function() {
- select.getAttribute('value').then(function(demo: string) {
- expect(demo).toBe('FormControl in a FormGroup Demo');
- });
- });
-
- it('should show header', function() {
- let header = element(by.css('app-hero-detail-2 > h3'));
- expect(header.getText()).toBe('FormControl in a FormGroup');
- });
-
- it('should show a form for hero information', function() {
- let nameInput = element(by.css('input[formcontrolname=name]'));
- expect(nameInput.getAttribute('value')).toBe('');
- });
-
- it('shows a json output from the form', function() {
- let json = element(by.css('app-hero-detail-2 > p'));
- expect(json.getText()).toContain('name');
- });
-
-}); // Group with multiple controls demo
-
-// *************Begin Just A FormControl Demo test*******************************
-
- describe('Just a FormControl demo', function() {
- beforeEach(function() {
- let FormControlOption = element.all(by.css('select option')).get(0);
- FormControlOption.click();
- });
-
- it('should show Just a FormControl demo', function() {
- select.getAttribute('value').then(function(demo: string) {
- expect(demo).toBe('Just a FormControl Demo');
- });
- });
-
- it('should show header', function() {
- let header = element(by.css('app-hero-detail-1 > h3'));
- expect(header.getText()).toBe('Just a FormControl');
- });
-
- it('should show a form for hero information', function() {
- let nameInput = element(by.css('input'));
- expect(nameInput.getAttribute('value')).toBe('');
- });
-
- }); // Just a FormControl demo test
-
-
-}); // reactive forms
diff --git a/docs_app/content/examples/reactive-forms/example-config.json b/docs_app/content/examples/reactive-forms/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/reactive-forms/final.stackblitz.json b/docs_app/content/examples/reactive-forms/final.stackblitz.json
deleted file mode 100644
index f789236245..0000000000
--- a/docs_app/content/examples/reactive-forms/final.stackblitz.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "description": "Angular Reactive Forms (final)",
- "files":[
- "src/styles.css",
-
- "src/app/app.component.ts",
- "src/app/app.component.html",
- "src/app/app.component.css",
- "src/app/app.module.ts",
- "src/app/data-model.ts",
- "src/app/hero.service.ts",
- "src/app/hero-detail/hero-detail.component.html",
- "src/app/hero-detail/hero-detail.component.ts",
- "src/app/hero-detail/hero-detail.component.css",
- "src/app/hero-list/hero-list.component.html",
- "src/app/hero-list/hero-list.component.ts",
- "src/app/hero-list/hero-list.component.css",
-
- "src/main-final.ts",
- "src/index-final.html"
- ],
- "main": "src/index-final.html",
- "tags": ["reactive", "forms"]
-}
diff --git a/docs_app/content/examples/reactive-forms/src/app/app.component.1.html b/docs_app/content/examples/reactive-forms/src/app/app.component.1.html
deleted file mode 100644
index 14316fbe62..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/app.component.1.html
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/docs_app/content/examples/reactive-forms/src/app/app.component.css b/docs_app/content/examples/reactive-forms/src/app/app.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/reactive-forms/src/app/app.component.html b/docs_app/content/examples/reactive-forms/src/app/app.component.html
deleted file mode 100644
index b7d0e6d580..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/app.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/docs_app/content/examples/reactive-forms/src/app/app.component.ts b/docs_app/content/examples/reactive-forms/src/app/app.component.ts
deleted file mode 100644
index f7baece9b5..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/app.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/reactive-forms/src/app/app.module.ts b/docs_app/content/examples/reactive-forms/src/app/app.module.ts
deleted file mode 100644
index 39b074c178..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/app.module.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion v1
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { ReactiveFormsModule } from '@angular/forms'; // <-- #1 import module
-
-import { AppComponent } from './app.component';
-import { HeroDetailComponent } from './hero-detail/hero-detail.component';
-// #enddocregion v1
-// #docregion hero-service-list
-// add JavaScript imports
-import { HeroListComponent } from './hero-list/hero-list.component';
-import { HeroService } from './hero.service';
-// #docregion v1
-
-@NgModule({
- declarations: [
- AppComponent,
- HeroDetailComponent,
-// #enddocregion v1
- HeroListComponent // <--declare HeroListComponent
-// #docregion v1
- ],
- // #enddocregion hero-service-list
- imports: [
- BrowserModule,
- ReactiveFormsModule // <-- #2 add to @NgModule imports
- ],
- // #enddocregion v1
- // export for the DemoModule
- // #docregion hero-service-list
- // ...
- exports: [
- AppComponent,
- HeroDetailComponent,
- HeroListComponent // <-- export HeroListComponent
- ],
- providers: [ HeroService ], // <-- provide HeroService
-// #enddocregion hero-service-list
-// #docregion v1
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
-// #enddocregion v1
diff --git a/docs_app/content/examples/reactive-forms/src/app/data-model.ts b/docs_app/content/examples/reactive-forms/src/app/data-model.ts
deleted file mode 100644
index ad01ddee56..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/data-model.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-// #docregion
-// #docregion model-classes
-export class Hero {
- id = 0;
- name = '';
- addresses: Address[];
-}
-
-export class Address {
- street = '';
- city = '';
- state = '';
- zip = '';
-}
-// #enddocregion model-classes
-
-export const heroes: Hero[] = [
- {
- id: 1,
- name: 'Whirlwind',
- addresses: [
- {street: '123 Main', city: 'Anywhere', state: 'CA', zip: '94801'},
- {street: '456 Maple', city: 'Somewhere', state: 'VA', zip: '23226'},
- ]
- },
- {
- id: 2,
- name: 'Bombastic',
- addresses: [
- {street: '789 Elm', city: 'Smallville', state: 'OH', zip: '04501'},
- ]
- },
- {
- id: 3,
- name: 'Magneta',
- addresses: [ ]
- },
-];
-
-export const states = ['CA', 'MD', 'OH', 'VA'];
diff --git a/docs_app/content/examples/reactive-forms/src/app/demo.component.html b/docs_app/content/examples/reactive-forms/src/app/demo.component.html
deleted file mode 100644
index 369427a739..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/demo.component.html
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
Reactive Forms
-
Pick a demo:
-
- {{demo}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
= 6 && demo !== final" >
-
-
Loading heroes ...
-
Select a hero:
-
-
- Refresh
- {{hero.name}}
-
-
-
-
-
Hero Detail
-
Editing: {{selectedHero.name}}
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/reactive-forms/src/app/demo.component.ts b/docs_app/content/examples/reactive-forms/src/app/demo.component.ts
deleted file mode 100644
index 71658e7b6b..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/demo.component.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/* tslint:disable:member-ordering */
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-import { finalize } from 'rxjs/operators';
-
-import { Hero } from './data-model';
-import { HeroService } from './hero.service';
-
-@Component({
- selector: 'app-root',
- templateUrl: './demo.component.html'
-})
-export class DemoComponent {
-
- demos: string[] = [
- 'Just a FormControl',
- 'FormControl in a FormGroup',
- 'Simple FormBuilder group',
- 'Group with multiple controls',
- 'Nested FormBuilder group',
- 'PatchValue',
- 'SetValue',
- 'FormArray',
- 'Final'].map(n => n + ' Demo');
-
- final = this.demos.length;
- demo = this.final; // current demo
-
- heroes: Observable;
- isLoading = false;
- selectedHero: Hero;
-
- constructor(private heroService: HeroService) { }
-
- getHeroes() {
- this.isLoading = true;
- this.heroes = this.heroService.getHeroes().pipe(
- finalize(() => this.isLoading = false)
- );
- this.selectedHero = undefined;
- }
-
- select(hero: Hero) { this.selectedHero = hero; }
-
- selectDemo(demo: number) {
- this.demo = demo + 1;
- this.getHeroes();
- }
-}
diff --git a/docs_app/content/examples/reactive-forms/src/app/demo.module.ts b/docs_app/content/examples/reactive-forms/src/app/demo.module.ts
deleted file mode 100644
index a8b71ab5b6..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/demo.module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { ReactiveFormsModule } from '@angular/forms';
-
-import { AppModule } from './app.module';
-import { DemoComponent } from './demo.component';
-import { HeroDetailComponent1 } from './hero-detail/hero-detail-1.component';
-import { HeroDetailComponent2 } from './hero-detail/hero-detail-2.component';
-import { HeroDetailComponent3 } from './hero-detail/hero-detail-3.component';
-import { HeroDetailComponent4 } from './hero-detail/hero-detail-4.component';
-import { HeroDetailComponent5 } from './hero-detail/hero-detail-5.component';
-import { HeroDetailComponent6 } from './hero-detail/hero-detail-6.component';
-import { HeroDetailComponent7 } from './hero-detail/hero-detail-7.component';
-import { HeroDetailComponent8 } from './hero-detail/hero-detail-8.component';
-
-@NgModule({
- imports: [
- BrowserModule,
- ReactiveFormsModule,
- AppModule,
- ],
- declarations: [ DemoComponent,
- HeroDetailComponent1,
- HeroDetailComponent2,
- HeroDetailComponent3,
- HeroDetailComponent4,
- HeroDetailComponent5,
- HeroDetailComponent6,
- HeroDetailComponent7,
- HeroDetailComponent8],
- bootstrap: [ DemoComponent ]
-})
-export class DemoModule { }
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.html
deleted file mode 100644
index 7217708d22..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
-Hero Detail
-Just a FormControl
-Name:
-
-
-
-
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.ts
deleted file mode 100644
index 7ce88f3522..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/* tslint:disable:component-class-suffix */
-
-import { Component } from '@angular/core';
-// #docregion import
-import { FormControl } from '@angular/forms';
-// #enddocregion import
-
-@Component({
- selector: 'app-hero-detail-1',
- templateUrl: './hero-detail-1.component.html'
-})
-// #docregion v1
-export class HeroDetailComponent1 {
- name = new FormControl();
-}
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.html
deleted file mode 100644
index 79410c4a6d..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.html
+++ /dev/null
@@ -1,18 +0,0 @@
-
-Hero Detail
-FormControl in a FormGroup
-
-
-
-
-Form value: {{ heroForm.value | json }}
-
-
-
-
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.ts
deleted file mode 100644
index 6508904ffa..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/* tslint:disable:component-class-suffix */
-// #docregion imports
-import { Component } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-// #enddocregion imports
-
-@Component({
- selector: 'app-hero-detail-2',
- templateUrl: './hero-detail-2.component.html'
-})
-// #docregion v2
-export class HeroDetailComponent2 {
- heroForm = new FormGroup ({
- name: new FormControl()
- });
-}
-// #enddocregion v2
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.html
deleted file mode 100644
index 89c5513566..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
-Hero Detail
-A FormGroup with a single FormControl using FormBuilder
-
-
-
-
-Form value: {{ heroForm.value | json }}
-Form status: {{ heroForm.status | json }}
-
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.ts
deleted file mode 100644
index 81388c8faa..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/* tslint:disable:component-class-suffix */
-// #docregion imports
-import { Component } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-// #enddocregion imports
-
-@Component({
- selector: 'app-hero-detail-3',
- templateUrl: './hero-detail-3.component.html'
-})
-// #docregion v3
-export class HeroDetailComponent3 {
- heroForm: FormGroup; // <--- heroForm is of type FormGroup
-
- constructor(private fb: FormBuilder) { // <--- inject FormBuilder
- this.createForm();
- }
-
- createForm() {
- // #docregion required
- this.heroForm = this.fb.group({
- name: ['', Validators.required ],
- });
- // #enddocregion required
- }
-}
-// #enddocregion v3
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3a.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3a.component.ts
deleted file mode 100644
index 7cc0b1ca8f..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3a.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/* tslint:disable:component-class-suffix */
-// #docregion imports
-import { Component } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-// #enddocregion imports
-
-@Component({
- selector: 'app-hero-detail-3',
- templateUrl: './hero-detail-3.component.html'
-})
-// #docregion v3a
-export class HeroDetailComponent3 {
- heroForm: FormGroup; // <--- heroForm is of type FormGroup
-
- constructor(private fb: FormBuilder) { // <--- inject FormBuilder
- this.createForm();
- }
-
- createForm() {
- this.heroForm = this.fb.group({
- name: '', // <--- the FormControl called "name"
- });
- }
-}
-// #enddocregion v3a
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.html
deleted file mode 100644
index 8702eeb540..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.html
+++ /dev/null
@@ -1,46 +0,0 @@
-
-Hero Detail
-A FormGroup with multiple FormControls
-
-
-
-Form value: {{ heroForm.value | json }}
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.ts
deleted file mode 100644
index b9a61aa1ea..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/* tslint:disable:component-class-suffix */
-// #docregion imports
-import { Component } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-
-import { states } from '../data-model';
-// #enddocregion imports
-
-@Component({
- selector: 'app-hero-detail-4',
- templateUrl: './hero-detail-4.component.html'
-})
-// #docregion v4
-export class HeroDetailComponent4 {
- heroForm: FormGroup;
- states = states;
-
- constructor(private fb: FormBuilder) {
- this.createForm();
- }
-
- createForm() {
- this.heroForm = this.fb.group({
- name: ['', Validators.required ],
- street: '',
- city: '',
- state: '',
- zip: '',
- power: '',
- sidekick: ''
- });
- }
-}
-// #enddocregion v4
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.html
deleted file mode 100644
index bc73ce006e..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.html
+++ /dev/null
@@ -1,56 +0,0 @@
-
-
-
-heroForm value: {{ heroForm.value | json}}
-Extra info for the curious:
-
-Name value: {{ heroForm.get('name').value }}
-
-
-
-Street value: {{ heroForm.get('address.street').value}}
-
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.ts
deleted file mode 100644
index 1193265c5b..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/* tslint:disable:component-class-suffix */
-import { Component } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-
-import { states } from '../data-model';
-
-@Component({
- selector: 'app-hero-detail-5',
- templateUrl: './hero-detail-5.component.html'
-})
-// #docregion v5
-export class HeroDetailComponent5 {
- heroForm: FormGroup;
- states = states;
-
- constructor(private fb: FormBuilder) {
- this.createForm();
- }
-
- createForm() {
- this.heroForm = this.fb.group({ // <-- the parent FormGroup
- name: ['', Validators.required ],
- address: this.fb.group({ // <-- the child FormGroup
- street: '',
- city: '',
- state: '',
- zip: ''
- }),
- power: '',
- sidekick: ''
- });
- }
-}
-// #enddocregion v5
-
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.html
deleted file mode 100644
index a6f352a9b9..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.html
+++ /dev/null
@@ -1,46 +0,0 @@
-
-Hero Detail
-PatchValue to initialize a value
-
-
-
-Form value: {{ heroForm.value | json }}
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.ts
deleted file mode 100644
index 042b21aaf7..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-/* tslint:disable:component-class-suffix */
-// #docregion import-input
-import { Component, Input, OnChanges } from '@angular/core';
-// #enddocregion import-input
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-
-// #docregion import-hero
-import { Hero, states } from '../data-model';
-// #enddocregion import-hero
-
-////////// 6 ////////////////////
-
-@Component({
- selector: 'app-hero-detail-6',
- templateUrl: './hero-detail-5.component.html'
-})
-// #docregion v6
-export class HeroDetailComponent6 implements OnChanges {
- // #docregion hero
- @Input() hero: Hero;
- // #enddocregion hero
-
- heroForm: FormGroup;
- states = states;
-
- constructor(private fb: FormBuilder) {
- this.createForm();
- }
-
- createForm() {
- // #docregion hero-form-model
- this.heroForm = this.fb.group({
- name: ['', Validators.required ],
- address: this.fb.group({
- street: '',
- city: '',
- state: '',
- zip: ''
- }),
- power: '',
- sidekick: ''
- });
- // #enddocregion hero-form-model
- }
-
- // #docregion patch-value-on-changes
- ngOnChanges() { // <-- call rebuildForm in ngOnChanges
- this.rebuildForm();
- }
- // #enddocregion patch-value-on-changes
-
- // #docregion patch-value-rebuildform
- rebuildForm() { // <-- wrap patchValue in rebuildForm
- this.heroForm.reset();
- // #docregion patch-value
- this.heroForm.patchValue({
- name: this.hero.name
- });
- // #enddocregion patch-value
- }
- // #enddocregion patch-value-rebuildform
-}
-
-
-
-// #enddocregion v6
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.html
deleted file mode 100644
index 57b00ca92c..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.html
+++ /dev/null
@@ -1,46 +0,0 @@
-
-Hero Detail
-A FormGroup with multiple FormControls
-
-
-
-Form value: {{ heroForm.value | json }}
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.ts
deleted file mode 100644
index b70b2e879d..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-/* tslint:disable:component-class-suffix */
-// #docplaster
-// #docregion imports
-import { Component, Input, OnChanges } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-
-// #docregion import-address
-import { Address, Hero, states } from '../data-model';
-// #enddocregion import-address
-
-// #enddocregion imports
-
-@Component({
- selector: 'app-hero-detail-7',
- templateUrl: './hero-detail-5.component.html'
-})
-// #docregion v7
-export class HeroDetailComponent7 implements OnChanges {
- @Input() hero: Hero;
-
- heroForm: FormGroup;
- states = states;
-
- constructor(private fb: FormBuilder) {
- this.createForm();
- }
-
- createForm() {
- // #docregion address-form-group
- this.heroForm = this.fb.group({
- name: ['', Validators.required ],
- address: this.fb.group(new Address()), // <-- a FormGroup with a new address
- power: '',
- sidekick: ''
- });
- // #enddocregion address-form-group
- }
-
- // #docregion ngOnChanges
- ngOnChanges() {
- this.rebuildForm();
- }
- // #enddocregion ngOnChanges
-
- // #docregion rebuildForm
- rebuildForm() {
- this.heroForm.reset({
- name: this.hero.name,
- // #docregion set-value-address
- address: this.hero.addresses[0] || new Address()
- // #enddocregion set-value-address
- });
- }
- // #enddocregion rebuildForm
-
- /* First version of rebuildForm */
- rebuildForm1() {
- // #docregion reset
- this.heroForm.reset();
- // #enddocregion reset
- // #docregion set-value
- this.heroForm.setValue({
- name: this.hero.name,
- address: this.hero.addresses[0] || new Address()
- });
- // #enddocregion set-value
- }
-}
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.html
deleted file mode 100644
index bfb591551e..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.html
+++ /dev/null
@@ -1,72 +0,0 @@
-
-Using FormArray to add groups
-
-
-
-heroForm value: {{ heroForm.value | json}}
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.ts
deleted file mode 100644
index f3e09df7fe..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-/* tslint:disable:component-class-suffix */
-// #docregion imports
-import { Component, Input, OnChanges } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
-
-import { Address, Hero, states } from '../data-model';
-// #enddocregion imports
-
-@Component({
- selector: 'app-hero-detail-8',
- templateUrl: './hero-detail-8.component.html'
-})
-// #docregion v8
-export class HeroDetailComponent8 implements OnChanges {
- @Input() hero: Hero;
-
- heroForm: FormGroup;
- states = states;
-
- // #docregion ctor
- constructor(private fb: FormBuilder) {
- this.createForm();
- this.logNameChange();
- }
- // #enddocregion ctor
-
- createForm() {
- // #docregion secretLairs-form-array
- this.heroForm = this.fb.group({
- name: ['', Validators.required ],
- secretLairs: this.fb.array([]), // <-- secretLairs as an empty FormArray
- power: '',
- sidekick: ''
- });
- // #enddocregion secretLairs-form-array
- }
-
- logNameChange() {/* Coming soon */}
-
- // #docregion onchanges
- ngOnChanges() {
- this.rebuildForm();
- }
- // #enddocregion onchanges
-
- // #docregion rebuildform
- rebuildForm() {
- this.heroForm.reset({
- name: this.hero.name
- });
- this.setAddresses(this.hero.addresses);
- }
-// #enddocregion rebuildform
-
- // #docregion get-secret-lairs
- get secretLairs(): FormArray {
- return this.heroForm.get('secretLairs') as FormArray;
- };
- // #enddocregion get-secret-lairs
-
- // #docregion set-addresses
- setAddresses(addresses: Address[]) {
- const addressFGs = addresses.map(address => this.fb.group(address));
- const addressFormArray = this.fb.array(addressFGs);
- this.heroForm.setControl('secretLairs', addressFormArray);
- }
- // #enddocregion set-addresses
-
- // #docregion add-lair
- addLair() {
- this.secretLairs.push(this.fb.group(new Address()));
- }
- // #enddocregion add-lair
-}
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.css b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.html
deleted file mode 100644
index c5e77ba43d..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.html
+++ /dev/null
@@ -1,73 +0,0 @@
-
-
-
-
-
-
-heroForm value: {{ heroForm.value | json}}
-
-
-Name change log
-{{name}}
-
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.ts
deleted file mode 100644
index 13ef66b0f9..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-// #docplaster
-// #docregion
-import { Component, Input, OnChanges } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
-
-import { Address, Hero, states } from '../data-model';
-// #docregion import-service
-import { HeroService } from '../hero.service';
-// #enddocregion import-service
-
-@Component({
- selector: 'app-hero-detail',
- templateUrl: './hero-detail.component.html',
- styleUrls: ['./hero-detail.component.css']
-})
-
-// #docregion onchanges-implementation
-export class HeroDetailComponent implements OnChanges {
-// #enddocregion onchanges-implementation
- @Input() hero: Hero;
-
- heroForm: FormGroup;
- // #docregion log-name-change
- nameChangeLog: string[] = [];
- // #enddocregion log-name-change
- states = states;
-
- // #docregion ctor
- constructor(
- private fb: FormBuilder,
- private heroService: HeroService) {
-
- this.createForm();
- this.logNameChange();
- }
- // #enddocregion ctor
-
- createForm() {
- this.heroForm = this.fb.group({
- name: '',
- secretLairs: this.fb.array([]),
- power: '',
- sidekick: ''
- });
- }
-
- ngOnChanges() {
- this.rebuildForm();
- }
-
- rebuildForm() {
- this.heroForm.reset({
- name: this.hero.name
- });
- this.setAddresses(this.hero.addresses);
- }
-
- get secretLairs(): FormArray {
- return this.heroForm.get('secretLairs') as FormArray;
- };
-
- setAddresses(addresses: Address[]) {
- const addressFGs = addresses.map(address => this.fb.group(address));
- const addressFormArray = this.fb.array(addressFGs);
- this.heroForm.setControl('secretLairs', addressFormArray);
- }
-
- addLair() {
- this.secretLairs.push(this.fb.group(new Address()));
- }
-
- // #docregion on-submit
- onSubmit() {
- this.hero = this.prepareSaveHero();
- this.heroService.updateHero(this.hero).subscribe(/* error handling */);
- this.rebuildForm();
- }
- // #enddocregion on-submit
-
- // #docregion prepare-save-hero
- prepareSaveHero(): Hero {
- const formModel = this.heroForm.value;
-
- // deep copy of form model lairs
- const secretLairsDeepCopy: Address[] = formModel.secretLairs.map(
- (address: Address) => Object.assign({}, address)
- );
-
- // return new `Hero` object containing a combination of original hero value(s)
- // and deep copies of changed form model values
- const saveHero: Hero = {
- id: this.hero.id,
- name: formModel.name as string,
- // addresses: formModel.secretLairs // <-- bad!
- addresses: secretLairsDeepCopy
- };
- return saveHero;
- }
- // #enddocregion prepare-save-hero
-
- // #docregion revert
- revert() { this.rebuildForm(); }
- // #enddocregion revert
-
- // #docregion log-name-change
- logNameChange() {
- const nameControl = this.heroForm.get('name');
- nameControl.valueChanges.forEach(
- (value: string) => this.nameChangeLog.push(value)
- );
- }
- // #enddocregion log-name-change
-}
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.1.html b/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.1.html
deleted file mode 100644
index 409c9b2a5c..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.1.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
- {{hero.name}}
-
-
-
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.css b/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.html b/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.html
deleted file mode 100644
index 78356caeb2..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-Loading heroes ...
-Select a hero:
-
-
- Refresh
- {{hero.name}}
-
-
-
-
-
Hero Detail
-
Editing: {{selectedHero.name}}
-
-
-
-
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.ts b/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.ts
deleted file mode 100644
index c310fb8dd8..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero-list/hero-list.component.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-import { finalize } from 'rxjs/operators';
-
-import { Hero } from '../data-model';
-import { HeroService } from '../hero.service';
-
-@Component({
- selector: 'app-hero-list',
- templateUrl: './hero-list.component.html',
- styleUrls: ['./hero-list.component.css']
-})
-export class HeroListComponent implements OnInit {
- heroes: Observable;
- isLoading = false;
- selectedHero: Hero;
-
- constructor(private heroService: HeroService) { }
-
- ngOnInit() { this.getHeroes(); }
-
- getHeroes() {
- this.isLoading = true;
- this.heroes = this.heroService.getHeroes()
- // Todo: error handling
- .pipe(finalize(() => this.isLoading = false));
- this.selectedHero = undefined;
- }
-
- select(hero: Hero) { this.selectedHero = hero; }
-}
diff --git a/docs_app/content/examples/reactive-forms/src/app/hero.service.ts b/docs_app/content/examples/reactive-forms/src/app/hero.service.ts
deleted file mode 100644
index ff1caf064a..0000000000
--- a/docs_app/content/examples/reactive-forms/src/app/hero.service.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-import { Observable, of } from 'rxjs';
-import { delay } from 'rxjs/operators';
-
-import { Hero, heroes } from './data-model';
-
-@Injectable()
-export class HeroService {
-
- delayMs = 500;
-
- // Fake server get; assume nothing can go wrong
- getHeroes(): Observable {
- return of(heroes).pipe(delay(this.delayMs)); // simulate latency with delay
- }
-
- // Fake server update; assume nothing can go wrong
- updateHero(hero: Hero): Observable {
- const oldHero = heroes.find(h => h.id === hero.id);
- const newHero = Object.assign(oldHero, hero); // Demo: mutate cached hero
- return of(newHero).pipe(delay(this.delayMs)); // simulate latency with delay
- }
-}
diff --git a/docs_app/content/examples/reactive-forms/src/index-final.html b/docs_app/content/examples/reactive-forms/src/index-final.html
deleted file mode 100644
index 13416ffe40..0000000000
--- a/docs_app/content/examples/reactive-forms/src/index-final.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
-
-
- Hero Form
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/reactive-forms/src/index.html b/docs_app/content/examples/reactive-forms/src/index.html
deleted file mode 100644
index 7121ad3455..0000000000
--- a/docs_app/content/examples/reactive-forms/src/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
- Hero Form
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/reactive-forms/src/main-final.ts b/docs_app/content/examples/reactive-forms/src/main-final.ts
deleted file mode 100644
index 0a1ea31596..0000000000
--- a/docs_app/content/examples/reactive-forms/src/main-final.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// tslint:disable:no-unused-variable
-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);
-
diff --git a/docs_app/content/examples/reactive-forms/src/main.ts b/docs_app/content/examples/reactive-forms/src/main.ts
deleted file mode 100644
index bd1865a45b..0000000000
--- a/docs_app/content/examples/reactive-forms/src/main.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// tslint:disable:no-unused-variable
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module'; // just the final version
-import { DemoModule } from './app/demo.module'; // demo picker
-import { environment } from './environments/environment';
-
-if (environment.production) {
- enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(DemoModule);
diff --git a/docs_app/content/examples/reactive-forms/src/styles.1.css b/docs_app/content/examples/reactive-forms/src/styles.1.css
deleted file mode 100644
index 167a66be4f..0000000000
--- a/docs_app/content/examples/reactive-forms/src/styles.1.css
+++ /dev/null
@@ -1 +0,0 @@
-@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');
diff --git a/docs_app/content/examples/reactive-forms/stackblitz.json b/docs_app/content/examples/reactive-forms/stackblitz.json
deleted file mode 100644
index 2b325c037b..0000000000
--- a/docs_app/content/examples/reactive-forms/stackblitz.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "description": "Angular Reactive Forms (Demo runner)",
- "files":[
- "!**/*.d.ts",
- "!**/*.js",
-
- "!src/app/app.component.1.ts",
- "!src/app/hero-list.component.1.html",
-
- "!src/app/main-final.ts",
- "!src/index-final.html"
- ],
- "tags": ["reactive", "forms"]
-}
diff --git a/docs_app/content/examples/router/e2e/app.e2e-spec.ts b/docs_app/content/examples/router/e2e/app.e2e-spec.ts
deleted file mode 100644
index f5493caea4..0000000000
--- a/docs_app/content/examples/router/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by, ExpectedConditions } from 'protractor';
-
-const numDashboardTabs = 5;
-const numCrises = 4;
-const numHeroes = 6;
-const EC = ExpectedConditions;
-
-describe('Router', () => {
-
- beforeAll(() => browser.get(''));
-
- function getPageStruct() {
- const hrefEles = element.all(by.css('app-root > nav a'));
- const crisisDetail = element.all(by.css('app-root > ng-component > ng-component > ng-component > div')).first();
- const heroDetail = element(by.css('app-root > ng-component > div'));
-
- return {
- hrefs: hrefEles,
- activeHref: element(by.css('app-root > nav a.active')),
-
- crisisHref: hrefEles.get(0),
- crisisList: element.all(by.css('app-root > ng-component > ng-component li')),
- crisisDetail: crisisDetail,
- crisisDetailTitle: crisisDetail.element(by.xpath('*[1]')),
-
- heroesHref: hrefEles.get(1),
- heroesList: element.all(by.css('app-root > ng-component li')),
- heroDetail: heroDetail,
- heroDetailTitle: heroDetail.element(by.xpath('*[1]')),
-
- adminHref: hrefEles.get(2),
- adminPreloadList: element.all(by.css('app-root > ng-component > ng-component > ul > li')),
-
- loginHref: hrefEles.get(3),
- loginButton: element.all(by.css('app-root > ng-component > p > button')),
-
- contactHref: hrefEles.get(4),
- contactCancelButton: element.all(by.buttonText('Cancel')),
-
- outletComponents: element.all(by.css('app-root > ng-component'))
- };
- }
-
- it('has expected dashboard tabs', () => {
- const page = getPageStruct();
- expect(page.hrefs.count()).toEqual(numDashboardTabs, 'dashboard tab count');
- expect(page.crisisHref.getText()).toEqual('Crisis Center');
- expect(page.heroesHref.getText()).toEqual('Heroes');
- expect(page.adminHref.getText()).toEqual('Admin');
- expect(page.loginHref.getText()).toEqual('Login');
- expect(page.contactHref.getText()).toEqual('Contact');
- });
-
- it('has heroes selected as opening tab', () => {
- const page = getPageStruct();
- expect(page.activeHref.getText()).toEqual('Heroes');
- });
-
- it('has crises center items', async () => {
- const page = getPageStruct();
- await page.crisisHref.click();
- expect(page.activeHref.getText()).toEqual('Crisis Center');
- expect(page.crisisList.count()).toBe(numCrises, 'crisis list count');
- });
-
- it('has hero items', async () => {
- const page = getPageStruct();
- await page.heroesHref.click();
- expect(page.activeHref.getText()).toEqual('Heroes');
- expect(page.heroesList.count()).toBe(numHeroes, 'hero list count');
- });
-
- it('toggles views', async () => {
- const page = getPageStruct();
- await page.crisisHref.click();
- expect(page.activeHref.getText()).toEqual('Crisis Center');
- expect(page.crisisList.count()).toBe(numCrises, 'crisis list count');
- await page.heroesHref.click();
- expect(page.activeHref.getText()).toEqual('Heroes');
- expect(page.heroesList.count()).toBe(numHeroes, 'hero list count');
- });
-
- it('saves changed crisis details', async () => {
- const page = getPageStruct();
- await page.crisisHref.click();
- await crisisCenterEdit(2, true);
- });
-
- it('can cancel changed crisis details', async () => {
- const page = getPageStruct();
- await page.crisisHref.click();
- await crisisCenterEdit(3, false);
- });
-
- it('saves changed hero details', async () => {
- const page = getPageStruct();
- await page.heroesHref.click();
- const heroEle = page.heroesList.get(4);
- let text = await heroEle.getText();
- expect(text.length).toBeGreaterThan(0, 'hero item text length');
- // remove leading id from text
- const heroText = text.substr(text.indexOf(' ')).trim();
-
- await heroEle.click();
- expect(page.heroesList.count()).toBe(0, 'hero list count');
- expect(page.heroDetail.isPresent()).toBe(true, 'hero detail');
- expect(page.heroDetailTitle.getText()).toContain(heroText);
- let inputEle = page.heroDetail.element(by.css('input'));
- await inputEle.sendKeys('-foo');
- expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo');
-
- let buttonEle = page.heroDetail.element(by.css('button'));
- await buttonEle.click();
- expect(heroEle.getText()).toContain(heroText + '-foo');
- });
-
- it('sees preloaded modules', async () => {
- const page = getPageStruct();
- await page.loginHref.click();
- await page.loginButton.click();
- const list = page.adminPreloadList;
- expect(list.count()).toBe(1, 'preloaded module');
- expect(await list.first().getText()).toBe('crisis-center', 'first preloaded module');
- });
-
- it('sees the secondary route', async () => {
- const page = getPageStruct();
- await page.heroesHref.click();
- await page.contactHref.click();
- expect(page.outletComponents.count()).toBe(2, 'route count');
- });
-
- async function crisisCenterEdit(index: number, save: boolean) {
- const page = getPageStruct();
- await page.crisisHref.click();
- let crisisEle = page.crisisList.get(index);
- let text = await crisisEle.getText();
- expect(text.length).toBeGreaterThan(0, 'crisis item text length');
- // remove leading id from text
- const crisisText = text.substr(text.indexOf(' ')).trim();
-
- await crisisEle.click();
- expect(page.crisisDetail.isPresent()).toBe(true, 'crisis detail present');
- expect(page.crisisDetailTitle.getText()).toContain(crisisText);
- let inputEle = page.crisisDetail.element(by.css('input'));
- await inputEle.sendKeys('-foo');
-
- let buttonEle = page.crisisDetail.element(by.buttonText(save ? 'Save' : 'Cancel'));
- await buttonEle.click();
- crisisEle = page.crisisList.get(index);
- if (save) {
- expect(crisisEle.getText()).toContain(crisisText + '-foo');
- } else {
- await browser.wait(EC.alertIsPresent(), 4000);
- await browser.switchTo().alert().accept();
- expect(crisisEle.getText()).toContain(crisisText);
- }
- }
-
-});
diff --git a/docs_app/content/examples/router/example-config.json b/docs_app/content/examples/router/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.1.ts b/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.1.ts
deleted file mode 100644
index ffa3e3cb8f..0000000000
--- a/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.1.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- template: `
- Dashboard
- `
-})
-export class AdminDashboardComponent { }
diff --git a/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.2.ts b/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.2.ts
deleted file mode 100644
index 19406bea9b..0000000000
--- a/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.2.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-@Component({
- template: `
- Dashboard
-
- Session ID: {{ sessionId | async }}
-
- Token: {{ token | async }}
- `
-})
-export class AdminDashboardComponent implements OnInit {
- sessionId: Observable;
- token: Observable;
-
- constructor(private route: ActivatedRoute) {}
-
- ngOnInit() {
- // Capture the session ID if available
- this.sessionId = this.route
- .queryParamMap
- .pipe(map(params => params.get('session_id') || 'None'));
-
- // Capture the fragment if available
- this.token = this.route
- .fragment
- .pipe(map(fragment => fragment || 'None'));
- }
-}
diff --git a/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.ts b/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.ts
deleted file mode 100644
index 11be8fd029..0000000000
--- a/docs_app/content/examples/router/src/app/admin/admin-dashboard.component.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { SelectivePreloadingStrategy } from '../selective-preloading-strategy';
-
-
-@Component({
- template: `
- Dashboard
-
- Session ID: {{ sessionId | async }}
-
- Token: {{ token | async }}
-
- Preloaded Modules
-
- `
-})
-export class AdminDashboardComponent implements OnInit {
- sessionId: Observable;
- token: Observable;
- modules: string[];
-
- constructor(
- private route: ActivatedRoute,
- private preloadStrategy: SelectivePreloadingStrategy
- ) {
- this.modules = preloadStrategy.preloadedModules;
- }
-
- ngOnInit() {
- // Capture the session ID if available
- this.sessionId = this.route
- .queryParamMap
- .pipe(map(params => params.get('session_id') || 'None'));
-
- // Capture the fragment if available
- this.token = this.route
- .fragment
- .pipe(map(fragment => fragment || 'None'));
- }
-}
diff --git a/docs_app/content/examples/router/src/app/admin/admin-routing.module.1.ts b/docs_app/content/examples/router/src/app/admin/admin-routing.module.1.ts
deleted file mode 100644
index e7d83f113f..0000000000
--- a/docs_app/content/examples/router/src/app/admin/admin-routing.module.1.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } 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 }
- ]
- }
- ]
- }
-];
-
-@NgModule({
- imports: [
- RouterModule.forChild(adminRoutes)
- ],
- exports: [
- RouterModule
- ]
-})
-export class AdminRoutingModule {}
-// #enddocregion admin-routes
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/admin/admin-routing.module.2.ts b/docs_app/content/examples/router/src/app/admin/admin-routing.module.2.ts
deleted file mode 100644
index d945201afe..0000000000
--- a/docs_app/content/examples/router/src/app/admin/admin-routing.module.2.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } 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: 'admin',
- component: AdminComponent,
- canActivate: [AuthGuard],
- children: [
- {
- path: '',
- children: [
- { path: 'crises', component: ManageCrisesComponent },
- { path: 'heroes', component: ManageHeroesComponent },
- { path: '', component: AdminDashboardComponent }
- ],
- // #enddocregion admin-route
- canActivateChild: [AuthGuard]
- // #docregion admin-route
- }
- ]
- }
-];
-
-@NgModule({
- imports: [
- RouterModule.forChild(adminRoutes)
- ],
- exports: [
- RouterModule
- ]
-})
-export class AdminRoutingModule {}
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/admin/admin-routing.module.3.ts b/docs_app/content/examples/router/src/app/admin/admin-routing.module.3.ts
deleted file mode 100644
index 63f1c9aaf4..0000000000
--- a/docs_app/content/examples/router/src/app/admin/admin-routing.module.3.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } 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 }
- ]
- }
- ]
- }
-];
-
-@NgModule({
- imports: [
- RouterModule.forChild(adminRoutes)
- ],
- exports: [
- RouterModule
- ]
-})
-export class AdminRoutingModule {}
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/admin/admin-routing.module.ts b/docs_app/content/examples/router/src/app/admin/admin-routing.module.ts
deleted file mode 100644
index 2b1048d110..0000000000
--- a/docs_app/content/examples/router/src/app/admin/admin-routing.module.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } 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';
-
-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 }
- ]
- }
- ]
- }
-];
-
-@NgModule({
- imports: [
- RouterModule.forChild(adminRoutes)
- ],
- exports: [
- RouterModule
- ]
-})
-export class AdminRoutingModule {}
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/admin/admin.component.ts b/docs_app/content/examples/router/src/app/admin/admin.component.ts
deleted file mode 100644
index 30abfa4524..0000000000
--- a/docs_app/content/examples/router/src/app/admin/admin.component.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- template: `
- ADMIN
-
- Dashboard
- Manage Crises
- Manage Heroes
-
-
- `
-})
-export class AdminComponent {
-}
diff --git a/docs_app/content/examples/router/src/app/admin/admin.module.ts b/docs_app/content/examples/router/src/app/admin/admin.module.ts
deleted file mode 100644
index 2736f00e1d..0000000000
--- a/docs_app/content/examples/router/src/app/admin/admin.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { AdminComponent } from './admin.component';
-import { AdminDashboardComponent } from './admin-dashboard.component';
-import { ManageCrisesComponent } from './manage-crises.component';
-import { ManageHeroesComponent } from './manage-heroes.component';
-
-import { AdminRoutingModule } from './admin-routing.module';
-
-@NgModule({
- imports: [
- CommonModule,
- AdminRoutingModule
- ],
- declarations: [
- AdminComponent,
- AdminDashboardComponent,
- ManageCrisesComponent,
- ManageHeroesComponent
- ]
-})
-export class AdminModule {}
diff --git a/docs_app/content/examples/router/src/app/admin/manage-crises.component.ts b/docs_app/content/examples/router/src/app/admin/manage-crises.component.ts
deleted file mode 100644
index d3176563eb..0000000000
--- a/docs_app/content/examples/router/src/app/admin/manage-crises.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- template: `
- Manage your crises here
- `
-})
-export class ManageCrisesComponent { }
diff --git a/docs_app/content/examples/router/src/app/admin/manage-heroes.component.ts b/docs_app/content/examples/router/src/app/admin/manage-heroes.component.ts
deleted file mode 100644
index 7f3a39893d..0000000000
--- a/docs_app/content/examples/router/src/app/admin/manage-heroes.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- template: `
- Manage your heroes here
- `
-})
-export class ManageHeroesComponent { }
diff --git a/docs_app/content/examples/router/src/app/animations.ts b/docs_app/content/examples/router/src/app/animations.ts
deleted file mode 100644
index 39a0b1840a..0000000000
--- a/docs_app/content/examples/router/src/app/animations.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// #docregion
-import { animate, state, style, transition, trigger } from '@angular/animations';
-
-// Component transition animations
-export const slideInDownAnimation =
- trigger('routeAnimation', [
- state('*',
- style({
- opacity: 1,
- transform: 'translateX(0)'
- })
- ),
- transition(':enter', [
- style({
- opacity: 0,
- transform: 'translateX(-100%)'
- }),
- animate('0.2s ease-in')
- ]),
- transition(':leave', [
- animate('0.5s ease-out', style({
- opacity: 0,
- transform: 'translateY(100%)'
- }))
- ])
- ]);
diff --git a/docs_app/content/examples/router/src/app/app-routing.module.1.ts b/docs_app/content/examples/router/src/app/app-routing.module.1.ts
deleted file mode 100644
index 436291f499..0000000000
--- a/docs_app/content/examples/router/src/app/app-routing.module.1.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { CrisisListComponent } from './crisis-list.component';
-import { HeroListComponent } from './hero-list.component';
-import { PageNotFoundComponent } from './not-found.component';
-
-// #docregion appRoutes
-const appRoutes: Routes = [
- { path: 'crisis-center', component: CrisisListComponent },
- { path: 'heroes', component: HeroListComponent },
- { path: '', redirectTo: '/heroes', pathMatch: 'full' },
- { path: '**', component: PageNotFoundComponent }
-];
-// #enddocregion appRoutes
-
-@NgModule({
- imports: [
- RouterModule.forRoot(
- appRoutes,
- { enableTracing: true } // <-- debugging purposes only
- )
- ],
- exports: [
- RouterModule
- ]
-})
-export class AppRoutingModule {}
diff --git a/docs_app/content/examples/router/src/app/app-routing.module.2.ts b/docs_app/content/examples/router/src/app/app-routing.module.2.ts
deleted file mode 100644
index c4df89d7f8..0000000000
--- a/docs_app/content/examples/router/src/app/app-routing.module.2.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { CrisisListComponent } from './crisis-list.component';
-// import { HeroListComponent } from './hero-list.component'; // <-- delete this line
-import { PageNotFoundComponent } from './not-found.component';
-
-const appRoutes: Routes = [
- { path: 'crisis-center', component: CrisisListComponent },
- // { path: 'heroes', component: HeroListComponent }, // <-- delete this line
- { path: '', redirectTo: '/heroes', pathMatch: 'full' },
- { path: '**', component: PageNotFoundComponent }
-];
-
-@NgModule({
- imports: [
- RouterModule.forRoot(
- appRoutes,
- { enableTracing: true } // <-- debugging purposes only
- )
- ],
- exports: [
- RouterModule
- ]
-})
-export class AppRoutingModule {}
diff --git a/docs_app/content/examples/router/src/app/app-routing.module.3.ts b/docs_app/content/examples/router/src/app/app-routing.module.3.ts
deleted file mode 100644
index 354ca6e740..0000000000
--- a/docs_app/content/examples/router/src/app/app-routing.module.3.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-// #docplaster
-// #docregion , v3
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { ComposeMessageComponent } from './compose-message.component';
-import { PageNotFoundComponent } from './not-found.component';
-
-const appRoutes: Routes = [
-// #enddocregion v3
-// #docregion compose
- {
- path: 'compose',
- component: ComposeMessageComponent,
- outlet: 'popup'
- },
-// #enddocregion compose
-// #docregion v3
- { path: '', redirectTo: '/heroes', pathMatch: 'full' },
- { path: '**', component: PageNotFoundComponent }
-];
-
-@NgModule({
- imports: [
- RouterModule.forRoot(
- appRoutes,
- { enableTracing: true } // <-- debugging purposes only
- )
- ],
- exports: [
- RouterModule
- ]
-})
-export class AppRoutingModule {}
diff --git a/docs_app/content/examples/router/src/app/app-routing.module.4.ts b/docs_app/content/examples/router/src/app/app-routing.module.4.ts
deleted file mode 100644
index 9c0d7bb928..0000000000
--- a/docs_app/content/examples/router/src/app/app-routing.module.4.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { ComposeMessageComponent } from './compose-message.component';
-import { CanDeactivateGuard } from './can-deactivate-guard.service';
-import { PageNotFoundComponent } from './not-found.component';
-
-const appRoutes: Routes = [
- {
- path: 'compose',
- component: ComposeMessageComponent,
- outlet: 'popup'
- },
- { path: '', redirectTo: '/heroes', pathMatch: 'full' },
- { path: '**', component: PageNotFoundComponent }
-];
-
-@NgModule({
- imports: [
- RouterModule.forRoot(
- appRoutes,
- { enableTracing: true } // <-- debugging purposes only
- )
- ],
- exports: [
- RouterModule
- ],
- providers: [
- CanDeactivateGuard
- ]
-})
-export class AppRoutingModule {}
diff --git a/docs_app/content/examples/router/src/app/app-routing.module.5.ts b/docs_app/content/examples/router/src/app/app-routing.module.5.ts
deleted file mode 100644
index a12bd2cc7e..0000000000
--- a/docs_app/content/examples/router/src/app/app-routing.module.5.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-// #docregion import-router
-import { RouterModule, Routes } from '@angular/router';
-// #enddocregion import-router
-
-import { ComposeMessageComponent } from './compose-message.component';
-import { PageNotFoundComponent } from './not-found.component';
-
-import { CanDeactivateGuard } from './can-deactivate-guard.service';
-import { AuthGuard } from './auth-guard.service';
-
-
-const appRoutes: Routes = [
- {
- path: 'compose',
- component: ComposeMessageComponent,
- outlet: 'popup'
- },
-// #docregion admin, admin-1
- {
- path: 'admin',
- loadChildren: 'app/admin/admin.module#AdminModule',
-// #enddocregion admin-1
- canLoad: [AuthGuard]
-// #docregion admin-1
- },
-// #enddocregion admin, admin-1
- { path: '', redirectTo: '/heroes', pathMatch: 'full' },
- { path: '**', component: PageNotFoundComponent }
-];
-
-@NgModule({
- imports: [
- RouterModule.forRoot(
- appRoutes,
- { enableTracing: true } // <-- debugging purposes only
- )
- ],
- exports: [
- RouterModule
- ],
- providers: [
- CanDeactivateGuard
- ]
-})
-export class AppRoutingModule {}
diff --git a/docs_app/content/examples/router/src/app/app-routing.module.6.ts b/docs_app/content/examples/router/src/app/app-routing.module.6.ts
deleted file mode 100644
index 83a6ab3521..0000000000
--- a/docs_app/content/examples/router/src/app/app-routing.module.6.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-// #docplaster
-// #docregion, preload-v1
-import { NgModule } from '@angular/core';
-import {
- RouterModule, Routes,
-// #enddocregion preload-v1
- PreloadAllModules
-// #docregion preload-v1
-} from '@angular/router';
-
-import { ComposeMessageComponent } from './compose-message.component';
-import { PageNotFoundComponent } from './not-found.component';
-
-import { CanDeactivateGuard } from './can-deactivate-guard.service';
-import { AuthGuard } from './auth-guard.service';
-
-const appRoutes: Routes = [
- {
- path: 'compose',
- component: ComposeMessageComponent,
- outlet: 'popup'
- },
- {
- path: 'admin',
- loadChildren: 'app/admin/admin.module#AdminModule',
- canLoad: [AuthGuard]
- },
- {
- path: 'crisis-center',
- loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
- },
- { path: '', redirectTo: '/heroes', pathMatch: 'full' },
- { path: '**', component: PageNotFoundComponent }
-];
-
-@NgModule({
- imports: [
- // #docregion forRoot
- RouterModule.forRoot(
- appRoutes,
- // #enddocregion preload-v1
- {
- enableTracing: true, // <-- debugging purposes only
- preloadingStrategy: PreloadAllModules
- }
- // #docregion preload-v1
- )
- // #enddocregion forRoot
- ],
- exports: [
- RouterModule
- ],
- providers: [
- CanDeactivateGuard
- ]
-})
-export class AppRoutingModule {}
diff --git a/docs_app/content/examples/router/src/app/app-routing.module.ts b/docs_app/content/examples/router/src/app/app-routing.module.ts
deleted file mode 100644
index be5dd1d5c9..0000000000
--- a/docs_app/content/examples/router/src/app/app-routing.module.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-// #docplaster
-// #docregion, preload-v1
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { ComposeMessageComponent } from './compose-message.component';
-import { PageNotFoundComponent } from './not-found.component';
-
-import { CanDeactivateGuard } from './can-deactivate-guard.service';
-import { AuthGuard } from './auth-guard.service';
-import { SelectivePreloadingStrategy } from './selective-preloading-strategy';
-
-const appRoutes: Routes = [
- {
- path: 'compose',
- component: ComposeMessageComponent,
- outlet: 'popup'
- },
- {
- path: 'admin',
- loadChildren: 'app/admin/admin.module#AdminModule',
- canLoad: [AuthGuard]
- },
- // #docregion preload-v2
- {
- path: 'crisis-center',
- loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
- data: { preload: true }
- },
- // #enddocregion preload-v2
- { path: '', redirectTo: '/superheroes', pathMatch: 'full' },
- { path: '**', component: PageNotFoundComponent }
-];
-
-@NgModule({
- imports: [
- RouterModule.forRoot(
- appRoutes,
- {
- enableTracing: true, // <-- debugging purposes only
- preloadingStrategy: SelectivePreloadingStrategy,
-
- }
- )
- ],
- exports: [
- RouterModule
- ],
- providers: [
- CanDeactivateGuard,
- SelectivePreloadingStrategy
- ]
-})
-export class AppRoutingModule { }
diff --git a/docs_app/content/examples/router/src/app/app.component.1.ts b/docs_app/content/examples/router/src/app/app.component.1.ts
deleted file mode 100644
index c6fe6d2a77..0000000000
--- a/docs_app/content/examples/router/src/app/app.component.1.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/* First version */
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- // #docregion template
- template: `
- Angular Router
-
- Crisis Center
- Heroes
-
-
- `
- // #enddocregion template
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/router/src/app/app.component.2.ts b/docs_app/content/examples/router/src/app/app.component.2.ts
deleted file mode 100644
index e705183911..0000000000
--- a/docs_app/content/examples/router/src/app/app.component.2.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/* Second Heroes version */
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- template: `
- Angular Router
-
- Crisis Center
- Heroes
-
-
- `
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/router/src/app/app.component.3.ts b/docs_app/content/examples/router/src/app/app.component.3.ts
deleted file mode 100644
index a8d8e0de0c..0000000000
--- a/docs_app/content/examples/router/src/app/app.component.3.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/* tslint:disable:no-unused-variable */
-// #docplaster
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-
-@Component({
- selector: 'app-root',
- /* Typical link
- // #docregion h-anchor
- Heroes
- // #enddocregion h-anchor
- */
- /* Incomplete Crisis Center link when CC lacks a default
- // #docregion cc-anchor-fail
- // The link now fails with a "non-terminal link" error
- // #docregion cc-anchor-w-default
- Crisis Center
- // #enddocregion cc-anchor-w-default
- // #enddocregion cc-anchor-fail
- */
- /* Crisis Center link when CC lacks a default
- // #docregion cc-anchor-no-default
- Crisis Center
- // #enddocregion cc-anchor-no-default
- */
- /* Crisis Center Detail link
- // #docregion Dragon-anchor
- Dragon Crisis
- // #enddocregion Dragon-anchor
- */
- /* Crisis Center link with optional query params
- // #docregion cc-query-params
- Crisis Center
- // #enddocregion cc-query-params
- */
-// #docregion template
- template: `
- Angular Router
-
- Crisis Center
- Dragon Crisis
- Shark Crisis
-
-
- `
-// #enddocregion template
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/router/src/app/app.component.4.ts b/docs_app/content/examples/router/src/app/app.component.4.ts
deleted file mode 100644
index a51b792a78..0000000000
--- a/docs_app/content/examples/router/src/app/app.component.4.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- // #docregion template
- template: `
- Angular Router
-
- Crisis Center
- Heroes
- // #docregion contact-link
- Contact
- // #enddocregion contact-link
-
- // #docregion outlets
-
-
- // #enddocregion outlets
- `
- // #enddocregion template
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/router/src/app/app.component.5.ts b/docs_app/content/examples/router/src/app/app.component.5.ts
deleted file mode 100644
index dc7ebcf58b..0000000000
--- a/docs_app/content/examples/router/src/app/app.component.5.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- // #docregion template
- template: `
- Angular Router
-
- Crisis Center
- Heroes
- Admin
- Contact
-
-
-
- `
- // #enddocregion template
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/router/src/app/app.component.6.ts b/docs_app/content/examples/router/src/app/app.component.6.ts
deleted file mode 100644
index d67ddfb728..0000000000
--- a/docs_app/content/examples/router/src/app/app.component.6.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- // #docregion template
- template: `
- Angular Router
-
- Crisis Center
- Heroes
- Admin
- Login
- Contact
-
-
-
- `
- // #enddocregion template
-})
-export class AppComponent {
-}
diff --git a/docs_app/content/examples/router/src/app/app.component.ts b/docs_app/content/examples/router/src/app/app.component.ts
deleted file mode 100644
index 70cdf8cba0..0000000000
--- a/docs_app/content/examples/router/src/app/app.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- // #docregion template
- template: `
- Angular Router
-
- Crisis Center
- Heroes
- Admin
- Login
- Contact
-
-
-
- `
- // #enddocregion template
-})
-export class AppComponent {
-}
diff --git a/docs_app/content/examples/router/src/app/app.module.0.ts b/docs_app/content/examples/router/src/app/app.module.0.ts
deleted file mode 100644
index 5d14073b1b..0000000000
--- a/docs_app/content/examples/router/src/app/app.module.0.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// NEVER USED. For docs only. Should compile though
-// #docplaster
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-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';
-
-// #docregion
-const appRoutes: Routes = [
- { path: 'crisis-center', component: CrisisListComponent },
- { path: 'hero/:id', component: HeroDetailComponent },
- {
- path: 'heroes',
- component: HeroListComponent,
- data: { title: 'Heroes List' }
- },
- { path: '',
- redirectTo: '/heroes',
- pathMatch: 'full'
- },
- { path: '**', component: PageNotFoundComponent }
-];
-
-@NgModule({
- imports: [
- RouterModule.forRoot(
- appRoutes,
- { enableTracing: true } // <-- debugging purposes only
- )
- // other imports here
- ],
-// #enddocregion
-/*
-// #docregion
- ...
-})
-export class AppModule { }
-// #enddocregion
-*/
-})
-export class AppModule0 { }
diff --git a/docs_app/content/examples/router/src/app/app.module.1.ts b/docs_app/content/examples/router/src/app/app.module.1.ts
deleted file mode 100644
index e83e299a16..0000000000
--- a/docs_app/content/examples/router/src/app/app.module.1.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion first-config
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-// #docregion import-router
-import { RouterModule, Routes } from '@angular/router';
-// #enddocregion import-router
-
-import { AppComponent } from './app.component';
-import { CrisisListComponent } from './crisis-list.component';
-import { HeroListComponent } from './hero-list.component';
-// #enddocregion first-config
-import { PageNotFoundComponent } from './not-found.component';
-// #docregion first-config
-
-// #docregion appRoutes
-const appRoutes: Routes = [
- { path: 'crisis-center', component: CrisisListComponent },
- { path: 'heroes', component: HeroListComponent },
-// #enddocregion first-config
-
- { path: '', redirectTo: '/heroes', pathMatch: 'full' },
-// #docregion wildcard
- { path: '**', component: PageNotFoundComponent }
-// #enddocregion wildcard
-// #docregion first-config
-];
-// #enddocregion appRoutes
-
-@NgModule({
- imports: [
- BrowserModule,
- FormsModule,
- RouterModule.forRoot(
- appRoutes,
- { enableTracing: true } // <-- debugging purposes only
- )
- ],
- declarations: [
- AppComponent,
- HeroListComponent,
- CrisisListComponent,
-// #enddocregion first-config
- PageNotFoundComponent
-// #docregion first-config
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/app.module.2.ts b/docs_app/content/examples/router/src/app/app.module.2.ts
deleted file mode 100644
index 2ba739168c..0000000000
--- a/docs_app/content/examples/router/src/app/app.module.2.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion hero-import
-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 { CrisisListComponent } from './crisis-list.component';
-import { HeroListComponent } from './hero-list.component';
-import { PageNotFoundComponent } from './not-found.component';
-
-@NgModule({
- imports: [
- BrowserModule,
- FormsModule,
- AppRoutingModule
- ],
- declarations: [
- AppComponent,
- HeroListComponent,
- CrisisListComponent,
- PageNotFoundComponent
- ],
- bootstrap: [ AppComponent ]
-})
-// #enddocregion hero-import
-export class AppModule { }
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/app.module.3.ts b/docs_app/content/examples/router/src/app/app.module.3.ts
deleted file mode 100644
index 862faf1c51..0000000000
--- a/docs_app/content/examples/router/src/app/app.module.3.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// #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 { CrisisListComponent } from './crisis-list.component';
-import { PageNotFoundComponent } from './not-found.component';
-
-@NgModule({
-// #docregion module-imports
- imports: [
- BrowserModule,
- FormsModule,
- HeroesModule,
- AppRoutingModule
- ],
-// #enddocregion module-imports
- declarations: [
- AppComponent,
- CrisisListComponent,
- PageNotFoundComponent
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/router/src/app/app.module.4.ts b/docs_app/content/examples/router/src/app/app.module.4.ts
deleted file mode 100644
index 4825572361..0000000000
--- a/docs_app/content/examples/router/src/app/app.module.4.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion crisis-center-module, admin-module
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { AppComponent } from './app.component';
-import { PageNotFoundComponent } from './not-found.component';
-
-import { AppRoutingModule } from './app-routing.module';
-import { HeroesModule } from './heroes/heroes.module';
-import { CrisisCenterModule } from './crisis-center/crisis-center.module';
-// #enddocregion crisis-center-module, admin-module
-import { ComposeMessageComponent } from './compose-message.component';
-// #docregion admin-module
-import { AdminModule } from './admin/admin.module';
-// #docregion crisis-center-module
-
-import { DialogService } from './dialog.service';
-
-@NgModule({
- imports: [
- CommonModule,
- FormsModule,
- HeroesModule,
- CrisisCenterModule,
-// #enddocregion crisis-center-module
- AdminModule,
-// #docregion crisis-center-module
- AppRoutingModule
- ],
- declarations: [
- AppComponent,
-// #enddocregion admin-module, crisis-center-module
- ComposeMessageComponent,
-// #docregion admin-module, crisis-center-module
- PageNotFoundComponent
- ],
- providers: [
- DialogService
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/app.module.5.ts b/docs_app/content/examples/router/src/app/app.module.5.ts
deleted file mode 100644
index ad34668cea..0000000000
--- a/docs_app/content/examples/router/src/app/app.module.5.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-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 { ComposeMessageComponent } from './compose-message.component';
-import { PageNotFoundComponent } from './not-found.component';
-
-import { AdminModule } from './admin/admin.module';
-import { DialogService } from './dialog.service';
-
-@NgModule({
- imports: [
- CommonModule,
- FormsModule,
- HeroesModule,
- CrisisCenterModule,
- AdminModule,
- AppRoutingModule
- ],
- declarations: [
- AppComponent,
- ComposeMessageComponent,
- PageNotFoundComponent
- ],
- providers: [
- DialogService
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/router/src/app/app.module.6.ts b/docs_app/content/examples/router/src/app/app.module.6.ts
deleted file mode 100644
index 4cb0b1fdd5..0000000000
--- a/docs_app/content/examples/router/src/app/app.module.6.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// #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';
-import { PageNotFoundComponent } from './not-found.component';
-
-const routes: Routes = [
-
-];
-
-@NgModule({
- imports: [
- BrowserModule,
- FormsModule,
- RouterModule.forRoot(routes, { useHash: true }) // .../#/crisis-center/
- ],
- declarations: [
- AppComponent,
- PageNotFoundComponent
- ],
- providers: [
-
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/router/src/app/app.module.7.ts b/docs_app/content/examples/router/src/app/app.module.7.ts
deleted file mode 100644
index b6ca81ddea..0000000000
--- a/docs_app/content/examples/router/src/app/app.module.7.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-// #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 { ComposeMessageComponent } from './compose-message.component';
-import { LoginRoutingModule } from './login-routing.module';
-import { LoginComponent } from './login.component';
-import { PageNotFoundComponent } from './not-found.component';
-
-import { DialogService } from './dialog.service';
-
-@NgModule({
- imports: [
- BrowserModule,
- FormsModule,
- HeroesModule,
- CrisisCenterModule,
- LoginRoutingModule,
- AppRoutingModule
- ],
- declarations: [
- AppComponent,
- ComposeMessageComponent,
- LoginComponent,
- PageNotFoundComponent
- ],
- providers: [
- DialogService
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/router/src/app/app.module.ts b/docs_app/content/examples/router/src/app/app.module.ts
deleted file mode 100644
index dcf3401ded..0000000000
--- a/docs_app/content/examples/router/src/app/app.module.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-// #docregion animations-module
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-// #enddocregion animations-module
-// #docregion inspect-config
-import { Router } from '@angular/router';
-
-// #enddocregion inspect-config
-import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app-routing.module';
-
-import { HeroesModule } from './heroes/heroes.module';
-import { ComposeMessageComponent } from './compose-message.component';
-import { LoginRoutingModule } from './login-routing.module';
-import { LoginComponent } from './login.component';
-import { PageNotFoundComponent } from './not-found.component';
-
-import { DialogService } from './dialog.service';
-
-// #docregion animations-module
-@NgModule({
- imports: [
- // #enddocregion animations-module
- BrowserModule,
- FormsModule,
- HeroesModule,
- LoginRoutingModule,
- AppRoutingModule,
- // #docregion animations-module
- BrowserAnimationsModule
- // #enddocregion animations-module
- ],
- declarations: [
- AppComponent,
- ComposeMessageComponent,
- LoginComponent,
- PageNotFoundComponent
- ],
- providers: [
- DialogService
- ],
- bootstrap: [ AppComponent ]
-})
-// #docregion inspect-config
-export class AppModule {
- // Diagnostic only: inspect router configuration
- constructor(router: Router) {
- console.log('Routes: ', JSON.stringify(router.config, undefined, 2));
- }
-}
-// #enddocregion inspect-config
diff --git a/docs_app/content/examples/router/src/app/auth-guard.service.1.ts b/docs_app/content/examples/router/src/app/auth-guard.service.1.ts
deleted file mode 100644
index c824bcb208..0000000000
--- a/docs_app/content/examples/router/src/app/auth-guard.service.1.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { CanActivate } from '@angular/router';
-
-@Injectable()
-export class AuthGuard implements CanActivate {
- canActivate() {
- console.log('AuthGuard#canActivate called');
- return true;
- }
-}
diff --git a/docs_app/content/examples/router/src/app/auth-guard.service.2.ts b/docs_app/content/examples/router/src/app/auth-guard.service.2.ts
deleted file mode 100644
index 8fd00e151a..0000000000
--- a/docs_app/content/examples/router/src/app/auth-guard.service.2.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import {
- CanActivate, Router,
- ActivatedRouteSnapshot,
- RouterStateSnapshot
-} from '@angular/router';
-import { AuthService } from './auth.service';
-
-@Injectable()
-export class AuthGuard implements CanActivate {
- constructor(private authService: AuthService, private router: Router) {}
-
- canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
- let url: string = state.url;
-
- return this.checkLogin(url);
- }
-
- checkLogin(url: string): boolean {
- if (this.authService.isLoggedIn) { return true; }
-
- // Store the attempted URL for redirecting
- this.authService.redirectUrl = url;
-
- // Navigate to the login page with extras
- this.router.navigate(['/login']);
- return false;
- }
-}
-// #enddocregion
-
-/*
-// #docregion can-load-interface
-export class AuthGuard implements CanActivate, CanLoad {
-// #enddocregion can-load-interface
-*/
diff --git a/docs_app/content/examples/router/src/app/auth-guard.service.3.ts b/docs_app/content/examples/router/src/app/auth-guard.service.3.ts
deleted file mode 100644
index dd89006411..0000000000
--- a/docs_app/content/examples/router/src/app/auth-guard.service.3.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// #docregion
-// #docregion can-activate-child
-import { Injectable } from '@angular/core';
-import {
- CanActivate, Router,
- ActivatedRouteSnapshot,
- RouterStateSnapshot,
- CanActivateChild
-} from '@angular/router';
-import { AuthService } from './auth.service';
-
-@Injectable()
-export class AuthGuard implements CanActivate, CanActivateChild {
- constructor(private authService: AuthService, private router: Router) {}
-
- canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
- let url: string = state.url;
-
- return this.checkLogin(url);
- }
-
- canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
- return this.canActivate(route, state);
- }
-
-// #enddocregion can-activate-child
- checkLogin(url: string): boolean {
- if (this.authService.isLoggedIn) { return true; }
-
- // Store the attempted URL for redirecting
- this.authService.redirectUrl = url;
-
- // Navigate to the login page
- this.router.navigate(['/login']);
- return false;
- }
-// #docregion can-activate-child
-}
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/auth-guard.service.4.ts b/docs_app/content/examples/router/src/app/auth-guard.service.4.ts
deleted file mode 100644
index 5d239a8432..0000000000
--- a/docs_app/content/examples/router/src/app/auth-guard.service.4.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-// #docplaster
-// #docregion
-import { Injectable } from '@angular/core';
-import {
- CanActivate, Router,
- ActivatedRouteSnapshot,
- RouterStateSnapshot,
- CanActivateChild,
- NavigationExtras
-} from '@angular/router';
-import { AuthService } from './auth.service';
-
-@Injectable()
-export class AuthGuard implements CanActivate, CanActivateChild {
- constructor(private authService: AuthService, private router: Router) {}
-
- canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
- let url: string = state.url;
-
- return this.checkLogin(url);
- }
-
- canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
- return this.canActivate(route, state);
- }
-
- checkLogin(url: string): boolean {
- if (this.authService.isLoggedIn) { return true; }
-
- // Store the attempted URL for redirecting
- this.authService.redirectUrl = url;
-
- // Create a dummy session id
- let sessionId = 123456789;
-
- // Set our navigation extras object
- // that contains our global query params and fragment
- let navigationExtras: NavigationExtras = {
- queryParams: { 'session_id': sessionId },
- fragment: 'anchor'
- };
-
- // Navigate to the login page with extras
- this.router.navigate(['/login'], navigationExtras);
- return false;
- }
-}
diff --git a/docs_app/content/examples/router/src/app/auth-guard.service.ts b/docs_app/content/examples/router/src/app/auth-guard.service.ts
deleted file mode 100644
index a32b5cc2b8..0000000000
--- a/docs_app/content/examples/router/src/app/auth-guard.service.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-// #docplaster
-import { Injectable } from '@angular/core';
-import {
- CanActivate, Router,
- ActivatedRouteSnapshot,
- RouterStateSnapshot,
- CanActivateChild,
- NavigationExtras,
- CanLoad, Route
-} from '@angular/router';
-import { AuthService } from './auth.service';
-
-@Injectable()
-export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {
- constructor(private authService: AuthService, private router: Router) {}
-
- canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
- let url: string = state.url;
-
- return this.checkLogin(url);
- }
-
- canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
- return this.canActivate(route, state);
- }
-
-// #docregion, canLoad
- canLoad(route: Route): boolean {
- let url = `/${route.path}`;
-
- return this.checkLogin(url);
- }
-// #enddocregion canLoad
-
- checkLogin(url: string): boolean {
- if (this.authService.isLoggedIn) { return true; }
-
- // Store the attempted URL for redirecting
- this.authService.redirectUrl = url;
-
- // Create a dummy session id
- let sessionId = 123456789;
-
- // Set our navigation extras object
- // that contains our global query params and fragment
- let navigationExtras: NavigationExtras = {
- queryParams: { 'session_id': sessionId },
- fragment: 'anchor'
- };
-
- // Navigate to the login page with extras
- this.router.navigate(['/login'], navigationExtras);
- return false;
- }
-// #docregion admin-can-load
-}
diff --git a/docs_app/content/examples/router/src/app/auth.service.ts b/docs_app/content/examples/router/src/app/auth.service.ts
deleted file mode 100644
index 9978541065..0000000000
--- a/docs_app/content/examples/router/src/app/auth.service.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-import { Observable, of } from 'rxjs';
-import { tap, delay } from 'rxjs/operators';
-
-@Injectable()
-export class AuthService {
- isLoggedIn = false;
-
- // store the URL so we can redirect after logging in
- redirectUrl: string;
-
- login(): Observable {
- return of(true).pipe(
- delay(1000),
- tap(val => this.isLoggedIn = true)
- );
- }
-
- logout(): void {
- this.isLoggedIn = false;
- }
-}
diff --git a/docs_app/content/examples/router/src/app/can-deactivate-guard.service.1.ts b/docs_app/content/examples/router/src/app/can-deactivate-guard.service.1.ts
deleted file mode 100644
index 35af6226fb..0000000000
--- a/docs_app/content/examples/router/src/app/can-deactivate-guard.service.1.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { CanDeactivate,
- ActivatedRouteSnapshot,
- RouterStateSnapshot } from '@angular/router';
-
-import { CrisisDetailComponent } from './crisis-center/crisis-detail.component';
-
-@Injectable()
-export class CanDeactivateGuard implements CanDeactivate {
-
- canDeactivate(
- component: CrisisDetailComponent,
- route: ActivatedRouteSnapshot,
- state: RouterStateSnapshot
- ): Observable | boolean {
- // Get the Crisis Center ID
- console.log(route.paramMap.get('id'));
-
- // Get the current URL
- console.log(state.url);
-
- // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
- if (!component.crisis || component.crisis.name === component.editName) {
- return true;
- }
- // Otherwise ask the user with the dialog service and return its
- // observable which resolves to true or false when the user decides
- return component.dialogService.confirm('Discard changes?');
- }
-}
diff --git a/docs_app/content/examples/router/src/app/can-deactivate-guard.service.ts b/docs_app/content/examples/router/src/app/can-deactivate-guard.service.ts
deleted file mode 100644
index e001d95ed9..0000000000
--- a/docs_app/content/examples/router/src/app/can-deactivate-guard.service.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { CanDeactivate } from '@angular/router';
-import { Observable } from 'rxjs';
-
-export interface CanComponentDeactivate {
- canDeactivate: () => Observable | Promise | boolean;
-}
-
-@Injectable()
-export class CanDeactivateGuard implements CanDeactivate {
- canDeactivate(component: CanComponentDeactivate) {
- return component.canDeactivate ? component.canDeactivate() : true;
- }
-}
diff --git a/docs_app/content/examples/router/src/app/compose-message.component.html b/docs_app/content/examples/router/src/app/compose-message.component.html
deleted file mode 100644
index f0b964e6ac..0000000000
--- a/docs_app/content/examples/router/src/app/compose-message.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-Contact Crisis Center
-
- {{ details }}
-
-
-
- Send
- Cancel
-
diff --git a/docs_app/content/examples/router/src/app/compose-message.component.ts b/docs_app/content/examples/router/src/app/compose-message.component.ts
deleted file mode 100644
index 6e83e3502b..0000000000
--- a/docs_app/content/examples/router/src/app/compose-message.component.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// #docregion
-import { Component, HostBinding } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { slideInDownAnimation } from './animations';
-
-@Component({
- templateUrl: './compose-message.component.html',
- styles: [ ':host { position: relative; bottom: 10%; }' ],
- animations: [ slideInDownAnimation ]
-})
-export class ComposeMessageComponent {
- @HostBinding('@routeAnimation') routeAnimation = true;
- @HostBinding('style.display') display = 'block';
- @HostBinding('style.position') position = 'absolute';
-
- details: string;
- sending = false;
-
- constructor(private router: Router) {}
-
- send() {
- this.sending = true;
- this.details = 'Sending Message...';
-
- setTimeout(() => {
- this.sending = false;
- this.closePopup();
- }, 1000);
- }
-
- cancel() {
- this.closePopup();
- }
-
- // #docregion closePopup
- closePopup() {
- // Providing a `null` value to the named outlet
- // clears the contents of the named outlet
- this.router.navigate([{ outlets: { popup: null }}]);
- }
- // #enddocregion closePopup
-}
diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts
deleted file mode 100644
index 0edc35bc6e..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-home.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- template: `
- Welcome to the Crisis Center
- `
-})
-export class CrisisCenterHomeComponent { }
diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts
deleted file mode 100644
index 8ef60e68a1..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.1.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } 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
- }
- ]
- }
- ]
- }
-];
-// #enddocregion routes
-
-@NgModule({
- imports: [
- RouterModule.forChild(crisisCenterRoutes)
- ],
- exports: [
- RouterModule
- ]
-})
-export class CrisisCenterRoutingModule { }
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts
deleted file mode 100644
index 9e9b514968..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.2.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-// #docplaster
-// #docregion routes
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } 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-resolver
-import { CrisisDetailResolver } from './crisis-detail-resolver.service';
-
-// #enddocregion crisis-detail-resolver
-// #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-resolver
- resolve: {
- crisis: CrisisDetailResolver
- }
- // #enddocregion crisis-detail-resolver
- // #docregion routes
- },
- {
- path: '',
- component: CrisisCenterHomeComponent
- }
- ]
- }
- ]
- }
- // #enddocregion routes
-];
-
-@NgModule({
- imports: [
- RouterModule.forChild(crisisCenterRoutes)
- ],
- exports: [
- RouterModule
- ]
-})
-export class CrisisCenterRoutingModule { }
diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts
deleted file mode 100644
index 6d605dbe84..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.3.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } 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
- }
- ]
- }
- ]
- }
-];
-
-@NgModule({
- imports: [
- RouterModule.forChild(crisisCenterRoutes)
- ],
- exports: [
- RouterModule
- ]
-})
-export class CrisisCenterRoutingModule { }
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts
deleted file mode 100644
index b7ac88e852..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.4.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } 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-resolver
-import { CrisisDetailResolver } from './crisis-detail-resolver.service';
-
-// #enddocregion crisis-detail-resolver
-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: CrisisDetailResolver
- }
- },
- {
- path: '',
- component: CrisisCenterHomeComponent
- }
- ]
- }
- ]
- }
-];
-
-// #docregion crisis-detail-resolver
-@NgModule({
- imports: [
- RouterModule.forChild(crisisCenterRoutes)
- ],
- exports: [
- RouterModule
- ],
- providers: [
- CrisisDetailResolver
- ]
-})
-export class CrisisCenterRoutingModule { }
-// #enddocregion crisis-detail-resolver
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts
deleted file mode 100644
index c01d592455..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center-routing.module.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } 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';
-import { CrisisDetailResolver } from './crisis-detail-resolver.service';
-
-const crisisCenterRoutes: Routes = [
- {
- path: '',
- component: CrisisCenterComponent,
- children: [
- {
- path: '',
- component: CrisisListComponent,
- children: [
- {
- path: ':id',
- component: CrisisDetailComponent,
- canDeactivate: [CanDeactivateGuard],
- resolve: {
- crisis: CrisisDetailResolver
- }
- },
- {
- path: '',
- component: CrisisCenterHomeComponent
- }
- ]
- }
- ]
- }
-];
-
-@NgModule({
- imports: [
- RouterModule.forChild(crisisCenterRoutes)
- ],
- exports: [
- RouterModule
- ],
- providers: [
- CrisisDetailResolver
- ]
-})
-export class CrisisCenterRoutingModule { }
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center.component.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center.component.ts
deleted file mode 100644
index c7d7fe412d..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- template: `
- CRISIS CENTER
-
- `
-})
-export class CrisisCenterComponent { }
diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center.module.1.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center.module.1.ts
deleted file mode 100644
index 5a3e45f58f..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center.module.1.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-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 { CrisisCenterRoutingModule } from './crisis-center-routing.module';
-
-@NgModule({
- imports: [
- CommonModule,
- FormsModule,
- CrisisCenterRoutingModule
- ],
- declarations: [
- CrisisCenterComponent,
- CrisisListComponent,
- CrisisCenterHomeComponent,
- CrisisDetailComponent
- ],
-
- // #docregion providers
- providers: [
- CrisisService
- ]
- // #enddocregion providers
-})
-export class CrisisCenterModule {}
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-center.module.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-center.module.ts
deleted file mode 100644
index 4061ceac60..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-center/crisis-center.module.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-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 { CrisisCenterRoutingModule } from './crisis-center-routing.module';
-
-@NgModule({
- imports: [
- CommonModule,
- FormsModule,
- CrisisCenterRoutingModule
- ],
- declarations: [
- CrisisCenterComponent,
- CrisisListComponent,
- CrisisCenterHomeComponent,
- CrisisDetailComponent
- ],
- providers: [
- CrisisService
- ]
-})
-// #docregion crisis-center-module-export
-export class CrisisCenterModule {}
-// #enddocregion crisis-center-module-export
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts
deleted file mode 100644
index a861c3bb97..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-center/crisis-detail-resolver.service.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { Router, Resolve, RouterStateSnapshot,
- ActivatedRouteSnapshot } from '@angular/router';
-import { Observable } from 'rxjs';
-import { map, take } from 'rxjs/operators';
-
-import { Crisis, CrisisService } from './crisis.service';
-
-@Injectable()
-export class CrisisDetailResolver implements Resolve {
- constructor(private cs: CrisisService, private router: Router) {}
-
- resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
- let id = route.paramMap.get('id');
-
- return this.cs.getCrisis(id).pipe(
- take(1),
- map(crisis => {
- if (crisis) {
- return crisis;
- } else { // id not found
- this.router.navigate(['/crisis-center']);
- return null;
- }
- })
- );
- }
-}
diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts
deleted file mode 100644
index 45e8d9c95b..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-center/crisis-detail.component.1.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-// #docplaster
-// #docregion
-import { Component, OnInit, HostBinding } from '@angular/core';
-import { ActivatedRoute, Router, ParamMap } from '@angular/router';
-import { Observable } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
-
-import { slideInDownAnimation } from '../animations';
-import { Crisis, CrisisService } from './crisis.service';
-import { DialogService } from '../dialog.service';
-
-@Component({
- template: `
-
-
"{{ editName }}"
-
- Id: {{ crisis.id }}
-
- Name:
-
-
-
- Save
- Cancel
-
-
- `,
- styles: ['input {width: 20em}'],
- animations: [ slideInDownAnimation ]
-})
-export class CrisisDetailComponent implements OnInit {
- @HostBinding('@routeAnimation') routeAnimation = true;
- @HostBinding('style.display') display = 'block';
- @HostBinding('style.position') position = 'absolute';
-
- crisis: Crisis;
- editName: string;
-
- constructor(
- private service: CrisisService,
- private router: Router,
- private route: ActivatedRoute,
- public dialogService: DialogService
- ) {}
-
- // #docregion ngOnInit
- ngOnInit() {
- this.route.paramMap
- .pipe(
- switchMap((params: ParamMap) =>
- this.service.getCrisis(params.get('id'))))
- .subscribe((crisis: Crisis) => {
- if (crisis) {
- this.editName = crisis.name;
- this.crisis = crisis;
- } else { // id not found
- this.gotoCrises();
- }
- });
- }
- // #enddocregion ngOnInit
-
- cancel() {
- this.gotoCrises();
- }
-
- save() {
- this.crisis.name = this.editName;
- this.gotoCrises();
- }
-
- canDeactivate(): Observable | boolean {
- // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
- if (!this.crisis || this.crisis.name === this.editName) {
- return true;
- }
- // Otherwise ask the user with the dialog service and return its
- // observable which resolves to true or false when the user decides
- return this.dialogService.confirm('Discard changes?');
- }
-
- gotoCrises() {
- let crisisId = this.crisis ? this.crisis.id : null;
- // Pass along the crisis id if available
- // so that the CrisisListComponent can select that crisis.
- // Add a totally useless `foo` parameter for kicks.
- // Relative navigation back to the crises
- this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });
- }
-}
diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-detail.component.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-detail.component.ts
deleted file mode 100644
index 2b5150686c..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-center/crisis-detail.component.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-// #docplaster
-// #docregion
-import { Component, OnInit, HostBinding } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Observable } from 'rxjs';
-
-import { slideInDownAnimation } from '../animations';
-import { Crisis } from './crisis.service';
-import { DialogService } from '../dialog.service';
-
-@Component({
- template: `
-
-
"{{ editName }}"
-
- Id: {{ crisis.id }}
-
- Name:
-
-
-
- Save
- Cancel
-
-
- `,
- styles: ['input {width: 20em}'],
- animations: [ slideInDownAnimation ]
-})
-export class CrisisDetailComponent implements OnInit {
- @HostBinding('@routeAnimation') routeAnimation = true;
- @HostBinding('style.display') display = 'block';
- @HostBinding('style.position') position = 'absolute';
-
- crisis: Crisis;
- editName: string;
-
- constructor(
- private route: ActivatedRoute,
- private router: Router,
- public dialogService: DialogService
- ) {}
-
-// #docregion ngOnInit
- ngOnInit() {
- this.route.data
- .subscribe((data: { crisis: Crisis }) => {
- this.editName = data.crisis.name;
- this.crisis = data.crisis;
- });
- }
-// #enddocregion ngOnInit
-
- // #docregion cancel-save
- cancel() {
- this.gotoCrises();
- }
-
- save() {
- this.crisis.name = this.editName;
- this.gotoCrises();
- }
- // #enddocregion cancel-save
-
- // #docregion canDeactivate
- canDeactivate(): Observable | boolean {
- // Allow synchronous navigation (`true`) if no crisis or the crisis is unchanged
- if (!this.crisis || this.crisis.name === this.editName) {
- return true;
- }
- // Otherwise ask the user with the dialog service and return its
- // observable which resolves to true or false when the user decides
- return this.dialogService.confirm('Discard changes?');
- }
- // #enddocregion canDeactivate
-
- gotoCrises() {
- let crisisId = this.crisis ? this.crisis.id : null;
- // Pass along the crisis id if available
- // so that the CrisisListComponent can select that crisis.
- // Add a totally useless `foo` parameter for kicks.
- // #docregion gotoCrises-navigate
- // Relative navigation back to the crises
- this.router.navigate(['../', { id: crisisId, foo: 'foo' }], { relativeTo: this.route });
- // #enddocregion gotoCrises-navigate
- }
-}
diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts
deleted file mode 100644
index 5bd95158bb..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-center/crisis-list.component.1.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, ParamMap } from '@angular/router';
-
-import { Crisis, CrisisService } from './crisis.service';
-import { Observable } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
-
-@Component({
- // #docregion relative-navigation-router-link
- template: `
-
-
-
- `
- // #enddocregion relative-navigation-router-link
-})
-export class CrisisListComponent implements OnInit {
- crises$: Observable;
- selectedId: number;
-
-
- constructor(
- private service: CrisisService,
- private route: ActivatedRoute
- ) {}
-
-
- ngOnInit() {
- this.crises$ = this.route.paramMap.pipe(
- switchMap((params: ParamMap) => {
- this.selectedId = +params.get('id');
- return this.service.getCrises();
- })
- );
- }
-}
diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis-list.component.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis-list.component.ts
deleted file mode 100644
index 3219f10212..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-center/crisis-list.component.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, ParamMap } from '@angular/router';
-
-import { Crisis, CrisisService } from './crisis.service';
-import { Observable } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
-
-@Component({
- template: `
-
-
-
- `
-})
-export class CrisisListComponent implements OnInit {
- crises$: Observable;
- selectedId: number;
-
- // #docregion ctor
- constructor(
- private service: CrisisService,
- private route: ActivatedRoute
- ) {}
- // #enddocregion ctor
-
- ngOnInit() {
- this.crises$ = this.route.paramMap.pipe(
- switchMap((params: ParamMap) => {
- this.selectedId = +params.get('id');
- return this.service.getCrises();
- })
- );
- }
-}
diff --git a/docs_app/content/examples/router/src/app/crisis-center/crisis.service.ts b/docs_app/content/examples/router/src/app/crisis-center/crisis.service.ts
deleted file mode 100644
index 72b51316c7..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-center/crisis.service.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// #docplaster
-// #docregion , mock-crises
-import { BehaviorSubject } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-export class Crisis {
- constructor(public id: number, public name: string) { }
-}
-
-const CRISES = [
- new Crisis(1, 'Dragon Burning Cities'),
- new Crisis(2, 'Sky Rains Great White Sharks'),
- new Crisis(3, 'Giant Asteroid Heading For Earth'),
- new Crisis(4, 'Procrastinators Meeting Delayed Again'),
-];
-// #enddocregion mock-crises
-
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class CrisisService {
- static nextCrisisId = 100;
- private crises$: BehaviorSubject = new BehaviorSubject(CRISES);
-
- getCrises() { return this.crises$; }
-
- getCrisis(id: number | string) {
- return this.getCrises().pipe(
- map(crises => crises.find(crisis => crisis.id === +id))
- );
- }
-
- // #enddocregion
- addCrisis(name: string) {
- name = name.trim();
- if (name) {
- let crisis = new Crisis(CrisisService.nextCrisisId++, name);
- CRISES.push(crisis);
- this.crises$.next(CRISES);
- }
- }
- // #docregion
-}
diff --git a/docs_app/content/examples/router/src/app/crisis-list.component.ts b/docs_app/content/examples/router/src/app/crisis-list.component.ts
deleted file mode 100644
index 6caa3653b5..0000000000
--- a/docs_app/content/examples/router/src/app/crisis-list.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// Initial empty version
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- template: `
- CRISIS CENTER
- Get your crisis here
`
-})
-export class CrisisListComponent { }
diff --git a/docs_app/content/examples/router/src/app/dialog.service.ts b/docs_app/content/examples/router/src/app/dialog.service.ts
deleted file mode 100644
index d9f7f1e163..0000000000
--- a/docs_app/content/examples/router/src/app/dialog.service.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
-
-/**
- * Async modal dialog service
- * DialogService makes this app easier to test by faking this service.
- * TODO: better modal implementation that doesn't use window.confirm
- */
-@Injectable()
-export class DialogService {
- /**
- * Ask user to confirm an action. `message` explains the action and choices.
- * Returns observable resolving to `true`=confirm or `false`=cancel
- */
- confirm(message?: string): Observable {
- const confirmation = window.confirm(message || 'Is it OK?');
-
- return of(confirmation);
- };
-}
diff --git a/docs_app/content/examples/router/src/app/hero-list.component.ts b/docs_app/content/examples/router/src/app/hero-list.component.ts
deleted file mode 100644
index 7a8f97ca1e..0000000000
--- a/docs_app/content/examples/router/src/app/hero-list.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/// Initial empty version
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- template: `
- HEROES
- Get your heroes here
-
- Go to sidekicks
- `
-})
-export class HeroListComponent { }
diff --git a/docs_app/content/examples/router/src/app/heroes/hero-detail.component.1.ts b/docs_app/content/examples/router/src/app/heroes/hero-detail.component.1.ts
deleted file mode 100644
index 511b12d8a7..0000000000
--- a/docs_app/content/examples/router/src/app/heroes/hero-detail.component.1.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion rxjs-operator-import
-import { switchMap } from 'rxjs/operators';
-// #enddocregion rxjs-operator-import
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-// #docregion imports
-import { Router, ActivatedRoute, ParamMap } from '@angular/router';
-// #enddocregion imports
-
-import { Hero, HeroService } from './hero.service';
-
-@Component({
- template: `
- HEROES
-
-
"{{ hero.name }}"
-
- Id: {{ hero.id }}
-
- Name:
-
-
-
- Back
-
-
- `
-})
-export class HeroDetailComponent implements OnInit {
- hero$: Observable;
-
- // #docregion ctor
- constructor(
- private route: ActivatedRoute,
- private router: Router,
- private service: HeroService
- ) {}
- // #enddocregion ctor
-
- // #docregion ngOnInit
- ngOnInit() {
- this.hero$ = this.route.paramMap.pipe(
- switchMap((params: ParamMap) =>
- this.service.getHero(params.get('id')))
- );
- }
- // #enddocregion ngOnInit
-
- // #docregion gotoHeroes
- gotoHeroes() {
- this.router.navigate(['/heroes']);
- }
- // #enddocregion gotoHeroes
-}
diff --git a/docs_app/content/examples/router/src/app/heroes/hero-detail.component.2.ts b/docs_app/content/examples/router/src/app/heroes/hero-detail.component.2.ts
deleted file mode 100644
index 0affccda9a..0000000000
--- a/docs_app/content/examples/router/src/app/heroes/hero-detail.component.2.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// Snapshot version
-// #docregion
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Observable } from 'rxjs';
-
-import { Hero, HeroService } from './hero.service';
-
-@Component({
- template: `
- HEROES
-
-
"{{ hero.name }}"
-
- Id: {{ hero.id }}
-
- Name:
-
-
-
- Back
-
-
- `
-})
-export class HeroDetailComponent implements OnInit {
- hero$: Observable;
-
- constructor(
- private route: ActivatedRoute,
- private router: Router,
- private service: HeroService
- ) {}
-
- // #docregion snapshot
- ngOnInit() {
- let id = this.route.snapshot.paramMap.get('id');
-
- this.hero$ = this.service.getHero(id);
- }
- // #enddocregion snapshot
-
- gotoHeroes() {
- this.router.navigate(['/heroes']);
- }
-}
diff --git a/docs_app/content/examples/router/src/app/heroes/hero-detail.component.ts b/docs_app/content/examples/router/src/app/heroes/hero-detail.component.ts
deleted file mode 100644
index 2170686864..0000000000
--- a/docs_app/content/examples/router/src/app/heroes/hero-detail.component.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion rxjs-operator-import
-import { switchMap } from 'rxjs/operators';
-// #enddocregion rxjs-operator-import
-import { Component, OnInit, HostBinding } from '@angular/core';
-import { Router, ActivatedRoute, ParamMap } from '@angular/router';
-import { Observable } from 'rxjs';
-
-import { slideInDownAnimation } from '../animations';
-
-import { Hero, HeroService } from './hero.service';
-
-@Component({
- template: `
- HEROES
-
-
"{{ hero.name }}"
-
- Id: {{ hero.id }}
-
- Name:
-
-
-
- Back
-
-
- `,
- animations: [ slideInDownAnimation ]
-})
-export class HeroDetailComponent implements OnInit {
-// #docregion host-bindings
- @HostBinding('@routeAnimation') routeAnimation = true;
- @HostBinding('style.display') display = 'block';
- @HostBinding('style.position') position = 'absolute';
-// #enddocregion host-bindings
-
- hero$: Observable;
-
- // #docregion ctor
- constructor(
- private route: ActivatedRoute,
- private router: Router,
- private service: HeroService
- ) {}
- // #enddocregion ctor
-
- // #docregion ngOnInit
- ngOnInit() {
- this.hero$ = this.route.paramMap.pipe(
- switchMap((params: ParamMap) =>
- this.service.getHero(params.get('id')))
- );
- }
- // #enddocregion ngOnInit
-
- // #docregion gotoHeroes
- gotoHeroes(hero: Hero) {
- let heroId = hero ? hero.id : null;
- // Pass along the hero id if available
- // so that the HeroList component can select that hero.
- // Include a junk 'foo' property for fun.
- this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
- }
- // #enddocregion gotoHeroes
-}
diff --git a/docs_app/content/examples/router/src/app/heroes/hero-list.component.1.ts b/docs_app/content/examples/router/src/app/heroes/hero-list.component.1.ts
deleted file mode 100644
index 8744772f06..0000000000
--- a/docs_app/content/examples/router/src/app/heroes/hero-list.component.1.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// #docplaster
-// #docregion
-// TODO SOMEDAY: Feature Componetized like HeroCenter
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { Observable } from 'rxjs';
-
-import { Hero, HeroService } from './hero.service';
-
-@Component({
- // #docregion template
- template: `
- HEROES
-
-
- Go to sidekicks
- `
- // #enddocregion template
-})
-export class HeroListComponent implements OnInit {
- heroes$: Observable;
-
- // #docregion ctor
- constructor(
- private router: Router,
- private service: HeroService
- ) {}
- // #enddocregion ctor
-
- ngOnInit() {
- this.heroes$ = this.service.getHeroes();
- }
-}
-// #enddocregion
-
-/* A link parameters array
-// #docregion link-parameters-array
-['/hero', hero.id] // { 15 }
-// #enddocregion link-parameters-array
-*/
diff --git a/docs_app/content/examples/router/src/app/heroes/hero-list.component.ts b/docs_app/content/examples/router/src/app/heroes/hero-list.component.ts
deleted file mode 100644
index 803aa73436..0000000000
--- a/docs_app/content/examples/router/src/app/heroes/hero-list.component.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-// #docplaster
-// #docregion
-// TODO SOMEDAY: Feature Componetized like CrisisCenter
-// #docregion rxjs-imports
-import { Observable } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
-// #enddocregion rxjs-imports
-import { Component, OnInit } from '@angular/core';
-// #docregion import-router
-import { ActivatedRoute, ParamMap } from '@angular/router';
-// #enddocregion import-router
-
-import { Hero, HeroService } from './hero.service';
-
-@Component({
- // #docregion template
- template: `
- HEROES
-
-
- Go to sidekicks
- `
- // #enddocregion template
-})
-// #docregion ctor
-export class HeroListComponent implements OnInit {
- heroes$: Observable;
-
- private selectedId: number;
-
- constructor(
- private service: HeroService,
- private route: ActivatedRoute
- ) {}
-
- ngOnInit() {
- this.heroes$ = this.route.paramMap.pipe(
- switchMap((params: ParamMap) => {
- // (+) before `params.get()` turns the string into a number
- this.selectedId = +params.get('id');
- return this.service.getHeroes();
- })
- );
- }
- // #enddocregion ctor
-// #docregion ctor
-}
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/heroes/hero.service.ts b/docs_app/content/examples/router/src/app/heroes/hero.service.ts
deleted file mode 100644
index 51518a4ae0..0000000000
--- a/docs_app/content/examples/router/src/app/heroes/hero.service.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { of } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-export class Hero {
- constructor(public id: number, public name: string) { }
-}
-
-const HEROES = [
- new Hero(11, 'Mr. Nice'),
- new Hero(12, 'Narco'),
- new Hero(13, 'Bombasto'),
- new Hero(14, 'Celeritas'),
- new Hero(15, 'Magneta'),
- new Hero(16, 'RubberMan')
-];
-
-@Injectable()
-export class HeroService {
- getHeroes() { return of(HEROES); }
-
- getHero(id: number | string) {
- return this.getHeroes().pipe(
- // (+) before `id` turns the string into a number
- map(heroes => heroes.find(hero => hero.id === +id))
- );
- }
-}
diff --git a/docs_app/content/examples/router/src/app/heroes/heroes-routing.module.1.ts b/docs_app/content/examples/router/src/app/heroes/heroes-routing.module.1.ts
deleted file mode 100644
index dbee521793..0000000000
--- a/docs_app/content/examples/router/src/app/heroes/heroes-routing.module.1.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } 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
-];
-
-@NgModule({
- imports: [
- RouterModule.forChild(heroesRoutes)
- ],
- exports: [
- RouterModule
- ]
-})
-export class HeroRoutingModule { }
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/heroes/heroes-routing.module.ts b/docs_app/content/examples/router/src/app/heroes/heroes-routing.module.ts
deleted file mode 100644
index 43558907b0..0000000000
--- a/docs_app/content/examples/router/src/app/heroes/heroes-routing.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { HeroListComponent } from './hero-list.component';
-import { HeroDetailComponent } from './hero-detail.component';
-
-const heroesRoutes: Routes = [
- { path: 'heroes', redirectTo: '/superheroes' },
- { path: 'hero/:id', redirectTo: '/superhero/:id' },
- { path: 'superheroes', component: HeroListComponent },
- { path: 'superhero/:id', component: HeroDetailComponent }
-];
-
-@NgModule({
- imports: [
- RouterModule.forChild(heroesRoutes)
- ],
- exports: [
- RouterModule
- ]
-})
-export class HeroRoutingModule { }
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/heroes/heroes.module.ts b/docs_app/content/examples/router/src/app/heroes/heroes.module.ts
deleted file mode 100644
index 95ee64a182..0000000000
--- a/docs_app/content/examples/router/src/app/heroes/heroes.module.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion v1
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { HeroListComponent } from './hero-list.component';
-import { HeroDetailComponent } from './hero-detail.component';
-
-import { HeroService } from './hero.service';
-
-// #enddocregion v1
-import { HeroRoutingModule } from './heroes-routing.module';
-
-// #docregion v1
-@NgModule({
- imports: [
- CommonModule,
- FormsModule,
-// #enddocregion v1
- HeroRoutingModule
-// #docregion v1
- ],
- declarations: [
- HeroListComponent,
- HeroDetailComponent
- ],
- providers: [ HeroService ]
-})
-export class HeroesModule {}
-// #enddocregion v1
-// #enddocregion
diff --git a/docs_app/content/examples/router/src/app/login-routing.module.ts b/docs_app/content/examples/router/src/app/login-routing.module.ts
deleted file mode 100644
index 96d05e7972..0000000000
--- a/docs_app/content/examples/router/src/app/login-routing.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from './auth-guard.service';
-import { AuthService } from './auth.service';
-import { LoginComponent } from './login.component';
-
-const loginRoutes: Routes = [
- { path: 'login', component: LoginComponent }
-];
-
-@NgModule({
- imports: [
- RouterModule.forChild(loginRoutes)
- ],
- exports: [
- RouterModule
- ],
- providers: [
- AuthGuard,
- AuthService
- ]
-})
-export class LoginRoutingModule {}
diff --git a/docs_app/content/examples/router/src/app/login.component.1.ts b/docs_app/content/examples/router/src/app/login.component.1.ts
deleted file mode 100644
index ddee339011..0000000000
--- a/docs_app/content/examples/router/src/app/login.component.1.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { AuthService } from './auth.service';
-
-@Component({
- template: `
- LOGIN
- {{message}}
-
- Login
- Logout
-
`
-})
-export class LoginComponent {
- message: string;
-
- constructor(public authService: AuthService, public router: Router) {
- this.setMessage();
- }
-
- setMessage() {
- this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out');
- }
-
- login() {
- this.message = 'Trying to log in ...';
-
- this.authService.login().subscribe(() => {
- this.setMessage();
- if (this.authService.isLoggedIn) {
- // Get the redirect URL from our auth service
- // If no redirect has been set, use the default
- let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/crisis-center/admin';
-
- // Redirect the user
- this.router.navigate([redirect]);
- }
- });
- }
-
- logout() {
- this.authService.logout();
- this.setMessage();
- }
-}
diff --git a/docs_app/content/examples/router/src/app/login.component.ts b/docs_app/content/examples/router/src/app/login.component.ts
deleted file mode 100644
index 1a6fae162f..0000000000
--- a/docs_app/content/examples/router/src/app/login.component.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-import { Router,
- NavigationExtras } from '@angular/router';
-import { AuthService } from './auth.service';
-
-@Component({
- template: `
- LOGIN
- {{message}}
-
- Login
- Logout
-
`
-})
-export class LoginComponent {
- message: string;
-
- constructor(public authService: AuthService, public router: Router) {
- this.setMessage();
- }
-
- setMessage() {
- this.message = 'Logged ' + (this.authService.isLoggedIn ? 'in' : 'out');
- }
-
- login() {
- this.message = 'Trying to log in ...';
-
- this.authService.login().subscribe(() => {
- this.setMessage();
- if (this.authService.isLoggedIn) {
- // Get the redirect URL from our auth service
- // If no redirect has been set, use the default
- let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : '/admin';
-
- // #docregion preserve
- // Set our navigation extras object
- // that passes on our global query params and fragment
- let navigationExtras: NavigationExtras = {
- queryParamsHandling: 'preserve',
- preserveFragment: true
- };
-
- // Redirect the user
- this.router.navigate([redirect], navigationExtras);
- // #enddocregion preserve
- }
- });
- }
-
- logout() {
- this.authService.logout();
- this.setMessage();
- }
-}
diff --git a/docs_app/content/examples/router/src/app/not-found.component.ts b/docs_app/content/examples/router/src/app/not-found.component.ts
deleted file mode 100644
index 2e74544e17..0000000000
--- a/docs_app/content/examples/router/src/app/not-found.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- template: 'Page not found '
-})
-export class PageNotFoundComponent {}
diff --git a/docs_app/content/examples/router/src/app/selective-preloading-strategy.ts b/docs_app/content/examples/router/src/app/selective-preloading-strategy.ts
deleted file mode 100644
index c2192ec12b..0000000000
--- a/docs_app/content/examples/router/src/app/selective-preloading-strategy.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { PreloadingStrategy, Route } from '@angular/router';
-import { Observable, of } from 'rxjs';
-
-@Injectable()
-export class SelectivePreloadingStrategy implements PreloadingStrategy {
- preloadedModules: string[] = [];
-
- preload(route: Route, load: () => Observable): Observable {
- if (route.data && route.data['preload']) {
- // add the route path to the preloaded module array
- this.preloadedModules.push(route.path);
-
- // log the route path to the console
- console.log('Preloaded: ' + route.path);
-
- return load();
- } else {
- return of(null);
- }
- }
-}
diff --git a/docs_app/content/examples/router/src/assets/app.css b/docs_app/content/examples/router/src/assets/app.css
deleted file mode 100644
index 8da7fa6567..0000000000
--- a/docs_app/content/examples/router/src/assets/app.css
+++ /dev/null
@@ -1,51 +0,0 @@
-/* items class */
-.items {
- margin: 0 0 2em 0;
- list-style-type: none;
- padding: 0;
- width: 24em;
-}
-.items li {
- cursor: pointer;
- position: relative;
- left: 0;
- background-color: #EEE;
- margin: .5em;
- padding: .3em 0;
- height: 1.6em;
- border-radius: 4px;
-}
-.items li a {
- display: block;
- text-decoration: none;
-}
-.items li:hover {
- color: #607D8B;
- background-color: #DDD;
- left: .1em;
-}
-.items li.selected {
- background-color: #CFD8DC;
- color: white;
-}
-.items li.selected:hover {
- background-color: #BBD8DC;
-}
-.items .text {
- position: relative;
- top: -3px;
-}
-.items .badge {
- display: inline-block;
- font-size: small;
- color: white;
- padding: 0.8em 0.7em 0 0.7em;
- background-color: #607D8B;
- line-height: 1em;
- position: relative;
- left: -1px;
- top: -4px;
- height: 1.8em;
- margin-right: .8em;
- border-radius: 4px 0 0 4px;
-}
diff --git a/docs_app/content/examples/router/src/index.html b/docs_app/content/examples/router/src/index.html
deleted file mode 100644
index 0e5ca721fa..0000000000
--- a/docs_app/content/examples/router/src/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-
-
-
-
-
-
- Angular Router
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/router/src/main.ts b/docs_app/content/examples/router/src/main.ts
deleted file mode 100644
index f332d1d245..0000000000
--- a/docs_app/content/examples/router/src/main.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// #docregion
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/docs_app/content/examples/router/stackblitz.json b/docs_app/content/examples/router/stackblitz.json
deleted file mode 100644
index c1f330ae39..0000000000
--- a/docs_app/content/examples/router/stackblitz.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "description": "Router",
- "files":[
- "!**/*.d.ts",
- "!**/*.js",
- "!**/*.[0-9].*",
- "!src/app/crisis-list.component.ts",
- "!src/app/hero-list.component.ts"
- ],
- "tags": ["router"]
-}
diff --git a/docs_app/content/examples/rx-library/example-config.json b/docs_app/content/examples/rx-library/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/rx-library/src/error-handling.ts b/docs_app/content/examples/rx-library/src/error-handling.ts
deleted file mode 100644
index c7b6c2dc9f..0000000000
--- a/docs_app/content/examples/rx-library/src/error-handling.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-
-import { of } from 'rxjs';
-
-// #docregion
-
-import { ajax } from 'rxjs/ajax';
-import { map, catchError } from 'rxjs/operators';
-// Return "response" from the API. If an error happens,
-// return an empty array.
-const apiData = ajax('/api/data').pipe(
- map(res => {
- if (!res.response) {
- throw new Error('Value expected!');
- }
- return res.response;
- }),
- catchError(err => of([]))
-);
-
-apiData.subscribe({
- next(x) { console.log('data: ', x); },
- error(err) { console.log('errors already caught... will not run'); }
-});
-
-// #enddocregion
diff --git a/docs_app/content/examples/rx-library/src/main.ts b/docs_app/content/examples/rx-library/src/main.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/rx-library/src/naming-convention.ts b/docs_app/content/examples/rx-library/src/naming-convention.ts
deleted file mode 100644
index 1e337b293a..0000000000
--- a/docs_app/content/examples/rx-library/src/naming-convention.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-
-@Component({
- selector: 'app-stopwatch',
- templateUrl: './stopwatch.component.html'
-})
-export class StopwatchComponent {
-
- stopwatchValue: number;
- stopwatchValue$: Observable;
-
- start() {
- this.stopwatchValue$.subscribe(num =>
- this.stopwatchValue = num
- );
- }
-}
diff --git a/docs_app/content/examples/rx-library/src/operators.1.ts b/docs_app/content/examples/rx-library/src/operators.1.ts
deleted file mode 100644
index d9ea72920a..0000000000
--- a/docs_app/content/examples/rx-library/src/operators.1.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { of, pipe } from 'rxjs';
-
-// #docregion
-
-import { filter, map } from 'rxjs/operators';
-
-const nums = of(1, 2, 3, 4, 5);
-
-// Create a function that accepts an Observable.
-const squareOddVals = pipe(
- filter(n => n % 2),
- map(n => n * n)
-);
-
-// Create an Observable that will run the filter and map functions
-const squareOdd = squareOddVals(nums);
-
-// Suscribe to run the combined functions
-squareOdd.subscribe(x => console.log(x));
-
-// #enddocregion
-
-
diff --git a/docs_app/content/examples/rx-library/src/operators.2.ts b/docs_app/content/examples/rx-library/src/operators.2.ts
deleted file mode 100644
index 9559ea8525..0000000000
--- a/docs_app/content/examples/rx-library/src/operators.2.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Observable, of } from 'rxjs';
-
-// #docregion
-
-import { filter, map } from 'rxjs/operators';
-
-const squareOdd = of(1, 2, 3, 4, 5)
- .pipe(
- filter(n => n % 2 !== 0),
- map(n => n * n)
- );
-
-// Subscribe to get values
-squareOdd.subscribe(x => console.log(x));
-
-// #enddocregion
diff --git a/docs_app/content/examples/rx-library/src/operators.ts b/docs_app/content/examples/rx-library/src/operators.ts
deleted file mode 100644
index 461482a4bc..0000000000
--- a/docs_app/content/examples/rx-library/src/operators.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-
-import { Observable, of } from 'rxjs';
-
-// #docregion
-
-import { map } from 'rxjs/operators';
-
-const nums = of(1, 2, 3);
-
-const squareValues = map((val: number) => val * val);
-const squaredNums = squareValues(nums);
-
-squaredNums.subscribe(x => console.log(x));
-
-// Logs
-// 1
-// 4
-// 9
-
-// #enddocregion
diff --git a/docs_app/content/examples/rx-library/src/retry-on-error.ts b/docs_app/content/examples/rx-library/src/retry-on-error.ts
deleted file mode 100644
index b1a5389c1b..0000000000
--- a/docs_app/content/examples/rx-library/src/retry-on-error.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-
-import { Observable, of } from 'rxjs';
-
-
-// #docregion
-
-import { ajax } from 'rxjs/ajax';
-import { map, retry, catchError } from 'rxjs/operators';
-
-const apiData = ajax('/api/data').pipe(
- retry(3), // Retry up to 3 times before failing
- map(res => {
- if (!res.response) {
- throw new Error('Value expected!');
- }
- return res.response;
- }),
- catchError(err => of([]))
-);
-
-apiData.subscribe({
- next(x) { console.log('data: ', x); },
- error(err) { console.log('errors already caught... will not run'); }
-});
-
-// #enddocregion
diff --git a/docs_app/content/examples/rx-library/src/simple-creation.ts b/docs_app/content/examples/rx-library/src/simple-creation.ts
deleted file mode 100644
index 810e398e85..0000000000
--- a/docs_app/content/examples/rx-library/src/simple-creation.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-
-// #docregion promise
-
-import { fromPromise } from 'rxjs';
-
-// Create an Observable out of a promise
-const data = fromPromise(fetch('/api/endpoint'));
-// Subscribe to begin listening for async result
-data.subscribe({
- next(response) { console.log(response); },
- error(err) { console.error('Error: ' + err); },
- complete() { console.log('Completed'); }
-});
-
-// #enddocregion promise
-
-// #docregion interval
-
-import { interval } from 'rxjs';
-
-// Create an Observable that will publish a value on an interval
-const secondsCounter = interval(1000);
-// Subscribe to begin publishing values
-secondsCounter.subscribe(n =>
- console.log(`It's been ${n} seconds since subscribing!`));
-
-// #enddocregion interval
-
-
-// #docregion event
-
-import { fromEvent } from 'rxjs';
-
-const el = document.getElementById('my-element');
-
-// Create an Observable that will publish mouse movements
-const mouseMoves = fromEvent(el, 'mousemove');
-
-// Subscribe to start listening for mouse-move events
-const subscription = mouseMoves.subscribe((evt: MouseEvent) => {
- // Log coords of mouse movements
- console.log(`Coords: ${evt.clientX} X ${evt.clientY}`);
-
- // When the mouse is over the upper-left of the screen,
- // unsubscribe to stop listening for mouse movements
- if (evt.clientX < 40 && evt.clientY < 40) {
- subscription.unsubscribe();
- }
-});
-
-// #enddocregion event
-
-
-// #docregion ajax
-
-import { ajax } from 'rxjs/ajax';
-
-// Create an Observable that will create an AJAX request
-const apiData = ajax('/api/data');
-// Subscribe to create the request
-apiData.subscribe(res => console.log(res.status, res.response));
-
-// #enddocregion ajax
-
-
diff --git a/docs_app/content/examples/security/e2e/app.e2e-spec.ts b/docs_app/content/examples/security/e2e/app.e2e-spec.ts
deleted file mode 100644
index 8ebad58f21..0000000000
--- a/docs_app/content/examples/security/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, By } from 'protractor';
-
-describe('Security E2E Tests', () => {
- beforeAll(() => browser.get(''));
-
- it('sanitizes innerHTML', () => {
- let interpolated = element(By.className('e2e-inner-html-interpolated'));
- expect(interpolated.getText())
- .toContain('Template Syntax ');
- let bound = element(By.className('e2e-inner-html-bound'));
- expect(bound.getText()).toContain('Template alert("0wned") Syntax');
- let bold = element(By.css('.e2e-inner-html-bound b'));
- expect(bold.getText()).toContain('Syntax');
- });
-
- it('escapes untrusted URLs', () => {
- let untrustedUrl = element(By.className('e2e-dangerous-url'));
- expect(untrustedUrl.getAttribute('href')).toMatch(/^unsafe:javascript/);
- });
-
- it('binds trusted URLs', () => {
- let trustedUrl = element(By.className('e2e-trusted-url'));
- expect(trustedUrl.getAttribute('href')).toMatch(/^javascript:alert/);
- });
-
- it('escapes untrusted resource URLs', () => {
- let iframe = element(By.className('e2e-iframe-untrusted-src'));
- expect(iframe.getAttribute('src')).toBe('');
- });
-
- it('binds trusted resource URLs', () => {
- let iframe = element(By.className('e2e-iframe-trusted-src'));
- expect(iframe.getAttribute('src')).toMatch(/^https:\/\/www.youtube.com\//);
- });
-});
diff --git a/docs_app/content/examples/security/example-config.json b/docs_app/content/examples/security/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/security/src/app/app.component.ts b/docs_app/content/examples/security/src/app/app.component.ts
deleted file mode 100644
index 5e6abfba9c..0000000000
--- a/docs_app/content/examples/security/src/app/app.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- template: `
- Security
-
-
- `
-})
-export class AppComponent {
-}
diff --git a/docs_app/content/examples/security/src/app/app.module.ts b/docs_app/content/examples/security/src/app/app.module.ts
deleted file mode 100644
index 21d880be3b..0000000000
--- a/docs_app/content/examples/security/src/app/app.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { BypassSecurityComponent } from './bypass-security.component';
-import { InnerHtmlBindingComponent } from './inner-html-binding.component';
-
-@NgModule({
- imports: [ BrowserModule ],
- declarations: [
- AppComponent,
- BypassSecurityComponent,
- InnerHtmlBindingComponent
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/security/src/app/bypass-security.component.html b/docs_app/content/examples/security/src/app/bypass-security.component.html
deleted file mode 100644
index 96adf058e2..0000000000
--- a/docs_app/content/examples/security/src/app/bypass-security.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-Bypass Security Component
-
-
-An untrusted URL:
-Click me
-A trusted URL:
-Click me
-
-
-
-Resource URL:
-Showing: {{dangerousVideoUrl}}
-Trusted:
-
-Untrusted:
-
diff --git a/docs_app/content/examples/security/src/app/bypass-security.component.ts b/docs_app/content/examples/security/src/app/bypass-security.component.ts
deleted file mode 100644
index 7858db96c1..0000000000
--- a/docs_app/content/examples/security/src/app/bypass-security.component.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
-
-@Component({
- selector: 'app-bypass-security',
- templateUrl: './bypass-security.component.html',
-})
-export class BypassSecurityComponent {
- dangerousUrl: string;
- trustedUrl: SafeUrl;
- dangerousVideoUrl: string;
- videoUrl: SafeResourceUrl;
-
- // #docregion trust-url
- constructor(private sanitizer: DomSanitizer) {
- // javascript: URLs are dangerous if attacker controlled.
- // Angular sanitizes them in data binding, but you can
- // explicitly tell Angular to trust this value:
- this.dangerousUrl = 'javascript:alert("Hi there")';
- this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl);
- // #enddocregion trust-url
- this.updateVideoUrl('PUBnlbjZFAI');
- }
-
- // #docregion trust-video-url
- updateVideoUrl(id: string) {
- // Appending an ID to a YouTube URL is safe.
- // Always make sure to construct SafeValue objects as
- // close as possible to the input data so
- // that it's easier to check if the value is safe.
- this.dangerousVideoUrl = 'https://www.youtube.com/embed/' + id;
- this.videoUrl =
- this.sanitizer.bypassSecurityTrustResourceUrl(this.dangerousVideoUrl);
- }
- // #enddocregion trust-video-url
-}
diff --git a/docs_app/content/examples/security/src/app/inner-html-binding.component.html b/docs_app/content/examples/security/src/app/inner-html-binding.component.html
deleted file mode 100644
index fe540d25fe..0000000000
--- a/docs_app/content/examples/security/src/app/inner-html-binding.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-
-Binding innerHTML
-Bound value:
-{{htmlSnippet}}
-Result of binding to innerHTML:
-
diff --git a/docs_app/content/examples/security/src/app/inner-html-binding.component.ts b/docs_app/content/examples/security/src/app/inner-html-binding.component.ts
deleted file mode 100644
index a4cfaeb04c..0000000000
--- a/docs_app/content/examples/security/src/app/inner-html-binding.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-inner-html-binding',
- templateUrl: './inner-html-binding.component.html',
-})
-// #docregion class
-export class InnerHtmlBindingComponent {
- // For example, a user/attacker-controlled value from a URL.
- htmlSnippet = 'Template Syntax ';
-}
diff --git a/docs_app/content/examples/security/src/index.html b/docs_app/content/examples/security/src/index.html
deleted file mode 100644
index 4cf1cd6428..0000000000
--- a/docs_app/content/examples/security/src/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
- Angular Content Security
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/security/src/main.ts b/docs_app/content/examples/security/src/main.ts
deleted file mode 100644
index 0d277197ca..0000000000
--- a/docs_app/content/examples/security/src/main.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #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);
-
diff --git a/docs_app/content/examples/security/stackblitz.json b/docs_app/content/examples/security/stackblitz.json
deleted file mode 100644
index e66527cb6b..0000000000
--- a/docs_app/content/examples/security/stackblitz.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "description": "Content Security",
- "files": [
- "!**/*.d.ts",
- "!**/*.js"
- ],
- "tags": ["security"]
-}
diff --git a/docs_app/content/examples/service-worker-getting-started/e2e/app.e2e-spec.ts b/docs_app/content/examples/service-worker-getting-started/e2e/app.e2e-spec.ts
deleted file mode 100644
index 6d77937689..0000000000
--- a/docs_app/content/examples/service-worker-getting-started/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, element, by } from 'protractor';
-
-
-describe('sw-example App', () => {
- let page: AppPage;
-
- beforeEach(() => {
- page = new AppPage();
- });
-
- it('should display welcome message', () => {
- page.navigateTo();
- expect(page.getParagraphText()).toEqual('Welcome to Service Workers!');
- });
-
- it('should display the Angular logo', () => {
- let logo = element(by.css('img'));
- page.navigateTo();
- expect(logo.isPresent()).toBe(true);
- });
-
- it('should show a header for the list of links', () => {
- const listHeader = element(by.css('app-root > h2'));
- expect(listHeader.getText()).toEqual('Here are some links to help you start:');
- });
-
- it('should show a list of links', function () {
- element.all(by.css('ul > li > h2 > a')).then((items) => {
- expect(items.length).toBe(4);
- expect(items[0].getText()).toBe('Angular Service Worker Intro');
- expect(items[1].getText()).toBe('Tour of Heroes');
- expect(items[2].getText()).toBe('CLI Documentation');
- expect(items[3].getText()).toBe('Angular blog');
- });
- });
- // Check for a rejected promise as the service worker is not enabled
- it('SwUpdate.checkForUpdate() should return a rejected promise', () => {
- const button = element(by.css('button'));
- const rejectMessage = element(by.css('p'));
- button.click();
- expect(rejectMessage.getText()).toContain('rejected: ');
- });
-});
diff --git a/docs_app/content/examples/service-worker-getting-started/example-config.json b/docs_app/content/examples/service-worker-getting-started/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/service-worker-getting-started/src/app/app.component.html b/docs_app/content/examples/service-worker-getting-started/src/app/app.component.html
deleted file mode 100644
index 59cd86bcb5..0000000000
--- a/docs_app/content/examples/service-worker-getting-started/src/app/app.component.html
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-
- Welcome to {{title}}!
-
-
-
-
-Check for Update
-{{updateCheckText}}
-
-Here are some links to help you start:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/service-worker-getting-started/src/app/app.component.spec.ts b/docs_app/content/examples/service-worker-getting-started/src/app/app.component.spec.ts
deleted file mode 100644
index a136c59bfb..0000000000
--- a/docs_app/content/examples/service-worker-getting-started/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-describe('AppComponent', () => {
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [
- AppComponent
- ],
- }).compileComponents();
- }));
- it('should create the app', async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app).toBeTruthy();
- }));
- it(`should have as title 'app'`, async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app.title).toEqual('Service Workers');
- }));
- it('should render title in a h1 tag', async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- fixture.detectChanges();
- const compiled = fixture.debugElement.nativeElement;
- expect(compiled.querySelector('h1').textContent).toContain('Welcome to Service Workers!');
- }));
-});
diff --git a/docs_app/content/examples/service-worker-getting-started/src/app/app.component.ts b/docs_app/content/examples/service-worker-getting-started/src/app/app.component.ts
deleted file mode 100644
index 67cc894396..0000000000
--- a/docs_app/content/examples/service-worker-getting-started/src/app/app.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component } from '@angular/core';
-import { SwUpdate } from '@angular/service-worker';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html'
-})
-export class AppComponent {
- title = 'Service Workers';
- updateCheckText = '';
-
- constructor(private update: SwUpdate) {}
-
- updateCheck(): void {
- this.update
- .checkForUpdate()
- .then(() => this.updateCheckText = 'resolved')
- .catch(err => this.updateCheckText = `rejected: ${err.message}`);
- }
-}
diff --git a/docs_app/content/examples/service-worker-getting-started/src/app/app.module.ts b/docs_app/content/examples/service-worker-getting-started/src/app/app.module.ts
deleted file mode 100644
index daaf81e652..0000000000
--- a/docs_app/content/examples/service-worker-getting-started/src/app/app.module.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-
-// #docregion sw-import
-import { ServiceWorkerModule } from '@angular/service-worker';
-import { environment } from '../environments/environment';
-// #enddocregion sw-import
-
-import { CheckForUpdateService } from './check-for-update.service';
-import { LogUpdateService } from './log-update.service';
-import { PromptUpdateService } from './prompt-update.service';
-
-// #docregion sw-module
-@NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
- ],
- providers: [
- CheckForUpdateService,
- LogUpdateService,
- PromptUpdateService,
- ],
- bootstrap: [AppComponent]
-})
-export class AppModule { }
-// #enddocregion sw-module
diff --git a/docs_app/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts b/docs_app/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts
deleted file mode 100644
index 194b555ace..0000000000
--- a/docs_app/content/examples/service-worker-getting-started/src/app/check-for-update.service.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Injectable } from '@angular/core';
-import { SwUpdate } from '@angular/service-worker';
-
-
-// #docregion sw-check-update
-import { interval } from 'rxjs';
-
-@Injectable()
-export class CheckForUpdateService {
-
- constructor(updates: SwUpdate) {
- interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate());
- }
-}
-// #enddocregion sw-check-update
diff --git a/docs_app/content/examples/service-worker-getting-started/src/app/log-update.service.ts b/docs_app/content/examples/service-worker-getting-started/src/app/log-update.service.ts
deleted file mode 100644
index e38961d4f5..0000000000
--- a/docs_app/content/examples/service-worker-getting-started/src/app/log-update.service.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Injectable } from '@angular/core';
-import { SwUpdate } from '@angular/service-worker';
-
-// #docregion sw-update
-@Injectable()
-export class LogUpdateService {
-
- constructor(updates: SwUpdate) {
- updates.available.subscribe(event => {
- console.log('current version is', event.current);
- console.log('available version is', event.available);
- });
- updates.activated.subscribe(event => {
- console.log('old version was', event.previous);
- console.log('new version is', event.current);
- });
- }
-}
-// #enddocregion sw-update
diff --git a/docs_app/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts b/docs_app/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts
deleted file mode 100644
index 9e3e56012e..0000000000
--- a/docs_app/content/examples/service-worker-getting-started/src/app/prompt-update.service.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Injectable } from '@angular/core';
-import { SwUpdate } from '@angular/service-worker';
-
-function promptUser(event): boolean {
- return true;
-}
-
-// #docregion sw-activate
-@Injectable()
-export class PromptUpdateService {
-
- constructor(updates: SwUpdate) {
- updates.available.subscribe(event => {
- if (promptUser(event)) {
- updates.activateUpdate().then(() => document.location.reload());
- }
- });
- }
-}
-// #enddocregion sw-activate
diff --git a/docs_app/content/examples/service-worker-getting-started/src/index.html b/docs_app/content/examples/service-worker-getting-started/src/index.html
deleted file mode 100644
index c3066538b7..0000000000
--- a/docs_app/content/examples/service-worker-getting-started/src/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
- SwExample
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/service-worker-getting-started/src/main.ts b/docs_app/content/examples/service-worker-getting-started/src/main.ts
deleted file mode 100644
index 91ec6da5f0..0000000000
--- a/docs_app/content/examples/service-worker-getting-started/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-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)
- .catch(err => console.log(err));
diff --git a/docs_app/content/examples/service-worker-getting-started/src/ngsw-config.json b/docs_app/content/examples/service-worker-getting-started/src/ngsw-config.json
deleted file mode 100644
index 8b78a4f893..0000000000
--- a/docs_app/content/examples/service-worker-getting-started/src/ngsw-config.json
+++ /dev/null
@@ -1,28 +0,0 @@
-
-{
- "index": "/index.html",
- "assetGroups": [{
- "name": "app",
- "installMode": "prefetch",
- "resources": {
- "files": [
- "/favicon.ico",
- "/index.html"
- ],
- "versionedFiles": [
- "/*.bundle.css",
- "/*.bundle.js",
- "/*.chunk.js"
- ]
- }
- }, {
- "name": "assets",
- "installMode": "lazy",
- "updateMode": "prefetch",
- "resources": {
- "files": [
- "/assets/**"
- ]
- }
- }]
-}
\ No newline at end of file
diff --git a/docs_app/content/examples/set-document-title/e2e/app.e2e-spec.ts b/docs_app/content/examples/set-document-title/e2e/app.e2e-spec.ts
deleted file mode 100644
index b86deb9aa6..0000000000
--- a/docs_app/content/examples/set-document-title/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by, ElementFinder } from 'protractor';
-
-describe('Set Document Title', function () {
-
- beforeAll(function () {
- browser.get('');
- });
-
- it('should set the document title', function () {
-
- let titles = [
- 'Good morning!',
- 'Good afternoon!',
- 'Good evening!'
- ];
-
- element.all( by.css( 'ul li a' ) ).each(
- function iterator( element: ElementFinder, i: number ) {
-
- element.click();
- expect( browser.getTitle() ).toEqual( titles[ i ] );
-
- }
- );
-
- });
-
-});
diff --git a/docs_app/content/examples/set-document-title/example-config.json b/docs_app/content/examples/set-document-title/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/set-document-title/src/app/app.component.ts b/docs_app/content/examples/set-document-title/src/app/app.component.ts
deleted file mode 100644
index 14a5c86887..0000000000
--- a/docs_app/content/examples/set-document-title/src/app/app.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-// #docplaster
-// #docregion
-// Import the native Angular services.
-import { Component } from '@angular/core';
-import { Title } from '@angular/platform-browser';
-
-@Component({
-selector: 'app-root',
-template:
- `
- Select a title to set on the current HTML document:
-
-
-
- `
-})
-// #docregion class
-export class AppComponent {
- public constructor(private titleService: Title ) { }
-
- public setTitle( newTitle: string) {
- this.titleService.setTitle( newTitle );
- }
-}
-// #enddocregion class
diff --git a/docs_app/content/examples/set-document-title/src/app/app.module.ts b/docs_app/content/examples/set-document-title/src/app/app.module.ts
deleted file mode 100644
index 81f13c244c..0000000000
--- a/docs_app/content/examples/set-document-title/src/app/app.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule, Title } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
- imports: [
- BrowserModule
- ],
- declarations: [
- AppComponent
- ],
- providers: [
- Title
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/set-document-title/src/index.html b/docs_app/content/examples/set-document-title/src/index.html
deleted file mode 100644
index 8862e207c3..0000000000
--- a/docs_app/content/examples/set-document-title/src/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
- Setting The Document Title Using The Title Service
-
-
-
-
-
- Setting The Document Title Using The Title Service
-
-
-
-
-
-
diff --git a/docs_app/content/examples/set-document-title/src/main.ts b/docs_app/content/examples/set-document-title/src/main.ts
deleted file mode 100644
index 0740658908..0000000000
--- a/docs_app/content/examples/set-document-title/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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);
diff --git a/docs_app/content/examples/set-document-title/stackblitz.json b/docs_app/content/examples/set-document-title/stackblitz.json
deleted file mode 100644
index fb6cf810f9..0000000000
--- a/docs_app/content/examples/set-document-title/stackblitz.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "description": "Set The Document Title In Angular",
- "files": [
- "!**/*.d.ts",
- "!**/*.js",
- "!**/*.[1].*"
- ],
- "tags": [ "cookbook" ]
-}
diff --git a/docs_app/content/examples/setup/e2e-spec.ts b/docs_app/content/examples/setup/e2e-spec.ts
deleted file mode 100644
index 73921707ee..0000000000
--- a/docs_app/content/examples/setup/e2e-spec.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('QuickStart E2E Tests', function () {
-
- let expectedMsg = 'Hello Angular';
-
- beforeEach(function () {
- browser.get('');
- });
-
- it(`should display: ${expectedMsg}`, function () {
- expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
- });
-
-});
diff --git a/docs_app/content/examples/setup/example-config.json b/docs_app/content/examples/setup/example-config.json
deleted file mode 100644
index 6af3884d8d..0000000000
--- a/docs_app/content/examples/setup/example-config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "unittesting": true
-}
diff --git a/docs_app/content/examples/setup/non-essential-files.txt b/docs_app/content/examples/setup/non-essential-files.txt
deleted file mode 100644
index 6389af193c..0000000000
--- a/docs_app/content/examples/setup/non-essential-files.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-.git
-.gitignore
-.travis.yml
-*.spec*.ts
-CHANGELOG.md
-e2e
-favicon.ico
-karma.conf.js
-karma-test-shim.js
-LICENSE
-non-essential-files.txt
-protractor.config.js
-README.md
diff --git a/docs_app/content/examples/setup/quickstart-specs.stackblitz.json b/docs_app/content/examples/setup/quickstart-specs.stackblitz.json
deleted file mode 100644
index 44d7ab73f7..0000000000
--- a/docs_app/content/examples/setup/quickstart-specs.stackblitz.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
- "description": "Quickstart AppComponent Testing",
- "files":[
- "src/browser-test-shim.js",
- "src/app/app.component.ts",
- "src/app/app.component.spec.ts",
- "src/quickstart-specs.html"
- ],
- "main": "src/quickstart-specs.html",
- "file": "src/app/app.component.spec.ts",
- "tags": ["quickstart", "setup", "testing"]
-}
diff --git a/docs_app/content/examples/setup/src/app/app.component.spec.ts b/docs_app/content/examples/setup/src/app/app.component.spec.ts
deleted file mode 100644
index 4998dec904..0000000000
--- a/docs_app/content/examples/setup/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { AppComponent } from './app.component';
-
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-describe('AppComponent', function () {
- let de: DebugElement;
- let comp: AppComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ AppComponent ]
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(AppComponent);
- comp = fixture.componentInstance;
- de = fixture.debugElement.query(By.css('h1'));
- });
-
- it('should create component', () => expect(comp).toBeDefined() );
-
- it('should have expected text', () => {
- fixture.detectChanges();
- const h1 = de.nativeElement;
- expect(h1.textContent).toMatch(/angular/i,
- ' should say something about "Angular"');
- });
-});
diff --git a/docs_app/content/examples/setup/src/app/app.component.ts b/docs_app/content/examples/setup/src/app/app.component.ts
deleted file mode 100644
index 1ef28fc5c4..0000000000
--- a/docs_app/content/examples/setup/src/app/app.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'my-app',
- template: `Hello {{name}} `
-})
-export class AppComponent { name = 'Angular'; }
diff --git a/docs_app/content/examples/setup/src/app/app.module.ts b/docs_app/content/examples/setup/src/app/app.module.ts
deleted file mode 100644
index 50a0e6eb47..0000000000
--- a/docs_app/content/examples/setup/src/app/app.module.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
-
-@NgModule({
- imports: [ BrowserModule ],
- declarations: [ AppComponent ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/setup/src/index.html b/docs_app/content/examples/setup/src/index.html
deleted file mode 100644
index 58e5112308..0000000000
--- a/docs_app/content/examples/setup/src/index.html
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
-
- Angular Quickstart Seed
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/setup/src/main.ts b/docs_app/content/examples/setup/src/main.ts
deleted file mode 100644
index 02d58dceac..0000000000
--- a/docs_app/content/examples/setup/src/main.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// #docregion
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/docs_app/content/examples/setup/src/quickstart-specs.html b/docs_app/content/examples/setup/src/quickstart-specs.html
deleted file mode 100644
index 9bc81ccf2e..0000000000
--- a/docs_app/content/examples/setup/src/quickstart-specs.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
-
-
-
- 1st Specs
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/setup/src/systemjs.config.extras.js b/docs_app/content/examples/setup/src/systemjs.config.extras.js
deleted file mode 100644
index 027dfe58cf..0000000000
--- a/docs_app/content/examples/setup/src/systemjs.config.extras.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Add barrels and stuff
- * Adjust as necessary for your application needs.
- */
-// (function (global) {
-// System.config({
-// packages: {
-// // add packages here
-// }
-// });
-// })(this);
diff --git a/docs_app/content/examples/setup/stackblitz.json b/docs_app/content/examples/setup/stackblitz.json
deleted file mode 100644
index 2fd0130fd8..0000000000
--- a/docs_app/content/examples/setup/stackblitz.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
- "description": "QuickStart Setup",
- "files": [
- "src/app/app.component.ts",
- "src/app/app.module.ts",
- "src/index.html",
- "src/main.ts",
- "src/styles.css"
- ],
- "file": "src/app/app.component.ts",
- "tags": ["quickstart", "setup", "seed"]
-}
diff --git a/docs_app/content/examples/structural-directives/e2e/app.e2e-spec.ts b/docs_app/content/examples/structural-directives/e2e/app.e2e-spec.ts
deleted file mode 100644
index a877fb3223..0000000000
--- a/docs_app/content/examples/structural-directives/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('Structural Directives', function () {
-
- beforeAll(function () {
- browser.get('');
- });
-
- it('first div should show hero name with *ngIf', function () {
- const allDivs = element.all(by.tagName('div'));
- expect(allDivs.get(0).getText()).toEqual('Mr. Nice');
- });
-
- it('first li should show hero name with *ngFor', function () {
- const allLis = element.all(by.tagName('li'));
- expect(allLis.get(0).getText()).toEqual('Mr. Nice');
- });
-
- it('ngSwitch have two instances', function () {
- const happyHeroEls = element.all(by.tagName('app-happy-hero'));
- expect(happyHeroEls.count()).toEqual(2);
- });
-
- it('should toggle *ngIf="hero" with a button', function () {
- const toggleHeroButton = element.all(by.cssContainingText('button', 'Toggle hero')).get(0);
- const paragraph = element.all(by.cssContainingText('p', 'I turned the corner'));
- expect(paragraph.get(0).getText()).toContain('I waved');
- toggleHeroButton.click().then(() => {
- expect(paragraph.get(0).getText()).not.toContain('I waved');
- });
- });
-
- it('should have only one "Hip!" (the other is erased)', function () {
- const paragraph = element.all(by.cssContainingText('p', 'Hip!'));
- expect(paragraph.count()).toEqual(1);
- });
-
- it('appUnless should show 3 paragraph (A)s and (B)s at the start', function () {
- const paragraph = element.all(by.css('p.unless'));
- expect(paragraph.count()).toEqual(3);
- for (let i = 0; i < 3; i++) {
- expect(paragraph.get(i).getText()).toContain('(A)');
- }
- });
-
- it('appUnless should show 1 paragraph (B) after toggling condition', function () {
- const toggleConditionButton = element.all(by.cssContainingText('button', 'Toggle condition')).get(0);
- const paragraph = element.all(by.css('p.unless'));
-
- toggleConditionButton.click().then(() => {
- expect(paragraph.count()).toEqual(1);
- expect(paragraph.get(0).getText()).toContain('(B)');
- });
- });
-});
-
diff --git a/docs_app/content/examples/structural-directives/example-config.json b/docs_app/content/examples/structural-directives/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/structural-directives/src/app/app.component.css b/docs_app/content/examples/structural-directives/src/app/app.component.css
deleted file mode 100644
index a3ed305907..0000000000
--- a/docs_app/content/examples/structural-directives/src/app/app.component.css
+++ /dev/null
@@ -1,70 +0,0 @@
-/* #docregion */
-button {
- min-width: 100px;
- font-size: 100%;
-}
-
-.box {
- border: 1px solid gray;
- max-width: 600px;
- padding: 4px;
-}
-.choices {
- font-style: italic;
-}
-
-code, .code {
- background-color: #eee;
- color: black;
- font-family: Courier, sans-serif;
- font-size: 85%;
-}
-
-div.code {
- width: 400px;
-}
-
-.heroic {
- font-size: 150%;
- font-weight: bold;
-}
-
-hr {
- margin: 40px 0
-}
-
-.odd {
- background-color: palegoldenrod;
-}
-
-td, th {
- text-align: left;
- vertical-align: top;
-}
-
-/* #docregion p-span */
-p span { color: red; font-size: 70%; }
-/* #enddocregion p-span */
-
-.unless {
- border: 2px solid;
- padding: 6px;
-}
-
-p.unless {
- width: 500px;
-}
-
-button.a, span.a, .unless.a {
- color: red;
- border-color: gold;
- background-color: yellow;
- font-size: 100%;
-}
-
-button.b, span.b, .unless.b {
- color: black;
- border-color: green;
- background-color: lightgreen;
- font-size: 100%;
-}
diff --git a/docs_app/content/examples/structural-directives/src/app/app.component.html b/docs_app/content/examples/structural-directives/src/app/app.component.html
deleted file mode 100644
index e6205d30d9..0000000000
--- a/docs_app/content/examples/structural-directives/src/app/app.component.html
+++ /dev/null
@@ -1,228 +0,0 @@
-
-
-Structural Directives
-
-Conditional display of hero
-
-
-
-{{hero.name}}
-
-
-
-List of heroes
-
-
-
-
-
-
-
-
-NgIf
-
-
-
- Expression is true and ngIf is true.
- This paragraph is in the DOM.
-
-
- Expression is false and ngIf is false.
- This paragraph is not in the DOM.
-
-
-
-
-
- Expression sets display to "block".
- This paragraph is visible.
-
-
- Expression sets display to "none".
- This paragraph is hidden but still in the DOM.
-
-
-
-NgIf with template
-<ng-template> element
-
-
- {{hero.name}}
-
-
-
-
-
-<ng-container>
-
-*ngIf with a <ng-container>
-
-Toggle hero
-
-
-
- I turned the corner
-
- and saw {{hero.name}}. I waved
-
- and continued on my way.
-
-
-
-
- I turned the corner
-
- and saw {{hero.name}}. I waved
-
- and continued on my way.
-
-
-
-<select> with <span>
-
-
- Pick your favorite hero
- ( show sad )
-
-
-
-
- {{h.name}} ({{h.emotion}})
-
-
-
-
-
-<select> with <ng-container>
-
-
- Pick your favorite hero
- ( show sad )
-
-
-
-
- {{h.name}} ({{h.emotion}})
-
-
-
-
-
-
-
-
-NgFor
-
-
-
-
<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
-
-
- ({{i}}) {{hero.name}}
-
-
-
-
<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById"/>
-
-
- ({{i}}) {{hero.name}}
-
-
-
-
-
-
-NgSwitch
-
-Pick your favorite hero
-
-
- {{h.name}}
-
- None of the above
-
-
-NgSwitch
-
-
-
-
-
-NgSwitch with <ng-template>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-<ng-template>
-
-Hip!
-
- Hip!
-
-Hooray!
-
-
-
-
-UnlessDirective
-
- The condition is currently
- {{condition}} .
-
- Toggle condition to {{condition ? 'false' : 'true'}}
-
-
-
-
- (A) This paragraph is displayed because the condition is false.
-
-
-
- (B) Although the condition is true,
- this paragraph is displayed because appUnless is set to false.
-
-
-
-
-UnlessDirective with template
-
-
-Show this sentence unless the condition is true.
-
-
-
- (A) <p *appUnless="condition" class="code unless">
-
-
-
-
- (A) <ng-template [appUnless]="condition">
-
-
-
diff --git a/docs_app/content/examples/structural-directives/src/app/app.component.ts b/docs_app/content/examples/structural-directives/src/app/app.component.ts
deleted file mode 100644
index aed11fc77a..0000000000
--- a/docs_app/content/examples/structural-directives/src/app/app.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-import { Hero, heroes } from './hero';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: [ './app.component.css' ]
-})
-export class AppComponent {
- heroes = heroes;
- hero = this.heroes[0];
-
- condition = false;
- logs: string[] = [];
- showSad = true;
- status = 'ready';
-
- // #docregion trackByHero
- trackById(index: number, hero: Hero): number { return hero.id; }
- // #enddocregion trackByHero
-}
diff --git a/docs_app/content/examples/structural-directives/src/app/app.module.ts b/docs_app/content/examples/structural-directives/src/app/app.module.ts
deleted file mode 100644
index b6ffb456c9..0000000000
--- a/docs_app/content/examples/structural-directives/src/app/app.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { heroSwitchComponents } from './hero-switch.components';
-import { UnlessDirective } from './unless.directive';
-
-@NgModule({
- imports: [ BrowserModule, FormsModule ],
- declarations: [
- AppComponent,
- heroSwitchComponents,
- UnlessDirective
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/structural-directives/src/app/hero-switch.components.ts b/docs_app/content/examples/structural-directives/src/app/hero-switch.components.ts
deleted file mode 100644
index 27bf8de8d5..0000000000
--- a/docs_app/content/examples/structural-directives/src/app/hero-switch.components.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// #docregion
-import { Component, Input } from '@angular/core';
-import { Hero } from './hero';
-
-@Component({
- selector: 'app-happy-hero',
- template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
-})
-export class HappyHeroComponent {
- @Input() hero: Hero;
-}
-
-@Component({
- selector: 'app-sad-hero',
- template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
-})
-export class SadHeroComponent {
- @Input() hero: Hero;
-}
-
-@Component({
- selector: 'app-confused-hero',
- template: `Are you as confused as {{hero.name}}?`
-})
-export class ConfusedHeroComponent {
- @Input() hero: Hero;
-}
-
-@Component({
- selector: 'app-unknown-hero',
- template: `{{message}}`
-})
-export class UnknownHeroComponent {
- @Input() hero: Hero;
- get message() {
- return this.hero && this.hero.name ?
- `${this.hero.name} is strange and mysterious.` :
- 'Are you feeling indecisive?';
- }
-}
-
-export const heroSwitchComponents =
- [ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ];
diff --git a/docs_app/content/examples/structural-directives/src/app/hero.ts b/docs_app/content/examples/structural-directives/src/app/hero.ts
deleted file mode 100644
index 89f0cbfdf8..0000000000
--- a/docs_app/content/examples/structural-directives/src/app/hero.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-export class Hero {
- id: number;
- name: string;
- emotion?: string;
-}
-
-export const heroes: Hero[] = [
- { id: 1, name: 'Mr. Nice', emotion: 'happy'},
- { id: 2, name: 'Narco', emotion: 'sad' },
- { id: 3, name: 'Windstorm', emotion: 'confused' },
- { id: 4, name: 'Magneta'}
-];
diff --git a/docs_app/content/examples/structural-directives/src/app/scrap.txt b/docs_app/content/examples/structural-directives/src/app/scrap.txt
deleted file mode 100644
index f2e4766bdb..0000000000
--- a/docs_app/content/examples/structural-directives/src/app/scrap.txt
+++ /dev/null
@@ -1,21 +0,0 @@
-// interesting but unused code
- heroChooser(picker: HTMLFieldSetElement) {
- let choices = picker.children;
- this.favoriteHero = undefined;
- for (let i = 0; i < choices.length; i++) {
- let choice = choices[i].children[0] as HTMLInputElement;
- if (choice.checked) { this.favoriteHero = this.heroes[i]; }
- }
- }
-
-
-Switch with *ngFor repeated switchCases using <ng-container>
-
-
- Your favorite hero is ...
-
- {{hero.name}}
-
- None of the above
-
-
diff --git a/docs_app/content/examples/structural-directives/src/app/unless.directive.ts b/docs_app/content/examples/structural-directives/src/app/unless.directive.ts
deleted file mode 100644
index 5f91ddbc28..0000000000
--- a/docs_app/content/examples/structural-directives/src/app/unless.directive.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion no-docs, skeleton
-import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
-
-// #enddocregion skeleton
-/**
- * Add the template content to the DOM unless the condition is true.
-// #enddocregion no-docs
- *
- * If the expression assigned to `appUnless` evaluates to a truthy value
- * then the templated elements are removed removed from the DOM,
- * the templated elements are (re)inserted into the DOM.
- *
- *
- * Congrats! Everything is great!
- *
- *
- * ### Syntax
- *
- * - `...
`
- * - `...
`
- *
-// #docregion no-docs
- */
-// #docregion skeleton
-@Directive({ selector: '[appUnless]'})
-export class UnlessDirective {
- // #enddocregion skeleton
- private hasView = false;
-
- // #docregion ctor
- constructor(
- private templateRef: TemplateRef,
- private viewContainer: ViewContainerRef) { }
- // #enddocregion ctor
-
- // #docregion set
- @Input() set appUnless(condition: boolean) {
- if (!condition && !this.hasView) {
- this.viewContainer.createEmbeddedView(this.templateRef);
- this.hasView = true;
- } else if (condition && this.hasView) {
- this.viewContainer.clear();
- this.hasView = false;
- }
- }
- // #enddocregion set
- // #docregion skeleton
-}
diff --git a/docs_app/content/examples/structural-directives/src/index.html b/docs_app/content/examples/structural-directives/src/index.html
deleted file mode 100644
index 451b66ce35..0000000000
--- a/docs_app/content/examples/structural-directives/src/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
- Angular Structural Directives
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/structural-directives/src/main.ts b/docs_app/content/examples/structural-directives/src/main.ts
deleted file mode 100644
index 0740658908..0000000000
--- a/docs_app/content/examples/structural-directives/src/main.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #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);
diff --git a/docs_app/content/examples/structural-directives/stackblitz.json b/docs_app/content/examples/structural-directives/stackblitz.json
deleted file mode 100644
index ca13405583..0000000000
--- a/docs_app/content/examples/structural-directives/stackblitz.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
- "description": "Structural directives",
- "files": [
- "!**/*.d.ts",
- "!**/*.js",
- "!src/app/scrap.txt"
- ],
- "tags": [
- "structural", "directives", "template", "ngIf",
- "ngSwitch", "ngFor"
- ]
-}
diff --git a/docs_app/content/examples/styleguide/e2e/app.e2e-spec.ts b/docs_app/content/examples/styleguide/e2e/app.e2e-spec.ts
deleted file mode 100644
index c1018c7dd3..0000000000
--- a/docs_app/content/examples/styleguide/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-'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');
-
- let pre = element(by.tagName('toh-heroes > pre'));
- expect(pre.getText()).toContain('Bombasto');
- expect(pre.getText()).toContain('Tornado');
- expect(pre.getText()).toContain('Magneta');
- });
-
- it('02-07', function () {
- browser.get('#/02-07');
-
- let hero = element(by.tagName('toh-hero > div'));
- let users = element(by.tagName('admin-users > div'));
-
- expect(hero.getText()).toBe('hero component');
- expect(users.getText()).toBe('users component');
- });
-
- it('02-08', function () {
- browser.get('#/02-08');
-
- let input = element(by.tagName('input[tohvalidate]'));
- expect(input.isPresent()).toBe(true);
- });
-
- it('03-01', function () {
- browser.get('#/03-01');
-
- let div = element(by.tagName('sg-app > div'));
- expect(div.getText()).toBe('The expected error is 42');
- });
-
- it('03-02', function () {
- browser.get('#/03-02');
-
- let divs = element.all(by.tagName('sg-app > div'));
- expect(divs.get(0).getText()).toBe('Heroes url: api/heroes');
- expect(divs.get(1).getText()).toBe('Villains url: api/villains');
- });
-
- it('03-03', function () {
- browser.get('#/03-03');
-
- let div = element(by.tagName('sg-app > div'));
- expect(div.getText()).toBe('Our hero is RubberMan and He is so elastic');
- });
-
- it('03-04', function () {
- browser.get('#/03-04');
-
- let buttons = element.all(by.tagName('sg-app > button'));
- expect(buttons.get(0).getText()).toBe('Show toast');
- expect(buttons.get(1).getText()).toBe('Hide toast');
- });
-
- // temporarily disabled because of a weird issue when used with rxjs v6 with rxjs-compat
- xit('03-06', function () {
- browser.get('#/03-06');
-
- let div = element(by.tagName('sg-app > div'));
- expect(div.getText()).toBe('Actual favorite: Windstorm');
-
- let lis = element.all(by.tagName('sg-app > ul > li'));
- expect(lis.get(0).getText()).toBe('Windstorm');
- expect(lis.get(1).getText()).toBe('Bombasto');
- expect(lis.get(2).getText()).toBe('Magneta');
- expect(lis.get(3).getText()).toBe('Tornado');
- });
-
- it('04-10', function () {
- browser.get('#/04-10');
-
- let div = element(by.tagName('sg-app > toh-heroes > div'));
- expect(div.getText()).toBe('This is heroes component');
- });
-
- it('05-02', function () {
- browser.get('#/05-02');
-
- let button = element(by.tagName('sg-app > toh-hero-button > button'));
- expect(button.getText()).toBe('Hero button');
- });
-
- it('05-03', function () {
- browser.get('#/05-03');
-
- let button = element(by.tagName('sg-app > toh-hero-button > button'));
- expect(button.getText()).toBe('Hero button');
- });
-
- it('05-04', function () {
- browser.get('#/05-04');
-
- let h2 = element(by.tagName('sg-app > toh-heroes > div > h2'));
- expect(h2.getText()).toBe('My Heroes');
- });
-
- it('05-12', function () {
- browser.get('#/05-12');
-
- let button = element(by.tagName('sg-app > toh-hero-button > button'));
- expect(button.getText()).toBe('OK');
- });
-
- it('05-13', function () {
- browser.get('#/05-13');
-
- let button = element(by.tagName('sg-app > toh-hero-button > button'));
- expect(button.getText()).toBe('OK');
- });
-
- it('05-14', function () {
- browser.get('#/05-14');
-
- let toast = element(by.tagName('sg-app > toh-toast'));
- expect(toast.getText()).toBe('...');
- });
-
- it('05-15', function () {
- browser.get('#/05-15');
-
- let heroList = element(by.tagName('sg-app > toh-hero-list'));
- expect(heroList.getText()).toBe('...');
- });
-
- it('05-16', function () {
- browser.get('#/05-16');
-
- let hero = element(by.tagName('sg-app > toh-hero'));
- expect(hero.getText()).toBe('...');
- });
-
- it('05-17', function () {
- browser.get('#/05-17');
-
- let section = element(by.tagName('sg-app > toh-hero-list > section'));
- expect(section.getText()).toContain('Our list of heroes');
- expect(section.getText()).toContain('Total powers');
- expect(section.getText()).toContain('Average power');
- });
-
- it('06-01', function () {
- browser.get('#/06-01');
-
- let div = element(by.tagName('sg-app > div[tohhighlight]'));
- expect(div.getText()).toBe('Bombasta');
- });
-
- it('06-03', function () {
- browser.get('#/06-03');
-
- let input = element(by.tagName('input[tohvalidator]'));
- expect(input.isPresent()).toBe(true);
- });
-
- // temporarily disabled because of a weird issue when used with rxjs v6 with rxjs-compat
- xit('07-01', function () {
- browser.get('#/07-01');
-
- let lis = element.all(by.tagName('sg-app > ul > li'));
- expect(lis.get(0).getText()).toBe('Windstorm');
- expect(lis.get(1).getText()).toBe('Bombasto');
- expect(lis.get(2).getText()).toBe('Magneta');
- expect(lis.get(3).getText()).toBe('Tornado');
- });
-
- it('07-03', function () {
- browser.get('#/07-03');
-
- let pre = element(by.tagName('toh-heroes > pre'));
- expect(pre.getText()).toContain('[]');
- });
-
- it('07-04', function () {
- browser.get('#/07-04');
-
- let pre = element(by.tagName('toh-app > pre'));
- expect(pre.getText()).toContain('[]');
- });
-
- it('09-01', function () {
- browser.get('#/09-01');
-
- let button = element(by.tagName('sg-app > toh-hero-button > button'));
- expect(button.getText()).toBe('OK');
- });
-});
diff --git a/docs_app/content/examples/styleguide/example-config.json b/docs_app/content/examples/styleguide/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/styleguide/src/01-01/app/app.component.css b/docs_app/content/examples/styleguide/src/01-01/app/app.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/styleguide/src/01-01/app/app.component.ts b/docs_app/content/examples/styleguide/src/01-01/app/app.component.ts
deleted file mode 100644
index d5bb953540..0000000000
--- a/docs_app/content/examples/styleguide/src/01-01/app/app.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-import { HeroService } from './heroes';
-
-@Component({
- selector: 'toh-app',
- template: `
-
- `,
- styleUrls: ['./app.component.css'],
- providers: [ HeroService ]
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/01-01/app/app.module.ts b/docs_app/content/examples/styleguide/src/01-01/app/app.module.ts
deleted file mode 100644
index 53f29ea8cb..0000000000
--- a/docs_app/content/examples/styleguide/src/01-01/app/app.module.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { HeroesComponent } from './heroes/heroes.component';
-
-@NgModule({
- imports: [
- BrowserModule,
- // #enddocregion
- RouterModule.forChild([{ path: '01-01', component: AppComponent }])
- // #docregion
- ],
- declarations: [
- AppComponent,
- HeroesComponent
- ],
- exports: [ AppComponent ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
-// #enddocregion
-
-
diff --git a/docs_app/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts b/docs_app/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts
deleted file mode 100644
index 853e6ab64e..0000000000
--- a/docs_app/content/examples/styleguide/src/01-01/app/heroes/hero.component.avoid.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-// #docregion
-/* avoid */
-
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, Component, OnInit } from '@angular/core';
-
-class Hero {
- id: number;
- name: string;
-}
-
-@Component({
- selector: 'my-app',
- template: `
- {{title}}
- {{heroes | json}}
- `,
- styleUrls: ['app/app.component.css']
-})
-class AppComponent implements OnInit {
- title = 'Tour of Heroes';
-
- heroes: Hero[] = [];
-
- ngOnInit() {
- getHeroes().then(heroes => this.heroes = heroes);
- }
-}
-
-@NgModule({
- imports: [ BrowserModule ],
- declarations: [ AppComponent ],
- exports: [ AppComponent ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
-
-platformBrowserDynamic().bootstrapModule(AppModule);
-
-const HEROES: Hero[] = [
- {id: 1, name: 'Bombasto'},
- {id: 2, name: 'Tornado'},
- {id: 3, name: 'Magneta'},
-];
-
-function getHeroes(): Promise {
- return Promise.resolve(HEROES); // TODO: get hero data from the server;
-}
diff --git a/docs_app/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts b/docs_app/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts
deleted file mode 100644
index 9e3546db90..0000000000
--- a/docs_app/content/examples/styleguide/src/01-01/app/heroes/heroes.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-
-import { Hero, HeroService } from './shared';
-
-@Component({
- selector: 'toh-heroes',
- template: `
- {{heroes | json}}
- `
-})
-export class HeroesComponent implements OnInit {
- heroes: Hero[] = [];
-
- constructor(private heroService: HeroService) {}
-
- ngOnInit() {
- this.heroService.getHeroes()
- .then(heroes => this.heroes = heroes);
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/01-01/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/01-01/app/heroes/index.ts
deleted file mode 100644
index a8d7f1d422..0000000000
--- a/docs_app/content/examples/styleguide/src/01-01/app/heroes/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './shared';
-export * from './heroes.component';
diff --git a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/hero.model.ts
deleted file mode 100644
index 8f7cc205c8..0000000000
--- a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/hero.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// #docregion
-export class Hero {
- id: number;
- name: string;
-}
diff --git a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts b/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts
deleted file mode 100644
index d94e5bacac..0000000000
--- a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/hero.service.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-import { HEROES } from './mock-heroes';
-
-@Injectable()
-export class HeroService {
- getHeroes() {
- return Promise.resolve(HEROES);
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/index.ts
deleted file mode 100644
index c0c1a87eb2..0000000000
--- a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './hero.model';
-export * from './hero.service';
-export * from './mock-heroes';
diff --git a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts b/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts
deleted file mode 100644
index 2e9a69f59d..0000000000
--- a/docs_app/content/examples/styleguide/src/01-01/app/heroes/shared/mock-heroes.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// #docregion
-import { Hero } from './hero.model';
-
-export const HEROES: Hero[] = [
- {id: 1, name: 'Bombasto'},
- {id: 2, name: 'Tornado'},
- {id: 3, name: 'Magneta'},
-];
diff --git a/docs_app/content/examples/styleguide/src/01-01/app/index.ts b/docs_app/content/examples/styleguide/src/01-01/app/index.ts
deleted file mode 100644
index fe8300f1dd..0000000000
--- a/docs_app/content/examples/styleguide/src/01-01/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './heroes';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/01-01/main.ts b/docs_app/content/examples/styleguide/src/01-01/main.ts
deleted file mode 100644
index 7e8269bd65..0000000000
--- a/docs_app/content/examples/styleguide/src/01-01/main.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// #docregion
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/docs_app/content/examples/styleguide/src/02-05/app/app.component.ts b/docs_app/content/examples/styleguide/src/02-05/app/app.component.ts
deleted file mode 100644
index 66ebfa954e..0000000000
--- a/docs_app/content/examples/styleguide/src/02-05/app/app.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'toh-app',
- template: `
- Tour of Heroes
- `
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/02-05/app/app.module.ts b/docs_app/content/examples/styleguide/src/02-05/app/app.module.ts
deleted file mode 100644
index 306ec125e0..0000000000
--- a/docs_app/content/examples/styleguide/src/02-05/app/app.module.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// #docplaster
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
- imports: [
- BrowserModule,
- // #enddocregion
- RouterModule.forChild([{ path: '02-05', component: AppComponent }])
- // #docregion
- ],
- declarations: [
- AppComponent
- ],
- exports: [ AppComponent ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
-// #enddocregion
diff --git a/docs_app/content/examples/styleguide/src/02-05/main.ts b/docs_app/content/examples/styleguide/src/02-05/main.ts
deleted file mode 100644
index 6c32161f84..0000000000
--- a/docs_app/content/examples/styleguide/src/02-05/main.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// #docregion
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule)
- .then(success => console.log(`Bootstrap success`))
- .catch(err => console.error(err));
diff --git a/docs_app/content/examples/styleguide/src/02-07/app/app.component.ts b/docs_app/content/examples/styleguide/src/02-07/app/app.component.ts
deleted file mode 100644
index c82e12624d..0000000000
--- a/docs_app/content/examples/styleguide/src/02-07/app/app.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'sg-app',
- template: `
-
-
- `
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/02-07/app/app.module.ts b/docs_app/content/examples/styleguide/src/02-07/app/app.module.ts
deleted file mode 100644
index 4320fe67d5..0000000000
--- a/docs_app/content/examples/styleguide/src/02-07/app/app.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { HeroComponent } from './heroes';
-import { UsersComponent } from './users';
-
-@NgModule({
- imports: [
- RouterModule.forChild([{ path: '02-07', component: AppComponent }])
- ],
- declarations: [
- AppComponent,
- HeroComponent,
- UsersComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts b/docs_app/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts
deleted file mode 100644
index 976fcb6cdf..0000000000
--- a/docs_app/content/examples/styleguide/src/02-07/app/heroes/hero.component.avoid.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-// #docregion example
-/* avoid */
-
-// HeroComponent is in the Tour of Heroes feature
-@Component({
- selector: 'hero'
-})
-export class HeroComponent {}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts b/docs_app/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts
deleted file mode 100644
index 44c04dd855..0000000000
--- a/docs_app/content/examples/styleguide/src/02-07/app/heroes/hero.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-// #docregion example
-@Component({
- // #enddocregion example
- template: 'hero component
',
- // #docregion example
- selector: 'toh-hero'
-})
-export class HeroComponent {}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/02-07/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/02-07/app/heroes/index.ts
deleted file mode 100644
index 084f36d703..0000000000
--- a/docs_app/content/examples/styleguide/src/02-07/app/heroes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero.component';
diff --git a/docs_app/content/examples/styleguide/src/02-07/app/index.ts b/docs_app/content/examples/styleguide/src/02-07/app/index.ts
deleted file mode 100644
index fc87f976b3..0000000000
--- a/docs_app/content/examples/styleguide/src/02-07/app/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './heroes';
-export * from './users';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/02-07/app/users/index.ts b/docs_app/content/examples/styleguide/src/02-07/app/users/index.ts
deleted file mode 100644
index 475ba6d2a7..0000000000
--- a/docs_app/content/examples/styleguide/src/02-07/app/users/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './users.component';
diff --git a/docs_app/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts b/docs_app/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts
deleted file mode 100644
index 9a5bd936e9..0000000000
--- a/docs_app/content/examples/styleguide/src/02-07/app/users/users.component.avoid.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-// #docregion example
-/* avoid */
-
-// UsersComponent is in an Admin feature
-@Component({
- selector: 'users'
-})
-export class UsersComponent {}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/02-07/app/users/users.component.ts b/docs_app/content/examples/styleguide/src/02-07/app/users/users.component.ts
deleted file mode 100644
index 2fb6d54ebe..0000000000
--- a/docs_app/content/examples/styleguide/src/02-07/app/users/users.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-// #docregion example
-@Component({
- // #enddocregion example
- template: 'users component
',
- // #docregion example
- selector: 'admin-users'
-})
-export class UsersComponent {}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/02-08/app/app.component.ts b/docs_app/content/examples/styleguide/src/02-08/app/app.component.ts
deleted file mode 100644
index bf27aeaf8a..0000000000
--- a/docs_app/content/examples/styleguide/src/02-08/app/app.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'sg-app',
- template: ' '
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/02-08/app/app.module.ts b/docs_app/content/examples/styleguide/src/02-08/app/app.module.ts
deleted file mode 100644
index e840cc50a5..0000000000
--- a/docs_app/content/examples/styleguide/src/02-08/app/app.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { InputHighlightDirective,
- ValidateDirective } from './shared';
-
-@NgModule({
- imports: [
- RouterModule.forChild([{ path: '02-08', component: AppComponent }])
- ],
- declarations: [
- AppComponent,
- InputHighlightDirective,
- ValidateDirective
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/02-08/app/index.ts b/docs_app/content/examples/styleguide/src/02-08/app/index.ts
deleted file mode 100644
index ebe5c92f03..0000000000
--- a/docs_app/content/examples/styleguide/src/02-08/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './shared';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/02-08/app/shared/index.ts b/docs_app/content/examples/styleguide/src/02-08/app/shared/index.ts
deleted file mode 100644
index b844b75492..0000000000
--- a/docs_app/content/examples/styleguide/src/02-08/app/shared/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './input-highlight.directive';
-export * from './validate.directive';
diff --git a/docs_app/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts b/docs_app/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts
deleted file mode 100644
index fd74771981..0000000000
--- a/docs_app/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { Directive, ElementRef } from '@angular/core';
-
-@Directive({ selector: 'input'})
-/** Highlight the attached input text element in blue */
-export class InputHighlightDirective {
- constructor(el: ElementRef) {
- el.nativeElement.style.backgroundColor = 'powderblue';
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts b/docs_app/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts
deleted file mode 100644
index b038f37075..0000000000
--- a/docs_app/content/examples/styleguide/src/02-08/app/shared/validate.directive.avoid.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { Directive } from '@angular/core';
-// #docregion example
-/* avoid */
-
-@Directive({
- selector: '[validate]'
-})
-export class ValidateDirective {}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts b/docs_app/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts
deleted file mode 100644
index 039afb846f..0000000000
--- a/docs_app/content/examples/styleguide/src/02-08/app/shared/validate.directive.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-import { Directive } from '@angular/core';
-
-// #docregion example
-@Directive({
- selector: '[tohValidate]'
-})
-export class ValidateDirective {}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/03-01/app/app.component.ts b/docs_app/content/examples/styleguide/src/03-01/app/app.component.ts
deleted file mode 100644
index cb9479d2d9..0000000000
--- a/docs_app/content/examples/styleguide/src/03-01/app/app.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { ExceptionService } from './core';
-
-@Component({
- selector: 'sg-app',
- template: 'The expected error is {{errorCode}}
',
- providers: [ExceptionService]
-})
-export class AppComponent implements OnInit {
- errorCode: number;
-
- constructor(private exceptionService: ExceptionService) { }
-
- ngOnInit() {
- this.errorCode = this.exceptionService.getException();
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/03-01/app/app.module.ts b/docs_app/content/examples/styleguide/src/03-01/app/app.module.ts
deleted file mode 100644
index 48079f21c7..0000000000
--- a/docs_app/content/examples/styleguide/src/03-01/app/app.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
- imports: [
- RouterModule.forChild([{ path: '03-01', component: AppComponent }])
- ],
- declarations: [
- AppComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/03-01/app/core/exception.service.avoid.ts b/docs_app/content/examples/styleguide/src/03-01/app/core/exception.service.avoid.ts
deleted file mode 100644
index 0a22811fe3..0000000000
--- a/docs_app/content/examples/styleguide/src/03-01/app/core/exception.service.avoid.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-@Injectable()
-// #docregion example
-/* avoid */
-
-export class exceptionService {
- constructor() { }
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/03-01/app/core/exception.service.ts b/docs_app/content/examples/styleguide/src/03-01/app/core/exception.service.ts
deleted file mode 100644
index dd77b4f7dc..0000000000
--- a/docs_app/content/examples/styleguide/src/03-01/app/core/exception.service.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docplaster
-// #docregion
-import { Injectable } from '@angular/core';
-
-@Injectable()
-// #docregion example
-export class ExceptionService {
- constructor() { }
- // #enddocregion example
- // testing harness
- getException() { return 42; }
- // #docregion example
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/03-01/app/core/index.ts b/docs_app/content/examples/styleguide/src/03-01/app/core/index.ts
deleted file mode 100644
index 8acaa4bcf9..0000000000
--- a/docs_app/content/examples/styleguide/src/03-01/app/core/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './exception.service';
diff --git a/docs_app/content/examples/styleguide/src/03-01/app/index.ts b/docs_app/content/examples/styleguide/src/03-01/app/index.ts
deleted file mode 100644
index e120e2dbfd..0000000000
--- a/docs_app/content/examples/styleguide/src/03-01/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './core';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/03-02/app/app.component.ts b/docs_app/content/examples/styleguide/src/03-02/app/app.component.ts
deleted file mode 100644
index 132ea54c85..0000000000
--- a/docs_app/content/examples/styleguide/src/03-02/app/app.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { heroesUrl, mockHeroes, VILLAINS_URL } from './core';
-
-@Component({
- selector: 'sg-app',
- template: `
- Heroes url: {{heroesUrl}}
- Villains url: {{villainsUrl}}
-
- Mock Heroes
- {{hero}}
- `
-})
-export class AppComponent {
- heroes = mockHeroes; // prefer
- heroesUrl = heroesUrl; // prefer
- villainsUrl = VILLAINS_URL; // tolerate
-}
diff --git a/docs_app/content/examples/styleguide/src/03-02/app/app.module.ts b/docs_app/content/examples/styleguide/src/03-02/app/app.module.ts
deleted file mode 100644
index 2db4012ebf..0000000000
--- a/docs_app/content/examples/styleguide/src/03-02/app/app.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
- imports: [
- BrowserModule,
- RouterModule.forChild([{ path: '03-02', component: AppComponent }])
- ],
- declarations: [
- AppComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/03-02/app/core/data.service.ts b/docs_app/content/examples/styleguide/src/03-02/app/core/data.service.ts
deleted file mode 100644
index 5c26478c7b..0000000000
--- a/docs_app/content/examples/styleguide/src/03-02/app/core/data.service.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// #docregion
-export const mockHeroes = ['Sam', 'Jill']; // prefer
-export const heroesUrl = 'api/heroes'; // prefer
-export const VILLAINS_URL = 'api/villains'; // tolerate
diff --git a/docs_app/content/examples/styleguide/src/03-02/app/core/index.ts b/docs_app/content/examples/styleguide/src/03-02/app/core/index.ts
deleted file mode 100644
index 2ba773ede8..0000000000
--- a/docs_app/content/examples/styleguide/src/03-02/app/core/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './data.service';
diff --git a/docs_app/content/examples/styleguide/src/03-02/app/index.ts b/docs_app/content/examples/styleguide/src/03-02/app/index.ts
deleted file mode 100644
index e120e2dbfd..0000000000
--- a/docs_app/content/examples/styleguide/src/03-02/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './core';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/03-03/app/app.component.ts b/docs_app/content/examples/styleguide/src/03-03/app/app.component.ts
deleted file mode 100644
index 3ca522bc45..0000000000
--- a/docs_app/content/examples/styleguide/src/03-03/app/app.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { Hero, HeroCollectorService } from './core';
-
-@Component({
- selector: 'sg-app',
- template: 'Our hero is {{hero.name}} and {{hero.power}}
',
- providers: [HeroCollectorService]
-})
-export class AppComponent implements OnInit {
- hero: Hero;
-
- constructor(private heroCollectorService: HeroCollectorService) { }
-
- ngOnInit() {
- this.hero = this.heroCollectorService.getHero();
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/03-03/app/app.module.ts b/docs_app/content/examples/styleguide/src/03-03/app/app.module.ts
deleted file mode 100644
index 29b3d2e765..0000000000
--- a/docs_app/content/examples/styleguide/src/03-03/app/app.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
- imports: [
- RouterModule.forChild([{ path: '03-03', component: AppComponent }])
- ],
- declarations: [
- AppComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/03-03/app/core/hero-collector.service.avoid.ts b/docs_app/content/examples/styleguide/src/03-03/app/core/hero-collector.service.avoid.ts
deleted file mode 100644
index f481af18b6..0000000000
--- a/docs_app/content/examples/styleguide/src/03-03/app/core/hero-collector.service.avoid.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-// #docregion example
-/* avoid */
-
-import { Injectable } from '@angular/core';
-
-import { IHero } from './hero.model.avoid';
-
-@Injectable()
-export class HeroCollectorService {
- hero: IHero;
-
- constructor() { }
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/03-03/app/core/hero-collector.service.ts b/docs_app/content/examples/styleguide/src/03-03/app/core/hero-collector.service.ts
deleted file mode 100644
index 1df5c0deb0..0000000000
--- a/docs_app/content/examples/styleguide/src/03-03/app/core/hero-collector.service.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion example
-import { Injectable } from '@angular/core';
-
-import { Hero } from './hero.model';
-
-@Injectable()
-export class HeroCollectorService {
- hero: Hero;
-
- constructor() { }
- // #enddocregion example
- // testing harness
- getHero() {
- this.hero = {
- name: 'RubberMan',
- power: 'He is so elastic'
- };
-
- return this.hero;
- }
- // #docregion example
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/03-03/app/core/hero.model.avoid.ts b/docs_app/content/examples/styleguide/src/03-03/app/core/hero.model.avoid.ts
deleted file mode 100644
index ce93b2c59a..0000000000
--- a/docs_app/content/examples/styleguide/src/03-03/app/core/hero.model.avoid.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-// #docregion example
-/* avoid */
-
-export interface IHero {
- name: string;
- power: string;
-}
-
-export class Hero implements IHero {
- name: string;
- power: string;
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/03-03/app/core/hero.model.ts b/docs_app/content/examples/styleguide/src/03-03/app/core/hero.model.ts
deleted file mode 100644
index c3277621cb..0000000000
--- a/docs_app/content/examples/styleguide/src/03-03/app/core/hero.model.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// #docregion
-// #docregion example
-export class Hero {
- name: string;
- power: string;
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/03-03/app/core/index.ts b/docs_app/content/examples/styleguide/src/03-03/app/core/index.ts
deleted file mode 100644
index 17ad67b0b1..0000000000
--- a/docs_app/content/examples/styleguide/src/03-03/app/core/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './hero-collector.service';
-export * from './hero.model';
diff --git a/docs_app/content/examples/styleguide/src/03-03/app/index.ts b/docs_app/content/examples/styleguide/src/03-03/app/index.ts
deleted file mode 100644
index e120e2dbfd..0000000000
--- a/docs_app/content/examples/styleguide/src/03-03/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './core';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/03-04/app/app.component.ts b/docs_app/content/examples/styleguide/src/03-04/app/app.component.ts
deleted file mode 100644
index 5aaf3402e1..0000000000
--- a/docs_app/content/examples/styleguide/src/03-04/app/app.component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { ToastService } from './core';
-
-@Component({
- selector: 'sg-app',
- template: `
- Show toast
- Hide toast
- `,
- providers: [ToastService]
-})
-export class AppComponent implements OnInit {
- constructor(private toastService: ToastService) { }
-
- hide() {
- this.toastService.hide();
- }
-
- show() {
- this.toastService.show();
- }
-
- ngOnInit() {
- this.toastService.activate('Hello Style Guide!');
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/03-04/app/app.module.ts b/docs_app/content/examples/styleguide/src/03-04/app/app.module.ts
deleted file mode 100644
index a5a8d5bb4e..0000000000
--- a/docs_app/content/examples/styleguide/src/03-04/app/app.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
- imports: [
- BrowserModule,
- RouterModule.forChild([{ path: '03-04', component: AppComponent }])
- ],
- declarations: [
- AppComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/03-04/app/core/index.ts b/docs_app/content/examples/styleguide/src/03-04/app/core/index.ts
deleted file mode 100644
index e78b628f9c..0000000000
--- a/docs_app/content/examples/styleguide/src/03-04/app/core/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './toast.service';
diff --git a/docs_app/content/examples/styleguide/src/03-04/app/core/toast.service.avoid.ts b/docs_app/content/examples/styleguide/src/03-04/app/core/toast.service.avoid.ts
deleted file mode 100644
index 0f3a7c25ea..0000000000
--- a/docs_app/content/examples/styleguide/src/03-04/app/core/toast.service.avoid.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// #docregion
-// #docregion example
-/* avoid */
-
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class ToastService {
- message: string;
-
- private _toastCount: number;
-
- hide() {
- this._toastCount--;
- this._log();
- }
-
- show() {
- this._toastCount++;
- this._log();
- }
-
- private _log() {
- console.log(this.message);
- }
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/03-04/app/core/toast.service.ts b/docs_app/content/examples/styleguide/src/03-04/app/core/toast.service.ts
deleted file mode 100644
index ab148a1732..0000000000
--- a/docs_app/content/examples/styleguide/src/03-04/app/core/toast.service.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion example
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class ToastService {
- message: string;
-
- private toastCount: number;
-
- hide() {
- this.toastCount--;
- this.log();
- }
-
- show() {
- this.toastCount++;
- this.log();
- }
-
- private log() {
- console.log(this.message);
- }
- // #enddocregion example
- // testing harness
- activate(message: string) {
- this.message = message;
- }
- // #docregion example
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/03-04/app/index.ts b/docs_app/content/examples/styleguide/src/03-04/app/index.ts
deleted file mode 100644
index e120e2dbfd..0000000000
--- a/docs_app/content/examples/styleguide/src/03-04/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './core';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/app.component.html b/docs_app/content/examples/styleguide/src/03-06/app/app.component.html
deleted file mode 100644
index 67fb0d5964..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/app.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-Actual favorite: {{favorite?.name}}
-
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/app.component.ts b/docs_app/content/examples/styleguide/src/03-06/app/app.component.ts
deleted file mode 100644
index 8ec308bc6a..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/app.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { Hero, HeroService } from './heroes';
-import { ExceptionService, SpinnerService, ToastService } from './core';
-
-@Component({
- selector: 'sg-app',
- templateUrl: './app.component.html',
- providers: [HeroService, ExceptionService, SpinnerService, ToastService]
-})
-export class AppComponent implements OnInit {
- favorite: Hero;
- heroes: Hero[];
-
- constructor(private heroService: HeroService) { }
-
- ngOnInit() {
- this.heroService.getHero(1).subscribe(hero => this.favorite = hero);
- this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/app.module.ts b/docs_app/content/examples/styleguide/src/03-06/app/app.module.ts
deleted file mode 100644
index f259ce23a2..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/app.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
- imports: [
- BrowserModule,
- RouterModule.forChild([{ path: '03-06', component: AppComponent }])
- ],
- declarations: [
- AppComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/exception.service.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/exception.service.ts
deleted file mode 100644
index 7180c88e6b..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/core/exception.service.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class ExceptionService { }
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/index.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/index.ts
deleted file mode 100644
index e4e6723f91..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/core/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// #docregion
-// #docregion example
-export * from './exception.service';
-export * from './spinner';
-export * from './toast';
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/index.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/index.ts
deleted file mode 100644
index 1d619300c0..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// #docregion
-export * from './spinner.component';
-export * from './spinner.service';
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/spinner.component.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/spinner.component.ts
deleted file mode 100644
index 1fd2a01500..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/spinner.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-
-import { SpinnerService } from './spinner.service';
-
-@Component({
- selector: 'toh-spinner',
- template: 'spinner
'
-})
-
-export class SpinnerComponent implements OnDestroy, OnInit {
- constructor(private spinnerService: SpinnerService) { }
-
- ngOnInit() { }
-
- ngOnDestroy() { }
-}
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/spinner.service.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/spinner.service.ts
deleted file mode 100644
index ad5d2ed6e0..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/core/spinner/spinner.service.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Injectable } from '@angular/core';
-
-export interface ISpinnerState { }
-
-@Injectable()
-export class SpinnerService {
- spinnerState: any;
-
- show() { }
-
- hide() { }
-}
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/toast/index.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/toast/index.ts
deleted file mode 100644
index 01b41aff98..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/core/toast/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// #docregion
-export * from './toast.component';
-export * from './toast.service';
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/toast/toast.component.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/toast/toast.component.ts
deleted file mode 100644
index dd0bba5eba..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/core/toast/toast.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { ToastService } from './toast.service';
-
-@Component({
- selector: 'toh-toast',
- template: 'toast
'
-})
-export class ToastComponent implements OnInit {
- constructor(toastService: ToastService) { }
-
- ngOnInit() { }
-}
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/core/toast/toast.service.ts b/docs_app/content/examples/styleguide/src/03-06/app/core/toast/toast.service.ts
deleted file mode 100644
index e92e75ee45..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/core/toast/toast.service.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class ToastService {
- activate: (message?: string, title?: string) => void;
-}
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/03-06/app/heroes/index.ts
deleted file mode 100644
index c3da79f741..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/heroes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './shared';
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.model.ts
deleted file mode 100644
index c3277621cb..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.model.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// #docregion
-// #docregion example
-export class Hero {
- name: string;
- power: string;
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts b/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts
deleted file mode 100644
index 3b983f5bda..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.avoid.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// #docregion
-// #docregion example
-/* avoid */
-
-import { ExceptionService, SpinnerService, ToastService } from '../../core';
-import { Http } from '@angular/http';
-import { Injectable } from '@angular/core';
-import { map } from 'rxjs/operators';
-import { Hero } from './hero.model';
-// #enddocregion example
-
-@Injectable()
-export class HeroService {
-
- constructor(
- private exceptionService: ExceptionService,
- private spinnerService: SpinnerService,
- private toastService: ToastService,
- private http: Http
- ) { }
-
- getHero(id: number) {
- return this.http.get(`api/heroes/${id}`).pipe(
- map(response => response.json().data as Hero));
- }
-
- getHeroes() {
- return this.http.get(`api/heroes`).pipe(
- map(response => response.json().data as Hero[]));
- }
-
-}
-
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts b/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts
deleted file mode 100644
index 0a50c11bb4..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/hero.service.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// #docregion
-// #docregion example
-import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
-import { map } from 'rxjs/operators';
-
-import { Hero } from './hero.model';
-import { ExceptionService, SpinnerService, ToastService } from '../../core';
-// #enddocregion example
-
-@Injectable()
-export class HeroService {
- cachedHeroes: Hero[];
-
- constructor(
- private exceptionService: ExceptionService,
- private spinnerService: SpinnerService,
- private toastService: ToastService,
- private http: Http
- ) { }
-
- getHero(id: number) {
- return this.http.get(`api/heroes/${id}`).pipe(
- map(response => response.json() as Hero));
- }
-
- getHeroes() {
- return this.http.get(`api/heroes`).pipe(
- map(response => response.json() as Hero[]));
- }
-
-}
-
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/index.ts
deleted file mode 100644
index dbb150d3f8..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/heroes/shared/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './hero.model';
-export * from './hero.service';
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/index.ts b/docs_app/content/examples/styleguide/src/03-06/app/index.ts
deleted file mode 100644
index cf861e261a..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './heroes';
-export * from './core';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/03-06/app/shared/toast/toast.component.ts b/docs_app/content/examples/styleguide/src/03-06/app/shared/toast/toast.component.ts
deleted file mode 100644
index e1c1ae6665..0000000000
--- a/docs_app/content/examples/styleguide/src/03-06/app/shared/toast/toast.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { ToastService } from '../../core';
-
-@Component({
- selector: 'toh-toast',
- template: 'toast
'
-})
-export class ToastComponent implements OnInit {
- constructor(toastService: ToastService) { }
-
- ngOnInit() { }
-}
diff --git a/docs_app/content/examples/styleguide/src/04-08/app/app.component.ts b/docs_app/content/examples/styleguide/src/04-08/app/app.component.ts
deleted file mode 100644
index fdd8e6ef56..0000000000
--- a/docs_app/content/examples/styleguide/src/04-08/app/app.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'sg-app',
- template: ' '
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/04-08/app/app.module.ts b/docs_app/content/examples/styleguide/src/04-08/app/app.module.ts
deleted file mode 100644
index 25568b7fb4..0000000000
--- a/docs_app/content/examples/styleguide/src/04-08/app/app.module.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion example
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-// #enddocregion example
-import { RouterModule } from '@angular/router';
-// #docregion example
-
-import { AppComponent } from './app.component';
-import { HeroesComponent } from './heroes/heroes.component';
-
-@NgModule({
- imports: [
- BrowserModule,
-// #enddocregion example
- RouterModule.forChild([{ path: '04-08', component: AppComponent }])
-// #docregion example
- ],
- declarations: [
- AppComponent,
- HeroesComponent
- ],
- exports: [ AppComponent ],
- entryComponents: [ AppComponent ]
-})
-export class AppModule {}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/04-08/app/heroes/heroes.component.html b/docs_app/content/examples/styleguide/src/04-08/app/heroes/heroes.component.html
deleted file mode 100644
index 1244e68a4a..0000000000
--- a/docs_app/content/examples/styleguide/src/04-08/app/heroes/heroes.component.html
+++ /dev/null
@@ -1 +0,0 @@
-This is heroes component
diff --git a/docs_app/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts b/docs_app/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts
deleted file mode 100644
index e2df4c91fd..0000000000
--- a/docs_app/content/examples/styleguide/src/04-08/app/heroes/heroes.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'toh-heroes',
- templateUrl: './heroes.component.html'
-})
-export class HeroesComponent implements OnInit {
- constructor() { /* ... */ }
-
- ngOnInit() { /* ... */ }
-}
diff --git a/docs_app/content/examples/styleguide/src/04-10/app/app.component.ts b/docs_app/content/examples/styleguide/src/04-10/app/app.component.ts
deleted file mode 100644
index fdd8e6ef56..0000000000
--- a/docs_app/content/examples/styleguide/src/04-10/app/app.component.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'sg-app',
- template: ' '
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/04-10/app/app.module.ts b/docs_app/content/examples/styleguide/src/04-10/app/app.module.ts
deleted file mode 100644
index 78106657ad..0000000000
--- a/docs_app/content/examples/styleguide/src/04-10/app/app.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion example
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-// #enddocregion example
-import { RouterModule } from '@angular/router';
-// #docregion example
-
-import { AppComponent } from './app.component';
-import { HeroesComponent } from './heroes/heroes.component';
-import { SharedModule } from './shared/shared.module';
-
-@NgModule({
- imports: [
- BrowserModule,
- SharedModule,
-// #enddocregion example
- RouterModule.forChild([{ path: '04-10', component: AppComponent }])
-// #docregion example
- ],
- declarations: [
- AppComponent,
- HeroesComponent
- ],
- exports: [ AppComponent ],
- entryComponents: [ AppComponent ]
-})
-export class AppModule {}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/04-10/app/heroes/heroes.component.html b/docs_app/content/examples/styleguide/src/04-10/app/heroes/heroes.component.html
deleted file mode 100644
index 170f76aee1..0000000000
--- a/docs_app/content/examples/styleguide/src/04-10/app/heroes/heroes.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
-This is heroes component
-
-
diff --git a/docs_app/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts b/docs_app/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts
deleted file mode 100644
index 376567650e..0000000000
--- a/docs_app/content/examples/styleguide/src/04-10/app/heroes/heroes.component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-import { FilterTextService } from '../shared/filter-text/filter-text.service';
-
-@Component({
- selector: 'toh-heroes',
- templateUrl: './heroes.component.html'
-})
-export class HeroesComponent {
-
- heroes = [
- { id: 1, name: 'Windstorm' },
- { id: 2, name: 'Bombasto' },
- { id: 3, name: 'Magneta' },
- { id: 4, name: 'Tornado' }
- ];
-
- filteredHeroes = this.heroes;
-
- constructor(private filterService: FilterTextService) { }
-
- filterChanged(searchText: string) {
- this.filteredHeroes = this.filterService.filter(searchText, ['id', 'name'], this.heroes);
- }
-}
-
diff --git a/docs_app/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts b/docs_app/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts
deleted file mode 100644
index fffe4bf0b7..0000000000
--- a/docs_app/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// #docregion
-import { Component, EventEmitter, Output } from '@angular/core';
-
-@Component({
- selector: 'toh-filter-text',
- template: ' '
-})
-export class FilterTextComponent {
- @Output() changed: EventEmitter;
-
- filter: string;
-
- constructor() {
- this.changed = new EventEmitter();
- }
-
- clear() {
- this.filter = '';
- }
-
- filterChanged(event: any) {
- event.preventDefault();
- console.log(`Filter Changed: ${this.filter}`);
- this.changed.emit(this.filter);
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts b/docs_app/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts
deleted file mode 100644
index 87978e10e5..0000000000
--- a/docs_app/content/examples/styleguide/src/04-10/app/shared/filter-text/filter-text.service.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class FilterTextService {
- constructor() {
- console.log('Created an instance of FilterTextService');
- }
-
- filter(data: string, props: Array, originalList: Array) {
- let filteredList: any[];
- if (data && props && originalList) {
- data = data.toLowerCase();
- let filtered = originalList.filter(item => {
- let match = false;
- for (let prop of props) {
- if (item[prop].toString().toLowerCase().indexOf(data) > -1) {
- match = true;
- break;
- }
- };
- return match;
- });
- filteredList = filtered;
- } else {
- filteredList = originalList;
- }
- return filteredList;
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts b/docs_app/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts
deleted file mode 100644
index 5019bcb234..0000000000
--- a/docs_app/content/examples/styleguide/src/04-10/app/shared/init-caps.pipe.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// #docregion
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({ name: 'initCaps' })
-export class InitCapsPipe implements PipeTransform {
- transform = (value: string) => value;
-}
diff --git a/docs_app/content/examples/styleguide/src/04-10/app/shared/shared.module.ts b/docs_app/content/examples/styleguide/src/04-10/app/shared/shared.module.ts
deleted file mode 100644
index 6160abcc84..0000000000
--- a/docs_app/content/examples/styleguide/src/04-10/app/shared/shared.module.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { FilterTextComponent } from './filter-text/filter-text.component';
-import { FilterTextService } from './filter-text/filter-text.service';
-import { InitCapsPipe } from './init-caps.pipe';
-
-@NgModule({
- imports: [CommonModule, FormsModule],
- declarations: [
- FilterTextComponent,
- InitCapsPipe
- ],
- providers: [FilterTextService],
- exports: [
- CommonModule,
- FormsModule,
- FilterTextComponent,
- InitCapsPipe
- ]
-})
-export class SharedModule { }
diff --git a/docs_app/content/examples/styleguide/src/04-11/app/app.component.ts b/docs_app/content/examples/styleguide/src/04-11/app/app.component.ts
deleted file mode 100644
index 693619a982..0000000000
--- a/docs_app/content/examples/styleguide/src/04-11/app/app.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'toh-app',
- template: `
-
-
-
- `
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/04-11/app/app.module.ts b/docs_app/content/examples/styleguide/src/04-11/app/app.module.ts
deleted file mode 100644
index ef3c156bcf..0000000000
--- a/docs_app/content/examples/styleguide/src/04-11/app/app.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion example
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-// #enddocregion example
-import { RouterModule } from '@angular/router';
-// #docregion example
-
-import { AppComponent } from './app.component';
-import { HeroesComponent } from './heroes/heroes.component';
-import { CoreModule } from './core/core.module';
-
-@NgModule({
- imports: [
- BrowserModule,
- CoreModule,
-// #enddocregion example
- RouterModule.forChild([{ path: '04-11', component: AppComponent }])
-// #docregion example
- ],
- declarations: [
- AppComponent,
- HeroesComponent
- ],
- exports: [ AppComponent ],
- entryComponents: [ AppComponent ]
-})
-export class AppModule {}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/core.module.ts b/docs_app/content/examples/styleguide/src/04-11/app/core/core.module.ts
deleted file mode 100644
index 4ba5c79a14..0000000000
--- a/docs_app/content/examples/styleguide/src/04-11/app/core/core.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { LoggerService } from './logger.service';
-import { NavComponent } from './nav/nav.component';
-import { SpinnerComponent } from './spinner/spinner.component';
-import { SpinnerService } from './spinner/spinner.service';
-
-@NgModule({
- imports: [
- CommonModule // we use ngFor
- ],
- exports: [NavComponent, SpinnerComponent],
- declarations: [NavComponent, SpinnerComponent],
- providers: [LoggerService, SpinnerService]
-})
-export class CoreModule { }
-
diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/index.ts b/docs_app/content/examples/styleguide/src/04-11/app/core/index.ts
deleted file mode 100644
index 098f40c7d5..0000000000
--- a/docs_app/content/examples/styleguide/src/04-11/app/core/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// #docregion
-export * from './logger.service';
-export * from './spinner/spinner.service';
-export * from './nav/nav.component';
diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/logger.service.ts b/docs_app/content/examples/styleguide/src/04-11/app/core/logger.service.ts
deleted file mode 100644
index 9c7080f07a..0000000000
--- a/docs_app/content/examples/styleguide/src/04-11/app/core/logger.service.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class LoggerService {
- log(msg: string) {
- console.log(msg);
- }
-
- error(msg: string) {
- console.error(msg);
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css b/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css
deleted file mode 100644
index 45979c75ad..0000000000
--- a/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css
+++ /dev/null
@@ -1,56 +0,0 @@
-/*#docregion*/
-.mdl-layout__header {
- display: flex;
- position: fixed;
- background-color: #222;
-}
-
-.nav-link {
- padding: 0 1em;
- width: 100px;
- color: rgba(255,255,255,.6);
- text-align: center;
- text-decoration: none;
-}
-
-.nav-link.router-link-active {
- color: rgba(255,255,255, 1);
-}
-
-.nav-link.router-link-active::after {
- height: 3px;
- width: 100%;
- display: block;
- content: " ";
- bottom: 0;
- left: 0;
- position: inherit;
- background: rgb(83,109,254);
-}
-
-.mdl-layout__header-row {
- height: 56px;
- padding: 0 16px 0 72px;
- padding-left: 8px;
- background-color: #673AB7;
- background: #0033FF;
- background-color: #222;
-}
-
-#reset-button {
- position: fixed;
- right: 2em;
- top: 1em;
-}
-
-@media (max-width: 480px) {
- #reset-button {
- display: none
- }
-}
-
-@media (max-width: 320px) {
- a.nav-link {
- font-size: 12px;
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.html b/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.html
deleted file mode 100644
index b3c7e441e0..0000000000
--- a/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
Tour of Heroes
-
-
-
-
-
-
diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.ts b/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.ts
deleted file mode 100644
index 7e21016e2b..0000000000
--- a/docs_app/content/examples/styleguide/src/04-11/app/core/nav/nav.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'toh-nav',
- templateUrl: './nav.component.html',
- styleUrls: ['./nav.component.css'],
-})
-export class NavComponent implements OnInit {
- menuItems = [
- 'Heroes',
- 'Villains',
- 'Other'
- ];
-
- ngOnInit() { }
-
- constructor() { }
-}
diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css b/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css
deleted file mode 100644
index afad0fe8e3..0000000000
--- a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/*#docregion*/
-.spinner {
- position: absolute;
- left: 7em;
- top: 20em;
- position: absolute;
- background-color: blue;
- height: .3em;
- width: 6em;
- margin:-60px 0 0 -60px;
- -webkit-animation:spin 4s linear infinite;
- -moz-animation:spin 4s linear infinite;
- animation:spin 4s linear infinite;
-}
-@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
-@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
-
-.spinner-hidden {
- display:none;
-}
diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.html b/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.html
deleted file mode 100644
index a07e3378c0..0000000000
--- a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.html
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts b/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts
deleted file mode 100644
index cb8a416102..0000000000
--- a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.component.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// #docregion
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
-
-import { LoggerService } from '../logger.service';
-import { SpinnerState, SpinnerService } from './spinner.service';
-
-@Component({
- selector: 'toh-spinner',
- templateUrl: './spinner.component.html',
- styleUrls: ['./spinner.component.css']
-})
-export class SpinnerComponent implements OnDestroy, OnInit {
- visible = false;
-
- private spinnerStateChanged: Subscription;
-
- constructor(
- private loggerService: LoggerService,
- private spinnerService: SpinnerService
- ) { }
-
- ngOnInit() {
- console.log(this.visible);
- this.spinnerStateChanged = this.spinnerService.spinnerState
- .subscribe((state: SpinnerState) => {
- this.visible = state.show;
- this.loggerService.log(`visible=${this.visible}`);
- });
- }
-
- ngOnDestroy() {
- this.spinnerStateChanged.unsubscribe();
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.service.ts b/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.service.ts
deleted file mode 100644
index e092d4bfda..0000000000
--- a/docs_app/content/examples/styleguide/src/04-11/app/core/spinner/spinner.service.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs';
-
-export interface SpinnerState {
- show: boolean;
-}
-
-@Injectable()
-export class SpinnerService {
- private spinnerSubject = new Subject();
-
- spinnerState = this.spinnerSubject.asObservable();
-
- constructor() { }
-
- show() {
- this.spinnerSubject.next({ show: true });
- }
-
- hide() {
- this.spinnerSubject.next({ show: false });
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/04-11/app/heroes/heroes.component.html b/docs_app/content/examples/styleguide/src/04-11/app/heroes/heroes.component.html
deleted file mode 100644
index 9035a4b8ff..0000000000
--- a/docs_app/content/examples/styleguide/src/04-11/app/heroes/heroes.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
diff --git a/docs_app/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts b/docs_app/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts
deleted file mode 100644
index 856baadd74..0000000000
--- a/docs_app/content/examples/styleguide/src/04-11/app/heroes/heroes.component.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Component } from '@angular/core';
-
-import { LoggerService } from '../core/logger.service';
-import { SpinnerService } from '../core/spinner/spinner.service';
-
-@Component({
- selector: 'toh-heroes',
- templateUrl: './heroes.component.html'
-})
-export class HeroesComponent {
- heroes: any[];
-
- constructor(
- private loggerService: LoggerService,
- private spinnerService: SpinnerService
- ) { }
-
- getHeroes() {
- this.loggerService.log(`Getting heroes`);
- this.spinnerService.show();
- setTimeout(() => {
- this.heroes = [
- { id: 1, name: 'Windstorm' },
- { id: 2, name: 'Bombasto' },
- { id: 3, name: 'Magneta' },
- { id: 4, name: 'Tornado' }
- ];
- this.loggerService.log(`We have ${HeroesComponent.length} heroes`);
- this.spinnerService.hide();
- }, 2000);
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/04-12/app/app.component.ts b/docs_app/content/examples/styleguide/src/04-12/app/app.component.ts
deleted file mode 100644
index dc85b06e9f..0000000000
--- a/docs_app/content/examples/styleguide/src/04-12/app/app.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'toh-app',
- template: `
-
-
- `
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/04-12/app/app.module.ts b/docs_app/content/examples/styleguide/src/04-12/app/app.module.ts
deleted file mode 100644
index 7c9fb44182..0000000000
--- a/docs_app/content/examples/styleguide/src/04-12/app/app.module.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion example
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-// #enddocregion example
-import { RouterModule } from '@angular/router';
-// #docregion example
-
-import { AppComponent } from './app.component';
-import { HeroesComponent } from './heroes/heroes.component';
-import { CoreModule } from './core/core.module';
-
-@NgModule({
- imports: [
- BrowserModule,
- CoreModule,
-// #enddocregion example
- RouterModule.forChild([{ path: '04-12', component: AppComponent }])
-// #docregion example
- ],
- declarations: [
- AppComponent,
- HeroesComponent
- ],
- exports: [ AppComponent ],
- entryComponents: [ AppComponent ]
-})
-export class AppModule {}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/04-12/app/core/core.module.ts b/docs_app/content/examples/styleguide/src/04-12/app/core/core.module.ts
deleted file mode 100644
index 069141bf2a..0000000000
--- a/docs_app/content/examples/styleguide/src/04-12/app/core/core.module.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// #docregion
-import { NgModule, Optional, SkipSelf } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { LoggerService } from './logger.service';
-import { NavComponent } from './nav/nav.component';
-import { throwIfAlreadyLoaded } from './module-import-guard';
-
-@NgModule({
- imports: [
- CommonModule // we use ngFor
- ],
- exports: [NavComponent],
- declarations: [NavComponent],
- providers: [LoggerService]
-})
-export class CoreModule {
- constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
- throwIfAlreadyLoaded(parentModule, 'CoreModule');
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/04-12/app/core/index.ts b/docs_app/content/examples/styleguide/src/04-12/app/core/index.ts
deleted file mode 100644
index 8768b77f41..0000000000
--- a/docs_app/content/examples/styleguide/src/04-12/app/core/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// #docregion
-export * from './logger.service';
-export * from './nav/nav.component';
diff --git a/docs_app/content/examples/styleguide/src/04-12/app/core/logger.service.ts b/docs_app/content/examples/styleguide/src/04-12/app/core/logger.service.ts
deleted file mode 100644
index 9c7080f07a..0000000000
--- a/docs_app/content/examples/styleguide/src/04-12/app/core/logger.service.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class LoggerService {
- log(msg: string) {
- console.log(msg);
- }
-
- error(msg: string) {
- console.error(msg);
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/04-12/app/core/module-import-guard.ts b/docs_app/content/examples/styleguide/src/04-12/app/core/module-import-guard.ts
deleted file mode 100644
index 5248b15b2e..0000000000
--- a/docs_app/content/examples/styleguide/src/04-12/app/core/module-import-guard.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// #docregion
-export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) {
- if (parentModule) {
- throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`);
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css b/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css
deleted file mode 100644
index 45979c75ad..0000000000
--- a/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css
+++ /dev/null
@@ -1,56 +0,0 @@
-/*#docregion*/
-.mdl-layout__header {
- display: flex;
- position: fixed;
- background-color: #222;
-}
-
-.nav-link {
- padding: 0 1em;
- width: 100px;
- color: rgba(255,255,255,.6);
- text-align: center;
- text-decoration: none;
-}
-
-.nav-link.router-link-active {
- color: rgba(255,255,255, 1);
-}
-
-.nav-link.router-link-active::after {
- height: 3px;
- width: 100%;
- display: block;
- content: " ";
- bottom: 0;
- left: 0;
- position: inherit;
- background: rgb(83,109,254);
-}
-
-.mdl-layout__header-row {
- height: 56px;
- padding: 0 16px 0 72px;
- padding-left: 8px;
- background-color: #673AB7;
- background: #0033FF;
- background-color: #222;
-}
-
-#reset-button {
- position: fixed;
- right: 2em;
- top: 1em;
-}
-
-@media (max-width: 480px) {
- #reset-button {
- display: none
- }
-}
-
-@media (max-width: 320px) {
- a.nav-link {
- font-size: 12px;
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.html b/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.html
deleted file mode 100644
index b3c7e441e0..0000000000
--- a/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
-
Tour of Heroes
-
-
-
-
-
-
diff --git a/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.ts b/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.ts
deleted file mode 100644
index 7e21016e2b..0000000000
--- a/docs_app/content/examples/styleguide/src/04-12/app/core/nav/nav.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'toh-nav',
- templateUrl: './nav.component.html',
- styleUrls: ['./nav.component.css'],
-})
-export class NavComponent implements OnInit {
- menuItems = [
- 'Heroes',
- 'Villains',
- 'Other'
- ];
-
- ngOnInit() { }
-
- constructor() { }
-}
diff --git a/docs_app/content/examples/styleguide/src/04-12/app/heroes/heroes.component.html b/docs_app/content/examples/styleguide/src/04-12/app/heroes/heroes.component.html
deleted file mode 100644
index 9035a4b8ff..0000000000
--- a/docs_app/content/examples/styleguide/src/04-12/app/heroes/heroes.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
diff --git a/docs_app/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts b/docs_app/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts
deleted file mode 100644
index f84b16c140..0000000000
--- a/docs_app/content/examples/styleguide/src/04-12/app/heroes/heroes.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Component } from '@angular/core';
-
-import { LoggerService } from '../core/logger.service';
-
-@Component({
- selector: 'toh-heroes',
- templateUrl: './heroes.component.html'
-})
-export class HeroesComponent {
- heroes: any[];
-
- constructor(private loggerService: LoggerService) { }
-
- getHeroes() {
- this.loggerService.log(`Getting heroes`);
- this.heroes = [
- { id: 1, name: 'Windstorm' },
- { id: 2, name: 'Bombasto' },
- { id: 3, name: 'Magneta' },
- { id: 4, name: 'Tornado' }
- ];
- this.loggerService.log(`We have ${HeroesComponent.length} heroes`);
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/05-02/app/app.component.html b/docs_app/content/examples/styleguide/src/05-02/app/app.component.html
deleted file mode 100644
index 607d068557..0000000000
--- a/docs_app/content/examples/styleguide/src/05-02/app/app.component.html
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
diff --git a/docs_app/content/examples/styleguide/src/05-02/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-02/app/app.component.ts
deleted file mode 100644
index 7c9f37919f..0000000000
--- a/docs_app/content/examples/styleguide/src/05-02/app/app.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'sg-app',
- templateUrl: './app.component.html'
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/05-02/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-02/app/app.module.ts
deleted file mode 100644
index 1c458e2ca1..0000000000
--- a/docs_app/content/examples/styleguide/src/05-02/app/app.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { HeroButtonComponent } from './heroes';
-
-@NgModule({
- imports: [
- RouterModule.forChild([{ path: '05-02', component: AppComponent }])
- ],
- declarations: [
- AppComponent,
- HeroButtonComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/05-02/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-02/app/heroes/index.ts
deleted file mode 100644
index c3da79f741..0000000000
--- a/docs_app/content/examples/styleguide/src/05-02/app/heroes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './shared';
diff --git a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts
deleted file mode 100644
index e48d41f721..0000000000
--- a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docplaster
-import { Component } from '@angular/core';
-// #docregion example
-/* avoid */
-
-@Component({
- selector: 'tohHeroButton',
- templateUrl: './hero-button.component.html'
-})
-export class HeroButtonComponent {}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.html b/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.html
deleted file mode 100644
index 9ad67e50ac..0000000000
--- a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.html
+++ /dev/null
@@ -1 +0,0 @@
-Hero button
diff --git a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts b/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts
deleted file mode 100644
index c90c966f1a..0000000000
--- a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-// #docregion example
-@Component({
- selector: 'toh-hero-button',
- templateUrl: './hero-button.component.html'
-})
-export class HeroButtonComponent {}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/index.ts b/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/index.ts
deleted file mode 100644
index 6bb67c5670..0000000000
--- a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/hero-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero-button.component';
diff --git a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/index.ts
deleted file mode 100644
index 2334d49c9a..0000000000
--- a/docs_app/content/examples/styleguide/src/05-02/app/heroes/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero-button';
diff --git a/docs_app/content/examples/styleguide/src/05-02/app/index.ts b/docs_app/content/examples/styleguide/src/05-02/app/index.ts
deleted file mode 100644
index fe8300f1dd..0000000000
--- a/docs_app/content/examples/styleguide/src/05-02/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './heroes';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/05-03/app/app.component.avoid.html b/docs_app/content/examples/styleguide/src/05-03/app/app.component.avoid.html
deleted file mode 100644
index 91bdbe403c..0000000000
--- a/docs_app/content/examples/styleguide/src/05-03/app/app.component.avoid.html
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/docs_app/content/examples/styleguide/src/05-03/app/app.component.html b/docs_app/content/examples/styleguide/src/05-03/app/app.component.html
deleted file mode 100644
index 607d068557..0000000000
--- a/docs_app/content/examples/styleguide/src/05-03/app/app.component.html
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
diff --git a/docs_app/content/examples/styleguide/src/05-03/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-03/app/app.component.ts
deleted file mode 100644
index 7c9f37919f..0000000000
--- a/docs_app/content/examples/styleguide/src/05-03/app/app.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'sg-app',
- templateUrl: './app.component.html'
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/05-03/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-03/app/app.module.ts
deleted file mode 100644
index 1b754e3ee5..0000000000
--- a/docs_app/content/examples/styleguide/src/05-03/app/app.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { HeroButtonComponent } from './heroes';
-
-@NgModule({
- imports: [
- RouterModule.forChild([{ path: '05-03', component: AppComponent }])
- ],
- declarations: [
- AppComponent,
- HeroButtonComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/05-03/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-03/app/heroes/index.ts
deleted file mode 100644
index c3da79f741..0000000000
--- a/docs_app/content/examples/styleguide/src/05-03/app/heroes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './shared';
diff --git a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts
deleted file mode 100644
index 74f5c36339..0000000000
--- a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-// #docregion example
-/* avoid */
-
-@Component({
- selector: '[tohHeroButton]',
- templateUrl: './hero-button.component.html'
-})
-export class HeroButtonComponent {}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.html b/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.html
deleted file mode 100644
index 9ad67e50ac..0000000000
--- a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.html
+++ /dev/null
@@ -1 +0,0 @@
-Hero button
diff --git a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts b/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts
deleted file mode 100644
index c90c966f1a..0000000000
--- a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-// #docregion example
-@Component({
- selector: 'toh-hero-button',
- templateUrl: './hero-button.component.html'
-})
-export class HeroButtonComponent {}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/index.ts b/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/index.ts
deleted file mode 100644
index 6bb67c5670..0000000000
--- a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/hero-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero-button.component';
diff --git a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/index.ts
deleted file mode 100644
index 2334d49c9a..0000000000
--- a/docs_app/content/examples/styleguide/src/05-03/app/heroes/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero-button';
diff --git a/docs_app/content/examples/styleguide/src/05-03/app/index.ts b/docs_app/content/examples/styleguide/src/05-03/app/index.ts
deleted file mode 100644
index fe8300f1dd..0000000000
--- a/docs_app/content/examples/styleguide/src/05-03/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './heroes';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/05-04/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-04/app/app.component.ts
deleted file mode 100644
index 0e43893f7f..0000000000
--- a/docs_app/content/examples/styleguide/src/05-04/app/app.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'sg-app',
- template: ' '
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/05-04/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-04/app/app.module.ts
deleted file mode 100644
index 07f97cc6e4..0000000000
--- a/docs_app/content/examples/styleguide/src/05-04/app/app.module.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { HeroesComponent } from './heroes';
-import { HeroService } from './heroes/shared';
-
-@NgModule({
- imports: [
- BrowserModule,
- RouterModule.forChild([{ path: '05-04', component: AppComponent }])
- ],
- declarations: [
- AppComponent,
- HeroesComponent
- ],
- exports: [ AppComponent ],
- providers: [ HeroService ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts
deleted file mode 100644
index 8bce611048..0000000000
--- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.avoid.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-
-import { Hero, HeroService } from './shared';
-
-// #docregion example
-/* avoid */
-
-@Component({
- selector: 'toh-heroes',
- template: `
-
-
My Heroes
-
-
- {{hero.id}} {{hero.name}}
-
-
-
-
{{selectedHero.name | uppercase}} is my hero
-
-
- `,
- styles: [`
- .heroes {
- margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em;
- }
- .heroes li {
- cursor: pointer;
- position: relative;
- left: 0;
- background-color: #EEE;
- margin: .5em;
- padding: .3em 0;
- height: 1.6em;
- border-radius: 4px;
- }
- .heroes .badge {
- display: inline-block;
- font-size: small;
- color: white;
- padding: 0.8em 0.7em 0 0.7em;
- background-color: #607D8B;
- line-height: 1em;
- position: relative;
- left: -1px;
- top: -4px;
- height: 1.8em;
- margin-right: .8em;
- border-radius: 4px 0 0 4px;
- }
- `]
-})
-export class HeroesComponent implements OnInit {
- heroes: Observable;
- selectedHero: Hero;
-
- constructor(private heroService: HeroService) { }
-
- ngOnInit() {
- this.heroes = this.heroService.getHeroes();
- }
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css b/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css
deleted file mode 100644
index 82f0c1d0ab..0000000000
--- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/* #docregion */
-.heroes {
- margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em;
-}
-.heroes li {
- cursor: pointer;
- position: relative;
- left: 0;
- background-color: #EEE;
- margin: .5em;
- padding: .3em 0;
- height: 1.6em;
- border-radius: 4px;
-}
-.heroes .badge {
- display: inline-block;
- font-size: small;
- color: white;
- padding: 0.8em 0.7em 0 0.7em;
- background-color: #607D8B;
- line-height: 1em;
- position: relative;
- left: -1px;
- top: -4px;
- height: 1.8em;
- margin-right: .8em;
- border-radius: 4px 0 0 4px;
-}
diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html b/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html
deleted file mode 100644
index bab05ceb2b..0000000000
--- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
My Heroes
-
-
- {{hero.id}} {{hero.name}}
-
-
-
-
{{selectedHero.name | uppercase}} is my hero
-
-
diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts b/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts
deleted file mode 100644
index b85c5b70ab..0000000000
--- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/heroes.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs';
-
-import { Hero, HeroService } from './shared';
-
-// #docregion example
-@Component({
- selector: 'toh-heroes',
- templateUrl: './heroes.component.html',
- styleUrls: ['./heroes.component.css']
-})
-export class HeroesComponent implements OnInit {
- heroes: Observable;
- selectedHero: Hero;
-
- constructor(private heroService: HeroService) { }
-
- ngOnInit() {
- this.heroes = this.heroService.getHeroes();
- }
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-04/app/heroes/index.ts
deleted file mode 100644
index a8d7f1d422..0000000000
--- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './shared';
-export * from './heroes.component';
diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/hero.model.ts
deleted file mode 100644
index 8f7cc205c8..0000000000
--- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/hero.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// #docregion
-export class Hero {
- id: number;
- name: string;
-}
diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts b/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts
deleted file mode 100644
index a12fdf487e..0000000000
--- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/hero.service.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
-
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { Hero } from './hero.model';
-
-@Injectable()
-export class HeroService {
-
- constructor(private http: Http) {}
-
- getHeroes(): Observable {
- return this.http.get('api/heroes').pipe(
- map(resp => resp.json().data as Hero[])
- );
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/index.ts
deleted file mode 100644
index dbb150d3f8..0000000000
--- a/docs_app/content/examples/styleguide/src/05-04/app/heroes/shared/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './hero.model';
-export * from './hero.service';
diff --git a/docs_app/content/examples/styleguide/src/05-04/app/index.ts b/docs_app/content/examples/styleguide/src/05-04/app/index.ts
deleted file mode 100644
index fe8300f1dd..0000000000
--- a/docs_app/content/examples/styleguide/src/05-04/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './heroes';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/05-12/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-12/app/app.component.ts
deleted file mode 100644
index dac40205c9..0000000000
--- a/docs_app/content/examples/styleguide/src/05-12/app/app.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'sg-app',
- template: ' '
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/05-12/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-12/app/app.module.ts
deleted file mode 100644
index 5177b2cc64..0000000000
--- a/docs_app/content/examples/styleguide/src/05-12/app/app.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { HeroButtonComponent } from './heroes';
-
-@NgModule({
- imports: [
- RouterModule.forChild([{ path: '05-12', component: AppComponent }])
- ],
- declarations: [
- AppComponent,
- HeroButtonComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/05-12/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-12/app/heroes/index.ts
deleted file mode 100644
index c3da79f741..0000000000
--- a/docs_app/content/examples/styleguide/src/05-12/app/heroes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './shared';
diff --git a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts
deleted file mode 100644
index 8f393ddd32..0000000000
--- a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { Component, EventEmitter } from '@angular/core';
-// #docregion example
-/* avoid */
-
-@Component({
- selector: 'toh-hero-button',
- template: ` `,
- inputs: [
- 'label'
- ],
- outputs: [
- 'change'
- ]
-})
-export class HeroButtonComponent {
- change = new EventEmitter();
- label: string;
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts b/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts
deleted file mode 100644
index b299740765..0000000000
--- a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/hero-button.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-// #docregion example
-@Component({
- selector: 'toh-hero-button',
- template: `{{label}} `
-})
-export class HeroButtonComponent {
- @Output() change = new EventEmitter();
- @Input() label: string;
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/index.ts b/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/index.ts
deleted file mode 100644
index 6bb67c5670..0000000000
--- a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/hero-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero-button.component';
diff --git a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/index.ts
deleted file mode 100644
index 2334d49c9a..0000000000
--- a/docs_app/content/examples/styleguide/src/05-12/app/heroes/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero-button';
diff --git a/docs_app/content/examples/styleguide/src/05-12/app/index.ts b/docs_app/content/examples/styleguide/src/05-12/app/index.ts
deleted file mode 100644
index fe8300f1dd..0000000000
--- a/docs_app/content/examples/styleguide/src/05-12/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './heroes';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/05-13/app/app.component.avoid.html b/docs_app/content/examples/styleguide/src/05-13/app/app.component.avoid.html
deleted file mode 100644
index 0a263a6a95..0000000000
--- a/docs_app/content/examples/styleguide/src/05-13/app/app.component.avoid.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
-
-
-
diff --git a/docs_app/content/examples/styleguide/src/05-13/app/app.component.html b/docs_app/content/examples/styleguide/src/05-13/app/app.component.html
deleted file mode 100644
index 3cd94ca772..0000000000
--- a/docs_app/content/examples/styleguide/src/05-13/app/app.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-
-
-
-The Great Bombasto
diff --git a/docs_app/content/examples/styleguide/src/05-13/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-13/app/app.component.ts
deleted file mode 100644
index 7c9f37919f..0000000000
--- a/docs_app/content/examples/styleguide/src/05-13/app/app.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'sg-app',
- templateUrl: './app.component.html'
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/05-13/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-13/app/app.module.ts
deleted file mode 100644
index 7ebe91dbbc..0000000000
--- a/docs_app/content/examples/styleguide/src/05-13/app/app.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { HeroButtonComponent, HeroHighlightDirective } from './heroes';
-
-@NgModule({
- imports: [
- RouterModule.forChild([{ path: '05-13', component: AppComponent }])
- ],
- declarations: [
- AppComponent,
- HeroButtonComponent, HeroHighlightDirective
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/05-13/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-13/app/heroes/index.ts
deleted file mode 100644
index c3da79f741..0000000000
--- a/docs_app/content/examples/styleguide/src/05-13/app/heroes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './shared';
diff --git a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts
deleted file mode 100644
index 4e67a14113..0000000000
--- a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-// #docregion example
-/* avoid pointless aliasing */
-
-@Component({
- selector: 'toh-hero-button',
- template: `{{label}} `
-})
-export class HeroButtonComponent {
- // Pointless aliases
- @Output('changeEvent') change = new EventEmitter();
- @Input('labelAttribute') label: string;
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts b/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts
deleted file mode 100644
index af6e7d46b7..0000000000
--- a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/hero-button.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-// #docregion example
-@Component({
- selector: 'toh-hero-button',
- template: `{{label}} `
-})
-export class HeroButtonComponent {
- // No aliases
- @Output() change = new EventEmitter();
- @Input() label: string;
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/index.ts b/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/index.ts
deleted file mode 100644
index 6bb67c5670..0000000000
--- a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero-button.component';
diff --git a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts b/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts
deleted file mode 100644
index 737af31f4f..0000000000
--- a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
-
-@Directive({ selector: '[heroHighlight]' })
-export class HeroHighlightDirective implements OnChanges {
-
- // Aliased because `color` is a better property name than `heroHighlight`
- @Input('heroHighlight') color: string;
-
- constructor(private el: ElementRef) {}
-
- ngOnChanges() {
- this.el.nativeElement.style.backgroundColor = this.color || 'yellow';
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/index.ts
deleted file mode 100644
index 565f46cf4f..0000000000
--- a/docs_app/content/examples/styleguide/src/05-13/app/heroes/shared/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './hero-button';
-export * from './hero-highlight.directive';
diff --git a/docs_app/content/examples/styleguide/src/05-13/app/index.ts b/docs_app/content/examples/styleguide/src/05-13/app/index.ts
deleted file mode 100644
index fe8300f1dd..0000000000
--- a/docs_app/content/examples/styleguide/src/05-13/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './heroes';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/05-14/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-14/app/app.component.ts
deleted file mode 100644
index 8ed6da4c82..0000000000
--- a/docs_app/content/examples/styleguide/src/05-14/app/app.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'sg-app',
- template: ` `
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/05-14/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-14/app/app.module.ts
deleted file mode 100644
index 0b294573d2..0000000000
--- a/docs_app/content/examples/styleguide/src/05-14/app/app.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { ToastComponent } from './shared';
-
-@NgModule({
- imports: [
- RouterModule.forChild([{ path: '05-14', component: AppComponent }])
- ],
- declarations: [
- AppComponent,
- ToastComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/05-14/app/index.ts b/docs_app/content/examples/styleguide/src/05-14/app/index.ts
deleted file mode 100644
index ebe5c92f03..0000000000
--- a/docs_app/content/examples/styleguide/src/05-14/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './shared';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/05-14/app/shared/index.ts b/docs_app/content/examples/styleguide/src/05-14/app/shared/index.ts
deleted file mode 100644
index 7ff6d415e7..0000000000
--- a/docs_app/content/examples/styleguide/src/05-14/app/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './toast';
diff --git a/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/index.ts b/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/index.ts
deleted file mode 100644
index 6502de796e..0000000000
--- a/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './toast.component';
diff --git a/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts
deleted file mode 100644
index 037ff2c8b5..0000000000
--- a/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.avoid.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-// #docregion
-import { OnInit } from '@angular/core';
-// #docregion example
-/* avoid */
-
-export class ToastComponent implements OnInit {
-
- private defaults = {
- title: '',
- message: 'May the Force be with you'
- };
- message: string;
- title: string;
- private toastElement: any;
-
- ngOnInit() {
- this.toastElement = document.getElementById('toh-toast');
- }
-
- // private methods
- private hide() {
- this.toastElement.style.opacity = 0;
- window.setTimeout(() => this.toastElement.style.zIndex = 0, 400);
- }
-
- activate(message = this.defaults.message, title = this.defaults.title) {
- this.title = title;
- this.message = message;
- this.show();
- }
-
- private show() {
- console.log(this.message);
- this.toastElement.style.opacity = 1;
- this.toastElement.style.zIndex = 9999;
-
- window.setTimeout(() => this.hide(), 2500);
- }
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts b/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts
deleted file mode 100644
index d7b8ea4af0..0000000000
--- a/docs_app/content/examples/styleguide/src/05-14/app/shared/toast/toast.component.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'toh-toast',
- template: `...`
-})
-// #docregion example
-export class ToastComponent implements OnInit {
- // public properties
- message: string;
- title: string;
-
- // private fields
- private defaults = {
- title: '',
- message: 'May the Force be with you'
- };
- private toastElement: any;
-
- // public methods
- activate(message = this.defaults.message, title = this.defaults.title) {
- this.title = title;
- this.message = message;
- this.show();
- }
-
- ngOnInit() {
- this.toastElement = document.getElementById('toh-toast');
- }
-
- // private methods
- private hide() {
- this.toastElement.style.opacity = 0;
- window.setTimeout(() => this.toastElement.style.zIndex = 0, 400);
- }
-
- private show() {
- console.log(this.message);
- this.toastElement.style.opacity = 1;
- this.toastElement.style.zIndex = 9999;
- window.setTimeout(() => this.hide(), 2500);
- }
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/05-15/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-15/app/app.component.ts
deleted file mode 100644
index 91b569b1e7..0000000000
--- a/docs_app/content/examples/styleguide/src/05-15/app/app.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-import { HeroService } from './heroes';
-
-@Component({
- selector: 'sg-app',
- template: ' ',
- providers: [HeroService]
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/05-15/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-15/app/app.module.ts
deleted file mode 100644
index 9bd4b8c9a2..0000000000
--- a/docs_app/content/examples/styleguide/src/05-15/app/app.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { HeroListComponent } from './heroes';
-
-@NgModule({
- imports: [
- BrowserModule,
- RouterModule.forChild([{ path: '05-15', component: AppComponent }])
- ],
- declarations: [
- AppComponent,
- HeroListComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts
deleted file mode 100644
index 8f9334b468..0000000000
--- a/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.avoid.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// #docregion
-/* avoid */
-
-import { OnInit } from '@angular/core';
-import { Http, Response } from '@angular/http';
-
-import { Observable } from 'rxjs';
-import { catchError, finalize, map } from 'rxjs/operators';
-
-import { Hero } from '../shared/hero.model';
-
-const heroesUrl = 'http://angular.io';
-
-export class HeroListComponent implements OnInit {
- heroes: Hero[];
- constructor(private http: Http) {}
- getHeroes() {
- this.heroes = [];
- this.http.get(heroesUrl).pipe(
- map((response: Response) => response.json().data),
- catchError(this.catchBadResponse),
- finalize(() => this.hideSpinner())
- ).subscribe((heroes: Hero[]) => this.heroes = heroes);
- }
- ngOnInit() {
- this.getHeroes();
- }
-
- private catchBadResponse(err: any, source: Observable) {
- // log and handle the exception
- return new Observable();
- }
-
- private hideSpinner() {
- // hide the spinner
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts b/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts
deleted file mode 100644
index 1fdb893c13..0000000000
--- a/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/hero-list.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-// #docregion example
-import { Component, OnInit } from '@angular/core';
-
-import { Hero, HeroService } from '../shared';
-
-@Component({
- selector: 'toh-hero-list',
- template: `...`
-})
-export class HeroListComponent implements OnInit {
- heroes: Hero[];
- constructor(private heroService: HeroService) {}
- getHeroes() {
- this.heroes = [];
- this.heroService.getHeroes()
- .subscribe(heroes => this.heroes = heroes);
- }
- ngOnInit() {
- this.getHeroes();
- }
-}
-// #enddocregion example
-
diff --git a/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/index.ts b/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/index.ts
deleted file mode 100644
index c4bcb3278e..0000000000
--- a/docs_app/content/examples/styleguide/src/05-15/app/heroes/hero-list/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero-list.component';
diff --git a/docs_app/content/examples/styleguide/src/05-15/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-15/app/heroes/index.ts
deleted file mode 100644
index f1112f1c7c..0000000000
--- a/docs_app/content/examples/styleguide/src/05-15/app/heroes/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './hero-list';
-export * from './shared';
diff --git a/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/hero.model.ts
deleted file mode 100644
index 8f7cc205c8..0000000000
--- a/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/hero.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// #docregion
-export class Hero {
- id: number;
- name: string;
-}
diff --git a/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts b/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts
deleted file mode 100644
index 3f8e476766..0000000000
--- a/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/hero.service.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-import { of } from 'rxjs';
-
-import { Hero } from './hero.model';
-
-@Injectable()
-export class HeroService {
- getHeroes() {
- let heroes: Hero[] = [];
- return of(heroes);
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/index.ts
deleted file mode 100644
index 27516fdedd..0000000000
--- a/docs_app/content/examples/styleguide/src/05-15/app/heroes/shared/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// #docregion
-export * from './hero.model';
-export * from './hero.service';
diff --git a/docs_app/content/examples/styleguide/src/05-15/app/index.ts b/docs_app/content/examples/styleguide/src/05-15/app/index.ts
deleted file mode 100644
index fe8300f1dd..0000000000
--- a/docs_app/content/examples/styleguide/src/05-15/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './heroes';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/05-16/app/app.component.avoid.html b/docs_app/content/examples/styleguide/src/05-16/app/app.component.avoid.html
deleted file mode 100644
index 2c0cea58e2..0000000000
--- a/docs_app/content/examples/styleguide/src/05-16/app/app.component.avoid.html
+++ /dev/null
@@ -1,4 +0,0 @@
-
-
-
-
diff --git a/docs_app/content/examples/styleguide/src/05-16/app/app.component.html b/docs_app/content/examples/styleguide/src/05-16/app/app.component.html
deleted file mode 100644
index 4883a6940a..0000000000
--- a/docs_app/content/examples/styleguide/src/05-16/app/app.component.html
+++ /dev/null
@@ -1,2 +0,0 @@
-
-
diff --git a/docs_app/content/examples/styleguide/src/05-16/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-16/app/app.component.ts
deleted file mode 100644
index 7c9f37919f..0000000000
--- a/docs_app/content/examples/styleguide/src/05-16/app/app.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'sg-app',
- templateUrl: './app.component.html'
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/05-16/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-16/app/app.module.ts
deleted file mode 100644
index c3fb36f8ac..0000000000
--- a/docs_app/content/examples/styleguide/src/05-16/app/app.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { HeroComponent } from './heroes';
-
-@NgModule({
- imports: [
- BrowserModule,
- RouterModule.forChild([{ path: '05-16', component: AppComponent }])
- ],
- declarations: [
- AppComponent,
- HeroComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts
deleted file mode 100644
index 823aa2e1c7..0000000000
--- a/docs_app/content/examples/styleguide/src/05-16/app/heroes/hero.component.avoid.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import { Component, EventEmitter, Output } from '@angular/core';
-// #docregion example
-/* avoid */
-
-@Component({
- selector: 'toh-hero',
- template: `...`
-})
-export class HeroComponent {
- @Output() onSavedTheDay = new EventEmitter();
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts b/docs_app/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts
deleted file mode 100644
index bbd4a4b5f3..0000000000
--- a/docs_app/content/examples/styleguide/src/05-16/app/heroes/hero.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import { Component, EventEmitter, Output } from '@angular/core';
-
-@Component({
- selector: 'toh-hero',
- template: `...`
-})
-// #docregion example
-export class HeroComponent {
- @Output() savedTheDay = new EventEmitter();
-}
-// #enddocregion example
-
-
diff --git a/docs_app/content/examples/styleguide/src/05-16/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-16/app/heroes/index.ts
deleted file mode 100644
index 084f36d703..0000000000
--- a/docs_app/content/examples/styleguide/src/05-16/app/heroes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero.component';
diff --git a/docs_app/content/examples/styleguide/src/05-16/app/index.ts b/docs_app/content/examples/styleguide/src/05-16/app/index.ts
deleted file mode 100644
index fe8300f1dd..0000000000
--- a/docs_app/content/examples/styleguide/src/05-16/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './heroes';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/05-17/app/app.component.ts b/docs_app/content/examples/styleguide/src/05-17/app/app.component.ts
deleted file mode 100644
index 86728b8b80..0000000000
--- a/docs_app/content/examples/styleguide/src/05-17/app/app.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'sg-app',
- template: ' '
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/05-17/app/app.module.ts b/docs_app/content/examples/styleguide/src/05-17/app/app.module.ts
deleted file mode 100644
index e850d80ae3..0000000000
--- a/docs_app/content/examples/styleguide/src/05-17/app/app.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { HeroComponent, HeroListComponent } from './heroes';
-
-@NgModule({
- imports: [
- BrowserModule,
- RouterModule.forChild([{ path: '05-17', component: AppComponent }])
- ],
- declarations: [
- AppComponent,
- HeroComponent,
- HeroListComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts
deleted file mode 100644
index f007512949..0000000000
--- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.avoid.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-import { Hero } from '../shared/hero.model';
-// #docregion example
-/* avoid */
-
-@Component({
- selector: 'toh-hero-list',
- template: `
-
- Our list of heroes:
-
-
- Total powers: {{totalPowers}}
- Average power: {{totalPowers / heroes.length}}
-
- `
-})
-export class HeroListComponent {
- heroes: Hero[];
- totalPowers: number;
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts
deleted file mode 100644
index 5f18cc5b0c..0000000000
--- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/hero-list.component.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-import { Hero } from '../shared/hero.model';
-
-// #docregion example
-@Component({
- selector: 'toh-hero-list',
- template: `
-
- Our list of heroes:
-
-
- Total powers: {{totalPowers}}
- Average power: {{avgPower}}
-
- `
-})
-export class HeroListComponent {
- heroes: Hero[];
- totalPowers: number;
-
- // #enddocregion example
- // testing harness
- constructor() {
- this.heroes = [];
- }
-
- // #docregion example
- get avgPower() {
- return this.totalPowers / this.heroes.length;
- }
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/index.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/index.ts
deleted file mode 100644
index c4bcb3278e..0000000000
--- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero-list/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero-list.component';
diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts
deleted file mode 100644
index 334f836a7d..0000000000
--- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero/hero.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-import { Hero } from '../shared/hero.model';
-
-@Component({
- selector: 'toh-hero',
- template: `...`
-})
-export class HeroComponent {
- @Input() hero: Hero;
-}
-
-
diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero/index.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero/index.ts
deleted file mode 100644
index 084f36d703..0000000000
--- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/hero/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero.component';
diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/index.ts
deleted file mode 100644
index dcf3e79bd3..0000000000
--- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './hero';
-export * from './hero-list';
-export * from './shared';
diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/shared/hero.model.ts
deleted file mode 100644
index 8f7cc205c8..0000000000
--- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/shared/hero.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// #docregion
-export class Hero {
- id: number;
- name: string;
-}
diff --git a/docs_app/content/examples/styleguide/src/05-17/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/05-17/app/heroes/shared/index.ts
deleted file mode 100644
index 0dceb684c4..0000000000
--- a/docs_app/content/examples/styleguide/src/05-17/app/heroes/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero.model';
diff --git a/docs_app/content/examples/styleguide/src/05-17/app/index.ts b/docs_app/content/examples/styleguide/src/05-17/app/index.ts
deleted file mode 100644
index fe8300f1dd..0000000000
--- a/docs_app/content/examples/styleguide/src/05-17/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './heroes';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/06-01/app/app.component.html b/docs_app/content/examples/styleguide/src/06-01/app/app.component.html
deleted file mode 100644
index 2ccf87d0f5..0000000000
--- a/docs_app/content/examples/styleguide/src/06-01/app/app.component.html
+++ /dev/null
@@ -1,2 +0,0 @@
-
-Bombasta
diff --git a/docs_app/content/examples/styleguide/src/06-01/app/app.component.ts b/docs_app/content/examples/styleguide/src/06-01/app/app.component.ts
deleted file mode 100644
index 7c9f37919f..0000000000
--- a/docs_app/content/examples/styleguide/src/06-01/app/app.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'sg-app',
- templateUrl: './app.component.html'
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/06-01/app/app.module.ts b/docs_app/content/examples/styleguide/src/06-01/app/app.module.ts
deleted file mode 100644
index 318cd306d7..0000000000
--- a/docs_app/content/examples/styleguide/src/06-01/app/app.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { HighlightDirective } from './shared';
-
-@NgModule({
- imports: [
- RouterModule.forChild([{ path: '06-01', component: AppComponent }])
- ],
- declarations: [
- AppComponent,
- HighlightDirective
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/06-01/app/index.ts b/docs_app/content/examples/styleguide/src/06-01/app/index.ts
deleted file mode 100644
index ebe5c92f03..0000000000
--- a/docs_app/content/examples/styleguide/src/06-01/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './shared';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts b/docs_app/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts
deleted file mode 100644
index 991a6c5d25..0000000000
--- a/docs_app/content/examples/styleguide/src/06-01/app/shared/highlight.directive.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import { Directive, HostListener } from '@angular/core';
-
-// #docregion example
-@Directive({
- selector: '[tohHighlight]'
-})
-export class HighlightDirective {
- @HostListener('mouseover') onMouseEnter() {
- // do highlight work
- }
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/06-01/app/shared/index.ts b/docs_app/content/examples/styleguide/src/06-01/app/shared/index.ts
deleted file mode 100644
index 105a035680..0000000000
--- a/docs_app/content/examples/styleguide/src/06-01/app/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './highlight.directive';
diff --git a/docs_app/content/examples/styleguide/src/06-03/app/app.component.ts b/docs_app/content/examples/styleguide/src/06-03/app/app.component.ts
deleted file mode 100644
index 0d0a7d107b..0000000000
--- a/docs_app/content/examples/styleguide/src/06-03/app/app.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'sg-app',
- template: `
-
- `
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/06-03/app/app.module.ts b/docs_app/content/examples/styleguide/src/06-03/app/app.module.ts
deleted file mode 100644
index b19f3fdc00..0000000000
--- a/docs_app/content/examples/styleguide/src/06-03/app/app.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { ValidatorDirective, Validator2Directive } from './shared';
-
-@NgModule({
- imports: [
- RouterModule.forChild([{ path: '06-03', component: AppComponent }])
- ],
- declarations: [
- AppComponent,
- ValidatorDirective, Validator2Directive
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/06-03/app/index.ts b/docs_app/content/examples/styleguide/src/06-03/app/index.ts
deleted file mode 100644
index ebe5c92f03..0000000000
--- a/docs_app/content/examples/styleguide/src/06-03/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './shared';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/06-03/app/shared/index.ts b/docs_app/content/examples/styleguide/src/06-03/app/shared/index.ts
deleted file mode 100644
index ba25e4c458..0000000000
--- a/docs_app/content/examples/styleguide/src/06-03/app/shared/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './validator.directive';
-export * from './validator2.directive';
diff --git a/docs_app/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts b/docs_app/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts
deleted file mode 100644
index d9e32c017f..0000000000
--- a/docs_app/content/examples/styleguide/src/06-03/app/shared/validator.directive.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #docregion
-import { Directive, HostBinding, HostListener } from '@angular/core';
-
-@Directive({
- selector: '[tohValidator]'
-})
-export class ValidatorDirective {
- @HostBinding('attr.role') role = 'button';
- @HostListener('mouseenter') onMouseEnter() {
- // do work
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts b/docs_app/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts
deleted file mode 100644
index 05a0f9f07f..0000000000
--- a/docs_app/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docregion
-import { Directive } from '@angular/core';
-
-@Directive({
- selector: '[tohValidator2]',
- host: {
- '[attr.role]': 'role',
- '(mouseenter)': 'onMouseEnter()'
- }
-})
-export class Validator2Directive {
- role = 'button';
- onMouseEnter() {
- // do work
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/07-01/app/app.component.html b/docs_app/content/examples/styleguide/src/07-01/app/app.component.html
deleted file mode 100644
index 3c05329f3f..0000000000
--- a/docs_app/content/examples/styleguide/src/07-01/app/app.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/docs_app/content/examples/styleguide/src/07-01/app/app.component.ts b/docs_app/content/examples/styleguide/src/07-01/app/app.component.ts
deleted file mode 100644
index 354b0ec303..0000000000
--- a/docs_app/content/examples/styleguide/src/07-01/app/app.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { Hero, HeroService } from './heroes';
-
-@Component({
- selector: 'sg-app',
- templateUrl: './app.component.html',
- providers: [HeroService]
-})
-export class AppComponent implements OnInit {
- heroes: Hero[];
-
- constructor(private heroService: HeroService) { }
-
- ngOnInit() {
- this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/07-01/app/app.module.ts b/docs_app/content/examples/styleguide/src/07-01/app/app.module.ts
deleted file mode 100644
index 0077500dea..0000000000
--- a/docs_app/content/examples/styleguide/src/07-01/app/app.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
- imports: [
- BrowserModule,
- RouterModule.forChild([{ path: '07-01', component: AppComponent }])
- ],
- declarations: [
- AppComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/07-01/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/07-01/app/heroes/index.ts
deleted file mode 100644
index c3da79f741..0000000000
--- a/docs_app/content/examples/styleguide/src/07-01/app/heroes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './shared';
diff --git a/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/hero.model.ts
deleted file mode 100644
index 8f7cc205c8..0000000000
--- a/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/hero.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// #docregion
-export class Hero {
- id: number;
- name: string;
-}
diff --git a/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts b/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts
deleted file mode 100644
index b44a72967e..0000000000
--- a/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/hero.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
-import { map } from 'rxjs/operators';
-
-import { Hero } from './hero.model';
-
-@Injectable()
-// #docregion example
-export class HeroService {
- constructor(private http: Http) { }
-
- getHeroes() {
- return this.http.get('api/heroes').pipe(
- map((response: Response) => response.json()));
- }
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/index.ts
deleted file mode 100644
index dbb150d3f8..0000000000
--- a/docs_app/content/examples/styleguide/src/07-01/app/heroes/shared/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './hero.model';
-export * from './hero.service';
diff --git a/docs_app/content/examples/styleguide/src/07-01/app/index.ts b/docs_app/content/examples/styleguide/src/07-01/app/index.ts
deleted file mode 100644
index fe8300f1dd..0000000000
--- a/docs_app/content/examples/styleguide/src/07-01/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './heroes';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/07-03/app/app.component.ts b/docs_app/content/examples/styleguide/src/07-03/app/app.component.ts
deleted file mode 100644
index 224ab34619..0000000000
--- a/docs_app/content/examples/styleguide/src/07-03/app/app.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-import { HeroService } from './heroes';
-
-@Component({
- selector: 'toh-app',
- template: `
-
- `,
-})
-export class AppComponent {}
diff --git a/docs_app/content/examples/styleguide/src/07-03/app/app.module.ts b/docs_app/content/examples/styleguide/src/07-03/app/app.module.ts
deleted file mode 100644
index 8ba06d22be..0000000000
--- a/docs_app/content/examples/styleguide/src/07-03/app/app.module.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { HeroListComponent } from './heroes';
-
-@NgModule({
- imports: [
- BrowserModule,
- RouterModule.forChild([{ path: '07-03', component: AppComponent }])
- ],
- declarations: [
- AppComponent,
- HeroListComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/07-03/app/heroes/hero-list/hero-list.component.ts b/docs_app/content/examples/styleguide/src/07-03/app/heroes/hero-list/hero-list.component.ts
deleted file mode 100644
index cf9bb19243..0000000000
--- a/docs_app/content/examples/styleguide/src/07-03/app/heroes/hero-list/hero-list.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-
-import { Hero, HeroService } from '../shared';
-
-@Component({
- selector: 'toh-heroes',
- template: `
- {{heroes | json}}
- `
-})
-export class HeroListComponent implements OnInit {
- heroes: Hero[] = [];
-
- constructor(private heroService: HeroService) { }
-
- ngOnInit() {
- this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/07-03/app/heroes/hero-list/index.ts b/docs_app/content/examples/styleguide/src/07-03/app/heroes/hero-list/index.ts
deleted file mode 100644
index c4bcb3278e..0000000000
--- a/docs_app/content/examples/styleguide/src/07-03/app/heroes/hero-list/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero-list.component';
diff --git a/docs_app/content/examples/styleguide/src/07-03/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/07-03/app/heroes/index.ts
deleted file mode 100644
index f1112f1c7c..0000000000
--- a/docs_app/content/examples/styleguide/src/07-03/app/heroes/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './hero-list';
-export * from './shared';
diff --git a/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/hero.model.ts
deleted file mode 100644
index 8f7cc205c8..0000000000
--- a/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/hero.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// #docregion
-export class Hero {
- id: number;
- name: string;
-}
diff --git a/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/hero.service.ts b/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/hero.service.ts
deleted file mode 100644
index d3d8857caa..0000000000
--- a/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/hero.service.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-import { Observable, of } from 'rxjs';
-
-import { Hero } from './hero.model';
-
-@Injectable({
- providedIn: 'root',
-})
-export class HeroService {
- getHeroes() {
- let heroes: Hero[] = [];
- return of(heroes);
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/index.ts
deleted file mode 100644
index 27516fdedd..0000000000
--- a/docs_app/content/examples/styleguide/src/07-03/app/heroes/shared/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// #docregion
-export * from './hero.model';
-export * from './hero.service';
diff --git a/docs_app/content/examples/styleguide/src/07-03/app/index.ts b/docs_app/content/examples/styleguide/src/07-03/app/index.ts
deleted file mode 100644
index fe8300f1dd..0000000000
--- a/docs_app/content/examples/styleguide/src/07-03/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './heroes';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/07-04/app/app.component.ts b/docs_app/content/examples/styleguide/src/07-04/app/app.component.ts
deleted file mode 100644
index b0bc9677fe..0000000000
--- a/docs_app/content/examples/styleguide/src/07-04/app/app.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-
-import { HeroArena, HeroService, Hero } from './heroes';
-
-@Component({
- selector: 'toh-app',
- template: '{{heroes | json}} ',
- providers: [HeroArena, HeroService]
-})
-export class AppComponent implements OnInit {
- heroes: Hero[] = [];
-
- constructor(private heroArena: HeroArena) { }
-
- ngOnInit() {
- this.heroArena.getParticipants().subscribe(heroes => this.heroes = heroes);
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/07-04/app/app.module.ts b/docs_app/content/examples/styleguide/src/07-04/app/app.module.ts
deleted file mode 100644
index 71c515c9c9..0000000000
--- a/docs_app/content/examples/styleguide/src/07-04/app/app.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
- imports: [
- BrowserModule,
- RouterModule.forChild([{ path: '07-04', component: AppComponent }])
- ],
- declarations: [
- AppComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/07-04/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/07-04/app/heroes/index.ts
deleted file mode 100644
index c3da79f741..0000000000
--- a/docs_app/content/examples/styleguide/src/07-04/app/heroes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './shared';
diff --git a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts b/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts
deleted file mode 100644
index 698fa65239..0000000000
--- a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.avoid.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import { Inject } from '@angular/core';
-import { Http } from '@angular/http';
-
-import { HeroService } from './hero.service';
-// #docregion example
-/* avoid */
-
-export class HeroArena {
- constructor(
- @Inject(HeroService) private heroService: HeroService,
- @Inject(Http) private http: Http) {}
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts b/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts
deleted file mode 100644
index 22392ab4fd..0000000000
--- a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// #docplaster
-// #docregion
-import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
-
-import { HeroService } from './hero.service';
-
-// #docregion example
-@Injectable()
-export class HeroArena {
- constructor(
- private heroService: HeroService,
- private http: Http) {}
- // #enddocregion example
- // test harness
- getParticipants() {
- return this.heroService.getHeroes();
- }
- // #docregion example
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero.model.ts b/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero.model.ts
deleted file mode 100644
index 8f7cc205c8..0000000000
--- a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero.model.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// #docregion
-export class Hero {
- id: number;
- name: string;
-}
diff --git a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts b/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts
deleted file mode 100644
index 3f8e476766..0000000000
--- a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/hero.service.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-import { of } from 'rxjs';
-
-import { Hero } from './hero.model';
-
-@Injectable()
-export class HeroService {
- getHeroes() {
- let heroes: Hero[] = [];
- return of(heroes);
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/index.ts
deleted file mode 100644
index e8ba54b540..0000000000
--- a/docs_app/content/examples/styleguide/src/07-04/app/heroes/shared/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// #docregion
-export * from './hero.model';
-export * from './hero.service';
-export * from './hero-arena.service';
diff --git a/docs_app/content/examples/styleguide/src/07-04/app/index.ts b/docs_app/content/examples/styleguide/src/07-04/app/index.ts
deleted file mode 100644
index fe8300f1dd..0000000000
--- a/docs_app/content/examples/styleguide/src/07-04/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './heroes';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/09-01/app/app.component.ts b/docs_app/content/examples/styleguide/src/09-01/app/app.component.ts
deleted file mode 100644
index ebc904f722..0000000000
--- a/docs_app/content/examples/styleguide/src/09-01/app/app.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'sg-app',
- template: ' '
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/09-01/app/app.module.ts b/docs_app/content/examples/styleguide/src/09-01/app/app.module.ts
deleted file mode 100644
index 5872e801d6..0000000000
--- a/docs_app/content/examples/styleguide/src/09-01/app/app.module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { AppComponent } from './app.component';
-import { HeroButtonComponent } from './heroes';
-
-@NgModule({
- imports: [
- RouterModule.forChild([{ path: '09-01', component: AppComponent }])
- ],
- declarations: [
- AppComponent,
- HeroButtonComponent
- ],
- exports: [ AppComponent ]
-})
-export class AppModule {}
diff --git a/docs_app/content/examples/styleguide/src/09-01/app/heroes/index.ts b/docs_app/content/examples/styleguide/src/09-01/app/heroes/index.ts
deleted file mode 100644
index c3da79f741..0000000000
--- a/docs_app/content/examples/styleguide/src/09-01/app/heroes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './shared';
diff --git a/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts
deleted file mode 100644
index 7dc42c2f40..0000000000
--- a/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-// #docregion example
-/* avoid */
-
-@Component({
- selector: 'toh-hero-button',
- template: `OK`
-})
-export class HeroButtonComponent {
- onInit() { // misspelled
- console.log('The component is initialized');
- }
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts b/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts
deleted file mode 100644
index cc69810dee..0000000000
--- a/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/hero-button.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-
-// #docregion example
-@Component({
- selector: 'toh-hero-button',
- template: `OK `
-})
-export class HeroButtonComponent implements OnInit {
- ngOnInit() {
- console.log('The component is initialized');
- }
-}
-// #enddocregion example
diff --git a/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/index.ts b/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/index.ts
deleted file mode 100644
index 6bb67c5670..0000000000
--- a/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/hero-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero-button.component';
diff --git a/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/index.ts b/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/index.ts
deleted file mode 100644
index 2334d49c9a..0000000000
--- a/docs_app/content/examples/styleguide/src/09-01/app/heroes/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './hero-button';
diff --git a/docs_app/content/examples/styleguide/src/09-01/app/index.ts b/docs_app/content/examples/styleguide/src/09-01/app/index.ts
deleted file mode 100644
index fe8300f1dd..0000000000
--- a/docs_app/content/examples/styleguide/src/09-01/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './heroes';
-export * from './app.component';
diff --git a/docs_app/content/examples/styleguide/src/app/app.component.html b/docs_app/content/examples/styleguide/src/app/app.component.html
deleted file mode 100644
index 0680b43f9c..0000000000
--- a/docs_app/content/examples/styleguide/src/app/app.component.html
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/docs_app/content/examples/styleguide/src/app/app.component.ts b/docs_app/content/examples/styleguide/src/app/app.component.ts
deleted file mode 100644
index 968036cb8c..0000000000
--- a/docs_app/content/examples/styleguide/src/app/app.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html'
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/styleguide/src/app/app.module.ts b/docs_app/content/examples/styleguide/src/app/app.module.ts
deleted file mode 100644
index 1e974baf5f..0000000000
--- a/docs_app/content/examples/styleguide/src/app/app.module.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-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 { }
diff --git a/docs_app/content/examples/styleguide/src/app/app.routes.ts b/docs_app/content/examples/styleguide/src/app/app.routes.ts
deleted file mode 100644
index bce6b4df06..0000000000
--- a/docs_app/content/examples/styleguide/src/app/app.routes.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Routes } from '@angular/router';
-
-import { AppComponent as S0101 } from '../01-01/app';
-
-export const routes: Routes = [
- { path: '', redirectTo: '/01-01', pathMatch: 'full' },
- { path: '01-01', component: S0101 },
-];
diff --git a/docs_app/content/examples/styleguide/src/app/hero-data.ts b/docs_app/content/examples/styleguide/src/app/hero-data.ts
deleted file mode 100644
index f3e6feb91c..0000000000
--- a/docs_app/content/examples/styleguide/src/app/hero-data.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export class HeroData {
- createDb() {
- let heroes = [
- { id: 1, name: 'Windstorm' },
- { id: 2, name: 'Bombasto' },
- { id: 3, name: 'Magneta' },
- { id: 4, name: 'Tornado' }
- ];
- return {heroes};
- }
-}
diff --git a/docs_app/content/examples/styleguide/src/index.html b/docs_app/content/examples/styleguide/src/index.html
deleted file mode 100644
index ba0335c7e7..0000000000
--- a/docs_app/content/examples/styleguide/src/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
-
-
-
- Style Guide Sample
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/styleguide/src/main.ts b/docs_app/content/examples/styleguide/src/main.ts
deleted file mode 100644
index 049f9792a4..0000000000
--- a/docs_app/content/examples/styleguide/src/main.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
-
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/docs_app/content/examples/template-syntax/e2e/app.e2e-spec.ts b/docs_app/content/examples/template-syntax/e2e/app.e2e-spec.ts
deleted file mode 100644
index 71f1c58165..0000000000
--- a/docs_app/content/examples/template-syntax/e2e/app.e2e-spec.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-// Not yet complete
-describe('Template Syntax', function () {
-
- beforeAll(function () {
- browser.get('');
- });
-
- it('should be able to use interpolation with a hero', function () {
- let heroInterEle = element.all(by.css('h2+p')).get(0);
- expect(heroInterEle.getText()).toEqual('My current hero is Hercules');
- });
-
- it('should be able to use interpolation with a calculation', function () {
- let theSumEles = element.all(by.cssContainingText('h3~p', 'The sum of'));
- expect(theSumEles.count()).toBe(2);
- expect(theSumEles.get(0).getText()).toEqual('The sum of 1 + 1 is 2');
- expect(theSumEles.get(1).getText()).toEqual('The sum of 1 + 1 is not 4');
- });
-
- it('should be able to use class binding syntax', function () {
- let specialEle = element(by.cssContainingText('div', 'Special'));
- expect(specialEle.getAttribute('class')).toMatch('special');
- });
-
- it('should be able to use style binding syntax', function () {
- let specialButtonEle = element(by.cssContainingText('div.special~button', 'button'));
- expect(specialButtonEle.getAttribute('style')).toMatch('color: red');
- });
-
- it('should two-way bind to sizer', async () => {
- let div = element(by.css('div#two-way-1'));
- let incButton = div.element(by.buttonText('+'));
- let input = div.element(by.css('input'));
- let initSize = await input.getAttribute('value');
- incButton.click();
- expect(input.getAttribute('value')).toEqual((+initSize + 1).toString());
- });
-});
-
diff --git a/docs_app/content/examples/template-syntax/example-config.json b/docs_app/content/examples/template-syntax/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs_app/content/examples/template-syntax/src/app/app.component.css b/docs_app/content/examples/template-syntax/src/app/app.component.css
deleted file mode 100644
index 23f9667623..0000000000
--- a/docs_app/content/examples/template-syntax/src/app/app.component.css
+++ /dev/null
@@ -1,17 +0,0 @@
-a.to-toc { margin: 30px 0; }
-button { font-size: 100%; margin: 0 2px; }
-div[clickable] {cursor: pointer; max-width: 200px; margin: 16px 0}
-#noTrackByCnt, #withTrackByCnt {color: darkred; max-width: 450px; margin: 4px;}
-img {height: 100px;}
-.box {border: 1px solid black; padding: 6px; max-width: 450px;}
-.child-div {margin-left: 1em; font-weight: normal}
-.context {margin-left: 1em;}
-.hidden {display: none}
-.parent-div {margin-top: 1em; font-weight: bold}
-.special {font-weight:bold; font-size: x-large}
-.bad {color: red;}
-.saveable {color: limegreen;}
-.curly, .modified {font-family: "Brush Script MT"}
-.toe {margin-left: 1em; font-style: italic;}
-little-hero {color:blue; font-size: smaller; background-color: Turquoise }
-.to-toc {margin-top: 10px; display: block}
diff --git a/docs_app/content/examples/template-syntax/src/app/app.component.html b/docs_app/content/examples/template-syntax/src/app/app.component.html
deleted file mode 100644
index fc5b36d35a..0000000000
--- a/docs_app/content/examples/template-syntax/src/app/app.component.html
+++ /dev/null
@@ -1,859 +0,0 @@
-
-
-Template Syntax
-Interpolation
-Expression context
-Statement context
-Mental Model
-Buttons
-Properties vs. Attributes
-
-Property Binding
-
-
-Event Binding
-Two-way Binding
-
-Directives
-
-
-Template reference variables
-Inputs and outputs
-Pipes
-Safe navigation operator ?.
-Non-null assertion operator !.
-Enums
-
-
-Interpolation
-
-
-My current hero is {{currentHero.name}}
-
-
-
-
- {{title}}
-
-
-
-
-
-
-The sum of 1 + 1 is {{1 + 1}}
-
-
-
-
-The sum of 1 + 1 is not {{1 + 1 + getVal()}}
-
-
-top
-
-Expression context
-
-Component expression context ({{title}}, [hidden]="isUnchanged")
-
-
- {{title}}
- changed
-
-
-
-
-Template input variable expression context (let hero)
-
-
-
- {{hero.name}}
-
-
-
-Template reference variable expression context (#heroInput)
-
- Type something:
-
- {{heroInput.value}}
-
-
-
-top
-
-Statement context
-
-Component statement context ( (click)="onSave() )
-
-
- Delete hero
-
-
-
-Template $event statement context
-
-
- Save
-
-
-
-Template input variable statement context (let hero)
-
-
-
- {{hero.name}}
-
-
-
-Template reference variable statement context (#heroForm)
-
-
-
-
-
-
-top
-
-
-New Mental Model
-
-
-
-
-Mental Model
-
-Save
-
-
-
-
-
-
-
Mental Model
-
-
-
-
-
-
-
-
-
- Save
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-Save
-
-click me
-
-{{clicked}}
-
-
-
- Hero Name:
-
-
-
- {{name}}
-
-
-
-
-help
-
-
-
-
-Special
-
-
-
-
-
-
-button
-
-top
-
-
-Property vs. Attribute (img examples)
-
-
-
-
-
-
-
-
-
-top
-
-
-
-
-Enabled (but does nothing)
-Disabled
-Still disabled
-
-disabled by attribute
-disabled by property binding
-
-Disabled Cancel
-Enabled Save
-
-top
-
-
-Property Binding
-
-
-
-
-
-Cancel is disabled
-
-
-[ngClass] binding to the classes property
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- is the interpolated image.
- is the property bound image.
-
-"{{title}}" is the interpolated title.
-" " is the property bound title.
-
-
-
-
-"{{evilTitle}}" is the interpolated evil title.
-" " is the property bound evil title.
-
-
-top
-
-
-Attribute Binding
-
-
-
-
-
- One-Two
-
-
-
- Five Six
-
-
-
-
-
-
-{{actionName}} with Aria
-
-
-
-
-
-
- Disabled
-
- Disabled as well
-
-
- Enabled (but inert)
-
-
-top
-
-
-Class Binding
-
-
-
-Bad curly special
-
-
-
-
-Bad curly
-
-
-
-
-
-The class binding is special
-
-
-
-This one is not so special
-
-
-This class binding is special too
-
-top
-
-
-Style Binding
-
-
-Red
-Save
-
-
-
-Big
-Small
-
-
-top
-
-
-Event Binding
-
-
-Save
-
-
-
-On Save
-
-
-
-
-
-
-
click with myClick
-
-
-{{clickMessage}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-Click me
-
Click me too!
-
-
-
-
-
-
- Save, no propagation
-
-
-
-
-
-
- Save w/ propagation
-
-
-
-top
-
-Two-way Binding
-
-
-
-
Resizable Text
-
-
FontSize (px):
-
-
-
-
De-sugared two-way binding
-
-
-
-
-
-top
-
-
-NgModel (two-way) Binding
-
-Result: {{currentHero.name}}
-
-
-
-
-without NgModel
-
-
-
-
-[(ngModel)]
-
-
-
-
-bindon-ngModel
-
-
-
-
-(ngModelChange)="...name=$event"
-
-
-
-
-(ngModelChange)="setUppercaseName($event)"
-
-top
-
-
-NgClass Binding
-
-currentClasses is {{currentClasses | json}}
-
-This div is initially saveable, unchanged, and special
-
-
-
-
-saveable |
-modified: |
-special:
-Refresh currentClasses
-
-
- This div should be {{ canSave ? "": "not"}} saveable,
- {{ isUnchanged ? "unchanged" : "modified" }} and,
- {{ isSpecial ? "": "not"}} special after clicking "Refresh".
-
-
-This div is special
-
-Bad curly special
-Curly special
-
-top
-
-
-NgStyle Binding
-
-
-
- This div is x-large or smaller.
-
-
-
-[ngStyle] binding to currentStyles - CSS property names
-currentStyles is {{currentStyles | json}}
-
-
- This div is initially italic, normal weight, and extra large (24px).
-
-
-
-
-
-italic: |
-normal: |
-xlarge:
-Refresh currentStyles
-
-
- This div should be {{ canSave ? "italic": "plain"}},
- {{ isUnchanged ? "normal weight" : "bold" }} and,
- {{ isSpecial ? "extra large": "normal size"}} after clicking "Refresh".
-
-top
-
-
-NgIf Binding
-
-
-
-
-
-
-Hello, {{currentHero.name}}
-Hello, {{nullHero.name}}
-
-
-
-
-Add {{currentHero.name}} with template
-
-
-Hero Detail removed from DOM (via template) because isActive is false
-
-
-
-
-
-
-Show with class
-Hide with class
-
-
-
-
-Show with style
-Hide with style
-
-
-top
-
-
-NgFor Binding
-
-
-
-
-
-
-top
-
-*ngFor with index
-with semi-colon separator
-
-
-
{{i + 1}} - {{hero.name}}
-
-
-
-with comma separator
-
-
-
{{i + 1}} - {{hero.name}}
-
-
-top
-
-*ngFor trackBy
-Reset heroes
-Change ids
-Clear counts
-
-without trackBy
-
-
({{hero.id}}) {{hero.name}}
-
-
- Hero DOM elements change #{{heroesNoTrackByCount}} without trackBy
-
-
-
-with trackBy
-
-
({{hero.id}}) {{hero.name}}
-
-
- Hero DOM elements change #{{heroesWithTrackByCount}} with trackBy
-
-
-
-
-
-with trackBy and semi-colon separator
-
-
-
- ({{hero.id}}) {{hero.name}}
-
-
-
-
-with trackBy and comma separator
-
-
({{hero.id}}) {{hero.name}}
-
-
-with trackBy and space separator
-
-
({{hero.id}}) {{hero.name}}
-
-
-with generic trackById function
-
-
({{hero.id}}) {{hero.name}}
-
-
-top
-
-
-NgSwitch Binding
-
-Pick your favorite hero
-
-
- {{h.name}}
-
-
-
-
-
-
-
-
-
-
-
Are you as confused as {{currentHero.name}}?
-
-
-
-
-
-
-top
-
-
-Template reference variables
-
-
-
-
-
-
-
-
-
-Call
-
-
-
-
-Fax
-
-
-
-
-
-Example Form
-
-
-top
-
-
-
-
-
-
-Save
-
-
-
-
-
-
-
-myClick2
-{{clickMessage2}}
-
-top
-
-
-Pipes
-
-
-Title through uppercase pipe: {{title | uppercase}}
-
-
-
-
-
- Title through a pipe chain:
- {{title | uppercase | lowercase}}
-
-
-
-
-
-Birthdate: {{currentHero?.birthdate | date:'longDate'}}
-
-
-
-{{currentHero | json}}
-
-
-Birthdate: {{(currentHero?.birthdate | date:'longDate') | uppercase}}
-
-
-
- Price: {{product.price | currency:'USD':true}}
-
-
-top
-
-
-Safe navigation operator ?.
-
-
-
- The title is {{title}}
-
-
-
-
-
- The current hero's name is {{currentHero?.name}}
-
-
-
-
-
- The current hero's name is {{currentHero.name}}
-
-
-
-
-
-
-
-
-The null hero's name is {{nullHero.name}}
-
-
-
-
-The null hero's name is {{nullHero && nullHero.name}}
-
-
-
-
-
-
- The null hero's name is {{nullHero?.name}}
-
-
-
-
-top
-
-
-Non-null assertion operator !.
-
-
-
-
-
- The hero's name is {{hero!.name}}
-
-
-
-
-top
-
-
-$any type cast function $any( ) .
-
-
-
-
-
- The hero's marker is {{$any(hero).marker}}
-
-
-
-
-
-
-
-
- Undeclared members is {{$any(this).member}}
-
-
-
-
-top
-
-
-
-Enums in binding
-
-
-
- The name of the Color.Red enum is {{Color[Color.Red]}}.
- The current color is {{Color[color]}} and its number is {{color}}.
- Enum Toggle
-
-
-
-top
diff --git a/docs_app/content/examples/template-syntax/src/app/app.component.ts b/docs_app/content/examples/template-syntax/src/app/app.component.ts
deleted file mode 100644
index b1d4e484df..0000000000
--- a/docs_app/content/examples/template-syntax/src/app/app.component.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-/* tslint:disable:forin member-ordering */
-// #docplaster
-
-import { AfterViewInit, Component, ElementRef, OnInit, QueryList, ViewChildren } from '@angular/core';
-
-import { Hero } from './hero';
-
-export enum Color {Red, Green, Blue};
-
-/**
- * Giant grab bag of stuff to drive the chapter
- */
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: [ './app.component.css' ]
-})
-export class AppComponent implements AfterViewInit, OnInit {
-
- ngOnInit() {
- this.resetHeroes();
- this.setCurrentClasses();
- this.setCurrentStyles();
- }
-
- ngAfterViewInit() {
- // Detect effects of NgForTrackBy
- trackChanges(this.heroesNoTrackBy, () => this.heroesNoTrackByCount++);
- trackChanges(this.heroesWithTrackBy, () => this.heroesWithTrackByCount++);
- }
-
- @ViewChildren('noTrackBy') heroesNoTrackBy: QueryList;
- @ViewChildren('withTrackBy') heroesWithTrackBy: QueryList;
-
- actionName = 'Go for it';
- badCurly = 'bad curly';
- classes = 'special';
- help = '';
-
- alert(msg?: string) { window.alert(msg); }
- callFax(value: string) { this.alert(`Faxing ${value} ...`); }
- callPhone(value: string) { this.alert(`Calling ${value} ...`); }
- canSave = true;
-
- changeIds() {
- this.resetHeroes();
- this.heroes.forEach(h => h.id += 10 * this.heroIdIncrement++);
- this.heroesWithTrackByCountReset = -1;
- }
-
- clearTrackByCounts() {
- const trackByCountReset = this.heroesWithTrackByCountReset;
- this.resetHeroes();
- this.heroesNoTrackByCount = -1;
- this.heroesWithTrackByCount = trackByCountReset;
- this.heroIdIncrement = 1;
- }
-
- clicked = '';
- clickMessage = '';
- clickMessage2 = '';
-
- Color = Color;
- color = Color.Red;
- colorToggle() {this.color = (this.color === Color.Red) ? Color.Blue : Color.Red; }
-
- currentHero: Hero;
-
- deleteHero(hero: Hero) {
- this.alert(`Delete ${hero ? hero.name : 'the hero'}.`);
- }
-
- // #docregion evil-title
- evilTitle = 'Template Syntax';
- // #enddocregion evil-title
-
- fontSizePx = 16;
-
- title = 'Template Syntax';
-
- getVal(): number { return 2; }
-
- name: string = Hero.heroes[0].name;
- hero: Hero; // defined to demonstrate template context precedence
- heroes: Hero[];
-
- // trackBy change counting
- heroesNoTrackByCount = 0;
- heroesWithTrackByCount = 0;
- heroesWithTrackByCountReset = 0;
-
- heroIdIncrement = 1;
-
- // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
- // Public Domain terms of use: http://www.wpclipart.com/terms.html
- heroImageUrl = 'assets/images/hero.png';
- // villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png'
- // Public Domain terms of use http://www.clker.com/disclaimer.html
- villainImageUrl = 'assets/images/villain.png';
-
- iconUrl = 'assets/images/ng-logo.png';
- isActive = false;
- isSpecial = true;
- isUnchanged = true;
-
- get nullHero(): Hero { return null; }
-
- onClickMe(event: KeyboardEvent) {
- let evtMsg = event ? ' Event target class is ' + (event.target).className : '';
- this.alert('Click me.' + evtMsg);
- }
-
- onSave(event: KeyboardEvent) {
- let evtMsg = event ? ' Event target is ' + (event.target).textContent : '';
- this.alert('Saved.' + evtMsg);
- if (event) { event.stopPropagation(); }
- }
-
- onSubmit() {/* referenced but not used */}
-
- product = {
- name: 'frimfram',
- price: 42
- };
-
- // updates with fresh set of cloned heroes
- resetHeroes() {
- this.heroes = Hero.heroes.map(hero => hero.clone());
- this.currentHero = this.heroes[0];
- this.hero = this.currentHero;
- this.heroesWithTrackByCountReset = 0;
- }
-
- setUppercaseName(name: string) {
- this.currentHero.name = name.toUpperCase();
- }
-
- // #docregion setClasses
- currentClasses: {};
- setCurrentClasses() {
- // CSS classes: added/removed per current state of component properties
- this.currentClasses = {
- 'saveable': this.canSave,
- 'modified': !this.isUnchanged,
- 'special': this.isSpecial
- };
- }
- // #enddocregion setClasses
-
- // #docregion setStyles
- currentStyles: {};
- setCurrentStyles() {
- // CSS styles: set per current state of component properties
- this.currentStyles = {
- 'font-style': this.canSave ? 'italic' : 'normal',
- 'font-weight': !this.isUnchanged ? 'bold' : 'normal',
- 'font-size': this.isSpecial ? '24px' : '12px'
- };
- }
- // #enddocregion setStyles
-
- // #docregion trackByHeroes
- trackByHeroes(index: number, hero: Hero): number { return hero.id; }
- // #enddocregion trackByHeroes
-
- // #docregion trackById
- trackById(index: number, item: any): number { return item['id']; }
- // #enddocregion trackById
-}
-
-// helper to track changes to viewChildren
-function trackChanges(views: QueryList, changed: () => void) {
- let oldRefs = views.toArray();
- views.changes.subscribe((changes: QueryList) => {
- const changedRefs = changes.toArray();
- // Check if every changed Element is the same as old and in the same position
- const isSame = oldRefs.every((v, i) => v.nativeElement === changedRefs[i].nativeElement);
- if (!isSame) {
- oldRefs = changedRefs;
- // wait a tick because called after views are constructed
- setTimeout(changed, 0);
- }
- });
-}
diff --git a/docs_app/content/examples/template-syntax/src/app/app.module.1.ts b/docs_app/content/examples/template-syntax/src/app/app.module.1.ts
deleted file mode 100644
index 8ea0d3d207..0000000000
--- a/docs_app/content/examples/template-syntax/src/app/app.module.1.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms'; // <--- JavaScript import from Angular
-
-/* Other imports */
-
-@NgModule({
- imports: [
- BrowserModule,
- FormsModule // <--- import into the NgModule
- ],
- /* Other module metadata */
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/template-syntax/src/app/app.module.ts b/docs_app/content/examples/template-syntax/src/app/app.module.ts
deleted file mode 100644
index 5c2fbed6f1..0000000000
--- a/docs_app/content/examples/template-syntax/src/app/app.module.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-
-import { AppComponent } from './app.component';
-import { BigHeroDetailComponent, HeroDetailComponent } from './hero-detail.component';
-import { ClickDirective, ClickDirective2 } from './click.directive';
-import { HeroFormComponent } from './hero-form.component';
-import { heroSwitchComponents } from './hero-switch.components';
-import { SizerComponent } from './sizer.component';
-
-@NgModule({
- imports: [
- BrowserModule,
- FormsModule
- ],
- declarations: [
- AppComponent,
- BigHeroDetailComponent,
- HeroDetailComponent,
- HeroFormComponent,
- heroSwitchComponents,
- ClickDirective,
- ClickDirective2,
- SizerComponent
- ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/template-syntax/src/app/click.directive.ts b/docs_app/content/examples/template-syntax/src/app/click.directive.ts
deleted file mode 100644
index 22b63955ea..0000000000
--- a/docs_app/content/examples/template-syntax/src/app/click.directive.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/* tslint:disable use-output-property-decorator directive-class-suffix */
-// #docplaster
-import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
-
-@Directive({selector: '[myClick]'})
-export class ClickDirective {
- // #docregion output-myClick
- @Output('myClick') clicks = new EventEmitter(); // @Output(alias) propertyName = ...
- // #enddocregion output-myClick
-
- toggle = false;
-
- constructor(el: ElementRef) {
- el.nativeElement
- .addEventListener('click', (event: Event) => {
- this.toggle = !this.toggle;
- this.clicks.emit(this.toggle ? 'Click!' : '');
- });
- }
-}
-
-// #docregion output-myClick2
-@Directive({
- // #enddocregion output-myClick2
- selector: '[myClick2]',
- // #docregion output-myClick2
- outputs: ['clicks:myClick'] // propertyName:alias
-})
-// #enddocregion output-myClick2
-export class ClickDirective2 {
- clicks = new EventEmitter();
- toggle = false;
-
- constructor(el: ElementRef) {
- el.nativeElement
- .addEventListener('click', (event: Event) => {
- this.toggle = !this.toggle;
- this.clicks.emit(this.toggle ? 'Click2!' : '');
- });
- }
-}
diff --git a/docs_app/content/examples/template-syntax/src/app/hero-detail.component.ts b/docs_app/content/examples/template-syntax/src/app/hero-detail.component.ts
deleted file mode 100644
index 14cdeed0af..0000000000
--- a/docs_app/content/examples/template-syntax/src/app/hero-detail.component.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-/* tslint:disable use-input-property-decorator use-output-property-decorator */
-// #docplaster
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { Hero } from './hero';
-
-// #docregion input-output-2
-@Component({
-// #enddocregion input-output-2
- selector: 'app-hero-detail',
- // #docregion input-output-2
- inputs: ['hero'],
- outputs: ['deleteRequest'],
- // #enddocregion input-output-2
- styles: ['button {margin-left: 8px} div {margin: 8px 0} img {height:24px}'],
- // #docregion template-1
- template: `
-
-
-
- {{prefix}} {{hero?.name}}
-
-
Delete
-
`
- // #enddocregion template-1
-// #docregion input-output-2
-})
-// #enddocregion input-output-2
-export class HeroDetailComponent {
- hero: Hero = new Hero(-1, '', 'Zzzzzzzz'); // default sleeping hero
- // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
- // Public Domain terms of use: http://www.wpclipart.com/terms.html
- heroImageUrl = 'assets/images/hero.png';
- lineThrough = '';
- @Input() prefix = '';
-
- // #docregion deleteRequest
- // This component makes a request but it can't actually delete a hero.
- deleteRequest = new EventEmitter();
-
- delete() {
- this.deleteRequest.emit(this.hero);
- // #enddocregion deleteRequest
- this.lineThrough = this.lineThrough ? '' : 'line-through';
- // #docregion deleteRequest
- }
- // #enddocregion deleteRequest
-}
-
-@Component({
- selector: 'app-big-hero-detail',
- template: `
-
-
-
{{hero?.name}}
-
Name: {{hero?.name}}
-
Emotion: {{hero?.emotion}}
-
Birthdate: {{hero?.birthdate | date:'longDate'}}
-
-
Rate/hr: {{hero?.rate | currency:'EUR'}}
-
-
Delete
-
- `,
- styles: [`
- .detail { border: 1px solid black; padding: 4px; max-width: 450px; }
- img { float: left; margin-right: 8px; height: 100px; }
- `]
-})
-export class BigHeroDetailComponent extends HeroDetailComponent {
-
- // #docregion input-output-1
- @Input() hero: Hero;
- @Output() deleteRequest = new EventEmitter();
- // #enddocregion input-output-1
-
- delete() {
- this.deleteRequest.emit(this.hero);
- }
-}
diff --git a/docs_app/content/examples/template-syntax/src/app/hero-form.component.html b/docs_app/content/examples/template-syntax/src/app/hero-form.component.html
deleted file mode 100644
index 071aab429e..0000000000
--- a/docs_app/content/examples/template-syntax/src/app/hero-form.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
diff --git a/docs_app/content/examples/template-syntax/src/app/hero-form.component.ts b/docs_app/content/examples/template-syntax/src/app/hero-form.component.ts
deleted file mode 100644
index 63040131ff..0000000000
--- a/docs_app/content/examples/template-syntax/src/app/hero-form.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Component, Input, ViewChild } from '@angular/core';
-import { NgForm } from '@angular/forms';
-
-import { Hero } from './hero';
-
-@Component({
- selector: 'app-hero-form',
- templateUrl: './hero-form.component.html',
- styles: [`
- button { margin: 6px 0; }
- #heroForm { border: 1px solid black; margin: 20px 0; padding: 8px; max-width: 350px; }
- `]
-})
-export class HeroFormComponent {
- @Input() hero: Hero;
- @ViewChild('heroForm') form: NgForm;
-
- private _submitMessage = '';
-
- get submitMessage() {
- if (!this.form.valid) {
- this._submitMessage = '';
- }
- return this._submitMessage;
- }
-
- onSubmit(form: NgForm) {
- this._submitMessage = 'Submitted. form value is ' + JSON.stringify(form.value);
- }
-}
diff --git a/docs_app/content/examples/template-syntax/src/app/hero-switch.components.ts b/docs_app/content/examples/template-syntax/src/app/hero-switch.components.ts
deleted file mode 100644
index d2a2dcc7cc..0000000000
--- a/docs_app/content/examples/template-syntax/src/app/hero-switch.components.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { Hero } from './hero';
-
-@Component({
- selector: 'app-happy-hero',
- template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
-})
-export class HappyHeroComponent {
- @Input() hero: Hero;
-}
-
-@Component({
- selector: 'app-sad-hero',
- template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
-})
-export class SadHeroComponent {
- @Input() hero: Hero;
-}
-
-@Component({
- selector: 'app-confused-hero',
- template: `Are you as confused as {{hero.name}}?`
-})
-export class ConfusedHeroComponent {
- @Input() hero: Hero;
-}
-
-@Component({
- selector: 'app-unknown-hero',
- template: `{{message}}`
-})
-export class UnknownHeroComponent {
- @Input() hero: Hero;
- get message() {
- return this.hero && this.hero.name ?
- `${this.hero.name} is strange and mysterious.` :
- 'Are you feeling indecisive?';
- }
-}
-
-export const heroSwitchComponents =
- [ HappyHeroComponent, SadHeroComponent, ConfusedHeroComponent, UnknownHeroComponent ];
diff --git a/docs_app/content/examples/template-syntax/src/app/hero.ts b/docs_app/content/examples/template-syntax/src/app/hero.ts
deleted file mode 100644
index f8cc3b16a6..0000000000
--- a/docs_app/content/examples/template-syntax/src/app/hero.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export class Hero {
- static nextId = 0;
-
- static heroes: Hero[] = [
- new Hero(
- null,
- 'Hercules',
- 'happy',
- new Date(1970, 1, 25),
- 'http://www.imdb.com/title/tt0065832/',
- 325
- ),
- new Hero(1, 'Mr. Nice', 'happy'),
- new Hero(2, 'Narco', 'sad' ),
- new Hero(3, 'Windstorm', 'confused' ),
- new Hero(4, 'Magneta')
- ];
-
-
- constructor(
- public id?: number,
- public name?: string,
- public emotion?: string,
- public birthdate?: Date,
- public url?: string,
- public rate = 100,
- ) {
- this.id = id ? id : Hero.nextId++;
- }
-
- clone(): Hero {
- return Object.assign(new Hero(), this);
- }
-}
diff --git a/docs_app/content/examples/template-syntax/src/app/sizer.component.ts b/docs_app/content/examples/template-syntax/src/app/sizer.component.ts
deleted file mode 100644
index 3cb45a77da..0000000000
--- a/docs_app/content/examples/template-syntax/src/app/sizer.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// #docregion
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
- selector: 'app-sizer',
- template: `
-
- -
- +
- FontSize: {{size}}px
-
`
-})
-export class SizerComponent {
- @Input() size: number | string;
- @Output() sizeChange = new EventEmitter();
-
- dec() { this.resize(-1); }
- inc() { this.resize(+1); }
-
- resize(delta: number) {
- this.size = Math.min(40, Math.max(8, +this.size + delta));
- this.sizeChange.emit(this.size);
- }
-}
diff --git a/docs_app/content/examples/template-syntax/src/assets/images/hero.png b/docs_app/content/examples/template-syntax/src/assets/images/hero.png
deleted file mode 100644
index 2a128ac367..0000000000
Binary files a/docs_app/content/examples/template-syntax/src/assets/images/hero.png and /dev/null differ
diff --git a/docs_app/content/examples/template-syntax/src/assets/images/ng-logo.png b/docs_app/content/examples/template-syntax/src/assets/images/ng-logo.png
deleted file mode 100644
index 1e488b1a49..0000000000
Binary files a/docs_app/content/examples/template-syntax/src/assets/images/ng-logo.png and /dev/null differ
diff --git a/docs_app/content/examples/template-syntax/src/assets/images/villain.png b/docs_app/content/examples/template-syntax/src/assets/images/villain.png
deleted file mode 100644
index 26697d1a42..0000000000
Binary files a/docs_app/content/examples/template-syntax/src/assets/images/villain.png and /dev/null differ
diff --git a/docs_app/content/examples/template-syntax/src/index.html b/docs_app/content/examples/template-syntax/src/index.html
deleted file mode 100644
index 866fc067cb..0000000000
--- a/docs_app/content/examples/template-syntax/src/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
- Template Syntax
-
-
-
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/template-syntax/src/main.ts b/docs_app/content/examples/template-syntax/src/main.ts
deleted file mode 100644
index a9ca1caf8c..0000000000
--- a/docs_app/content/examples/template-syntax/src/main.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-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);
diff --git a/docs_app/content/examples/template-syntax/stackblitz.json b/docs_app/content/examples/template-syntax/stackblitz.json
deleted file mode 100644
index 5ba51f973b..0000000000
--- a/docs_app/content/examples/template-syntax/stackblitz.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "description": "Template Syntax Collection",
- "files":["!**/*.d.ts", "!**/*.js"],
- "tags": ["template"]
-}
diff --git a/docs_app/content/examples/testing/example-config.json b/docs_app/content/examples/testing/example-config.json
deleted file mode 100644
index 317e9458f3..0000000000
--- a/docs_app/content/examples/testing/example-config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "projectType": "testing"
-}
diff --git a/docs_app/content/examples/testing/specs.stackblitz.json b/docs_app/content/examples/testing/specs.stackblitz.json
deleted file mode 100644
index 627630f6ed..0000000000
--- a/docs_app/content/examples/testing/specs.stackblitz.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
- "description": "Testing - specs",
- "files":[
- "src/styles.css",
-
- "src/app/**/*.css",
- "src/app/**/*.html",
- "src/app/**/*.ts",
- "src/app/**/*.spec.ts",
-
- "src/testing/*.ts",
-
- "!src/main.ts",
- "!src/app/bag/*.*",
- "!src/app/1st.spec.ts",
-
- "src/expected.ts",
- "src/test.css",
- "src/tests.sb.ts",
- "src/main-specs.ts",
- "src/index-specs.html"
- ],
- "main": "src/index-specs.html",
- "tags": ["testing"]
-}
diff --git a/docs_app/content/examples/testing/src/app/about/about.component.spec.ts b/docs_app/content/examples/testing/src/app/about/about.component.spec.ts
deleted file mode 100644
index 80bebd99a7..0000000000
--- a/docs_app/content/examples/testing/src/app/about/about.component.spec.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AboutComponent } from './about.component';
-import { HighlightDirective } from '../shared/highlight.directive';
-
-let fixture: ComponentFixture;
-
-describe('AboutComponent (highlightDirective)', () => {
- // #docregion tests
- beforeEach(() => {
- fixture = TestBed.configureTestingModule({
- declarations: [ AboutComponent, HighlightDirective],
- schemas: [ NO_ERRORS_SCHEMA ]
- })
- .createComponent(AboutComponent);
- fixture.detectChanges(); // initial binding
- });
-
- it('should have skyblue ', () => {
- const h2: HTMLElement = fixture.nativeElement.querySelector('h2');
- const bgColor = h2.style.backgroundColor;
- expect(bgColor).toBe('skyblue');
- });
- // #enddocregion tests
-});
diff --git a/docs_app/content/examples/testing/src/app/about/about.component.ts b/docs_app/content/examples/testing/src/app/about/about.component.ts
deleted file mode 100644
index 465d081d25..0000000000
--- a/docs_app/content/examples/testing/src/app/about/about.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-@Component({
- template: `
- About
- Quote of the day:
-
- `
-})
-export class AboutComponent { }
diff --git a/docs_app/content/examples/testing/src/app/app-initial.component.spec.ts b/docs_app/content/examples/testing/src/app/app-initial.component.spec.ts
deleted file mode 100644
index 3e3e6a847c..0000000000
--- a/docs_app/content/examples/testing/src/app/app-initial.component.spec.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-// #docplaster
-// #docregion
-import { TestBed, async } from '@angular/core/testing';
-// #enddocregion
-import { AppComponent } from './app-initial.component';
-/*
-// #docregion
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-// #enddocregion
-*/
-describe('AppComponent (initial CLI version)', () => {
- // #docregion
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [
- AppComponent
- ],
- }).compileComponents();
- }));
- it('should create the app', async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app).toBeTruthy();
- }));
- it(`should have as title 'app'`, async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app.title).toEqual('app');
- }));
- it('should render title in a h1 tag', async(() => {
- const fixture = TestBed.createComponent(AppComponent);
- fixture.detectChanges();
- const compiled = fixture.nativeElement;
- expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
- }));
-});
-// #enddocregion
-
-/// As it should be
-import { DebugElement } from '@angular/core';
-import { ComponentFixture } from '@angular/core/testing';
-
-describe('AppComponent (initial CLI version - as it should be)', () => {
-
- let app: AppComponent;
- let de: DebugElement;
- let fixture: ComponentFixture;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [
- AppComponent
- ],
- });
-
- fixture = TestBed.createComponent(AppComponent);
- app = fixture.componentInstance;
- de = fixture.debugElement;
- });
-
- it('should create the app', () => {
- expect(app).toBeDefined();
- });
-
- it(`should have as title 'app'`, () => {
- expect(app.title).toEqual('app');
- });
-
- it('should render title in an h1 tag', () => {
- fixture.detectChanges();
- expect(de.nativeElement.querySelector('h1').textContent)
- .toContain('Welcome to app!');
- });
-});
diff --git a/docs_app/content/examples/testing/src/app/app-initial.component.ts b/docs_app/content/examples/testing/src/app/app-initial.component.ts
deleted file mode 100644
index 0f06d4dd07..0000000000
--- a/docs_app/content/examples/testing/src/app/app-initial.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-// Reduced version of the initial AppComponent generated by CLI
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-root',
- template: 'Welcome to {{title}}! '
-})
-export class AppComponent {
- title = 'app';
-}
diff --git a/docs_app/content/examples/testing/src/app/app-routing.module.ts b/docs_app/content/examples/testing/src/app/app-routing.module.ts
deleted file mode 100644
index f9fd0bdc83..0000000000
--- a/docs_app/content/examples/testing/src/app/app-routing.module.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { AboutComponent } from './about/about.component';
-
-@NgModule({
- imports: [
- RouterModule.forRoot([
- { path: '', redirectTo: 'dashboard', pathMatch: 'full'},
- { path: 'about', component: AboutComponent },
- { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule'}
- ])
- ],
- exports: [ RouterModule ] // re-export the module declarations
-})
-export class AppRoutingModule { };
diff --git a/docs_app/content/examples/testing/src/app/app.component.html b/docs_app/content/examples/testing/src/app/app.component.html
deleted file mode 100644
index d73c1162c0..0000000000
--- a/docs_app/content/examples/testing/src/app/app.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
-
- Dashboard
- Heroes
- About
-
-
-
diff --git a/docs_app/content/examples/testing/src/app/app.component.router.spec.ts b/docs_app/content/examples/testing/src/app/app.component.router.spec.ts
deleted file mode 100644
index 4c4ba01579..0000000000
--- a/docs_app/content/examples/testing/src/app/app.component.router.spec.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-// For more examples:
-// https://github.com/angular/angular/blob/master/modules/@angular/router/test/integration.spec.ts
-
-import { async, ComponentFixture, fakeAsync, TestBed, tick,
-} from '@angular/core/testing';
-
-import { asyncData } from '../testing';
-
-import { RouterTestingModule } from '@angular/router/testing';
-import { SpyLocation } from '@angular/common/testing';
-
-// r - for relatively obscure router symbols
-import * as r from '@angular/router';
-import { Router, RouterLinkWithHref } from '@angular/router';
-
-import { By } from '@angular/platform-browser';
-import { DebugElement, Type } from '@angular/core';
-import { Location } from '@angular/common';
-
-import { click } from '../testing';
-
-import { AppModule } from './app.module';
-import { AppComponent } from './app.component';
-import { AboutComponent } from './about/about.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
-import { TwainService } from './twain/twain.service';
-
-import { HeroService, TestHeroService } from './model/testing/test-hero.service';
-
-let comp: AppComponent;
-let fixture: ComponentFixture;
-let page: Page;
-let router: Router;
-let location: SpyLocation;
-
-describe('AppComponent & RouterTestingModule', () => {
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- imports: [ AppModule, RouterTestingModule ],
- providers: [
- { provide: HeroService, useClass: TestHeroService }
- ]
- })
- .compileComponents();
- }));
-
- it('should navigate to "Dashboard" immediately', fakeAsync(() => {
- createComponent();
- tick(); // wait for async data to arrive
- expect(location.path()).toEqual('/dashboard', 'after initialNavigation()');
- expectElementOf(DashboardComponent);
- }));
-
- it('should navigate to "About" on click', fakeAsync(() => {
- createComponent();
- click(page.aboutLinkDe);
- // page.aboutLinkDe.nativeElement.click(); // ok but fails in phantom
-
- advance();
- expectPathToBe('/about');
- expectElementOf(AboutComponent);
- }));
-
- it('should navigate to "About" w/ browser location URL change', fakeAsync(() => {
- createComponent();
- location.simulateHashChange('/about');
- // location.go('/about'); // also works ... except, perhaps, in Stackblitz
- advance();
- expectPathToBe('/about');
- expectElementOf(AboutComponent);
- }));
-
- // Can't navigate to lazy loaded modules with this technique
- xit('should navigate to "Heroes" on click (not working yet)', fakeAsync(() => {
- createComponent();
- page.heroesLinkDe.nativeElement.click();
- advance();
- expectPathToBe('/heroes');
- }));
-
-});
-
-
-///////////////
-import { NgModuleFactoryLoader } from '@angular/core';
-import { SpyNgModuleFactoryLoader } from '@angular/router/testing';
-
-import { HeroModule } from './hero/hero.module'; // should be lazy loaded
-import { HeroListComponent } from './hero/hero-list.component';
-
-let loader: SpyNgModuleFactoryLoader;
-
-///////// Can't get lazy loaded Heroes to work yet
-xdescribe('AppComponent & Lazy Loading (not working yet)', () => {
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- imports: [ AppModule, RouterTestingModule ]
- })
- .compileComponents();
- }));
-
- beforeEach(fakeAsync(() => {
- createComponent();
- loader = TestBed.get(NgModuleFactoryLoader);
- loader.stubbedModules = { expected: HeroModule };
- router.resetConfig([{path: 'heroes', loadChildren: 'expected'}]);
- }));
-
- it('should navigate to "Heroes" on click', async(() => {
- page.heroesLinkDe.nativeElement.click();
- advance();
- expectPathToBe('/heroes');
- expectElementOf(HeroListComponent);
- }));
-
- it('can navigate to "Heroes" w/ browser location URL change', fakeAsync(() => {
- location.go('/heroes');
- advance();
- expectPathToBe('/heroes');
- expectElementOf(HeroListComponent);
- }));
-});
-
-////// Helpers /////////
-
-/**
- * Advance to the routed page
- * Wait a tick, then detect changes, and tick again
- */
-function advance(): void {
- tick(); // wait while navigating
- fixture.detectChanges(); // update view
- tick(); // wait for async data to arrive
-}
-
-function createComponent() {
- fixture = TestBed.createComponent(AppComponent);
- comp = fixture.componentInstance;
-
- const injector = fixture.debugElement.injector;
- location = injector.get(Location) as SpyLocation;
- router = injector.get(Router);
- router.initialNavigation();
- spyOn(injector.get(TwainService), 'getQuote')
- // fake fast async observable
- .and.returnValue(asyncData('Test Quote'));
- advance();
-
- page = new Page();
-}
-
-class Page {
- aboutLinkDe: DebugElement;
- dashboardLinkDe: DebugElement;
- heroesLinkDe: DebugElement;
-
- // for debugging
- comp: AppComponent;
- location: SpyLocation;
- router: Router;
- fixture: ComponentFixture;
-
- constructor() {
- const links = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref));
- this.aboutLinkDe = links[2];
- this.dashboardLinkDe = links[0];
- this.heroesLinkDe = links[1];
-
- // for debugging
- this.comp = comp;
- this.fixture = fixture;
- this.router = router;
- }
-}
-
-function expectPathToBe(path: string, expectationFailOutput?: any) {
- expect(location.path()).toEqual(path, expectationFailOutput || 'location.path()');
-}
-
-function expectElementOf(type: Type): any {
- const el = fixture.debugElement.query(By.directive(type));
- expect(el).toBeTruthy('expected an element for ' + type.name);
- return el;
-}
diff --git a/docs_app/content/examples/testing/src/app/app.component.spec.ts b/docs_app/content/examples/testing/src/app/app.component.spec.ts
deleted file mode 100644
index e759aa51a2..0000000000
--- a/docs_app/content/examples/testing/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-// #docplaster
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
-import { By } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { RouterLinkDirectiveStub } from '../testing';
-
-// #docregion component-stubs
-@Component({selector: 'app-banner', template: ''})
-class BannerStubComponent {}
-
-@Component({selector: 'router-outlet', template: ''})
-class RouterOutletStubComponent { }
-
-@Component({selector: 'app-welcome', template: ''})
-class WelcomeStubComponent {}
-// #enddocregion component-stubs
-
-let comp: AppComponent;
-let fixture: ComponentFixture;
-
-describe('AppComponent & TestModule', () => {
- beforeEach(async(() => {
- // #docregion testbed-stubs
- TestBed.configureTestingModule({
- declarations: [
- AppComponent,
- RouterLinkDirectiveStub,
- BannerStubComponent,
- RouterOutletStubComponent,
- WelcomeStubComponent
- ]
- })
- // #enddocregion testbed-stubs
- .compileComponents().then(() => {
- fixture = TestBed.createComponent(AppComponent);
- comp = fixture.componentInstance;
- });
- }));
- tests();
-});
-
-//////// Testing w/ NO_ERRORS_SCHEMA //////
-describe('AppComponent & NO_ERRORS_SCHEMA', () => {
- beforeEach(async(() => {
- // #docregion no-errors-schema, mixed-setup
- TestBed.configureTestingModule({
- declarations: [
- AppComponent,
- // #enddocregion no-errors-schema
- BannerStubComponent,
- // #docregion no-errors-schema
- RouterLinkDirectiveStub
- ],
- schemas: [ NO_ERRORS_SCHEMA ]
- })
- // #enddocregion no-errors-schema, mixed-setup
- .compileComponents().then(() => {
- fixture = TestBed.createComponent(AppComponent);
- comp = fixture.componentInstance;
- });
- }));
- tests();
-});
-
-//////// Testing w/ real root module //////
-// Tricky because we are disabling the router and its configuration
-// Better to use RouterTestingModule
-import { AppModule } from './app.module';
-import { AppRoutingModule } from './app-routing.module';
-
-describe('AppComponent & AppModule', () => {
-
- beforeEach(async(() => {
-
- TestBed.configureTestingModule({
- imports: [ AppModule ]
- })
-
- // Get rid of app's Router configuration otherwise many failures.
- // Doing so removes Router declarations; add the Router stubs
- .overrideModule(AppModule, {
- remove: {
- imports: [ AppRoutingModule ]
- },
- add: {
- declarations: [ RouterLinkDirectiveStub, RouterOutletStubComponent ]
- }
- })
-
- .compileComponents()
-
- .then(() => {
- fixture = TestBed.createComponent(AppComponent);
- comp = fixture.componentInstance;
- });
- }));
-
- tests();
-});
-
-function tests() {
- let routerLinks: RouterLinkDirectiveStub[];
- let linkDes: DebugElement[];
-
- // #docregion test-setup
- beforeEach(() => {
- fixture.detectChanges(); // trigger initial data binding
-
- // find DebugElements with an attached RouterLinkStubDirective
- linkDes = fixture.debugElement
- .queryAll(By.directive(RouterLinkDirectiveStub));
-
- // get attached link directive instances
- // using each DebugElement's injector
- routerLinks = linkDes.map(de => de.injector.get(RouterLinkDirectiveStub));
- });
- // #enddocregion test-setup
-
- it('can instantiate the component', () => {
- expect(comp).not.toBeNull();
- });
-
- // #docregion tests
- it('can get RouterLinks from template', () => {
- expect(routerLinks.length).toBe(3, 'should have 3 routerLinks');
- expect(routerLinks[0].linkParams).toBe('/dashboard');
- expect(routerLinks[1].linkParams).toBe('/heroes');
- expect(routerLinks[2].linkParams).toBe('/about');
- });
-
- it('can click Heroes link in template', () => {
- const heroesLinkDe = linkDes[1]; // heroes link DebugElement
- const heroesLink = routerLinks[1]; // heroes link directive
-
- expect(heroesLink.navigatedTo).toBeNull('should not have navigated yet');
-
- heroesLinkDe.triggerEventHandler('click', null);
- fixture.detectChanges();
-
- expect(heroesLink.navigatedTo).toBe('/heroes');
- });
- // #enddocregion tests
-}
diff --git a/docs_app/content/examples/testing/src/app/app.component.ts b/docs_app/content/examples/testing/src/app/app.component.ts
deleted file mode 100644
index 7b3cf496f1..0000000000
--- a/docs_app/content/examples/testing/src/app/app.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html'
-})
-export class AppComponent { }
diff --git a/docs_app/content/examples/testing/src/app/app.module.ts b/docs_app/content/examples/testing/src/app/app.module.ts
deleted file mode 100644
index aecf6ea5e2..0000000000
--- a/docs_app/content/examples/testing/src/app/app.module.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { HttpClientModule } from '@angular/common/http';
-
-import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app-routing.module';
-
-import { AboutComponent } from './about/about.component';
-import { BannerComponent } from './banner/banner.component';
-import { HeroService } from './model/hero.service';
-import { UserService } from './model/user.service';
-import { TwainComponent } from './twain/twain.component';
-import { TwainService } from './twain/twain.service';
-import { WelcomeComponent } from './welcome/welcome.component';
-
-import { DashboardModule } from './dashboard/dashboard.module';
-import { SharedModule } from './shared/shared.module';
-
-import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
-import { InMemoryDataService } from './in-memory-data.service';
-
-@NgModule({
- imports: [
- BrowserModule,
- DashboardModule,
- AppRoutingModule,
- SharedModule,
- HttpClientModule,
-
- // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
- // and returns simulated server responses.
- // Remove it when a real server is ready to receive requests.
- HttpClientInMemoryWebApiModule.forRoot(
- InMemoryDataService, { dataEncapsulation: false }
- )
- ],
- providers: [
- HeroService,
- TwainService,
- UserService
- ],
- declarations: [
- AppComponent,
- AboutComponent,
- BannerComponent,
- TwainComponent,
- WelcomeComponent ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/docs_app/content/examples/testing/src/app/banner/banner-external.component.css b/docs_app/content/examples/testing/src/app/banner/banner-external.component.css
deleted file mode 100644
index cd09a55b3c..0000000000
--- a/docs_app/content/examples/testing/src/app/banner/banner-external.component.css
+++ /dev/null
@@ -1 +0,0 @@
-h1 { color: green; font-size: 350%}
diff --git a/docs_app/content/examples/testing/src/app/banner/banner-external.component.html b/docs_app/content/examples/testing/src/app/banner/banner-external.component.html
deleted file mode 100644
index 6213adcb47..0000000000
--- a/docs_app/content/examples/testing/src/app/banner/banner-external.component.html
+++ /dev/null
@@ -1 +0,0 @@
-{{title}}
diff --git a/docs_app/content/examples/testing/src/app/banner/banner-external.component.spec.ts b/docs_app/content/examples/testing/src/app/banner/banner-external.component.spec.ts
deleted file mode 100644
index d5fc9c8cbe..0000000000
--- a/docs_app/content/examples/testing/src/app/banner/banner-external.component.spec.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-// #docplaster
-// #docregion import-async
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-// #enddocregion import-async
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { BannerComponent } from './banner-external.component';
-
-describe('BannerComponent (external files)', () => {
- let component: BannerComponent;
- let fixture: ComponentFixture;
- let h1: HTMLElement;
-
- describe('Two beforeEach', () => {
- // #docregion async-before-each
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ BannerComponent ],
- })
- .compileComponents(); // compile template and css
- }));
- // #enddocregion async-before-each
-
- // synchronous beforeEach
- // #docregion sync-before-each
- beforeEach(() => {
- fixture = TestBed.createComponent(BannerComponent);
- component = fixture.componentInstance; // BannerComponent test instance
- h1 = fixture.nativeElement.querySelector('h1');
- });
- // #enddocregion sync-before-each
-
- tests();
- });
-
- describe('One beforeEach', () => {
- // #docregion one-before-each
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ BannerComponent ],
- })
- .compileComponents()
- .then(() => {
- fixture = TestBed.createComponent(BannerComponent);
- component = fixture.componentInstance;
- h1 = fixture.nativeElement.querySelector('h1');
- });
- }));
- // #enddocregion one-before-each
-
- tests();
- });
-
- function tests() {
- it('no title in the DOM until manually call `detectChanges`', () => {
- expect(h1.textContent).toEqual('');
- });
-
- it('should display original title', () => {
- fixture.detectChanges();
- expect(h1.textContent).toContain(component.title);
- });
-
- it('should display a different test title', () => {
- component.title = 'Test Title';
- fixture.detectChanges();
- expect(h1.textContent).toContain('Test Title');
- });
- }
-});
-
diff --git a/docs_app/content/examples/testing/src/app/banner/banner-external.component.ts b/docs_app/content/examples/testing/src/app/banner/banner-external.component.ts
deleted file mode 100644
index dfec36074d..0000000000
--- a/docs_app/content/examples/testing/src/app/banner/banner-external.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-// #docregion metadata
-@Component({
- selector: 'app-banner',
- templateUrl: './banner-external.component.html',
- styleUrls: ['./banner-external.component.css']
-})
-// #enddocregion metadata
-export class BannerComponent {
- title = 'Test Tour of Heroes';
-}
diff --git a/docs_app/content/examples/testing/src/app/banner/banner-initial.component.spec.ts b/docs_app/content/examples/testing/src/app/banner/banner-initial.component.spec.ts
deleted file mode 100644
index 8a45df5023..0000000000
--- a/docs_app/content/examples/testing/src/app/banner/banner-initial.component.spec.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-// #docplaster
-// #docregion import-by
-import { By } from '@angular/platform-browser';
-// #enddocregion import-by
-// #docregion import-debug-element
-import { DebugElement } from '@angular/core';
-// #enddocregion import-debug-element
-// #docregion v1
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-// #enddocregion v1
-import { BannerComponent } from './banner-initial.component';
-/*
-// #docregion v1
-import { BannerComponent } from './banner.component';
-
-describe('BannerComponent', () => {
-// #enddocregion v1
-*/
-describe('BannerComponent (initial CLI generated)', () => {
-// #docregion v1
- let component: BannerComponent;
- let fixture: ComponentFixture;
-
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [ BannerComponent ]
- })
- .compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(BannerComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeDefined();
- });
-});
-// #enddocregion v1
-
-// #docregion v2
-describe('BannerComponent (minimal)', () => {
- it('should create', () => {
- // #docregion configureTestingModule
- TestBed.configureTestingModule({
- declarations: [ BannerComponent ]
- });
- // #enddocregion configureTestingModule
- // #docregion createComponent
- const fixture = TestBed.createComponent(BannerComponent);
- // #enddocregion createComponent
- // #docregion componentInstance
- const component = fixture.componentInstance;
- expect(component).toBeDefined();
- // #enddocregion componentInstance
- });
-});
-// #enddocregion v2
-
-// #docregion v3, v4
-describe('BannerComponent (with beforeEach)', () => {
- let component: BannerComponent;
- let fixture: ComponentFixture;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [ BannerComponent ]
- });
- fixture = TestBed.createComponent(BannerComponent);
- component = fixture.componentInstance;
- });
-
- it('should create', () => {
- expect(component).toBeDefined();
- });
-// #enddocregion v3
-
-// #docregion v4-test-2
- it('should contain "banner works!"', () => {
- const bannerElement: HTMLElement = fixture.nativeElement;
- expect(bannerElement.textContent).toContain('banner works!');
- });
-// #enddocregion v4-test-2
-
-// #docregion v4-test-3
- it('should have with "banner works!"', () => {
- // #docregion nativeElement
- const bannerElement: HTMLElement = fixture.nativeElement;
- // #enddocregion nativeElement
- const p = bannerElement.querySelector('p');
- expect(p.textContent).toEqual('banner works!');
- });
-// #enddocregion v4-test-3
-
-
-// #docregion v4-test-4
-it('should find the
with fixture.debugElement.nativeElement)', () => {
- // #docregion debugElement-nativeElement
- const bannerDe: DebugElement = fixture.debugElement;
- const bannerEl: HTMLElement = bannerDe.nativeElement;
- // #enddocregion debugElement-nativeElement
- const p = bannerEl.querySelector('p');
- expect(p.textContent).toEqual('banner works!');
-});
-// #enddocregion v4-test-4
-
-// #docregion v4-test-5
-it('should find the
with fixture.debugElement.query(By.css)', () => {
- const bannerDe: DebugElement = fixture.debugElement;
- const paragraphDe = bannerDe.query(By.css('p'));
- const p: HTMLElement = paragraphDe.nativeElement;
- expect(p.textContent).toEqual('banner works!');
-});
-// #enddocregion v4-test-5
-// #docregion v3
-});
-// #enddocregion v3, v4
diff --git a/docs_app/content/examples/testing/src/app/banner/banner-initial.component.ts b/docs_app/content/examples/testing/src/app/banner/banner-initial.component.ts
deleted file mode 100644
index a7959e5573..0000000000
--- a/docs_app/content/examples/testing/src/app/banner/banner-initial.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// BannerComponent as initially generated by the CLI
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-banner',
- template: `
banner works!
`,
- styles: []
-})
-export class BannerComponent { }
diff --git a/docs_app/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts b/docs_app/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts
deleted file mode 100644
index 3310fbdad0..0000000000
--- a/docs_app/content/examples/testing/src/app/banner/banner.component.detect-changes.spec.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion import-async
-import { async } from '@angular/core/testing';
-// #enddocregion import-async
-// #docregion import-ComponentFixtureAutoDetect
-import { ComponentFixtureAutoDetect } from '@angular/core/testing';
-// #enddocregion import-ComponentFixtureAutoDetect
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { BannerComponent } from './banner.component';
-
-describe('BannerComponent (AutoChangeDetect)', () => {
- let comp: BannerComponent;
- let fixture: ComponentFixture;
- let h1: HTMLElement;
-
- beforeEach(() => {
- // #docregion auto-detect
- TestBed.configureTestingModule({
- declarations: [ BannerComponent ],
- providers: [
- { provide: ComponentFixtureAutoDetect, useValue: true }
- ]
- });
- // #enddocregion auto-detect
- fixture = TestBed.createComponent(BannerComponent);
- comp = fixture.componentInstance;
- h1 = fixture.nativeElement.querySelector('h1');
- });
-
- // #docregion auto-detect-tests
- it('should display original title', () => {
- // Hooray! No `fixture.detectChanges()` needed
- expect(h1.textContent).toContain(comp.title);
- });
-
- it('should still see original title after comp.title change', () => {
- const oldTitle = comp.title;
- comp.title = 'Test Title';
- // Displayed title is old because Angular didn't hear the change :(
- expect(h1.textContent).toContain(oldTitle);
- });
-
- it('should display updated title after detectChanges', () => {
- comp.title = 'Test Title';
- fixture.detectChanges(); // detect changes explicitly
- expect(h1.textContent).toContain(comp.title);
- });
- // #enddocregion auto-detect-tests
-});
diff --git a/docs_app/content/examples/testing/src/app/banner/banner.component.spec.ts b/docs_app/content/examples/testing/src/app/banner/banner.component.spec.ts
deleted file mode 100644
index a731debbd1..0000000000
--- a/docs_app/content/examples/testing/src/app/banner/banner.component.spec.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-// #docplaster
-// #docregion
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DebugElement } from '@angular/core';
-
-import { BannerComponent } from './banner.component';
-
-describe('BannerComponent (inline template)', () => {
-// #docregion setup
- let component: BannerComponent;
- let fixture: ComponentFixture;
- let h1: HTMLElement;
-
- // #docregion configure-and-create
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [ BannerComponent ],
- });
- fixture = TestBed.createComponent(BannerComponent);
- // #enddocregion configure-and-create
- component = fixture.componentInstance; // BannerComponent test instance
- h1 = fixture.nativeElement.querySelector('h1');
- // #docregion configure-and-create
- });
-// #enddocregion setup, configure-and-create
-
-// #docregion test-w-o-detect-changes
- it('no title in the DOM after createComponent()', () => {
- expect(h1.textContent).toEqual('');
- });
-// #enddocregion test-w-o-detect-changes
-
-// #docregion expect-h1-default-v1
- it('should display original title', () => {
- // #enddocregion expect-h1-default-v1
- fixture.detectChanges();
- // #docregion expect-h1-default-v1
- expect(h1.textContent).toContain(component.title);
- });
- // #enddocregion expect-h1-default-v1
-
-// #docregion expect-h1-default
-it('should display original title after detectChanges()', () => {
- fixture.detectChanges();
- expect(h1.textContent).toContain(component.title);
-});
-// #enddocregion expect-h1-default
-
-// #docregion after-change
-it('should display a different test title', () => {
- component.title = 'Test Title';
- fixture.detectChanges();
- expect(h1.textContent).toContain('Test Title');
-});
-// #enddocregion after-change
-});
diff --git a/docs_app/content/examples/testing/src/app/banner/banner.component.ts b/docs_app/content/examples/testing/src/app/banner/banner.component.ts
deleted file mode 100644
index 3354801d0a..0000000000
--- a/docs_app/content/examples/testing/src/app/banner/banner.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-// #docregion component
-@Component({
- selector: 'app-banner',
- template: '{{title}} ',
- styles: ['h1 { color: green; font-size: 350%}']
-})
-export class BannerComponent {
- title = 'Test Tour of Heroes';
-}
-// #enddocregion component
diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.css b/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.css
deleted file mode 100644
index eb54d181d8..0000000000
--- a/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.hero {
- padding: 20px;
- position: relative;
- text-align: center;
- color: #eee;
- max-height: 120px;
- min-width: 120px;
- background-color: #607D8B;
- border-radius: 2px;
-}
-
-.hero:hover {
- background-color: #EEE;
- cursor: pointer;
- color: #607d8b;
-}
-
-@media (max-width: 600px) {
- .hero {
- font-size: 10px;
- max-height: 75px; }
-}
-
-@media (max-width: 1024px) {
- .hero {
- min-width: 60px;
- }
-}
diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts b/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
deleted file mode 100644
index 84d73e45f4..0000000000
--- a/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.spec.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-
-// #docplaster
-import { async, ComponentFixture, TestBed
-} from '@angular/core/testing';
-
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { addMatchers, click } from '../../testing';
-
-import { Hero } from '../model/hero';
-import { DashboardHeroComponent } from './dashboard-hero.component';
-
-beforeEach( addMatchers );
-
-describe('DashboardHeroComponent class only', () => {
- // #docregion class-only
- it('raises the selected event when clicked', () => {
- const comp = new DashboardHeroComponent();
- const hero: Hero = { id: 42, name: 'Test' };
- comp.hero = hero;
-
- comp.selected.subscribe(selectedHero => expect(selectedHero).toBe(hero));
- comp.click();
- });
- // #enddocregion class-only
-});
-
-describe('DashboardHeroComponent when tested directly', () => {
-
- let comp: DashboardHeroComponent;
- let expectedHero: Hero;
- let fixture: ComponentFixture;
- let heroDe: DebugElement;
- let heroEl: HTMLElement;
-
- beforeEach(async(() => {
- // #docregion setup, config-testbed
- TestBed.configureTestingModule({
- declarations: [ DashboardHeroComponent ]
- })
- // #enddocregion setup, config-testbed
- .compileComponents();
- }));
-
- beforeEach(() => {
- // #docregion setup
- fixture = TestBed.createComponent(DashboardHeroComponent);
- comp = fixture.componentInstance;
-
- // find the hero's DebugElement and element
- heroDe = fixture.debugElement.query(By.css('.hero'));
- heroEl = heroDe.nativeElement;
-
- // mock the hero supplied by the parent component
- expectedHero = { id: 42, name: 'Test Name' };
-
- // simulate the parent setting the input property with that hero
- comp.hero = expectedHero;
-
- // trigger initial data binding
- fixture.detectChanges();
- // #enddocregion setup
- });
-
- // #docregion name-test
- it('should display hero name in uppercase', () => {
- const expectedPipedName = expectedHero.name.toUpperCase();
- expect(heroEl.textContent).toContain(expectedPipedName);
- });
- // #enddocregion name-test
-
- // #docregion click-test
- it('should raise selected event when clicked (triggerEventHandler)', () => {
- let selectedHero: Hero;
- comp.selected.subscribe((hero: Hero) => selectedHero = hero);
-
- // #docregion trigger-event-handler
- heroDe.triggerEventHandler('click', null);
- // #enddocregion trigger-event-handler
- expect(selectedHero).toBe(expectedHero);
- });
- // #enddocregion click-test
-
- // #docregion click-test-2
- it('should raise selected event when clicked (element.click)', () => {
- let selectedHero: Hero;
- comp.selected.subscribe((hero: Hero) => selectedHero = hero);
-
- heroEl.click();
- expect(selectedHero).toBe(expectedHero);
- });
- // #enddocregion click-test-2
-
- // #docregion click-test-3
- it('should raise selected event when clicked (click helper)', () => {
- let selectedHero: Hero;
- comp.selected.subscribe(hero => selectedHero = hero);
-
- click(heroDe); // click helper with DebugElement
- click(heroEl); // click helper with native element
-
- expect(selectedHero).toBe(expectedHero);
- });
- // #enddocregion click-test-3
-});
-
-//////////////////
-
-describe('DashboardHeroComponent when inside a test host', () => {
- let testHost: TestHostComponent;
- let fixture: ComponentFixture;
- let heroEl: HTMLElement;
-
- beforeEach(async(() => {
- // #docregion test-host-setup
- TestBed.configureTestingModule({
- declarations: [ DashboardHeroComponent, TestHostComponent ]
- })
- // #enddocregion test-host-setup
- .compileComponents();
- }));
-
- beforeEach(() => {
- // #docregion test-host-setup
- // create TestHostComponent instead of DashboardHeroComponent
- fixture = TestBed.createComponent(TestHostComponent);
- testHost = fixture.componentInstance;
- heroEl = fixture.nativeElement.querySelector('.hero');
- fixture.detectChanges(); // trigger initial data binding
- // #enddocregion test-host-setup
- });
-
- // #docregion test-host-tests
- it('should display hero name', () => {
- const expectedPipedName = testHost.hero.name.toUpperCase();
- expect(heroEl.textContent).toContain(expectedPipedName);
- });
-
- it('should raise selected event when clicked', () => {
- click(heroEl);
- // selected hero should be the same data bound hero
- expect(testHost.selectedHero).toBe(testHost.hero);
- });
- // #enddocregion test-host-tests
-});
-
-////// Test Host Component //////
-import { Component } from '@angular/core';
-
-// #docregion test-host
-@Component({
- template: `
-
- `
-})
-class TestHostComponent {
- hero: Hero = {id: 42, name: 'Test Name' };
- selectedHero: Hero;
- onSelected(hero: Hero) { this.selectedHero = hero; }
-}
-// #enddocregion test-host
diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts b/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
deleted file mode 100644
index ca1ff573bf..0000000000
--- a/docs_app/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// #docregion
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-import { Hero } from '../model/hero';
-
-// #docregion component
-@Component({
- selector: 'dashboard-hero',
- template: `
-
- {{hero.name | uppercase}}
-
`,
- styleUrls: [ './dashboard-hero.component.css' ]
-})
-// #docregion class
-export class DashboardHeroComponent {
- @Input() hero: Hero;
- @Output() selected = new EventEmitter();
- click() { this.selected.emit(this.hero); }
-}
-// #enddocregion component, class
diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.css b/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.css
deleted file mode 100644
index 98130b61c6..0000000000
--- a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.css
+++ /dev/null
@@ -1,35 +0,0 @@
-[class*='col-'] {
- float: left;
-}
-*, *:after, *:before {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-h3 {
- text-align: center; margin-bottom: 0;
-}
-[class*='col-'] {
- padding-right: 20px;
- padding-bottom: 20px;
-}
-[class*='col-']:last-of-type {
- padding-right: 0;
-}
-.grid {
- margin: 0;
-}
-.col-1-4 {
- width: 25%;
-}
-.grid-pad {
- padding: 10px 0;
-}
-.grid-pad > [class*='col-']:last-of-type {
- padding-right: 20px;
-}
-@media (max-width: 1024px) {
- .grid {
- margin: 0;
- }
-}
diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.html b/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.html
deleted file mode 100644
index b26e16b828..0000000000
--- a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{{title}}
-
-
-
-
-
-
-
diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts b/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts
deleted file mode 100644
index 1d372bfe0e..0000000000
--- a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.no-testbed.spec.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Router } from '@angular/router';
-
-import { DashboardComponent } from './dashboard.component';
-import { Hero } from '../model/hero';
-
-import { addMatchers } from '../../testing';
-import { TestHeroService, HeroService } from '../model/testing/test-hero.service';
-
-class FakeRouter {
- navigateByUrl(url: string) { return url; }
-}
-
-describe('DashboardComponent class only', () => {
- let comp: DashboardComponent;
- let heroService: TestHeroService;
- let router: Router;
-
- beforeEach(() => {
- addMatchers();
- router = new FakeRouter() as any as Router;
- heroService = new TestHeroService();
- comp = new DashboardComponent(router, heroService);
- });
-
- it('should NOT have heroes before calling OnInit', () => {
- expect(comp.heroes.length).toBe(0,
- 'should not have heroes before OnInit');
- });
-
- it('should NOT have heroes immediately after OnInit', () => {
- comp.ngOnInit(); // ngOnInit -> getHeroes
- expect(comp.heroes.length).toBe(0,
- 'should not have heroes until service promise resolves');
- });
-
- it('should HAVE heroes after HeroService gets them', (done: DoneFn) => {
- comp.ngOnInit(); // ngOnInit -> getHeroes
- heroService.lastResult // the one from getHeroes
- .subscribe(
- () => {
- // throw new Error('deliberate error'); // see it fail gracefully
- expect(comp.heroes.length).toBeGreaterThan(0,
- 'should have heroes after service promise resolves');
- done();
- },
- done.fail);
- });
-
- it('should tell ROUTER to navigate by hero id', () => {
- const hero: Hero = {id: 42, name: 'Abbracadabra' };
- const spy = spyOn(router, 'navigateByUrl');
-
- comp.gotoDetail(hero);
-
- const navArgs = spy.calls.mostRecent().args[0];
- expect(navArgs).toBe('/heroes/42', 'should nav to HeroDetail for Hero 42');
- });
-
-});
diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts b/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts
deleted file mode 100644
index 9beef762a0..0000000000
--- a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-// #docplaster
-import { async, inject, ComponentFixture, TestBed
-} from '@angular/core/testing';
-
-import { addMatchers, asyncData, click } from '../../testing';
-import { HeroService } from '../model/hero.service';
-import { getTestHeroes } from '../model/testing/test-heroes';
-
-import { By } from '@angular/platform-browser';
-import { Router } from '@angular/router';
-
-import { DashboardComponent } from './dashboard.component';
-import { DashboardModule } from './dashboard.module';
-
-beforeEach ( addMatchers );
-
-let comp: DashboardComponent;
-let fixture: ComponentFixture;
-
-//////// Deep ////////////////
-
-describe('DashboardComponent (deep)', () => {
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [ DashboardModule ]
- });
- });
-
- compileAndCreate();
-
- tests(clickForDeep);
-
- function clickForDeep() {
- // get first
- const heroEl: HTMLElement = fixture.nativeElement.querySelector('.hero');
- click(heroEl);
- }
-});
-
-//////// Shallow ////////////////
-
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-
-describe('DashboardComponent (shallow)', () => {
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [ DashboardComponent ],
- schemas: [NO_ERRORS_SCHEMA]
- });
- });
-
- compileAndCreate();
-
- tests(clickForShallow);
-
- function clickForShallow() {
- // get first
DebugElement
- const heroDe = fixture.debugElement.query(By.css('dashboard-hero'));
- heroDe.triggerEventHandler('selected', comp.heroes[0]);
- }
-});
-
-/** Add TestBed providers, compile, and create DashboardComponent */
-function compileAndCreate() {
- // #docregion compile-and-create-body
- beforeEach(async(() => {
- // #docregion router-spy
- const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
- const heroServiceSpy = jasmine.createSpyObj('HeroService', ['getHeroes']);
-
- TestBed.configureTestingModule({
- providers: [
- { provide: HeroService, useValue: heroServiceSpy },
- { provide: Router, useValue: routerSpy }
- ]
- })
- // #enddocregion router-spy
- .compileComponents().then(() => {
- fixture = TestBed.createComponent(DashboardComponent);
- comp = fixture.componentInstance;
-
- // getHeroes spy returns observable of test heroes
- heroServiceSpy.getHeroes.and.returnValue(asyncData(getTestHeroes()));
- });
- // #enddocregion compile-and-create-body
- }));
-}
-
-/**
- * The (almost) same tests for both.
- * Only change: the way that the first hero is clicked
- */
-function tests(heroClick: Function) {
-
- it('should NOT have heroes before ngOnInit', () => {
- expect(comp.heroes.length).toBe(0,
- 'should not have heroes before ngOnInit');
- });
-
- it('should NOT have heroes immediately after ngOnInit', () => {
- fixture.detectChanges(); // runs initial lifecycle hooks
-
- expect(comp.heroes.length).toBe(0,
- 'should not have heroes until service promise resolves');
- });
-
- describe('after get dashboard heroes', () => {
-
- let router: Router;
-
- // Trigger component so it gets heroes and binds to them
- beforeEach(async(() => {
- router = fixture.debugElement.injector.get(Router);
- fixture.detectChanges(); // runs ngOnInit -> getHeroes
- fixture.whenStable() // No need for the `lastPromise` hack!
- .then(() => fixture.detectChanges()); // bind to heroes
- }));
-
- it('should HAVE heroes', () => {
- expect(comp.heroes.length).toBeGreaterThan(0,
- 'should have heroes after service promise resolves');
- });
-
- it('should DISPLAY heroes', () => {
- // Find and examine the displayed heroes
- // Look for them in the DOM by css class
- const heroes = fixture.nativeElement.querySelectorAll('dashboard-hero');
- expect(heroes.length).toBe(4, 'should display 4 heroes');
- });
-
- // #docregion navigate-test
- it('should tell ROUTER to navigate when hero clicked', () => {
-
- heroClick(); // trigger click on first inner
-
- // args passed to router.navigateByUrl() spy
- const spy = router.navigateByUrl as jasmine.Spy;
- const navArgs = spy.calls.first().args[0];
-
- // expecting to navigate to id of the component's first hero
- const id = comp.heroes[0].id;
- expect(navArgs).toBe('/heroes/' + id,
- 'should nav to HeroDetail for first hero');
- });
- // #enddocregion navigate-test
- });
-}
-
diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.ts b/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.ts
deleted file mode 100644
index 6ab4e6f324..0000000000
--- a/docs_app/content/examples/testing/src/app/dashboard/dashboard.component.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-// #docregion
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { Hero } from '../model/hero';
-import { HeroService } from '../model/hero.service';
-
-@Component({
- selector: 'app-dashboard',
- templateUrl: './dashboard.component.html',
- styleUrls: [ './dashboard.component.css' ]
-})
-export class DashboardComponent implements OnInit {
-
- heroes: Hero[] = [];
-
- // #docregion ctor
- constructor(
- private router: Router,
- private heroService: HeroService) {
- }
- // #enddocregion ctor
-
- ngOnInit() {
- this.heroService.getHeroes()
- .subscribe(heroes => this.heroes = heroes.slice(1, 5));
- }
-
- // #docregion goto-detail
- gotoDetail(hero: Hero) {
- let url = `/heroes/${hero.id}`;
- this.router.navigateByUrl(url);
- }
- // #enddocregion goto-detail
-
- get title() {
- let cnt = this.heroes.length;
- return cnt === 0 ? 'No Heroes' :
- cnt === 1 ? 'Top Hero' : `Top ${cnt} Heroes`;
- }
-}
diff --git a/docs_app/content/examples/testing/src/app/dashboard/dashboard.module.ts b/docs_app/content/examples/testing/src/app/dashboard/dashboard.module.ts
deleted file mode 100644
index 8a70c851a0..0000000000
--- a/docs_app/content/examples/testing/src/app/dashboard/dashboard.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { SharedModule } from '../shared/shared.module';
-
-import { DashboardComponent } from './dashboard.component';
-import { DashboardHeroComponent } from './dashboard-hero.component';
-
-const routes: Routes = [
- { path: 'dashboard', component: DashboardComponent },
-];
-
-@NgModule({
- imports: [
- SharedModule,
- RouterModule.forChild(routes)
- ],
- declarations: [ DashboardComponent, DashboardHeroComponent ]
-})
-export class DashboardModule { }
diff --git a/docs_app/content/examples/testing/src/app/demo/async-helper.spec.ts b/docs_app/content/examples/testing/src/app/demo/async-helper.spec.ts
deleted file mode 100644
index 9bf42ed33f..0000000000
--- a/docs_app/content/examples/testing/src/app/demo/async-helper.spec.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-// tslint:disable-next-line:no-unused-variable
-import { async, fakeAsync, tick } from '@angular/core/testing';
-
-import { of } from 'rxjs';
-import { delay } from 'rxjs/operators';
-
-describe('Angular async helper', () => {
- let actuallyDone = false;
-
- beforeEach(() => { actuallyDone = false; });
-
- afterEach(() => { expect(actuallyDone).toBe(true, 'actuallyDone should be true'); });
-
- it('should run normal test', () => { actuallyDone = true; });
-
- it('should run normal async test', (done: DoneFn) => {
- setTimeout(() => {
- actuallyDone = true;
- done();
- }, 0);
- });
-
- it('should run async test with task',
- async(() => { setTimeout(() => { actuallyDone = true; }, 0); }));
-
- it('should run async test with successful promise', async(() => {
- const p = new Promise(resolve => { setTimeout(resolve, 10); });
- p.then(() => { actuallyDone = true; });
- }));
-
- it('should run async test with failed promise', async(() => {
- const p = new Promise((resolve, reject) => { setTimeout(reject, 10); });
- p.catch(() => { actuallyDone = true; });
- }));
-
- // Use done. Cannot use setInterval with async or fakeAsync
- // See https://github.com/angular/angular/issues/10127
- it('should run async test with successful delayed Observable', (done: DoneFn) => {
- const source = of(true).pipe(delay(10));
- source.subscribe(
- val => actuallyDone = true,
- err => fail(err),
- done
- );
- });
-
- // Cannot use setInterval from within an async zone test
- // See https://github.com/angular/angular/issues/10127
- // xit('should run async test with successful delayed Observable', async(() => {
- // const source = of(true).pipe(delay(10));
- // source.subscribe(
- // val => actuallyDone = true,
- // err => fail(err)
- // );
- // }));
-
- // // Fail message: Error: 1 periodic timer(s) still in the queue
- // // See https://github.com/angular/angular/issues/10127
- // xit('should run async test with successful delayed Observable', fakeAsync(() => {
- // const source = of(true).pipe(delay(10));
- // source.subscribe(
- // val => actuallyDone = true,
- // err => fail(err)
- // );
-
- // tick();
- // }));
-
-});
diff --git a/docs_app/content/examples/testing/src/app/demo/demo-external-template.html b/docs_app/content/examples/testing/src/app/demo/demo-external-template.html
deleted file mode 100644
index 4c2b23755f..0000000000
--- a/docs_app/content/examples/testing/src/app/demo/demo-external-template.html
+++ /dev/null
@@ -1 +0,0 @@
-
from external template
diff --git a/docs_app/content/examples/testing/src/app/demo/demo-main.ts b/docs_app/content/examples/testing/src/app/demo/demo-main.ts
deleted file mode 100644
index 9243428b7a..0000000000
--- a/docs_app/content/examples/testing/src/app/demo/demo-main.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// main app entry point
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { DemoModule } from './demo';
-
-platformBrowserDynamic().bootstrapModule(DemoModule);
diff --git a/docs_app/content/examples/testing/src/app/demo/demo.spec.ts b/docs_app/content/examples/testing/src/app/demo/demo.spec.ts
deleted file mode 100644
index d65b9acfb8..0000000000
--- a/docs_app/content/examples/testing/src/app/demo/demo.spec.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-// #docplaster
-import {
- LightswitchComponent,
- MasterService,
- ValueService,
- ReversePipe
-} from './demo';
-
-///////// Fakes /////////
-export class FakeValueService extends ValueService {
- value = 'faked service value';
-}
-////////////////////////
-describe('demo (no TestBed):', () => {
-
- // #docregion ValueService
- // Straight Jasmine testing without Angular's testing support
- describe('ValueService', () => {
- let service: ValueService;
- beforeEach(() => { service = new ValueService(); });
-
- it('#getValue should return real value', () => {
- expect(service.getValue()).toBe('real value');
- });
-
- it('#getObservableValue should return value from observable',
- (done: DoneFn) => {
- service.getObservableValue().subscribe(value => {
- expect(value).toBe('observable value');
- done();
- });
- });
-
- it('#getPromiseValue should return value from a promise',
- (done: DoneFn) => {
- service.getPromiseValue().then(value => {
- expect(value).toBe('promise value');
- done();
- });
- });
- });
- // #enddocregion ValueService
-
- // MasterService requires injection of a ValueService
- // #docregion MasterService
- describe('MasterService without Angular testing support', () => {
- let masterService: MasterService;
-
- it('#getValue should return real value from the real service', () => {
- masterService = new MasterService(new ValueService());
- expect(masterService.getValue()).toBe('real value');
- });
-
- it('#getValue should return faked value from a fakeService', () => {
- masterService = new MasterService(new FakeValueService());
- expect(masterService.getValue()).toBe('faked service value');
- });
-
- it('#getValue should return faked value from a fake object', () => {
- const fake = { getValue: () => 'fake value' };
- masterService = new MasterService(fake as ValueService);
- expect(masterService.getValue()).toBe('fake value');
- });
-
- it('#getValue should return stubbed value from a spy', () => {
- // create `getValue` spy on an object representing the ValueService
- const valueServiceSpy =
- jasmine.createSpyObj('ValueService', ['getValue']);
-
- // set the value to return when the `getValue` spy is called.
- const stubValue = 'stub value';
- valueServiceSpy.getValue.and.returnValue(stubValue);
-
- masterService = new MasterService(valueServiceSpy);
-
- expect(masterService.getValue())
- .toBe(stubValue, 'service returned stub value');
- expect(valueServiceSpy.getValue.calls.count())
- .toBe(1, 'spy method was called once');
- expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
- .toBe(stubValue);
- });
- });
- // #enddocregion MasterService
-
- describe('MasterService (no beforeEach)', () => {
- // #docregion no-before-each-test
- it('#getValue should return stubbed value from a spy', () => {
- // #docregion no-before-each-setup-call
- const { masterService, stubValue, valueServiceSpy } = setup();
- // #enddocregion no-before-each-setup-call
- expect(masterService.getValue())
- .toBe(stubValue, 'service returned stub value');
- expect(valueServiceSpy.getValue.calls.count())
- .toBe(1, 'spy method was called once');
- expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
- .toBe(stubValue);
- });
- // #enddocregion no-before-each-test
-
- // #docregion no-before-each-setup
- function setup() {
- const valueServiceSpy =
- jasmine.createSpyObj('ValueService', ['getValue']);
- const stubValue = 'stub value';
- const masterService = new MasterService(valueServiceSpy);
-
- valueServiceSpy.getValue.and.returnValue(stubValue);
- return { masterService, stubValue, valueServiceSpy };
- }
- // #enddocregion no-before-each-setup
- });
-
- // #docregion ReversePipe
-
- describe('ReversePipe', () => {
- let pipe: ReversePipe;
-
- beforeEach(() => { pipe = new ReversePipe(); });
-
- it('transforms "abc" to "cba"', () => {
- expect(pipe.transform('abc')).toBe('cba');
- });
-
- it('no change to palindrome: "able was I ere I saw elba"', () => {
- const palindrome = 'able was I ere I saw elba';
- expect(pipe.transform(palindrome)).toBe(palindrome);
- });
-
- });
- // #enddocregion ReversePipe
-
- // #docregion Lightswitch
- describe('LightswitchComp', () => {
- it('#clicked() should toggle #isOn', () => {
- const comp = new LightswitchComponent();
- expect(comp.isOn).toBe(false, 'off at first');
- comp.clicked();
- expect(comp.isOn).toBe(true, 'on after click');
- comp.clicked();
- expect(comp.isOn).toBe(false, 'off after second click');
- });
-
- it('#clicked() should set #message to "is on"', () => {
- const comp = new LightswitchComponent();
- expect(comp.message).toMatch(/is off/i, 'off at first');
- comp.clicked();
- expect(comp.message).toMatch(/is on/i, 'on after clicked');
- });
- });
- // #enddocregion Lightswitch
-
-});
diff --git a/docs_app/content/examples/testing/src/app/demo/demo.testbed.spec.ts b/docs_app/content/examples/testing/src/app/demo/demo.testbed.spec.ts
deleted file mode 100644
index 2c0ba58e99..0000000000
--- a/docs_app/content/examples/testing/src/app/demo/demo.testbed.spec.ts
+++ /dev/null
@@ -1,706 +0,0 @@
-// #docplaster
-import {
- DemoModule,
- BankAccountComponent, BankAccountParentComponent,
- LightswitchComponent,
- Child1Component, Child2Component, Child3Component,
- MasterService,
- ValueService,
- ExternalTemplateComponent,
- InputComponent,
- IoComponent, IoParentComponent,
- MyIfComponent, MyIfChildComponent, MyIfParentComponent,
- NeedsContentComponent, ParentComponent,
- TestProvidersComponent, TestViewProvidersComponent,
- ReversePipeComponent, ShellComponent
-} from './demo';
-
-import { By } from '@angular/platform-browser';
-import { Component,
- DebugElement,
- Injectable } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-
-// Forms symbols imported only for a specific test below
-import { NgModel, NgControl } from '@angular/forms';
-
-import { async, ComponentFixture, fakeAsync, inject, TestBed, tick
-} from '@angular/core/testing';
-
-import { addMatchers, newEvent, click } from '../../testing';
-
-export class NotProvided extends ValueService { /* example below */}
-beforeEach( addMatchers );
-
-describe('demo (with TestBed):', () => {
-
-//////// Service Tests /////////////
-
- // #docregion ValueService
- describe('ValueService', () => {
-
- // #docregion value-service-before-each
- let service: ValueService;
-
- // #docregion value-service-inject-before-each
- beforeEach(() => {
- TestBed.configureTestingModule({ providers: [ValueService] });
- // #enddocregion value-service-before-each
- service = TestBed.get(ValueService);
- // #docregion value-service-before-each
- });
- // #enddocregion value-service-before-each, value-service-inject-before-each
-
- // #docregion value-service-inject-it
- it('should use ValueService', () => {
- service = TestBed.get(ValueService);
- expect(service.getValue()).toBe('real value');
- });
- // #enddocregion value-service-inject-it
-
- it('can inject a default value when service is not provided', () => {
- // #docregion testbed-get-w-null
- service = TestBed.get(NotProvided, null); // service is null
- // #enddocregion testbed-get-w-null
- });
-
- it('test should wait for ValueService.getPromiseValue', async(() => {
- service.getPromiseValue().then(
- value => expect(value).toBe('promise value')
- );
- }));
-
- it('test should wait for ValueService.getObservableValue', async(() => {
- service.getObservableValue().subscribe(
- value => expect(value).toBe('observable value')
- );
- }));
-
- // Must use done. See https://github.com/angular/angular/issues/10127
- it('test should wait for ValueService.getObservableDelayValue', (done: DoneFn) => {
- service.getObservableDelayValue().subscribe(value => {
- expect(value).toBe('observable delay value');
- done();
- });
- });
-
- it('should allow the use of fakeAsync', fakeAsync(() => {
- let value: any;
- service.getPromiseValue().then((val: any) => value = val);
- tick(); // Trigger JS engine cycle until all promises resolve.
- expect(value).toBe('promise value');
- }));
- });
- // #enddocregion ValueService
-
- describe('MasterService', () => {
- // #docregion master-service-before-each
- let masterService: MasterService;
- let valueServiceSpy: jasmine.SpyObj
;
-
- beforeEach(() => {
- const spy = jasmine.createSpyObj('ValueService', ['getValue']);
-
- TestBed.configureTestingModule({
- // Provide both the service-to-test and its (spy) dependency
- providers: [
- MasterService,
- { provide: ValueService, useValue: spy }
- ]
- });
- // Inject both the service-to-test and its (spy) dependency
- masterService = TestBed.get(MasterService);
- valueServiceSpy = TestBed.get(ValueService);
- });
- // #enddocregion master-service-before-each
-
- // #docregion master-service-it
- it('#getValue should return stubbed value from a spy', () => {
- const stubValue = 'stub value';
- valueServiceSpy.getValue.and.returnValue(stubValue);
-
- expect(masterService.getValue())
- .toBe(stubValue, 'service returned stub value');
- expect(valueServiceSpy.getValue.calls.count())
- .toBe(1, 'spy method was called once');
- expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
- .toBe(stubValue);
- });
- // #enddocregion master-service-it
- });
-
- describe('use inject within `it`', () => {
- beforeEach(() => {
- TestBed.configureTestingModule({ providers: [ValueService] });
- });
-
- it('should use modified providers',
- inject([ValueService], (service: ValueService) => {
- service.setValue('value modified in beforeEach');
- expect(service.getValue())
- .toBe('value modified in beforeEach');
- })
- );
- });
-
- describe('using async(inject) within beforeEach', () => {
- let serviceValue: string;
-
- beforeEach(() => {
- TestBed.configureTestingModule({ providers: [ValueService] });
- });
-
- beforeEach(async(inject([ValueService], (service: ValueService) => {
- service.getPromiseValue().then(value => serviceValue = value);
- })));
-
- it('should use asynchronously modified value ... in synchronous test', () => {
- expect(serviceValue).toBe('promise value');
- });
- });
-
-/////////// Component Tests //////////////////
-
- describe('TestBed component tests', () => {
-
- beforeEach(async(() => {
- TestBed
- .configureTestingModule({
- imports: [DemoModule],
- })
- // Compile everything in DemoModule
- .compileComponents();
- }));
-
- it('should create a component with inline template', () => {
- const fixture = TestBed.createComponent(Child1Component);
- fixture.detectChanges();
-
- expect(fixture).toHaveText('Child');
- });
-
- it('should create a component with external template', () => {
- const fixture = TestBed.createComponent(ExternalTemplateComponent);
- fixture.detectChanges();
-
- expect(fixture).toHaveText('from external template');
- });
-
- it('should allow changing members of the component', () => {
- const fixture = TestBed.createComponent(MyIfComponent);
-
- fixture.detectChanges();
- expect(fixture).toHaveText('MyIf()');
-
- fixture.componentInstance.showMore = true;
- fixture.detectChanges();
- expect(fixture).toHaveText('MyIf(More)');
- });
-
- it('should create a nested component bound to inputs/outputs', () => {
- const fixture = TestBed.createComponent(IoParentComponent);
-
- fixture.detectChanges();
- const heroes = fixture.debugElement.queryAll(By.css('.hero'));
- expect(heroes.length).toBeGreaterThan(0, 'has heroes');
-
- const comp = fixture.componentInstance;
- const hero = comp.heroes[0];
-
- click(heroes[0]);
- fixture.detectChanges();
-
- const selected = fixture.debugElement.query(By.css('p'));
- expect(selected).toHaveText(hero.name);
- });
-
- it('can access the instance variable of an `*ngFor` row component', () => {
- const fixture = TestBed.createComponent(IoParentComponent);
- const comp = fixture.componentInstance;
- const heroName = comp.heroes[0].name; // first hero's name
-
- fixture.detectChanges();
- const ngForRow = fixture.debugElement.query(By.directive(IoComponent)); // first hero ngForRow
-
- const hero = ngForRow.context['hero']; // the hero object passed into the row
- expect(hero.name).toBe(heroName, 'ngRow.context.hero');
-
- const rowComp = ngForRow.componentInstance;
- // jasmine.any is an "instance-of-type" test.
- expect(rowComp).toEqual(jasmine.any(IoComponent), 'component is IoComp');
- expect(rowComp.hero.name).toBe(heroName, 'component.hero');
- });
-
-
- // #docregion ButtonComp
- it('should support clicking a button', () => {
- const fixture = TestBed.createComponent(LightswitchComponent);
- const btn = fixture.debugElement.query(By.css('button'));
- const span = fixture.debugElement.query(By.css('span')).nativeElement;
-
- fixture.detectChanges();
- expect(span.textContent).toMatch(/is off/i, 'before click');
-
- click(btn);
- fixture.detectChanges();
- expect(span.textContent).toMatch(/is on/i, 'after click');
- });
- // #enddocregion ButtonComp
-
- // ngModel is async so we must wait for it with promise-based `whenStable`
- it('should support entering text in input box (ngModel)', async(() => {
- const expectedOrigName = 'John';
- const expectedNewName = 'Sally';
-
- const fixture = TestBed.createComponent(InputComponent);
- fixture.detectChanges();
-
- const comp = fixture.componentInstance;
- const input = fixture.debugElement.query(By.css('input')).nativeElement;
-
- expect(comp.name).toBe(expectedOrigName,
- `At start name should be ${expectedOrigName} `);
-
- // wait until ngModel binds comp.name to input box
- fixture.whenStable().then(() => {
- expect(input.value).toBe(expectedOrigName,
- `After ngModel updates input box, input.value should be ${expectedOrigName} `);
-
- // simulate user entering new name in input
- input.value = expectedNewName;
-
- // that change doesn't flow to the component immediately
- expect(comp.name).toBe(expectedOrigName,
- `comp.name should still be ${expectedOrigName} after value change, before binding happens`);
-
- // dispatch a DOM event so that Angular learns of input value change.
- // then wait while ngModel pushes input.box value to comp.name
- input.dispatchEvent(newEvent('input'));
- return fixture.whenStable();
- })
- .then(() => {
- expect(comp.name).toBe(expectedNewName,
- `After ngModel updates the model, comp.name should be ${expectedNewName} `);
- });
- }));
-
- // fakeAsync version of ngModel input test enables sync test style
- // synchronous `tick` replaces asynchronous promise-base `whenStable`
- it('should support entering text in input box (ngModel) - fakeAsync', fakeAsync(() => {
- const expectedOrigName = 'John';
- const expectedNewName = 'Sally';
-
- const fixture = TestBed.createComponent(InputComponent);
- fixture.detectChanges();
-
- const comp = fixture.componentInstance;
- const input = fixture.debugElement.query(By.css('input')).nativeElement;
-
- expect(comp.name).toBe(expectedOrigName,
- `At start name should be ${expectedOrigName} `);
-
- // wait until ngModel binds comp.name to input box
- tick();
- expect(input.value).toBe(expectedOrigName,
- `After ngModel updates input box, input.value should be ${expectedOrigName} `);
-
- // simulate user entering new name in input
- input.value = expectedNewName;
-
- // that change doesn't flow to the component immediately
- expect(comp.name).toBe(expectedOrigName,
- `comp.name should still be ${expectedOrigName} after value change, before binding happens`);
-
- // dispatch a DOM event so that Angular learns of input value change.
- // then wait a tick while ngModel pushes input.box value to comp.name
- input.dispatchEvent(newEvent('input'));
- tick();
- expect(comp.name).toBe(expectedNewName,
- `After ngModel updates the model, comp.name should be ${expectedNewName} `);
- }));
-
- // #docregion ReversePipeComp
- it('ReversePipeComp should reverse the input text', fakeAsync(() => {
- const inputText = 'the quick brown fox.';
- const expectedText = '.xof nworb kciuq eht';
-
- const fixture = TestBed.createComponent(ReversePipeComponent);
- fixture.detectChanges();
-
- const comp = fixture.componentInstance;
- const input = fixture.debugElement.query(By.css('input')).nativeElement as HTMLInputElement;
- const span = fixture.debugElement.query(By.css('span')).nativeElement as HTMLElement;
-
- // simulate user entering new name in input
- input.value = inputText;
-
- // dispatch a DOM event so that Angular learns of input value change.
- // then wait a tick while ngModel pushes input.box value to comp.text
- // and Angular updates the output span
- input.dispatchEvent(newEvent('input'));
- tick();
- fixture.detectChanges();
- expect(span.textContent).toBe(expectedText, 'output span');
- expect(comp.text).toBe(inputText, 'component.text');
- }));
- // #enddocregion ReversePipeComp
-
- // Use this technique to find attached directives of any kind
- it('can examine attached directives and listeners', () => {
- const fixture = TestBed.createComponent(InputComponent);
- fixture.detectChanges();
-
- const inputEl = fixture.debugElement.query(By.css('input'));
-
- expect(inputEl.providerTokens).toContain(NgModel, 'NgModel directive');
-
- const ngControl = inputEl.injector.get(NgControl);
- expect(ngControl).toEqual(jasmine.any(NgControl), 'NgControl directive');
-
- expect(inputEl.listeners.length).toBeGreaterThan(2, 'several listeners attached');
- });
-
- // #docregion dom-attributes
- it('BankAccountComponent should set attributes, styles, classes, and properties', () => {
- const fixture = TestBed.createComponent(BankAccountParentComponent);
- fixture.detectChanges();
- const comp = fixture.componentInstance;
-
- // the only child is debugElement of the BankAccount component
- const el = fixture.debugElement.children[0];
- const childComp = el.componentInstance as BankAccountComponent;
- expect(childComp).toEqual(jasmine.any(BankAccountComponent));
-
- expect(el.context).toBe(childComp, 'context is the child component');
-
- expect(el.attributes['account']).toBe(childComp.id, 'account attribute');
- expect(el.attributes['bank']).toBe(childComp.bank, 'bank attribute');
-
- expect(el.classes['closed']).toBe(true, 'closed class');
- expect(el.classes['open']).toBe(false, 'open class');
-
- expect(el.styles['color']).toBe(comp.color, 'color style');
- expect(el.styles['width']).toBe(comp.width + 'px', 'width style');
- // #enddocregion dom-attributes
-
- // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
- // expect(el.properties['customProperty']).toBe(true, 'customProperty');
-
- // #docregion dom-attributes
- });
- // #enddocregion dom-attributes
-
-
- });
-
- describe('TestBed component overrides:', () => {
-
- it('should override ChildComp\'s template', () => {
-
- const fixture = TestBed.configureTestingModule({
- declarations: [Child1Component],
- })
- .overrideComponent(Child1Component, {
- set: { template: 'Fake ' }
- })
- .createComponent(Child1Component);
-
- fixture.detectChanges();
- expect(fixture).toHaveText('Fake');
- });
-
- it('should override TestProvidersComp\'s ValueService provider', () => {
- const fixture = TestBed.configureTestingModule({
- declarations: [TestProvidersComponent],
- })
- .overrideComponent(TestProvidersComponent, {
- remove: { providers: [ValueService]},
- add: { providers: [{ provide: ValueService, useClass: FakeValueService }] },
-
- // Or replace them all (this component has only one provider)
- // set: { providers: [{ provide: ValueService, useClass: FakeValueService }] },
- })
- .createComponent(TestProvidersComponent);
-
- fixture.detectChanges();
- expect(fixture).toHaveText('injected value: faked value', 'text');
-
- // Explore the providerTokens
- const tokens = fixture.debugElement.providerTokens;
- expect(tokens).toContain(fixture.componentInstance.constructor, 'component ctor');
- expect(tokens).toContain(TestProvidersComponent, 'TestProvidersComp');
- expect(tokens).toContain(ValueService, 'ValueService');
- });
-
- it('should override TestViewProvidersComp\'s ValueService viewProvider', () => {
- const fixture = TestBed.configureTestingModule({
- declarations: [TestViewProvidersComponent],
- })
- .overrideComponent(TestViewProvidersComponent, {
- // remove: { viewProviders: [ValueService]},
- // add: { viewProviders: [{ provide: ValueService, useClass: FakeValueService }] },
-
- // Or replace them all (this component has only one viewProvider)
- set: { viewProviders: [{ provide: ValueService, useClass: FakeValueService }] },
- })
- .createComponent(TestViewProvidersComponent);
-
- fixture.detectChanges();
- expect(fixture).toHaveText('injected value: faked value');
- });
-
- it('injected provider should not be same as component\'s provider', () => {
-
- // TestComponent is parent of TestProvidersComponent
- @Component({ template: ' ' })
- class TestComponent {}
-
- // 3 levels of ValueService provider: module, TestCompomponent, TestProvidersComponent
- const fixture = TestBed.configureTestingModule({
- declarations: [TestComponent, TestProvidersComponent],
- providers: [ValueService]
- })
- .overrideComponent(TestComponent, {
- set: { providers: [{ provide: ValueService, useValue: {} }] }
- })
- .overrideComponent(TestProvidersComponent, {
- set: { providers: [{ provide: ValueService, useClass: FakeValueService }] }
- })
- .createComponent(TestComponent);
-
- let testBedProvider: ValueService;
- let tcProvider: ValueService;
- let tpcProvider: FakeValueService;
-
- // `inject` uses TestBed's injector
- inject([ValueService], (s: ValueService) => testBedProvider = s)();
- tcProvider = fixture.debugElement.injector.get(ValueService) as ValueService;
- tpcProvider = fixture.debugElement.children[0].injector.get(ValueService) as FakeValueService;
-
- expect(testBedProvider).not.toBe(tcProvider, 'testBed/tc not same providers');
- expect(testBedProvider).not.toBe(tpcProvider, 'testBed/tpc not same providers');
-
- expect(testBedProvider instanceof ValueService).toBe(true, 'testBedProvider is ValueService');
- expect(tcProvider).toEqual({} as ValueService, 'tcProvider is {}');
- expect(tpcProvider instanceof FakeValueService).toBe(true, 'tpcProvider is FakeValueService');
- });
-
- it('can access template local variables as references', () => {
- const fixture = TestBed.configureTestingModule({
- declarations: [ShellComponent, NeedsContentComponent, Child1Component, Child2Component, Child3Component],
- })
- .overrideComponent(ShellComponent, {
- set: {
- selector: 'test-shell',
- template: `
-
-
-
-
-
- !
-
- `
- }
- })
- .createComponent(ShellComponent);
-
- fixture.detectChanges();
-
- // NeedsContentComp is the child of ShellComp
- const el = fixture.debugElement.children[0];
- const comp = el.componentInstance;
-
- expect(comp.children.toArray().length).toBe(4,
- 'three different child components and an ElementRef with #content');
-
- expect(el.references['nc']).toBe(comp, '#nc reference to component');
-
- // #docregion custom-predicate
- // Filter for DebugElements with a #content reference
- const contentRefs = el.queryAll( de => de.references['content']);
- // #enddocregion custom-predicate
- expect(contentRefs.length).toBe(4, 'elements w/ a #content reference');
- });
-
- });
-
- describe('nested (one-deep) component override', () => {
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [ParentComponent, FakeChildComponent]
- });
- });
-
- it('ParentComp should use Fake Child component', () => {
- const fixture = TestBed.createComponent(ParentComponent);
- fixture.detectChanges();
- expect(fixture).toHaveText('Parent(Fake Child)');
- });
- });
-
- describe('nested (two-deep) component override', () => {
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- declarations: [ParentComponent, FakeChildWithGrandchildComponent, FakeGrandchildComponent]
- });
- });
-
- it('should use Fake Grandchild component', () => {
- const fixture = TestBed.createComponent(ParentComponent);
- fixture.detectChanges();
- expect(fixture).toHaveText('Parent(Fake Child(Fake Grandchild))');
- });
- });
-
- describe('lifecycle hooks w/ MyIfParentComp', () => {
- let fixture: ComponentFixture;
- let parent: MyIfParentComponent;
- let child: MyIfChildComponent;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- imports: [FormsModule],
- declarations: [MyIfChildComponent, MyIfParentComponent]
- });
-
- fixture = TestBed.createComponent(MyIfParentComponent);
- parent = fixture.componentInstance;
- });
-
- it('should instantiate parent component', () => {
- expect(parent).not.toBeNull('parent component should exist');
- });
-
- it('parent component OnInit should NOT be called before first detectChanges()', () => {
- expect(parent.ngOnInitCalled).toBe(false);
- });
-
- it('parent component OnInit should be called after first detectChanges()', () => {
- fixture.detectChanges();
- expect(parent.ngOnInitCalled).toBe(true);
- });
-
- it('child component should exist after OnInit', () => {
- fixture.detectChanges();
- getChild();
- expect(child instanceof MyIfChildComponent).toBe(true, 'should create child');
- });
-
- it('should have called child component\'s OnInit ', () => {
- fixture.detectChanges();
- getChild();
- expect(child.ngOnInitCalled).toBe(true);
- });
-
- it('child component called OnChanges once', () => {
- fixture.detectChanges();
- getChild();
- expect(child.ngOnChangesCounter).toBe(1);
- });
-
- it('changed parent value flows to child', () => {
- fixture.detectChanges();
- getChild();
-
- parent.parentValue = 'foo';
- fixture.detectChanges();
-
- expect(child.ngOnChangesCounter).toBe(2,
- 'expected 2 changes: initial value and changed value');
- expect(child.childValue).toBe('foo',
- 'childValue should eq changed parent value');
- });
-
- // must be async test to see child flow to parent
- it('changed child value flows to parent', async(() => {
- fixture.detectChanges();
- getChild();
-
- child.childValue = 'bar';
-
- return new Promise(resolve => {
- // Wait one JS engine turn!
- setTimeout(() => resolve(), 0);
- })
- .then(() => {
- fixture.detectChanges();
-
- expect(child.ngOnChangesCounter).toBe(2,
- 'expected 2 changes: initial value and changed value');
- expect(parent.parentValue).toBe('bar',
- 'parentValue should eq changed parent value');
- });
-
- }));
-
- it('clicking "Close Child" triggers child OnDestroy', () => {
- fixture.detectChanges();
- getChild();
-
- const btn = fixture.debugElement.query(By.css('button'));
- click(btn);
-
- fixture.detectChanges();
- expect(child.ngOnDestroyCalled).toBe(true);
- });
-
- ////// helpers ///
- /**
- * Get the MyIfChildComp from parent; fail w/ good message if cannot.
- */
- function getChild() {
-
- let childDe: DebugElement; // DebugElement that should hold the MyIfChildComp
-
- // The Hard Way: requires detailed knowledge of the parent template
- try {
- childDe = fixture.debugElement.children[4].children[0];
- } catch (err) { /* we'll report the error */ }
-
- // DebugElement.queryAll: if we wanted all of many instances:
- childDe = fixture.debugElement
- .queryAll(function (de) { return de.componentInstance instanceof MyIfChildComponent; })[0];
-
- // WE'LL USE THIS APPROACH !
- // DebugElement.query: find first instance (if any)
- childDe = fixture.debugElement
- .query(function (de) { return de.componentInstance instanceof MyIfChildComponent; });
-
- if (childDe && childDe.componentInstance) {
- child = childDe.componentInstance;
- } else {
- fail('Unable to find MyIfChildComp within MyIfParentComp');
- }
-
- return child;
- }
- });
-
-});
-////////// Fakes ///////////
-
-@Component({
- selector: 'child-1',
- template: `Fake Child`
-})
-class FakeChildComponent { }
-
-@Component({
- selector: 'child-1',
- template: `Fake Child( )`
-})
-class FakeChildWithGrandchildComponent { }
-
-@Component({
- selector: 'grandchild-1',
- template: `Fake Grandchild`
-})
-class FakeGrandchildComponent { }
-
-@Injectable()
-class FakeValueService extends ValueService {
- value = 'faked value';
-}
diff --git a/docs_app/content/examples/testing/src/app/demo/demo.ts b/docs_app/content/examples/testing/src/app/demo/demo.ts
deleted file mode 100644
index 674bc14a57..0000000000
--- a/docs_app/content/examples/testing/src/app/demo/demo.ts
+++ /dev/null
@@ -1,439 +0,0 @@
-/* tslint:disable:forin */
-import { Component, ContentChildren, Directive, EventEmitter,
- Injectable, Input, Output, Optional,
- HostBinding, HostListener,
- OnInit, OnChanges, OnDestroy,
- Pipe, PipeTransform,
- SimpleChange } from '@angular/core';
-
-import { of } from 'rxjs';
-import { delay } from 'rxjs/operators';
-
-////////// The App: Services and Components for the tests. //////////////
-
-export class Hero {
- name: string;
-}
-
-////////// Services ///////////////
-// #docregion ValueService
-@Injectable()
-export class ValueService {
- protected value = 'real value';
-
- getValue() { return this.value; }
- setValue(value: string) { this.value = value; }
-
- getObservableValue() { return of('observable value'); }
-
- getPromiseValue() { return Promise.resolve('promise value'); }
-
- getObservableDelayValue() {
- return of('observable delay value').pipe(delay(10));
- }
-}
-// #enddocregion ValueService
-
-// #docregion MasterService
-@Injectable()
-export class MasterService {
- constructor(private masterService: ValueService) { }
- getValue() { return this.masterService.getValue(); }
-}
-// #enddocregion MasterService
-
-/////////// Pipe ////////////////
-/*
- * Reverse the input string.
-*/
-// #docregion ReversePipe
-@Pipe({ name: 'reverse' })
-export class ReversePipe implements PipeTransform {
- transform(s: string) {
- let r = '';
- for (let i = s.length; i; ) { r += s[--i]; };
- return r;
- }
-}
-// #enddocregion ReversePipe
-
-//////////// Components /////////////
-@Component({
- selector: 'bank-account',
- template: `
- Bank Name: {{bank}}
- Account Id: {{id}}
- `
-})
-export class BankAccountComponent {
- @Input() bank: string;
- @Input('account') id: string;
-
- // Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
- // constructor(private renderer: Renderer, private el: ElementRef ) {
- // renderer.setElementProperty(el.nativeElement, 'customProperty', true);
- // }
-}
-
-/** A component with attributes, styles, classes, and property setting */
-@Component({
- selector: 'bank-account-parent',
- template: `
-
-
- `
-})
-export class BankAccountParentComponent {
- width = 200;
- color = 'red';
- isClosed = true;
-}
-
-// #docregion LightswitchComp
-@Component({
- selector: 'lightswitch-comp',
- template: `
- Click me!
- {{message}} `
-})
-export class LightswitchComponent {
- isOn = false;
- clicked() { this.isOn = !this.isOn; }
- get message() { return `The light is ${this.isOn ? 'On' : 'Off'}`; }
-}
-// #enddocregion LightswitchComp
-
-@Component({
- selector: 'child-1',
- template: `Child-1({{text}}) `
-})
-export class Child1Component {
- @Input() text = 'Original';
-}
-
-@Component({
- selector: 'child-2',
- template: 'Child-2({{text}})
'
-})
-export class Child2Component {
- @Input() text: string;
-}
-
-@Component({
- selector: 'child-3',
- template: 'Child-3({{text}})
'
-})
-export class Child3Component {
- @Input() text: string;
-}
-
-@Component({
- selector: 'input-comp',
- template: ` `
-})
-export class InputComponent {
- name = 'John';
-}
-
-/* Prefer this metadata syntax */
-// @Directive({
-// selector: 'input[value]',
-// host: {
-// '[value]': 'value',
-// '(input)': 'valueChange.emit($event.target.value)'
-// },
-// inputs: ['value'],
-// outputs: ['valueChange']
-// })
-// export class InputValueBinderDirective {
-// value: any;
-// valueChange: EventEmitter = new EventEmitter();
-// }
-
-// As the styleguide recommends
-@Directive({ selector: 'input[value]' })
-export class InputValueBinderDirective {
- @HostBinding()
- @Input()
- value: any;
-
- @Output()
- valueChange: EventEmitter = new EventEmitter();
-
- @HostListener('input', ['$event.target.value'])
- onInput(value: any) { this.valueChange.emit(value); }
-}
-
-@Component({
- selector: 'input-value-comp',
- template: `
- Name: {{name}}
- `
-})
-export class InputValueBinderComponent {
- name = 'Sally'; // initial value
-}
-
-@Component({
- selector: 'parent-comp',
- template: `Parent( )`
-})
-export class ParentComponent { }
-
-@Component({
- selector: 'io-comp',
- template: `Original {{hero.name}}
`
-})
-export class IoComponent {
- @Input() hero: Hero;
- @Output() selected = new EventEmitter();
- click() { this.selected.emit(this.hero); }
-}
-
-@Component({
- selector: 'io-parent-comp',
- template: `
- Click to select a hero
- The selected hero is {{selectedHero.name}}
-
-
- `
-})
-export class IoParentComponent {
- heroes: Hero[] = [ {name: 'Bob'}, {name: 'Carol'}, {name: 'Ted'}, {name: 'Alice'} ];
- selectedHero: Hero;
- onSelect(hero: Hero) { this.selectedHero = hero; }
-}
-
-@Component({
- selector: 'my-if-comp',
- template: `MyIf(More )`
-})
-export class MyIfComponent {
- showMore = false;
-}
-
-@Component({
- selector: 'my-service-comp',
- template: `injected value: {{valueService.value}}`,
- providers: [ValueService]
-})
-export class TestProvidersComponent {
- constructor(public valueService: ValueService) {}
-}
-
-
-@Component({
- selector: 'my-service-comp',
- template: `injected value: {{valueService.value}}`,
- viewProviders: [ValueService]
-})
-export class TestViewProvidersComponent {
- constructor(public valueService: ValueService) {}
-}
-
-@Component({
- selector: 'external-template-comp',
- templateUrl: './demo-external-template.html'
-})
-export class ExternalTemplateComponent implements OnInit {
- serviceValue: string;
-
- constructor(@Optional() private service: ValueService) { }
-
- ngOnInit() {
- if (this.service) { this.serviceValue = this.service.getValue(); }
- }
-}
-
-@Component({
- selector: 'comp-w-ext-comp',
- template: `
- comp-w-ext-comp
-
- `
-})
-export class InnerCompWithExternalTemplateComponent { }
-
-@Component({selector: 'needs-content', template: ' '})
-export class NeedsContentComponent {
- // children with #content local variable
- @ContentChildren('content') children: any;
-}
-
-///////// MyIfChildComp ////////
-@Component({
- selector: 'my-if-child-1',
-
- template: `
- MyIfChildComp
-
- Child value:
-
- Change log:
- {{i + 1}} - {{log}}
`
-})
-export class MyIfChildComponent implements OnInit, OnChanges, OnDestroy {
- @Input() value = '';
- @Output() valueChange = new EventEmitter();
-
- get childValue() { return this.value; }
- set childValue(v: string) {
- if (this.value === v) { return; }
- this.value = v;
- this.valueChange.emit(v);
- }
-
- changeLog: string[] = [];
-
- ngOnInitCalled = false;
- ngOnChangesCounter = 0;
- ngOnDestroyCalled = false;
-
- ngOnInit() {
- this.ngOnInitCalled = true;
- this.changeLog.push('ngOnInit called');
- }
-
- ngOnDestroy() {
- this.ngOnDestroyCalled = true;
- this.changeLog.push('ngOnDestroy called');
- }
-
- ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
- for (let propName in changes) {
- this.ngOnChangesCounter += 1;
- let prop = changes[propName];
- let cur = JSON.stringify(prop.currentValue);
- let prev = JSON.stringify(prop.previousValue);
- this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
- }
- }
-}
-
-///////// MyIfParentComp ////////
-
-@Component({
- selector: 'my-if-parent-comp',
- template: `
- MyIfParentComp
- Parent value:
-
-
- {{toggleLabel}} Child
-
-
-
- `
-})
-export class MyIfParentComponent implements OnInit {
- ngOnInitCalled = false;
- parentValue = 'Hello, World';
- showChild = false;
- toggleLabel = 'Unknown';
-
- ngOnInit() {
- this.ngOnInitCalled = true;
- this.clicked();
- }
-
- clicked() {
- this.showChild = !this.showChild;
- this.toggleLabel = this.showChild ? 'Close' : 'Show';
- }
-}
-
-
-@Component({
- selector: 'reverse-pipe-comp',
- template: `
-
- {{text | reverse}}
- `
-})
-export class ReversePipeComponent {
- text = 'my dog has fleas.';
-}
-
-@Component({template: 'Replace Me
'})
-export class ShellComponent { }
-
-@Component({
- selector: 'demo-comp',
- template: `
- Specs Demo
-
-
- Input/Output Component
-
-
- External Template Component
-
-
- Component With External Template Component
-
-
- Reverse Pipe
-
-
- InputValueBinder Directive
-
-
- Button Component
-
-
- Needs Content
-
-
-
-
-
- !
-
- `
-})
-export class DemoComponent { }
-//////// Aggregations ////////////
-
-export const demoDeclarations = [
- DemoComponent,
- BankAccountComponent, BankAccountParentComponent,
- LightswitchComponent,
- Child1Component, Child2Component, Child3Component,
- ExternalTemplateComponent, InnerCompWithExternalTemplateComponent,
- InputComponent,
- InputValueBinderDirective, InputValueBinderComponent,
- IoComponent, IoParentComponent,
- MyIfComponent, MyIfChildComponent, MyIfParentComponent,
- NeedsContentComponent, ParentComponent,
- TestProvidersComponent, TestViewProvidersComponent,
- ReversePipe, ReversePipeComponent, ShellComponent
-];
-
-export const demoProviders = [MasterService, ValueService];
-
-////////////////////
-////////////
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-
-@NgModule({
- imports: [BrowserModule, FormsModule],
- declarations: demoDeclarations,
- providers: demoProviders,
- entryComponents: [DemoComponent],
- bootstrap: [DemoComponent]
-})
-export class DemoModule { }
-
diff --git a/docs_app/content/examples/testing/src/app/dummy.module.ts b/docs_app/content/examples/testing/src/app/dummy.module.ts
deleted file mode 100644
index 7ca52420d2..0000000000
--- a/docs_app/content/examples/testing/src/app/dummy.module.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// These unused NgModules keep the Angular Language Service happy.
-// The AppModule registers the final versions of these components
-import { NgModule } from '@angular/core';
-
-import { AppComponent as app_initial } from './app-initial.component';
-@NgModule({ declarations: [ app_initial ] })
-export class AppModuleInitial {}
-
-import { BannerComponent as bc_initial } from './banner/banner-initial.component';
-@NgModule({ declarations: [ bc_initial ] })
-export class BannerModuleInitial {}
-
-import { BannerComponent as bc_external } from './banner/banner-external.component';
-@NgModule({ declarations: [ bc_external ] })
-export class BannerModuleExternal {}
diff --git a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.css b/docs_app/content/examples/testing/src/app/hero/hero-detail.component.css
deleted file mode 100644
index f6139ba274..0000000000
--- a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.css
+++ /dev/null
@@ -1,29 +0,0 @@
-label {
- display: inline-block;
- width: 3em;
- margin: .5em 0;
- color: #607D8B;
- font-weight: bold;
-}
-input {
- height: 2em;
- font-size: 1em;
- padding-left: .4em;
-}
-button {
- margin-top: 20px;
- font-family: Arial;
- background-color: #eee;
- border: none;
- padding: 5px 10px;
- border-radius: 4px;
- cursor: pointer; cursor: hand;
-}
-button:hover {
- background-color: #cfd8dc;
-}
-button:disabled {
- background-color: #eee;
- color: #ccc;
- cursor: auto;
-}
diff --git a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.html b/docs_app/content/examples/testing/src/app/hero/hero-detail.component.html
deleted file mode 100644
index 7e86a668f6..0000000000
--- a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
{{hero.name | titlecase}} Details
-
- id: {{hero.id}}
-
- name:
-
-
-
Save
-
Cancel
-
diff --git a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts b/docs_app/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
deleted file mode 100644
index 4e806da3f9..0000000000
--- a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.no-testbed.spec.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { asyncData, ActivatedRouteStub } from '../../testing';
-
-import { HeroDetailComponent } from './hero-detail.component';
-import { Hero } from '../model/hero';
-
-////////// Tests ////////////////////
-
-describe('HeroDetailComponent - no TestBed', () => {
- let activatedRoute: ActivatedRouteStub;
- let comp: HeroDetailComponent;
- let expectedHero: Hero;
- let hds: any;
- let router: any;
-
- beforeEach((done: DoneFn) => {
- expectedHero = {id: 42, name: 'Bubba' };
- const activatedRoute = new ActivatedRouteStub({ id: expectedHero.id });
- router = jasmine.createSpyObj('router', ['navigate']);
-
- hds = jasmine.createSpyObj('HeroDetailService', ['getHero', 'saveHero']);
- hds.getHero.and.returnValue(asyncData(expectedHero));
- hds.saveHero.and.returnValue(asyncData(expectedHero));
-
- comp = new HeroDetailComponent(hds, activatedRoute, router);
- comp.ngOnInit();
-
- // OnInit calls HDS.getHero; wait for it to get the fake hero
- hds.getHero.calls.first().returnValue.subscribe(done);
-
- });
-
- it('should expose the hero retrieved from the service', () => {
- expect(comp.hero).toBe(expectedHero);
- });
-
- it('should navigate when click cancel', () => {
- comp.cancel();
- expect(router.navigate.calls.any()).toBe(true, 'router.navigate called');
- });
-
- it('should save when click save', () => {
- comp.save();
- expect(hds.saveHero.calls.any()).toBe(true, 'HeroDetailService.save called');
- expect(router.navigate.calls.any()).toBe(false, 'router.navigate not called yet');
- });
-
- it('should navigate when click save resolves', (done: DoneFn) => {
- comp.save();
- // waits for async save to complete before navigating
- hds.saveHero.calls.first().returnValue
- .subscribe(() => {
- expect(router.navigate.calls.any()).toBe(true, 'router.navigate called');
- done();
- });
- });
-
-});
diff --git a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.spec.ts b/docs_app/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
deleted file mode 100644
index 2989c6e05a..0000000000
--- a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.spec.ts
+++ /dev/null
@@ -1,381 +0,0 @@
-// #docplaster
-import {
- async, ComponentFixture, fakeAsync, inject, TestBed, tick
-} from '@angular/core/testing';
-
-import { Router } from '@angular/router';
-
-import {
- ActivatedRoute, ActivatedRouteStub, asyncData, click, newEvent
-} from '../../testing';
-
-import { Hero } from '../model/hero';
-import { HeroDetailComponent } from './hero-detail.component';
-import { HeroDetailService } from './hero-detail.service';
-import { HeroModule } from './hero.module';
-
-////// Testing Vars //////
-let activatedRoute: ActivatedRouteStub;
-let component: HeroDetailComponent;
-let fixture: ComponentFixture;
-let page: Page;
-
-////// Tests //////
-describe('HeroDetailComponent', () => {
- beforeEach(() => {
- activatedRoute = new ActivatedRouteStub();
- });
- describe('with HeroModule setup', heroModuleSetup);
- describe('when override its provided HeroDetailService', overrideSetup);
- describe('with FormsModule setup', formsModuleSetup);
- describe('with SharedModule setup', sharedModuleSetup);
-});
-
-///////////////////
-
-function overrideSetup() {
- // #docregion hds-spy
- class HeroDetailServiceSpy {
- testHero: Hero = {id: 42, name: 'Test Hero' };
-
- /* emit cloned test hero */
- getHero = jasmine.createSpy('getHero').and.callFake(
- () => asyncData(Object.assign({}, this.testHero))
- );
-
- /* emit clone of test hero, with changes merged in */
- saveHero = jasmine.createSpy('saveHero').and.callFake(
- (hero: Hero) => asyncData(Object.assign(this.testHero, hero))
- );
- }
-
- // #enddocregion hds-spy
-
- // the `id` value is irrelevant because ignored by service stub
- beforeEach(() => activatedRoute.setParamMap({ id: 99999 }));
-
- // #docregion setup-override
- beforeEach(async(() => {
- const routerSpy = createRouterSpy();
-
- TestBed.configureTestingModule({
- imports: [ HeroModule ],
- providers: [
- { provide: ActivatedRoute, useValue: activatedRoute },
- { provide: Router, useValue: routerSpy},
- // #enddocregion setup-override
- // HeroDetailService at this level is IRRELEVANT!
- { provide: HeroDetailService, useValue: {} }
- // #docregion setup-override
- ]
- })
-
- // Override component's own provider
- // #docregion override-component-method
- .overrideComponent(HeroDetailComponent, {
- set: {
- providers: [
- { provide: HeroDetailService, useClass: HeroDetailServiceSpy }
- ]
- }
- })
- // #enddocregion override-component-method
-
- .compileComponents();
- }));
- // #enddocregion setup-override
-
- // #docregion override-tests
- let hdsSpy: HeroDetailServiceSpy;
-
- beforeEach(async(() => {
- createComponent();
- // get the component's injected HeroDetailServiceSpy
- hdsSpy = fixture.debugElement.injector.get(HeroDetailService) as any;
- }));
-
- it('should have called `getHero`', () => {
- expect(hdsSpy.getHero.calls.count()).toBe(1, 'getHero called once');
- });
-
- it('should display stub hero\'s name', () => {
- expect(page.nameDisplay.textContent).toBe(hdsSpy.testHero.name);
- });
-
- it('should save stub hero change', fakeAsync(() => {
- const origName = hdsSpy.testHero.name;
- const newName = 'New Name';
-
- page.nameInput.value = newName;
- page.nameInput.dispatchEvent(newEvent('input')); // tell Angular
-
- expect(component.hero.name).toBe(newName, 'component hero has new name');
- expect(hdsSpy.testHero.name).toBe(origName, 'service hero unchanged before save');
-
- click(page.saveBtn);
- expect(hdsSpy.saveHero.calls.count()).toBe(1, 'saveHero called once');
-
- tick(); // wait for async save to complete
- expect(hdsSpy.testHero.name).toBe(newName, 'service hero has new name after save');
- expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
- }));
- // #enddocregion override-tests
-
- it('fixture injected service is not the component injected service',
- // inject gets the service from the fixture
- inject([HeroDetailService], (fixtureService: HeroDetailService) => {
-
- // use `fixture.debugElement.injector` to get service from component
- const componentService = fixture.debugElement.injector.get(HeroDetailService);
-
- expect(fixtureService).not.toBe(componentService, 'service injected from fixture');
- }));
-}
-
-////////////////////
-import { getTestHeroes, TestHeroService, HeroService } from '../model/testing/test-hero.service';
-
-const firstHero = getTestHeroes()[0];
-
-function heroModuleSetup() {
- // #docregion setup-hero-module
- beforeEach(async(() => {
- const routerSpy = createRouterSpy();
-
- TestBed.configureTestingModule({
- imports: [ HeroModule ],
- // #enddocregion setup-hero-module
- // declarations: [ HeroDetailComponent ], // NO! DOUBLE DECLARATION
- // #docregion setup-hero-module
- providers: [
- { provide: ActivatedRoute, useValue: activatedRoute },
- { provide: HeroService, useClass: TestHeroService },
- { provide: Router, useValue: routerSpy},
- ]
- })
- .compileComponents();
- }));
- // #enddocregion setup-hero-module
-
- // #docregion route-good-id
- describe('when navigate to existing hero', () => {
- let expectedHero: Hero;
-
- beforeEach(async(() => {
- expectedHero = firstHero;
- activatedRoute.setParamMap({ id: expectedHero.id });
- createComponent();
- }));
-
- // #docregion selected-tests
- it('should display that hero\'s name', () => {
- expect(page.nameDisplay.textContent).toBe(expectedHero.name);
- });
- // #enddocregion route-good-id
-
- it('should navigate when click cancel', () => {
- click(page.cancelBtn);
- expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
- });
-
- it('should save when click save but not navigate immediately', () => {
- // Get service injected into component and spy on its`saveHero` method.
- // It delegates to fake `HeroService.updateHero` which delivers a safe test result.
- const hds = fixture.debugElement.injector.get(HeroDetailService);
- const saveSpy = spyOn(hds, 'saveHero').and.callThrough();
-
- click(page.saveBtn);
- expect(saveSpy.calls.any()).toBe(true, 'HeroDetailService.save called');
- expect(page.navigateSpy.calls.any()).toBe(false, 'router.navigate not called');
- });
-
- it('should navigate when click save and save resolves', fakeAsync(() => {
- click(page.saveBtn);
- tick(); // wait for async save to complete
- expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
- }));
-
- // #docregion title-case-pipe
- it('should convert hero name to Title Case', () => {
- // get the name's input and display elements from the DOM
- const hostElement = fixture.nativeElement;
- const nameInput: HTMLInputElement = hostElement.querySelector('input');
- const nameDisplay: HTMLElement = hostElement.querySelector('span');
-
- // simulate user entering a new name into the input box
- nameInput.value = 'quick BROWN fOx';
-
- // dispatch a DOM event so that Angular learns of input value change.
- nameInput.dispatchEvent(newEvent('input'));
-
- // Tell Angular to update the display binding through the title pipe
- fixture.detectChanges();
-
- expect(nameDisplay.textContent).toBe('Quick Brown Fox');
- });
- // #enddocregion title-case-pipe
- // #enddocregion selected-tests
- // #docregion route-good-id
- });
- // #enddocregion route-good-id
-
- // #docregion route-no-id
- describe('when navigate with no hero id', () => {
- beforeEach(async( createComponent ));
-
- it('should have hero.id === 0', () => {
- expect(component.hero.id).toBe(0);
- });
-
- it('should display empty hero name', () => {
- expect(page.nameDisplay.textContent).toBe('');
- });
- });
- // #enddocregion route-no-id
-
- // #docregion route-bad-id
- describe('when navigate to non-existent hero id', () => {
- beforeEach(async(() => {
- activatedRoute.setParamMap({ id: 99999 });
- createComponent();
- }));
-
- it('should try to navigate back to hero list', () => {
- expect(page.gotoListSpy.calls.any()).toBe(true, 'comp.gotoList called');
- expect(page.navigateSpy.calls.any()).toBe(true, 'router.navigate called');
- });
- });
- // #enddocregion route-bad-id
-
- // Why we must use `fixture.debugElement.injector` in `Page()`
- it('cannot use `inject` to get component\'s provided HeroDetailService', () => {
- let service: HeroDetailService;
- fixture = TestBed.createComponent(HeroDetailComponent);
- expect(
- // Throws because `inject` only has access to TestBed's injector
- // which is an ancestor of the component's injector
- inject([HeroDetailService], (hds: HeroDetailService) => service = hds )
- )
- .toThrowError(/No provider for HeroDetailService/);
-
- // get `HeroDetailService` with component's own injector
- service = fixture.debugElement.injector.get(HeroDetailService);
- expect(service).toBeDefined('debugElement.injector');
- });
-}
-
-/////////////////////
-import { FormsModule } from '@angular/forms';
-import { TitleCasePipe } from '../shared/title-case.pipe';
-
-function formsModuleSetup() {
- // #docregion setup-forms-module
- beforeEach(async(() => {
- const routerSpy = createRouterSpy();
-
- TestBed.configureTestingModule({
- imports: [ FormsModule ],
- declarations: [ HeroDetailComponent, TitleCasePipe ],
- providers: [
- { provide: ActivatedRoute, useValue: activatedRoute },
- { provide: HeroService, useClass: TestHeroService },
- { provide: Router, useValue: routerSpy},
- ]
- })
- .compileComponents();
- }));
- // #enddocregion setup-forms-module
-
- it('should display 1st hero\'s name', async(() => {
- const expectedHero = firstHero;
- activatedRoute.setParamMap({ id: expectedHero.id });
- createComponent().then(() => {
- expect(page.nameDisplay.textContent).toBe(expectedHero.name);
- });
- }));
-}
-
-///////////////////////
-import { SharedModule } from '../shared/shared.module';
-
-function sharedModuleSetup() {
- // #docregion setup-shared-module
- beforeEach(async(() => {
- const routerSpy = createRouterSpy();
-
- TestBed.configureTestingModule({
- imports: [ SharedModule ],
- declarations: [ HeroDetailComponent ],
- providers: [
- { provide: ActivatedRoute, useValue: activatedRoute },
- { provide: HeroService, useClass: TestHeroService },
- { provide: Router, useValue: routerSpy},
- ]
- })
- .compileComponents();
- }));
- // #enddocregion setup-shared-module
-
- it('should display 1st hero\'s name', async(() => {
- const expectedHero = firstHero;
- activatedRoute.setParamMap({ id: expectedHero.id });
- createComponent().then(() => {
- expect(page.nameDisplay.textContent).toBe(expectedHero.name);
- });
- }));
-}
-
-/////////// Helpers /////
-
-// #docregion create-component
-/** Create the HeroDetailComponent, initialize it, set test variables */
-function createComponent() {
- fixture = TestBed.createComponent(HeroDetailComponent);
- component = fixture.componentInstance;
- page = new Page(fixture);
-
- // 1st change detection triggers ngOnInit which gets a hero
- fixture.detectChanges();
- return fixture.whenStable().then(() => {
- // 2nd change detection displays the async-fetched hero
- fixture.detectChanges();
- });
-}
-// #enddocregion create-component
-
-// #docregion page
-class Page {
- // getter properties wait to query the DOM until called.
- get buttons() { return this.queryAll('button'); }
- get saveBtn() { return this.buttons[0]; }
- get cancelBtn() { return this.buttons[1]; }
- get nameDisplay() { return this.query('span'); }
- get nameInput() { return this.query('input'); }
-
- gotoListSpy: jasmine.Spy;
- navigateSpy: jasmine.Spy;
-
- constructor(fixture: ComponentFixture) {
- // get the navigate spy from the injected router spy object
- const routerSpy = fixture.debugElement.injector.get(Router);
- this.navigateSpy = routerSpy.navigate;
-
- // spy on component's `gotoList()` method
- const component = fixture.componentInstance;
- this.gotoListSpy = spyOn(component, 'gotoList').and.callThrough();
- }
-
- //// query helpers ////
- private query(selector: string): T {
- return fixture.nativeElement.querySelector(selector);
- }
-
- private queryAll(selector: string): T[] {
- return fixture.nativeElement.querySelectorAll(selector);
- }
-}
-// #enddocregion page
-
-function createRouterSpy() {
- return jasmine.createSpyObj('Router', ['navigate']);
-}
diff --git a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.ts b/docs_app/content/examples/testing/src/app/hero/hero-detail.component.ts
deleted file mode 100644
index fdfea6c4fa..0000000000
--- a/docs_app/content/examples/testing/src/app/hero/hero-detail.component.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/* tslint:disable:member-ordering */
-// #docplaster
-import { Component, Input, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-
-import { Hero } from '../model/hero';
-import { HeroDetailService } from './hero-detail.service';
-
-// #docregion prototype
-@Component({
- selector: 'app-hero-detail',
- templateUrl: './hero-detail.component.html',
- styleUrls: ['./hero-detail.component.css' ],
- providers: [ HeroDetailService ]
-})
-export class HeroDetailComponent implements OnInit {
- // #docregion ctor
- constructor(
- private heroDetailService: HeroDetailService,
- private route: ActivatedRoute,
- private router: Router) {
- }
- // #enddocregion ctor
-// #enddocregion prototype
-
- @Input() hero: Hero;
-
- // #docregion ng-on-init
- ngOnInit(): void {
- // get hero when `id` param changes
- this.route.paramMap.subscribe(pmap => this.getHero(pmap.get('id')));
- }
- // #enddocregion ng-on-init
-
- private getHero(id: string): void {
- // when no id or id===0, create new blank hero
- if (!id) {
- this.hero = { id: 0, name: '' } as Hero;
- return;
- }
-
- this.heroDetailService.getHero(id).subscribe(hero => {
- if (hero) {
- this.hero = hero;
- } else {
- this.gotoList(); // id not found; navigate to list
- }
- });
- }
-
- save(): void {
- this.heroDetailService.saveHero(this.hero).subscribe(() => this.gotoList());
- }
-
- cancel() { this.gotoList(); }
-
- gotoList() {
- this.router.navigate(['../'], {relativeTo: this.route});
- }
-// #docregion prototype
-}
-// #enddocregion prototype
diff --git a/docs_app/content/examples/testing/src/app/hero/hero-detail.service.ts b/docs_app/content/examples/testing/src/app/hero/hero-detail.service.ts
deleted file mode 100644
index 022dba86ae..0000000000
--- a/docs_app/content/examples/testing/src/app/hero/hero-detail.service.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-import { Hero } from '../model/hero';
-import { HeroService } from '../model/hero.service';
-
-// #docregion prototype
-@Injectable()
-export class HeroDetailService {
- constructor(private heroService: HeroService) { }
-// #enddocregion prototype
-
- // Returns a clone which caller may modify safely
- getHero(id: number | string): Observable {
- if (typeof id === 'string') {
- id = parseInt(id as string, 10);
- }
- return this.heroService.getHero(id).pipe(
- map(hero => {
- return hero ? Object.assign({}, hero) : null; // clone or null
- })
- );
- }
-
- saveHero(hero: Hero) {
- return this.heroService.updateHero(hero);
- }
-// #docregion prototype
-}
-// #enddocregion prototype
diff --git a/docs_app/content/examples/testing/src/app/hero/hero-list.component.css b/docs_app/content/examples/testing/src/app/hero/hero-list.component.css
deleted file mode 100644
index 35e45af98d..0000000000
--- a/docs_app/content/examples/testing/src/app/hero/hero-list.component.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.selected {
- background-color: #CFD8DC !important;
- color: white;
-}
-.heroes {
- margin: 0 0 2em 0;
- list-style-type: none;
- padding: 0;
- width: 15em;
-}
-.heroes li {
- cursor: pointer;
- position: relative;
- left: 0;
- background-color: #EEE;
- margin: .5em;
- padding: .3em 0;
- height: 1.6em;
- border-radius: 4px;
-}
-.heroes li:hover {
- color: #607D8B;
- background-color: #DDD;
- left: .1em;
-}
-.heroes li.selected:hover {
- background-color: #BBD8DC !important;
- color: white;
-}
-.heroes .text {
- position: relative;
- top: -3px;
-}
-.heroes .badge {
- display: inline-block;
- font-size: small;
- color: white;
- padding: 0.8em 0.7em 0 0.7em;
- background-color: #607D8B;
- line-height: 1em;
- position: relative;
- left: -1px;
- top: -4px;
- height: 1.8em;
- margin-right: .8em;
- border-radius: 4px 0 0 4px;
-}
-button {
- font-family: Arial;
- background-color: #eee;
- border: none;
- padding: 5px 10px;
- border-radius: 4px;
- cursor: pointer;
- cursor: hand;
-}
-button:hover {
- background-color: #cfd8dc;
-}
diff --git a/docs_app/content/examples/testing/src/app/hero/hero-list.component.html b/docs_app/content/examples/testing/src/app/hero/hero-list.component.html
deleted file mode 100644
index cd37301fd6..0000000000
--- a/docs_app/content/examples/testing/src/app/hero/hero-list.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-My Heroes
-
-
- {{hero.id}} {{hero.name}}
-
-
diff --git a/docs_app/content/examples/testing/src/app/hero/hero-list.component.spec.ts b/docs_app/content/examples/testing/src/app/hero/hero-list.component.spec.ts
deleted file mode 100644
index d178fa6098..0000000000
--- a/docs_app/content/examples/testing/src/app/hero/hero-list.component.spec.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import { async, ComponentFixture, fakeAsync, TestBed, tick
-} from '@angular/core/testing';
-
-import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
-
-import { Router } from '@angular/router';
-
-import { addMatchers, newEvent } from '../../testing';
-
-import { getTestHeroes, TestHeroService } from '../model/testing/test-hero.service';
-
-import { HeroModule } from './hero.module';
-import { HeroListComponent } from './hero-list.component';
-import { HighlightDirective } from '../shared/highlight.directive';
-import { HeroService } from '../model/hero.service';
-
-const HEROES = getTestHeroes();
-
-let comp: HeroListComponent;
-let fixture: ComponentFixture;
-let page: Page;
-
-/////// Tests //////
-
-describe('HeroListComponent', () => {
-
- beforeEach(async(() => {
- addMatchers();
- const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
-
- TestBed.configureTestingModule({
- imports: [HeroModule],
- providers: [
- { provide: HeroService, useClass: TestHeroService },
- { provide: Router, useValue: routerSpy}
- ]
- })
- .compileComponents()
- .then(createComponent);
- }));
-
- it('should display heroes', () => {
- expect(page.heroRows.length).toBeGreaterThan(0);
- });
-
- it('1st hero should match 1st test hero', () => {
- const expectedHero = HEROES[0];
- const actualHero = page.heroRows[0].textContent;
- expect(actualHero).toContain(expectedHero.id.toString(), 'hero.id');
- expect(actualHero).toContain(expectedHero.name, 'hero.name');
- });
-
- it('should select hero on click', fakeAsync(() => {
- const expectedHero = HEROES[1];
- const li = page.heroRows[1];
- li.dispatchEvent(newEvent('click'));
- tick();
- // `.toEqual` because selectedHero is clone of expectedHero; see FakeHeroService
- expect(comp.selectedHero).toEqual(expectedHero);
- }));
-
- it('should navigate to selected hero detail on click', fakeAsync(() => {
- const expectedHero = HEROES[1];
- const li = page.heroRows[1];
- li.dispatchEvent(newEvent('click'));
- tick();
-
- // should have navigated
- expect(page.navSpy.calls.any()).toBe(true, 'navigate called');
-
- // composed hero detail will be URL like 'heroes/42'
- // expect link array with the route path and hero id
- // first argument to router.navigate is link array
- const navArgs = page.navSpy.calls.first().args[0];
- expect(navArgs[0]).toContain('heroes', 'nav to heroes detail URL');
- expect(navArgs[1]).toBe(expectedHero.id, 'expected hero.id');
-
- }));
-
- it('should find `HighlightDirective` with `By.directive', () => {
- // #docregion by
- // Can find DebugElement either by css selector or by directive
- const h2 = fixture.debugElement.query(By.css('h2'));
- const directive = fixture.debugElement.query(By.directive(HighlightDirective));
- // #enddocregion by
- expect(h2).toBe(directive);
- });
-
- it('should color header with `HighlightDirective`', () => {
- const h2 = page.highlightDe.nativeElement as HTMLElement;
- const bgColor = h2.style.backgroundColor;
-
- // different browsers report color values differently
- const isExpectedColor = bgColor === 'gold' || bgColor === 'rgb(255, 215, 0)';
- expect(isExpectedColor).toBe(true, 'backgroundColor');
- });
-
- it('the `HighlightDirective` is among the element\'s providers', () => {
- expect(page.highlightDe.providerTokens).toContain(HighlightDirective, 'HighlightDirective');
- });
-});
-
-/////////// Helpers /////
-
-/** Create the component and set the `page` test variables */
-function createComponent() {
- fixture = TestBed.createComponent(HeroListComponent);
- comp = fixture.componentInstance;
-
- // change detection triggers ngOnInit which gets a hero
- fixture.detectChanges();
-
- return fixture.whenStable().then(() => {
- // got the heroes and updated component
- // change detection updates the view
- fixture.detectChanges();
- page = new Page();
- });
-}
-
-class Page {
- /** Hero line elements */
- heroRows: HTMLLIElement[];
-
- /** Highlighted DebugElement */
- highlightDe: DebugElement;
-
- /** Spy on router navigate method */
- navSpy: jasmine.Spy;
-
- constructor() {
- const heroRowNodes = fixture.nativeElement.querySelectorAll('li');
- this.heroRows = Array.from(heroRowNodes);
-
- // Find the first element with an attached HighlightDirective
- this.highlightDe = fixture.debugElement.query(By.directive(HighlightDirective));
-
- // Get the component's injected router navigation spy
- const routerSpy = fixture.debugElement.injector.get(Router);
- this.navSpy = routerSpy.navigate as jasmine.Spy;
- };
-}
diff --git a/docs_app/content/examples/testing/src/app/hero/hero-list.component.ts b/docs_app/content/examples/testing/src/app/hero/hero-list.component.ts
deleted file mode 100644
index 04403380f2..0000000000
--- a/docs_app/content/examples/testing/src/app/hero/hero-list.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { Observable } from 'rxjs';
-
-import { Hero } from '../model/hero';
-import { HeroService } from '../model/hero.service';
-
-@Component({
- selector: 'app-heroes',
- templateUrl: './hero-list.component.html',
- styleUrls: [ './hero-list.component.css' ]
-})
-export class HeroListComponent implements OnInit {
- heroes: Observable;
- selectedHero: Hero;
-
- constructor(
- private router: Router,
- private heroService: HeroService) { }
-
- ngOnInit() {
- this.heroes = this.heroService.getHeroes();
- }
-
- onSelect(hero: Hero) {
- this.selectedHero = hero;
- this.router.navigate(['../heroes', this.selectedHero.id ]);
- }
-}
diff --git a/docs_app/content/examples/testing/src/app/hero/hero-routing.module.ts b/docs_app/content/examples/testing/src/app/hero/hero-routing.module.ts
deleted file mode 100644
index 59ec14474c..0000000000
--- a/docs_app/content/examples/testing/src/app/hero/hero-routing.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { HeroListComponent } from './hero-list.component';
-import { HeroDetailComponent } from './hero-detail.component';
-
-const routes: Routes = [
- { path: '', component: HeroListComponent },
- { path: ':id', component: HeroDetailComponent }
-];
-
-export const routedComponents = [HeroDetailComponent, HeroListComponent];
-
-@NgModule({
- imports: [RouterModule.forChild(routes)],
- exports: [RouterModule]
-})
-export class HeroRoutingModule {}
diff --git a/docs_app/content/examples/testing/src/app/hero/hero.module.ts b/docs_app/content/examples/testing/src/app/hero/hero.module.ts
deleted file mode 100644
index dfe33cc199..0000000000
--- a/docs_app/content/examples/testing/src/app/hero/hero.module.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { NgModule } from '@angular/core';
-import { SharedModule } from '../shared/shared.module';
-import { routedComponents, HeroRoutingModule } from './hero-routing.module';
-
-@NgModule({
- imports: [ SharedModule, HeroRoutingModule ],
- declarations: [ routedComponents ]
-})
-export class HeroModule { }
diff --git a/docs_app/content/examples/testing/src/app/in-memory-data.service.ts b/docs_app/content/examples/testing/src/app/in-memory-data.service.ts
deleted file mode 100644
index 81f26b674a..0000000000
--- a/docs_app/content/examples/testing/src/app/in-memory-data.service.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// #docregion , init
-import { InMemoryDbService } from 'angular-in-memory-web-api';
-import { QUOTES } from './twain/twain.data';
-
-// Adjust to reduce number of quotes
-const maxQuotes = Infinity; // 0;
-
-/** Create in-memory database of heroes and quotes */
-export class InMemoryDataService implements InMemoryDbService {
- createDb() {
- const heroes = [
- { id: 11, name: 'Mr. Nice' },
- { id: 12, name: 'Narco' },
- { id: 13, name: 'Bombasto' },
- { id: 14, name: 'Celeritas' },
- { id: 15, name: 'Magneta' },
- { id: 16, name: 'RubberMan' },
- { id: 17, name: 'Dynama' },
- { id: 18, name: 'Dr IQ' },
- { id: 19, name: 'Magma' },
- { id: 20, name: 'Tornado' }
- ];
-
- return { heroes, quotes: QUOTES.slice(0, maxQuotes) };
- }
-}
diff --git a/docs_app/content/examples/testing/src/app/model/hero.service.spec.ts b/docs_app/content/examples/testing/src/app/model/hero.service.spec.ts
deleted file mode 100644
index b228692154..0000000000
--- a/docs_app/content/examples/testing/src/app/model/hero.service.spec.ts
+++ /dev/null
@@ -1,215 +0,0 @@
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-
-// Other imports
-import { TestBed } from '@angular/core/testing';
-import { HttpClient, HttpResponse, HttpErrorResponse } from '@angular/common/http';
-
-import { asyncData, asyncError } from '../../testing/async-observable-helpers';
-
-import { Hero } from './hero';
-import { HeroService } from './hero.service';
-
-describe ('HeroesService (with spies)', () => {
- // #docregion test-with-spies
- let httpClientSpy: { get: jasmine.Spy };
- let heroService: HeroService;
-
- beforeEach(() => {
- // Todo: spy on other methods too
- httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
- heroService = new HeroService( httpClientSpy);
- });
-
- it('should return expected heroes (HttpClient called once)', () => {
- const expectedHeroes: Hero[] =
- [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
-
- httpClientSpy.get.and.returnValue(asyncData(expectedHeroes));
-
- heroService.getHeroes().subscribe(
- heroes => expect(heroes).toEqual(expectedHeroes, 'expected heroes'),
- fail
- );
- expect(httpClientSpy.get.calls.count()).toBe(1, 'one call');
- });
-
- it('should return an error when the server returns a 404', () => {
- const errorResponse = new HttpErrorResponse({
- error: 'test 404 error',
- status: 404, statusText: 'Not Found'
- });
-
- httpClientSpy.get.and.returnValue(asyncError(errorResponse));
-
- heroService.getHeroes().subscribe(
- heroes => fail('expected an error, not heroes'),
- error => expect(error.message).toContain('test 404 error')
- );
- });
- // #enddocregion test-with-spies
-
-});
-
-describe('HeroesService (with mocks)', () => {
- let httpClient: HttpClient;
- let httpTestingController: HttpTestingController;
- let heroService: HeroService;
-
- beforeEach(() => {
- TestBed.configureTestingModule({
- // Import the HttpClient mocking services
- imports: [ HttpClientTestingModule ],
- // Provide the service-under-test
- providers: [ HeroService ]
- });
-
- // Inject the http, test controller, and service-under-test
- // as they will be referenced by each test.
- httpClient = TestBed.get(HttpClient);
- httpTestingController = TestBed.get(HttpTestingController);
- heroService = TestBed.get(HeroService);
- });
-
- afterEach(() => {
- // After every test, assert that there are no more pending requests.
- httpTestingController.verify();
- });
-
- /// HeroService method tests begin ///
- describe('#getHeroes', () => {
- let expectedHeroes: Hero[];
-
- beforeEach(() => {
- heroService = TestBed.get(HeroService);
- expectedHeroes = [
- { id: 1, name: 'A' },
- { id: 2, name: 'B' },
- ] as Hero[];
- });
-
- it('should return expected heroes (called once)', () => {
- heroService.getHeroes().subscribe(
- heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
- fail
- );
-
- // HeroService should have made one request to GET heroes from expected URL
- const req = httpTestingController.expectOne(heroService.heroesUrl);
- expect(req.request.method).toEqual('GET');
-
- // Respond with the mock heroes
- req.flush(expectedHeroes);
- });
-
- it('should be OK returning no heroes', () => {
- heroService.getHeroes().subscribe(
- heroes => expect(heroes.length).toEqual(0, 'should have empty heroes array'),
- fail
- );
-
- const req = httpTestingController.expectOne(heroService.heroesUrl);
- req.flush([]); // Respond with no heroes
- });
-
- it('should turn 404 into a user-friendly error', () => {
- const msg = 'Deliberate 404';
- heroService.getHeroes().subscribe(
- heroes => fail('expected to fail'),
- error => expect(error.message).toContain(msg)
- );
-
- const req = httpTestingController.expectOne(heroService.heroesUrl);
-
- // respond with a 404 and the error message in the body
- req.flush(msg, {status: 404, statusText: 'Not Found'});
- });
-
- it('should return expected heroes (called multiple times)', () => {
- heroService.getHeroes().subscribe();
- heroService.getHeroes().subscribe();
- heroService.getHeroes().subscribe(
- heroes => expect(heroes).toEqual(expectedHeroes, 'should return expected heroes'),
- fail
- );
-
- const requests = httpTestingController.match(heroService.heroesUrl);
- expect(requests.length).toEqual(3, 'calls to getHeroes()');
-
- // Respond to each request with different mock hero results
- requests[0].flush([]);
- requests[1].flush([{id: 1, name: 'bob'}]);
- requests[2].flush(expectedHeroes);
- });
- });
-
- describe('#updateHero', () => {
- // Expecting the query form of URL so should not 404 when id not found
- const makeUrl = (id: number) => `${heroService.heroesUrl}/?id=${id}`;
-
- it('should update a hero and return it', () => {
-
- const updateHero: Hero = { id: 1, name: 'A' };
-
- heroService.updateHero(updateHero).subscribe(
- data => expect(data).toEqual(updateHero, 'should return the hero'),
- fail
- );
-
- // HeroService should have made one request to PUT hero
- const req = httpTestingController.expectOne(heroService.heroesUrl);
- expect(req.request.method).toEqual('PUT');
- expect(req.request.body).toEqual(updateHero);
-
- // Expect server to return the hero after PUT
- const expectedResponse = new HttpResponse(
- { status: 200, statusText: 'OK', body: updateHero });
- req.event(expectedResponse);
- });
-
- it('should turn 404 error into user-facing error', () => {
- const msg = 'Deliberate 404';
- const updateHero: Hero = { id: 1, name: 'A' };
- heroService.updateHero(updateHero).subscribe(
- heroes => fail('expected to fail'),
- error => expect(error.message).toContain(msg)
- );
-
- const req = httpTestingController.expectOne(heroService.heroesUrl);
-
- // respond with a 404 and the error message in the body
- req.flush(msg, {status: 404, statusText: 'Not Found'});
- });
-
- // #docregion network-error
- it('should turn network error into user-facing error', () => {
- const emsg = 'simulated network error';
-
- const updateHero: Hero = { id: 1, name: 'A' };
- heroService.updateHero(updateHero).subscribe(
- heroes => fail('expected to fail'),
- error => expect(error.message).toContain(emsg)
- );
-
- const req = httpTestingController.expectOne(heroService.heroesUrl);
-
- // Create mock ErrorEvent, raised when something goes wrong at the network level.
- // Connection timeout, DNS error, offline, etc
- const errorEvent = new ErrorEvent('so sad', {
- message: emsg,
- // #enddocregion network-error
- // The rest of this is optional and not used.
- // Just showing that you could provide this too.
- filename: 'HeroService.ts',
- lineno: 42,
- colno: 21
- // #docregion network-error
- });
-
- // Respond with mock error
- req.error(errorEvent);
- });
- // #enddocregion network-error
- });
-
- // TODO: test other HeroService methods
-});
diff --git a/docs_app/content/examples/testing/src/app/model/hero.service.ts b/docs_app/content/examples/testing/src/app/model/hero.service.ts
deleted file mode 100644
index e5b5d04ee5..0000000000
--- a/docs_app/content/examples/testing/src/app/model/hero.service.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
-
-import { Observable } from 'rxjs';
-import { catchError, map, tap } from 'rxjs/operators';
-
-import { Hero } from './hero';
-
-const httpOptions = {
- headers: new HttpHeaders({ 'Content-Type': 'application/json' })
-};
-
-@Injectable()
-export class HeroService {
-
- readonly heroesUrl = 'api/heroes'; // URL to web api
-
- constructor(private http: HttpClient) { }
-
- /** GET heroes from the server */
- getHeroes (): Observable {
- return this.http.get(this.heroesUrl)
- .pipe(
- tap(heroes => this.log(`fetched heroes`)),
- catchError(this.handleError('getHeroes'))
- ) as Observable;
- }
-
- /** GET hero by id. Return `undefined` when id not found */
- getHero(id: number | string): Observable {
- if (typeof id === 'string') {
- id = parseInt(id as string, 10);
- }
- const url = `${this.heroesUrl}/?id=${id}`;
- return this.http.get(url)
- .pipe(
- map(heroes => heroes[0]), // returns a {0|1} element array
- tap(h => {
- const outcome = h ? `fetched` : `did not find`;
- this.log(`${outcome} hero id=${id}`);
- }),
- catchError(this.handleError(`getHero id=${id}`))
- );
- }
-
- //////// Save methods //////////
-
- /** POST: add a new hero to the server */
- addHero (hero: Hero): Observable {
- return this.http.post(this.heroesUrl, hero, httpOptions).pipe(
- tap((hero: Hero) => this.log(`added hero w/ id=${hero.id}`)),
- catchError(this.handleError('addHero'))
- );
- }
- /** DELETE: delete the hero from the server */
- deleteHero (hero: Hero | number): Observable {
- const id = typeof hero === 'number' ? hero : hero.id;
- const url = `${this.heroesUrl}/${id}`;
-
- return this.http.delete(url, httpOptions).pipe(
- tap(_ => this.log(`deleted hero id=${id}`)),
- catchError(this.handleError('deleteHero'))
- );
- }
-
- /** PUT: update the hero on the server */
- updateHero (hero: Hero): Observable {
- return this.http.put(this.heroesUrl, hero, httpOptions).pipe(
- tap(_ => this.log(`updated hero id=${hero.id}`)),
- catchError(this.handleError('updateHero'))
- );
- }
- /**
- * Returns a function that handles Http operation failures.
- * This error handler lets the app continue to run as if no error occurred.
- * @param operation - name of the operation that failed
- */
- private handleError