release: cut the v7.2.13 release

PR Close #29839

.bazelrc

@@ -33,8 +33,9 @@ test:debug --test_arg=--node_options=--inspect-brk --test_output=streamed --test
 # See https://github.com/bazelbuild/bazel/issues/4603
 build --symlink_prefix=dist/
 
-# Performance: avoid stat'ing input files
-build --watchfs
+# Disable watchfs as it causes tests to be flaky on Windows
+# https://github.com/angular/angular/issues/29541
+build --nowatchfs
 
 # Turn off legacy external runfiles
 run --nolegacy_external_runfiles
@@ -57,7 +58,9 @@ test --incompatible_strict_action_env
 ###############################
 
 # Releases should always be stamped with version control info
-build:release --workspace_status_command=./tools/bazel_stamp_vars.sh
+# This command assumes node on the path and is a workaround for
+# https://github.com/bazelbuild/bazel/issues/4802
+build:release --workspace_status_command="node ./tools/bazel_stamp_vars.js"
 
 ###############################
 # Output                      #

.circleci/config.yml

@@ -170,10 +170,7 @@ jobs:
 
       # Setup remote execution and run RBE-compatible tests.
       - *setup_bazel_remote_execution
-      - run: yarn bazel test //... --build_tag_filters=-ivy-only --test_tag_filters=-ivy-only,-local
-      # Now run RBE incompatible tests locally.
-      - run: sudo cp .circleci/bazel.rc /etc/bazel.bazelrc
-      - run: yarn bazel test //... --build_tag_filters=-ivy-only,local --test_tag_filters=-ivy-only,local
+      - run: yarn bazel test //... --build_tag_filters=-ivy-only --test_tag_filters=-ivy-only
 
   # Temporary job to test what will happen when we flip the Ivy flag to true
   test_ivy_aot:

.circleci/get-commit-range.js

@@ -141,7 +141,7 @@ function getJson(url) {
     const opts = {headers: {Accept: 'application/json'}};
     const onResponse = res => {
       const statusCode = res.statusCode || -1;
-      const isSuccess = (200 <= statusCode) && (statusCode <= 400);
+      const isSuccess = (200 <= statusCode) && (statusCode < 400);
       let responseText = '';
 
       res.

.github/CODEOWNERS

@@ -432,6 +432,7 @@
 /packages/platform-browser-dynamic/**                           @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/platform-webworker/**                                 @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /packages/platform-webworker-dynamic/**                         @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/packages/examples/common/**                                    @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/guide/architecture-components.md                   @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/architecture-modules.md                      @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -512,6 +513,7 @@
 /aio/content/guide/module-types.md                              @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 
 /aio/content/guide/template-syntax.md                           @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/examples/built-in-template-functions/**            @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/event-binding/**                          @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/interpolation/**                          @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/template-syntax/**                        @angular/fw-core @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -627,6 +629,7 @@
 /packages/service-worker/**                                     @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/service-worker-getting-started.md            @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/service-worker-getting-started/**         @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
+/aio/content/guide/app-shell.md                                 @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/service-worker-communications.md             @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/service-worker-config.md                     @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/service-worker-devops.md                     @angular/fw-service-worker @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
@@ -779,7 +782,6 @@ testing/**                                                      @angular/fw-test
 /aio/content/guide/npm-packages.md                              @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/browser-support.md                           @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/typescript-configuration.md                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
-/aio/content/examples/quickstart/**                             @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/setup.md                                     @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/examples/setup/**                                  @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes
 /aio/content/guide/build.md                                     @angular/fw-docs-packaging @angular/framework-global-approvers @angular/framework-global-approvers-for-docs-only-changes

.gitignore

@@ -14,6 +14,7 @@ pubspec.lock
 .idea/
 .settings/
 .vscode/launch.json
+.vscode/settings.json
 *.swo
 modules/.settings
 modules/.vscode

.vscode/README.md

@@ -0,0 +1,23 @@
+# VSCode Configuration
+
+This folder contains opt-in [Workspace Settings](https://code.visualstudio.com/docs/getstarted/settings) and [Extension Recommendations](https://code.visualstudio.com/docs/editor/extension-gallery#_workspace-recommended-extensions) that the Angular team recommends using when working on this repository.
+
+## Usage
+
+To use the recommended settings follow the steps below:
+
+- install <https://marketplace.visualstudio.com/items?itemName=xaver.clang-format>
+- copy `.vscode/recommended-settings.json` to `.vscode/settings.json`
+- restart the editor
+
+If you already have your custom workspace settings you should instead manually merge the file content.
+
+This isn't an automatic process so you will need to repeat it when settings are updated.
+
+To see the recommended extensions select "Extensions: Show Recommended Extensions" in the [Command Palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette).
+
+## Editing `.vscode/recommended-settings.json`
+
+If you wish to add extra configuration items please keep in mind any settings you add here will be used by many users.
+
+Try to keep these settings to things that help facilitate the development process and avoid altering the user workflow whenever possible.

.vscode/recommended-settings.json

@@ -1,4 +1,7 @@
 {
+  // Format js and ts files on save with `clang-format.executable`
+  // If `clang-format.executable` is not being used, these two settings should be removed otherwise it will break existing formatting.
+  // You can instead run `yarn gulp format` to manually format your code.
   "[javascript]": {
     "editor.formatOnSave": true,
   },
@@ -8,6 +11,7 @@
   // Please install https://marketplace.visualstudio.com/items?itemName=xaver.clang-format to take advantage of `clang-format` in VSCode.
   // (See https://clang.llvm.org/docs/ClangFormat.html for more info `clang-format`.)
   "clang-format.executable": "${workspaceRoot}/node_modules/.bin/clang-format",
+  // Exclude third party modules and build artifacts from the editor watchers/searches.
   "files.watcherExclude": {
     "**/.git/objects/**": true,
     "**/.git/subtree-cache/**": true,

BUILD.bazel

@@ -1,11 +1,15 @@
 package(default_visibility = ["//visibility:public"])
 
 exports_files([
-    "tsconfig.json",
     "LICENSE",
     "protractor-perf.conf.js",
 ])
 
+alias(
+    name = "tsconfig.json",
+    actual = "//packages:tsconfig-build.json",
+)
+
 filegroup(
     name = "web_test_bootstrap_scripts",
     # do not sort

CHANGELOG.md

@@ -1,3 +1,25 @@
+<a name="7.2.13"></a>
+## [7.2.13](https://github.com/angular/angular/compare/7.2.12...7.2.13) (2019-04-12)
+
+
+### Bug Fixes
+
+* **bazel:** use //:tsconfig.json as the default for ng_module ([#29670](https://github.com/angular/angular/issues/29670)) ([#29711](https://github.com/angular/angular/issues/29711)) ([9e33dc3](https://github.com/angular/angular/commit/9e33dc3))
+* **platform-browser:** insert APP_ID in styles, contentAttr and hostAttr ([#17745](https://github.com/angular/angular/issues/17745)) ([ca14509](https://github.com/angular/angular/commit/ca14509))
+
+
+
+<a name="7.2.12"></a>
+## [7.2.12](https://github.com/angular/angular/compare/7.2.11...7.2.12) (2019-04-03)
+
+
+### Bug Fixes
+
+* **common:** escape query selector used when anchor scrolling ([#29577](https://github.com/angular/angular/issues/29577)) ([7671c73](https://github.com/angular/angular/commit/7671c73)), closes [#28193](https://github.com/angular/angular/issues/28193)
+* **router:** adjust setting navigationTransition when a new navigation cancels an existing one ([#29636](https://github.com/angular/angular/issues/29636)) ([e884c0c](https://github.com/angular/angular/commit/e884c0c)), closes [#29389](https://github.com/angular/angular/issues/29389) [#29590](https://github.com/angular/angular/issues/29590)
+
+
+
 <a name="7.2.11"></a>
 ## [7.2.11](https://github.com/angular/angular/compare/7.2.10...7.2.11) (2019-03-26)
 

aio/README.md

@@ -41,16 +41,6 @@ Here are the most important tasks you might need to use:
   - `yarn example-e2e --filter=foo` - limit e2e tests to those containing the word "foo"
   - `yarn example-e2e --setup --local` - run e2e tests with the local version of Angular contained in the "dist" folder
 
-## Developing on Windows
-The `packages/` directory may contain Linux-specific symlinks, which are not recognized by Windows.
-These unresolved links cause the docs generation process to fail because it cannot locate certain files.
-
-> Hint: The following steps require administration rights or [Windows Developer Mode](https://docs.microsoft.com/en-us/windows/uwp/get-started/enable-your-device-for-development) enabled!
-
-To fix this problem, run `scripts/windows/create-symlinks.sh`. This command creates temporary files where the symlinks used to be. Make sure not to commit those files with your documentation changes.
-When you are done making and testing your documentation changes, you can restore the original symlinks and delete the temporary files by running `scripts/windows/remove-symlinks.sh`.
-
-It's necessary to remove the temporary files, because otherwise they're displayed as local changes in your git working copy and certain operations are blocked.
 
 ## Using ServiceWorker locally
 

aio/content/examples/.gitignore

@@ -92,3 +92,6 @@ upgrade-phonecat-3-final/tsconfig-aot.json
 upgrade-phonecat-3-final/rollup-config.js
 !upgrade-phonecat-*/**/karma.conf.js
 !upgrade-phonecat-*/**/karma-test-shim.js
+
+# schematics
+!schematics-for-libraries/projects/my-lib/package.json

aio/content/examples/ngmodule-faq/contact.1b.stackblitz.json

@@ -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"]
-}

aio/content/examples/ngmodule-faq/contact.2.stackblitz.json

@@ -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"]
-}

aio/content/examples/ngmodule-faq/e2e/src/app.e2e-spec.ts

@@ -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));
-  // });
-
-});

aio/content/examples/ngmodule-faq/minimal.0.stackblitz.json

@@ -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"]
-}

aio/content/examples/ngmodule-faq/pre-shared.3.stackblitz.json

@@ -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"]
-}

aio/content/examples/ngmodule-faq/src/app/app-routing.module.3.ts

@@ -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: './crisis/crisis.module#CrisisModule' },
-  { path: 'heroes', loadChildren: './hero/hero.module.3#HeroModule' }
-];
-
-@NgModule({
-  imports: [
-    ContactModule,
-    RouterModule.forRoot(routes)
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}

aio/content/examples/ngmodule-faq/src/app/app-routing.module.ts

@@ -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: './crisis/crisis.module#CrisisModule' },
-  { path: 'heroes', loadChildren: './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 {}

aio/content/examples/ngmodule-faq/src/app/app.component.1.ts

@@ -1,17 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-// #enddocregion
-  /*
-  // #docregion template
-  template: '<h1 highlight>{{title}}</h1>'
-  // #enddocregion template
-  */
-// #docregion
-  template: '<app-title></app-title>'
-})
-export class AppComponent {}
-// #enddocregion

aio/content/examples/ngmodule-faq/src/app/app.component.1b.ts

@@ -1,13 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  // #docregion template
-  template: `
-    <app-title></app-title>
-    <app-contact></app-contact>
-  `
-  // #enddocregion template
-})
-export class AppComponent {}

aio/content/examples/ngmodule-faq/src/app/app.component.2.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <app-title></app-title>
-    <app-contact></app-contact>
-  `
-})
-export class AppComponent {}

aio/content/examples/ngmodule-faq/src/app/app.component.3.ts

@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  // #docregion template
-  template: `
-    <app-title></app-title>
-    <nav>
-      <a routerLink="contact" routerLinkActive="active">Contact</a>
-      <a routerLink="crisis"  routerLinkActive="active">Crisis Center</a>
-      <a routerLink="heroes"  routerLinkActive="active">Heroes</a>
-    </nav>
-    <router-outlet></router-outlet>
-  `
-  // #enddocregion template
-})
-export class AppComponent {}

aio/content/examples/ngmodule-faq/src/app/app.component.ts

@@ -1,17 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <app-title></app-title>
-    <nav>
-      <a routerLink="contact" routerLinkActive="active">Contact</a>
-      <a routerLink="crisis"  routerLinkActive="active">Crisis Center</a>
-      <a routerLink="heroes"  routerLinkActive="active">Heroes</a>
-    </nav>
-    <router-outlet></router-outlet>
-  `
-})
-export class AppComponent {}

aio/content/examples/ngmodule-faq/src/app/app.module.0.ts

@@ -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 { }

aio/content/examples/ngmodule-faq/src/app/app.module.1.ts

@@ -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 { }

aio/content/examples/ngmodule-faq/src/app/app.module.1b.ts

@@ -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 { }

aio/content/examples/ngmodule-faq/src/app/app.module.2.ts

@@ -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 { }

aio/content/examples/ngmodule-faq/src/app/app.module.ts

@@ -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

aio/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.3.ts

@@ -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 {}

aio/content/examples/ngmodule-faq/src/app/contact/contact-routing.module.ts

@@ -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

aio/content/examples/ngmodule-faq/src/app/contact/contact.component.3.ts

@@ -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);
-  }
-}

aio/content/examples/ngmodule-faq/src/app/contact/contact.component.css

@@ -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;
-}

aio/content/examples/ngmodule-faq/src/app/contact/contact.component.html

@@ -1,37 +0,0 @@
-<!-- #docregion -->
-<h2>Contact of {{userName}}</h2>
-<div *ngIf="msg" class="msg">{{msg}}</div>
-
-<form *ngIf="contacts" (ngSubmit)="onSubmit()" #contactForm="ngForm">
-  <!-- #docregion awesome -->
-  <h3 highlight>{{ contact.name | awesome }}</h3>
-  <!-- #enddocregion awesome -->
-
-  <div class="form-group">
-    <label for="name">Name</label>
-
-    <!-- #docregion ngModel -->
-    <input type="text" class="form-control" required
-      [(ngModel)]="contact.name"
-      name="name"  #name="ngModel" >
-    <!-- #enddocregion ngModel -->
-
-    <div [hidden]="name.valid" class="alert alert-danger">
-      Name is required
-    </div>
-  </div>
-
-  <div class="button-group">
-    <button type="submit" class="btn btn-default"
-    [disabled]="!contactForm.form.valid">
-    Save</button>
-
-    <button type="button" class="btn" (click)="next()"
-    [disabled]="!contactForm.form.valid">
-    Next Contact</button>
-
-    <button type="button" class="btn" (click)="newContact()">
-    New Contact</button>
-  </div>
-</form>
-<!-- #enddocregion -->

aio/content/examples/ngmodule-faq/src/app/contact/contact.component.ts

@@ -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);
-  }
-}

aio/content/examples/ngmodule-faq/src/app/contact/contact.module.0.ts

@@ -1,11 +0,0 @@
-// #docregion
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@NgModule({
-  imports: [
-    CommonModule
-  ],
-  declarations: []
-})
-export class ContactModule { }

aio/content/examples/ngmodule-faq/src/app/contact/contact.module.2.ts

@@ -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

aio/content/examples/ngmodule-faq/src/app/contact/contact.module.3.ts

@@ -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

aio/content/examples/ngmodule-faq/src/app/contact/contact.module.ts

@@ -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

aio/content/examples/ngmodule-faq/src/app/contact/contact.service.ts

@@ -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<Contact[]> {
-    return of(CONTACTS).pipe(delay(FETCH_LATENCY));
-  }
-
-  getContact(id: number | string): Observable<Contact> {
-    return of(CONTACTS.find(contact => contact.id === +id))
-      .pipe(delay(FETCH_LATENCY));
-  }
-}
-// #enddocregion

aio/content/examples/ngmodule-faq/src/app/core/core.module.ts

@@ -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

aio/content/examples/ngmodule-faq/src/app/core/title.component.html

@@ -1,6 +0,0 @@
-<!-- Exact copy from earlier app.component.html -->
-<h1 highlight>{{title}}</h1>
-<p *ngIf="user">
-  <i>Welcome, {{user}}</i>
-<p>
-

aio/content/examples/ngmodule-faq/src/app/core/title.component.ts

@@ -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;
-  }
-}

aio/content/examples/ngmodule-faq/src/app/core/user.service.ts

@@ -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;
-  }
-}

aio/content/examples/ngmodule-faq/src/app/crisis/crisis-detail.component.ts

@@ -1,19 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute }    from '@angular/router';
-
-@Component({
-  template: `
-    <h3 highlight>Crisis Detail</h3>
-    <div>Crisis id: {{id}}</div>
-    <br>
-    <a routerLink="../list">Crisis List</a>
-  `
-})
-export class CrisisDetailComponent implements OnInit {
-  id: number;
-  constructor(private route: ActivatedRoute) {  }
-
-  ngOnInit() {
-    this.id = parseInt(this.route.snapshot.paramMap.get('id'), 10);
-  }
-}

aio/content/examples/ngmodule-faq/src/app/crisis/crisis-list.component.ts

@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
-
-import { Crisis,
-         CrisisService } from './crisis.service';
-
-@Component({
-  template: `
-    <h3 highlight>Crisis List</h3>
-    <div *ngFor='let crisis of crises | async'>
-      <a routerLink="{{'../' + crisis.id}}">{{crisis.id}} - {{crisis.name}}</a>
-    </div>
-  `
-})
-export class CrisisListComponent {
-  crises: Observable<Crisis[]>;
-
-  constructor(private crisisService: CrisisService) {
-    this.crises = this.crisisService.getCrises();
-  }
-}

aio/content/examples/ngmodule-faq/src/app/crisis/crisis-routing.module.ts

@@ -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 {}

aio/content/examples/ngmodule-faq/src/app/crisis/crisis.module.ts

@@ -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 {}

aio/content/examples/ngmodule-faq/src/app/crisis/crisis.service.ts

@@ -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<Crisis[]> {
-    return of(CRISES).pipe(delay(FETCH_LATENCY));
-  }
-
-  getCrisis(id: number | string): Observable<Crisis> {
-    return of(CRISES.find(crisis => crisis.id === +id))
-      .pipe(delay(FETCH_LATENCY));
-  }
-}

aio/content/examples/ngmodule-faq/src/app/hero/hero-detail.component.ts

@@ -1,31 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute }    from '@angular/router';
-
-import { Hero,
-         HeroService }    from './hero.service';
-
-@Component({
-  template: `
-    <h3 highlight>Hero Detail</h3>
-    <div *ngIf="hero">
-      <div>Id: {{hero.id}}</div><br>
-      <label>Name:
-        <input [(ngModel)]="hero.name">
-      </label>
-    </div>
-    <br>
-    <a routerLink="../">Hero List</a>
-  `
-})
-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);
-  }
-}

aio/content/examples/ngmodule-faq/src/app/hero/hero-list.component.ts

@@ -1,20 +0,0 @@
-import { Component }  from '@angular/core';
-import { Observable } from 'rxjs';
-
-import { Hero,
-         HeroService } from './hero.service';
-
-@Component({
-  template: `
-    <h3 highlight>Hero List</h3>
-    <div *ngFor='let hero of heroes | async'>
-      <a routerLink="{{hero.id}}">{{hero.id}} - {{hero.name}}</a>
-    </div>
-  `
-})
-export class HeroListComponent {
-  heroes: Observable<Hero[]>;
-  constructor(private heroService: HeroService) {
-    this.heroes = this.heroService.getHeroes();
-  }
-}

aio/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.3.ts

@@ -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 {}

aio/content/examples/ngmodule-faq/src/app/hero/hero-routing.module.ts

@@ -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 {}

aio/content/examples/ngmodule-faq/src/app/hero/hero.component.3.ts

@@ -1,18 +0,0 @@
-import { Component }   from '@angular/core';
-
-import { HeroService } from './hero.service';
-import { UserService } from '../user.service';
-
-@Component({
-  template: `
-    <h2>Heroes of {{userName}}</h2>
-    <router-outlet></router-outlet>
-  `,
-  providers: [ HeroService ]
-})
-export class HeroComponent {
-  userName = '';
-  constructor(userService: UserService) {
-    this.userName = userService.userName;
-  }
-}

aio/content/examples/ngmodule-faq/src/app/hero/hero.component.ts

@@ -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: `
-    <h2>Heroes of {{userName}}</h2>
-    <router-outlet></router-outlet>
-  `,
-  providers: [ HeroService ]
-})
-export class HeroComponent {
-  userName = '';
-  constructor(userService: UserService) {
-    this.userName = userService.userName;
-  }
-}

aio/content/examples/ngmodule-faq/src/app/hero/hero.module.3.ts

@@ -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

aio/content/examples/ngmodule-faq/src/app/hero/hero.module.ts

@@ -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 { }

aio/content/examples/ngmodule-faq/src/app/hero/hero.service.ts

@@ -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<Hero[]> {
-    return of(HEROES).pipe(delay(FETCH_LATENCY));
-  }
-
-  getHero(id: number | string): Observable<Hero> {
-    return of(HEROES.find(hero => hero.id === +id))
-      .pipe(delay(FETCH_LATENCY));
-  }
-}

aio/content/examples/ngmodule-faq/src/app/shared/awesome.pipe.ts

@@ -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 : '';
-  }
-}

aio/content/examples/ngmodule-faq/src/app/shared/highlight.directive.ts

@@ -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}`);
-  }
-}

aio/content/examples/ngmodule-faq/src/app/shared/shared.module.ts

@@ -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

aio/content/examples/ngmodule-faq/src/app/user.service.ts

@@ -1,8 +0,0 @@
-// #docregion
-import { Injectable } from '@angular/core';
-
-@Injectable()
-/** Dummy version of an authenticated user service */
-export class UserService {
-  userName = 'Sherlock Holmes';
-}

aio/content/examples/ngmodule-faq/src/index.1.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <base href="/">
-    <title>NgModule Minimal</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
-
-  <body>
-    <app-root></app-root>
-  </body>
-</html>

aio/content/examples/ngmodule-faq/src/index.1b.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <base href="/">
-    <title>NgModule Minimal</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
-
-  <body>
-    <app-root></app-root>
-  </body>
-</html>

aio/content/examples/ngmodule-faq/src/index.2.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <base href="/">
-    <title>NgModule Minimal</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
-
-  <body>
-    <app-root></app-root>
-  </body>
-</html>

aio/content/examples/ngmodule-faq/src/index.3.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <base href="/">
-    <title>NgModule Minimal</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
-
-  <body>
-    <app-root></app-root>
-  </body>
-</html>

aio/content/examples/ngmodule-faq/src/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <base href="/">
-    <title>NgModule Deluxe</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
-
-  <body>
-    <app-root></app-root>
-  </body>
-</html>

aio/content/examples/ngmodule-faq/src/main-static.ts

@@ -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
-*/

aio/content/examples/ngmodule-faq/src/main.0.ts

@@ -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);

aio/content/examples/ngmodule-faq/src/main.1.ts

@@ -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);

aio/content/examples/ngmodule-faq/src/main.1b.ts

@@ -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);

aio/content/examples/ngmodule-faq/src/main.2.ts

@@ -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);

aio/content/examples/ngmodule-faq/src/main.3.ts

@@ -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);

aio/content/examples/ngmodule-faq/stackblitz.json

@@ -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"]
-}

aio/content/examples/ngmodules/e2e/src/app.e2e-spec.ts

@@ -5,8 +5,6 @@ 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)';
 
@@ -15,7 +13,7 @@ describe('NgModule-example', function () {
 
     return {
       title: element.all(by.tagName('h1')).get(0),
-      subtitle: element.all(by.css('app-title p i')).get(0),
+      subtitle: element.all(by.css('app-root p i')).get(0),
       contactButton: buttons.get(0),
       itemButton: buttons.get(1),
       customersButton: buttons.get(2)
@@ -67,7 +65,7 @@ describe('NgModule-example', function () {
 
       it('should welcome us', function () {
         const commons = getCommonsSectionStruct();
-        expect(commons.subtitle.getText()).toBe('Welcome, ' + (name ||  'Sherlock Holmes'));
+        expect(commons.subtitle.getText()).toBe('Welcome, ' + (name ||  'Miss Marple'));
       });
     };
   }
@@ -76,7 +74,7 @@ describe('NgModule-example', function () {
     return function() {
       it('shows the contact\'s owner', function() {
         const contacts = getContactSectionStruct();
-        expect(contacts.header.getText()).toBe('Contact of ' + (name ||  'Sherlock Holmes'));
+        expect(contacts.header.getText()).toBe((name ||  'Miss Marple') + '\'s Contacts');
       });
 
       it('can cycle between contacts', function () {
@@ -92,21 +90,22 @@ describe('NgModule-example', function () {
         });
       });
 
-      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;
+        const nextButton = contacts.nextContactButton;
+        const input = contacts.input;
+        const saveButton = contacts.saveButton;
+
         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('');
+          input.click();
+          nextButton.click()
+          expect(contacts.validationError.getText()).toBe('Name is required.');
+          input.click();
+          contacts.input.sendKeys('Watson');
+          saveButton.click()
+          expect(contacts.contactNameHeader.getText()).toBe('Awesome Watson');
+
         });
       });
     };

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

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   template: `
-    <app-title></app-title>
+    <app-greeting></app-greeting>
     <nav>
       <a routerLink="contact" routerLinkActive="active">Contact</a>
       <a routerLink="items" routerLinkActive="active">Items</a>

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

@@ -1,3 +1,5 @@
+// #docplaster
+
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
@@ -7,28 +9,30 @@ import { AppComponent } from './app.component';
 /* Feature Modules */
 import { ContactModule } from './contact/contact.module';
 // #docregion import-for-root
-import { CoreModule } from './core/core.module';
+import { GreetingModule } from './greeting/greeting.module';
 // #enddocregion import-for-root
 
 /* Routing Module */
 import { AppRoutingModule } from './app-routing.module';
 
-
 // #docregion import-for-root
 @NgModule({
   imports: [
+    // #enddocregion import-for-root
     BrowserModule,
     ContactModule,
-    CoreModule.forRoot({userName: 'Miss Marple'}),
+    // #docregion import-for-root
+    GreetingModule.forRoot({userName: 'Miss Marple'}),
+    // #enddocregion import-for-root
     AppRoutingModule
+    // #docregion import-for-root
   ],
   // #enddocregion import-for-root
-  providers: [],
   declarations: [
     AppComponent
   ],
   bootstrap: [AppComponent]
   // #docregion import-for-root
 })
-export class AppModule { }
 // #enddocregion import-for-root
+export class AppModule { }

aio/content/examples/ngmodules/src/app/contact/contact.component.css

@@ -0,0 +1,17 @@
+.button-group {
+  display: flex;
+  flex-direction: row;
+}
+button {
+  margin: 1rem 1rem 0 0;
+}
+
+input {
+  padding: .5rem;
+  margin-left: .5rem;
+}
+
+.alert {
+  color: red;
+  font-style: italic;
+}

aio/content/examples/ngmodules/src/app/contact/contact.component.html

@@ -1,32 +1,30 @@
-
-<h2>Contact of {{userName}}</h2>
+<h2>{{userName}}'s Contacts</h2>
 <div *ngIf="msg" class="msg">{{msg}}</div>
 
-<form *ngIf="contacts" (ngSubmit)="onSubmit()" #contactForm="ngForm">
+<form *ngIf="contacts" (ngSubmit)="onSubmit()" [formGroup]="contactForm">
   <h3 highlight>{{ contact.name | awesome }}</h3>
 
   <div class="form-group">
     <label for="name">Name</label>
-
-    <input type="text" class="form-control" required
-    [(ngModel)]="contact.name"
-    name="name"  #name="ngModel" >
-
-    <div [hidden]="name.valid" class="alert alert-danger">
-      Name is required
+    <input type="text" formControlName="name" required>
+    <div *ngIf="!contactForm.controls['name'].valid && contactForm.controls['name'].touched" class="alert">
+      Name is required.
     </div>
+
   </div>
 
   <div class="button-group">
     <button type="submit" class="btn btn-default"
-    [disabled]="!contactForm.form.valid">
+    [disabled]="!contactForm.valid">
     Save</button>
 
     <button type="button" class="btn" (click)="next()"
-    [disabled]="!contactForm.form.valid">
+    [disabled]="!contactForm.valid && contactForm.touched">
     Next Contact</button>
 
     <button type="button" class="btn" (click)="newContact()">
     New Contact</button>
   </div>
 </form>
+
+

aio/content/examples/ngmodules/src/app/contact/contact.component.ts

@@ -1,8 +1,9 @@
-// Exact copy except import UserService from core
+// Exact copy except import UserService from greeting
 import { Component, OnInit }      from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
 
 import { Contact, ContactService } from './contact.service';
-import { UserService }             from '../core/user.service';
+import { UserService }             from '../greeting/user.service';
 
 @Component({
   selector: 'app-contact',
@@ -16,15 +17,24 @@ export class ContactComponent implements OnInit {
   msg = 'Loading contacts ...';
   userName = '';
 
-  constructor(private contactService: ContactService, userService: UserService) {
+  contactForm = this.fb.group({
+    name: ['', Validators.required]
+  });
+
+  constructor(private contactService: ContactService, userService: UserService, private fb: FormBuilder) {
     this.userName = userService.userName;
   }
 
   ngOnInit() {
+    this.setupForm();
+  }
+
+  setupForm() {
     this.contactService.getContacts().subscribe(contacts => {
       this.msg = '';
       this.contacts = contacts;
       this.contact = contacts[0];
+      this.contactForm.get('name').setValue(this.contact.name);
     });
   }
 
@@ -32,15 +42,18 @@ export class ContactComponent implements OnInit {
     let ix = 1 + this.contacts.indexOf(this.contact);
     if (ix >= this.contacts.length) { ix = 0; }
     this.contact = this.contacts[ix];
+    console.log(this.contacts[ix]);
   }
 
   onSubmit() {
-    // POST-DEMO TODO: do something like save it
-    this.displayMessage('Saved ' + this.contact.name);
+    let newName = this.contactForm.get('name').value;
+    this.displayMessage('Saved ' + newName);
+    this.contact.name = newName;
   }
 
   newContact() {
     this.displayMessage('New contact');
+    this.contactForm.get('name').setValue('');
     this.contact = {id: 42, name: ''};
     this.contacts.push(this.contact);
   }
@@ -51,4 +64,3 @@ export class ContactComponent implements OnInit {
     setTimeout(() => this.msg = '', 1500);
   }
 }
-

aio/content/examples/ngmodules/src/app/contact/contact.module.ts

@@ -1,5 +1,6 @@
 import { NgModule }           from '@angular/core';
 import { SharedModule }       from '../shared/shared.module';
+import { ReactiveFormsModule } from '@angular/forms';
 
 import { ContactComponent }     from './contact.component';
 import { ContactService }       from './contact.service';
@@ -8,7 +9,8 @@ import { ContactRoutingModule } from './contact-routing.module';
 @NgModule({
   imports: [
     SharedModule,
-    ContactRoutingModule
+    ContactRoutingModule,
+    ReactiveFormsModule
   ],
   declarations: [ ContactComponent ],
   providers:    [ ContactService ]

aio/content/examples/ngmodules/src/app/core/core.module.ts

@@ -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

aio/content/examples/ngmodules/src/app/customers/customers.component.ts

@@ -1,7 +1,7 @@
 import { Component }   from '@angular/core';
 
 import { CustomersService } from './customers.service';
-import { UserService } from '../core/user.service';
+import { UserService } from '../greeting/user.service';
 
 @Component({
   template: `

aio/content/examples/ngmodules/src/app/greeting/greeting.component.ts

@@ -1,11 +1,11 @@
 import { Component, Input } from '@angular/core';
-import { UserService }      from '../core/user.service';
+import { UserService }      from '../greeting/user.service';
 
 @Component({
-  selector: 'app-title',
-  templateUrl: './title.component.html',
+  selector: 'app-greeting',
+  templateUrl: './greeting.component.html',
 })
-export class TitleComponent {
+export class GreetingComponent {
   title = 'NgModules';
   user = '';
 

aio/content/examples/ngmodules/src/app/greeting/greeting.module.ts

@@ -0,0 +1,36 @@
+// #docregion whole-greeting-module
+import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
+
+import { CommonModule } from '@angular/common';
+
+import { GreetingComponent } from './greeting.component';
+import { UserServiceConfig } from './user.service';
+
+
+@NgModule({
+  imports:      [ CommonModule ],
+  declarations: [ GreetingComponent ],
+  exports:      [ GreetingComponent ]
+})
+export class GreetingModule {
+  // #docregion ctor
+  constructor (@Optional() @SkipSelf() parentModule: GreetingModule) {
+    if (parentModule) {
+      throw new Error(
+        'GreetingModule is already loaded. Import it in the AppModule only');
+    }
+  }
+  // #enddocregion ctor
+
+  // #docregion for-root
+  static forRoot(config: UserServiceConfig): ModuleWithProviders {
+    return {
+      ngModule: GreetingModule,
+      providers: [
+        {provide: UserServiceConfig, useValue: config }
+      ]
+    };
+  }
+  // #enddocregion for-root
+}
+// #enddocregion whole-greeting-module

aio/content/examples/ngmodules/src/app/greeting/user.service.ts

@@ -1,8 +1,3 @@
-// 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';
 
@@ -12,7 +7,9 @@ export class UserServiceConfig {
   userName = 'Philip Marlowe';
 }
 
-@Injectable()
+@Injectable({
+  providedIn: 'root'
+})
 export class UserService {
   id = nextId++;
   private _userName = 'Sherlock Holmes';

aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.html

@@ -3,7 +3,9 @@
 <ul class="items">
   <li *ngFor="let hero of heroes$ | async">
     <!-- #docregion nav-to-detail -->
+    <!-- #docregion link-parameters-array -->
     <a [routerLink]="['/hero', hero.id]">
+    <!-- #enddocregion link-parameters-array -->
       <span class="badge">{{ hero.id }}</span>{{ hero.name }}
     </a>
     <!-- #enddocregion nav-to-detail -->

aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.1.ts

@@ -28,9 +28,3 @@ export class HeroListComponent implements OnInit {
   }
 }
 // #enddocregion
-
-/* A link parameters array
-// #docregion link-parameters-array
-['/hero', hero.id] // { 15 }
-// #enddocregion link-parameters-array
-*/

aio/content/examples/schematics-for-libraries/example-config.json

@@ -0,0 +1,3 @@
+{
+  "projectType": "schematics"
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/my-lib",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  }
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/package.json

@@ -0,0 +1,20 @@
+// #docplaster
+// #docregion collection
+{
+  "name": "my-lib",
+  "version": "0.0.1",
+// #enddocregion collection
+  "scripts": {
+    "build": "../../node_modules/.bin/tsc -p tsconfig.schematics.json",
+    "copy:schemas": "cp --parents schematics/*/schema.json ../../dist/my-lib/",
+    "copy:files": "cp --parents -p schematics/*/files/** ../../dist/my-lib/",
+    "copy:collection": "cp schematics/collection.json ../../dist/my-lib/schematics/collection.json",
+    "postbuild": "npm run copy:schemas && npm run copy:files && npm run copy:collection"
+  },
+  "peerDependencies": {
+    "@angular/common": "^7.2.0",
+    "@angular/core": "^7.2.0"
+  },
+// #docregion collection
+  "schematics": "./schematics/collection.json"
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.1.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add my library to the project.",
+      "factory": "./ng-add/index#ngAdd"
+    }
+  }
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/collection.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add my library to the project.",
+      "factory": "./ng-add/index#ngAdd"
+    },
+    "my-service": {
+      "description": "Generate a service in the project.",
+      "factory": "./my-service/index#myService",
+      "schema": "./my-service/schema.json"
+    }
+  }
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/files/__name@dasherize__.service.ts.template

@@ -0,0 +1,10 @@
+// #docregion template
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class <%= classify(name) %>Service {
+  constructor(private http: HttpClient) { }
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.1.ts

@@ -0,0 +1,11 @@
+import { Rule, Tree } from '@angular-devkit/schematics';
+
+import { Schema as MyServiceSchema } from './schema';
+
+// #docregion factory
+export function myService(options: MyServiceSchema): Rule {
+  return (tree: Tree) => {
+    return tree;
+  };
+}
+// #enddocregion factory

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/index.ts

@@ -0,0 +1,66 @@
+// #docplaster
+// #docregion schematics-imports, schema-imports, workspace
+import {
+  Rule, Tree, SchematicsException,
+  apply, url, applyTemplates, move,
+  chain, mergeWith
+} from '@angular-devkit/schematics';
+
+import { strings, normalize, experimental } from '@angular-devkit/core';
+// #enddocregion schematics-imports
+
+import { Schema as MyServiceSchema } from './schema';
+// #enddocregion schema-imports
+
+export function myService(options: MyServiceSchema): Rule {
+  return (tree: Tree) => {
+    const workspaceConfig = tree.read('/angular.json');
+    if (!workspaceConfig) {
+      throw new SchematicsException('Could not find Angular workspace configuration');
+    }
+
+    // convert workspace to string
+    const workspaceContent = workspaceConfig.toString();
+
+    // parse workspace string into JSON object
+    const workspace: experimental.workspace.WorkspaceSchema = JSON.parse(workspaceContent);
+// #enddocregion workspace
+// #docregion project-fallback
+    if (!options.project) {
+      options.project = workspace.defaultProject;
+    }
+// #enddocregion project-fallback
+
+// #docregion project-info
+    const projectName = options.project as string;
+
+    const project = workspace.projects[projectName];
+
+    const projectType = project.projectType === 'application' ? 'app' : 'lib';
+// #enddocregion project-info
+
+// #docregion path
+    if (options.path === undefined) {
+      options.path = `${project.sourceRoot}/${projectType}`;
+    }
+// #enddocregion path
+
+// #docregion template
+    const templateSource = apply(url('./files'), [
+      applyTemplates({
+        classify: strings.classify,
+        dasherize: strings.dasherize,
+        name: options.name
+      }),
+      move(normalize(options.path as string))
+    ]);
+// #enddocregion template
+
+// #docregion chain
+    return chain([
+      mergeWith(templateSource)
+    ]);
+// #enddocregion chain
+// #docregion workspace
+  };
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "SchematicsMyService",
+  "title": "My Service Schema",
+  "type": "object",
+  "properties": {
+    "name": {
+      "description": "The name of the service.",
+      "type": "string"
+    },
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path to create the service.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    }
+   },
+  "required": [
+    "name"
+  ]
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/my-service/schema.ts

@@ -0,0 +1,10 @@
+export interface Schema {
+  // The name of the service.
+  name: string;
+
+  // The path to create the service.
+  path?: string;
+
+  // The name of the project.
+  project?: string;
+}

aio/content/examples/schematics-for-libraries/projects/my-lib/schematics/ng-add/index.ts

@@ -0,0 +1,10 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+
+// Just return the tree
+export function ngAdd(_options: any): Rule {
+  return (tree: Tree, _context: SchematicContext) => {
+    _context.addTask(new NodePackageInstallTask());
+    return tree;
+  };
+}