docs(aio): fix lots of broken links

Closes #16317

aio/content/guide/ajs-quick-reference.md

@@ -372,7 +372,7 @@ The following are some of the key AngularJS built-in directives and their equiva
       In Angular, the template no longer specifies its associated controller.
       Rather, the component specifies its associated template as part of the component class decorator.
 
-      For more information, see [Architecture Overview](guide/architecture#component).
+      For more information, see [Architecture Overview](guide/architecture#components).
 
     </td>
 

aio/content/guide/aot-compiler.md

@@ -13,7 +13,7 @@ during a build process.
 
 # Contents
 
-* [Overview](guide/overview)
+* [Overview](guide/aot-compiler#overview)
 * [Ahead-of-time (AOT) vs just-in-time (JIT)](guide/aot-compiler#aot-jit)
 * [Why do AOT compilation?](guide/aot-compiler#why-aot)
 * [Compile with AOT](guide/aot-compiler#compile)
@@ -221,7 +221,7 @@ Here is AOT bootstrap in `main.ts` next to the original JIT version:
   </code-pane>
 </code-tabs>
 
-Be sure to [recompile](guide/aot-compiler#compiling-aot) with `ngc`!
+Be sure to [recompile](guide/aot-compiler#compile) with `ngc`!
 
 {@a tree-shaking}
 

aio/content/guide/architecture.md

@@ -669,7 +669,7 @@ A provider is something that can create or return a service, typically the servi
 
 You can register providers in modules or in components.
 
-In general, add providers to the [root module](guide/architecture#module) so that
+In general, add providers to the [root module](guide/architecture#modules) so that
 the same instance of a service is available everywhere.
 
 

aio/content/guide/attribute-directives.md

@@ -21,7 +21,7 @@ An **Attribute** directive changes the appearance or behavior of a DOM element.
 
 Try the <live-example title="Attribute Directive example"></live-example>.
 
-
+{@a directive-overview}
 
 ## Directives overview
 
@@ -32,7 +32,7 @@ There are three kinds of directives in Angular:
 1. Attribute directives&mdash;change the appearance or behavior of an element, component, or another directive.
 
 *Components* are the most common of the three directives.
-You saw a component for the first time in the [QuickStart](quickstart) guide.
+You saw a component for the first time in the [QuickStart](guide/quickstart) guide.
 
 *Structural Directives* change the structure of the view.
 Two examples are [NgFor](guide/template-syntax#ngFor) and [NgIf](guide/template-syntax#ngIf).
@@ -61,7 +61,7 @@ when the user hovers over that element. You can apply it like this:
 
 </code-example>
 
-
+{@a write-directive}
 
 ### Write the directive code
 
@@ -126,7 +126,7 @@ into the constructor.
 `ElementRef` is a service that grants direct access to the DOM element
 through its `nativeElement` property.
 
-
+{@a apply-directive}
 
 ## Apply the attribute directive
 
@@ -207,7 +207,7 @@ It created an instance of the `HighlightDirective` class and
 injected a reference to the `<p>` element into the directive's constructor
 which sets the `<p>` element's background style to yellow.
 
-
+{@a respond-to-user}
 
 ## Respond to user-initiated events
 
@@ -284,7 +284,7 @@ the mouse hovers over the `p` and disappears as it moves out.
 </figure>
 
 
-
+{@a bindings}
 
 ## Pass values into the directive with an _@Input_ data binding
 
@@ -442,7 +442,7 @@ Here are the harness and directive in action.
 </figure>
 
 
-
+{@a second-property}
 
 ## Bind to a second property
 
@@ -541,7 +541,7 @@ The final source code follows:
 
 You can also experience and download the <live-example title="Attribute Directive example"></live-example>.
 
-
+{@a why-input}
 
 ### Appendix: Why add _@Input_?
 

aio/content/guide/browser-support.md

@@ -335,7 +335,8 @@ Here are the features which may require additional polyfills:
   <tr style="vertical-align: top">
  
     <td>
-      <a href="./animations.html">Animations</a>
+
+      [Animations](guide/animations)
     </td>
 
     <td>
@@ -353,7 +354,8 @@ Here are the features which may require additional polyfills:
   <tr style="vertical-align: top">
 
     <td>
-      <a href="../api/common/index/DatePipe-pipe.html">Date</a>      <span>,  </span>      <a href="../api/common/index/CurrencyPipe-pipe.html">currency</a>      <span>, </span>      <a href="../api/common/index/DecimalPipe-pipe.html">decimal</a>      <span> and </span>      <a href="../api/common/index/PercentPipe-pipe.html">percent</a>      <span> pipes</span>
+
+    [Date](api/common/DatePipe), [currency](api/common/CurrencyPipe), [decimal](api/common/DecimalPipe) and [percent](api/common/PercentPipe) pipes
     </td>
 
     <td>
@@ -371,7 +373,8 @@ Here are the features which may require additional polyfills:
   <tr style="vertical-align: top">
  
     <td>
-       <a href="../api/common/index/NgClass-directive.html">NgClass</a>      <span> on SVG elements</span>
+
+       [NgClass](api/common/NgClass) on SVG elements
     </td>
 
     <td>
@@ -389,7 +392,8 @@ Here are the features which may require additional polyfills:
   <tr style="vertical-align: top">
  
     <td>
-      <a href="./http.html">Http</a>      <span> when sending and receiving binary data</span>
+    
+      [Http](guide/http) when sending and receiving binary data
     </td>
 
     <td>

aio/content/guide/change-log.md

@@ -13,7 +13,7 @@ This log calls attention to recent significant changes.
 
 ## Updated to Angular 4.0. Documentation for Angular 2.x can be found at [v2.angular.io](https://v2.angular.io).
 
-## All mention of moduleId removed. "Component relative paths" cookbook deleted (2017-03-13)
+## All mention of moduleId removed. "Component relative paths" guide deleted (2017-03-13)
 We added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration.
 This plugin dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you.
 
@@ -94,7 +94,7 @@ Linked to these plunkers in [Testing](guide/testing#live-examples) and [Setup an
 
 ## Internationalization: pluralization and _select_ (2016-11-30)
 
-The [Internationalization (i18n)](cookbook/i18n) guide explains how to handle pluralization and
+The [Internationalization (i18n)](guide/i18n) guide explains how to handle pluralization and
 translation of alternative texts with `select`.
 The sample demonstrates these features too.
 
@@ -126,7 +126,7 @@ The documentation for the version prior to v.2.2.0 has been removed.
 
 ## ES6  described in "TypeScript to JavaScript" (2016-11-14)
 
-The updated [TypeScript to JavaScript](cookbook/ts-to-js) cookbook 
+The updated [TypeScript to JavaScript](guide/ts-to-js) guide 
 now explains how to write apps in ES6/7
 by translating the common idioms in the TypeScript documentation examples
 (and elsewhere on the web) to ES6/7 and ES5.
@@ -168,9 +168,9 @@ New `:enter` and `:leave` aliases make animation more natural.
 
 Docs and code samples updated and tested with Angular v.2.1.0.
 
-## NEW "Ahead of time (AOT) Compilation" cookbook (2016-10-11)
+## NEW "Ahead of time (AOT) Compilation" guide (2016-10-11)
 
-The NEW [Ahead of time (AOT) Compilation](guide/aot-compiler) cookbook
+The NEW [Ahead of time (AOT) Compilation](guide/aot-compiler) guide
 explains what AOT compilation is and why you'd want it.
 It demonstrates the basics with a QuickStart app
 followed by the more advanced considerations of compiling and bundling the Tour of Heroes.
@@ -187,11 +187,11 @@ The _Routing Module_ replaces the previous _routing object_ involving the `Modul
 
 All guided samples with routing use the _Routing Module_ and prose content has been updated,
 most conspicuously in the 
-[NgModule](guide/ngmodule) guide and [NgModule FAQ](cookbook/ngmodule-faq) cookbook.
+[NgModule](guide/ngmodule) guide and [NgModule FAQ](guide/ngmodule-faq) guide.
 
-## New "Internationalization" Cookbook (2016-09-30)
+## New "Internationalization" guide (2016-09-30)
 
-Added a new [Internationalization (i18n)](cookbook/i18n) cookbook that shows how
+Added a new [Internationalization (i18n)](guide/i18n) guide that shows how
 to use Angular "i18n" facilities to translate template text into multiple languages.
 
 ## "angular-in-memory-web-api" package rename (2016-09-27)

aio/content/guide/cli-quickstart.md

@@ -13,7 +13,7 @@ as testing, bundling, and deployment.
 
 The goal in this guide is to build and run a simple Angular
 application in TypeScript, using the Angular CLI
-while adhering to the [Style Guide](guide/guide/styleguide) recommendations that
+while adhering to the [Style Guide](guide/styleguide) recommendations that
 benefit _every_ Angular project.
 
 By the end of the chapter, you'll have a basic understanding of development with the CLI
@@ -64,7 +64,7 @@ Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globa
 
 
 
-<h2 id='create-project'>
+<h2 id='create-proj'>
   Step 2. Create a new project
 </h2>
 
@@ -173,7 +173,7 @@ Looking good!
 ## What's next?
 That's about all you'd expect to do in a "Hello, World" app.
 
-You're ready to take the [Tour of Heroes Tutorial](guide/tutorial) and build
+You're ready to take the [Tour of Heroes Tutorial](tutorial) and build
 a small application that demonstrates the great things you can build with Angular.
 
 Or you can stick around a bit longer to learn about the files in your brand new project.
@@ -355,7 +355,7 @@ Any files outside of this folder are meant to support building your app.
     <td>
 
 
-      Defines `AppModule`, the [root module](guide/guide/appmodule "AppModule: the root module") that tells Angular how to assemble the application.
+      Defines `AppModule`, the [root module](guide/appmodule "AppModule: the root module") that tells Angular how to assemble the application.
       Right now it declares only the `AppComponent`.
       Soon there will be more components to declare.
     </td>
@@ -459,7 +459,7 @@ Any files outside of this folder are meant to support building your app.
       Different browsers have different levels of support of the web standards.
       Polyfills help normalize those differences.
       You should be pretty safe with `core-js` and `zone.js`, but be sure to check out
-      the [Browser Support guide](guide/guide/browser-support) for more information.
+      the [Browser Support guide](guide/browser-support) for more information.
     </td>
 
   </tr>
@@ -812,8 +812,8 @@ These files go in the root folder next to `src/`.
 
 ### Next Step
 
-If you're new to Angular, continue on the
+If you're new to Angular, continue with the
-[learning path](guide/guide/learning-angular "Angular learning path").
+[tutorial](tutorial "Tour of Heroes tutorial").
 You can skip the "Setup" step since you're already using the Angular CLI setup.
 
 </div>

aio/content/guide/dependency-injection-in-action.md

@@ -82,7 +82,7 @@ is all the registration you need.
 
 A *provider* is something that can create or deliver a service.
 Angular creates a service instance from a class provider by using `new`.
-Read more about providers in the [Dependency Injection](guide/dependency-injection#!)
+Read more about providers in the [Dependency Injection](guide/dependency-injection#injector-providers)
 guide.
 
 </div>

aio/content/guide/dependency-injection.md

@@ -53,7 +53,7 @@ and [how to use it](guide/dependency-injection#angular-di) in an Angular app.
 
 Run the <live-example></live-example>.
 
-
+{@a why-di }
 
 ## Why dependency injection?
 
@@ -248,7 +248,7 @@ This is what a **dependency injection framework** is all about.
 Now that you know what dependency injection is and appreciate its benefits,
 read on to see how it is implemented in Angular.
 
-
+{@a angular-di}
 
 ## Angular dependency injection
 
@@ -440,7 +440,7 @@ the `HeroesComponent`.
 
 
 Also see *"Should I add app-wide providers to the root `AppModule` or
-the root `AppComponent`?"* in the [NgModule FAQ](cookbook/ngmodule-faq#q-root-component-or-module).
+the root `AppComponent`?"* in the [NgModule FAQ](guide/ngmodule-faq#q-root-component-or-module).
 
 
 </div>
@@ -611,7 +611,7 @@ You call that property within the `getHeroes()` method when anyone asks for hero
 
 ### Why _@Injectable()_?
 
-**<a href="../api/core/index/Injectable-decorator.html">@Injectable()</a>** marks a class as available to an
+**[@Injectable()](api/core/Injectable)** marks a class as available to an
 injector for instantiation. Generally speaking, an injector reports an
 error when trying to instantiate a class that is not marked as
 `@Injectable()`.
@@ -671,7 +671,7 @@ like `HeroesComponent`. So why doesn't `HeroesComponent` have
 You *can* add it if you really want to. It isn't necessary because the
 `HeroesComponent` is already marked with `@Component`, and this
 decorator class (like `@Directive` and `@Pipe`, which you learn about later)
-is a subtype of <a href="../api/core/index/Injectable-decorator.html">@Injectable()</a>.  It is in
+is a subtype of [@Injectable()](api/core/Injectable).  It is in
 fact `@Injectable()` decorators that
 identify a class as a target for instantiation by an injector.
 
@@ -692,7 +692,7 @@ the compiler adds the metadata to the generated JavaScript
 for _every class with at least one decorator_.
 
 While any decorator will trigger this effect, mark the service class with the
-<a href="../api/core/index/Injectable-decorator.html">@Injectable()</a> decorator
+[@Injectable()](api/core/Injectable) decorator
 to make the intent clear.
 
 
@@ -717,7 +717,7 @@ The application will fail mysteriously if you forget the parentheses.
 </div>
 
 
-
+{@a logger-service}
 
 ## Creating and registering a logger service
 
@@ -762,7 +762,7 @@ create and inject into a new `HeroListComponent`.
 
 The chain of creations started with the `Logger` provider. *Providers* are the subject of the next section.
 
-
+{@a providers}
 
 ## Injector providers
 
@@ -1038,7 +1038,7 @@ Here you see the new and the old implementation side-by-side:
 </code-tabs>
 
 
-
+{@a token}
 
 ## Dependency injection tokens
 
@@ -1147,7 +1147,7 @@ There is no interface type information left for Angular to find at runtime.
 ### _InjectionToken_
 
 One solution to choosing a provider token for non-class dependencies is
-to define and use an <a href="../api/core/index/InjectionToken-class.html"><b>InjectionToken</b></a>.
+to define and use an [*InjectionToken*](api/core/InjectionToken).
 The definition of such a token looks like this:
 
 
@@ -1239,7 +1239,7 @@ You can learn more about its advanced features, beginning with its support for
 nested injectors, in
 [Hierarchical Dependency Injection](guide/hierarchical-dependency-injection).
 
-
+{@a explicit-injector}
 
 ## Appendix: Working with injectors directly
 
@@ -1286,8 +1286,7 @@ must acquire services generically and dynamically.
 
 </div>
 
-
+{@a one-class-per-file}
-
 
 ## Appendix: Why have one class per file
 

aio/content/guide/deployment.md

@@ -381,7 +381,7 @@ During navigation, the Angular router uses the _base href_ as the base path to c
 
 
 
-See also the [*APP_BASE_HREF*](api/common/index/APP_BASE_HREF-let "API: APP_BASE_HREF") alternative.
+See also the [*APP_BASE_HREF*](api/common/APP_BASE_HREF "API: APP_BASE_HREF") alternative.
 
 </div>
 
@@ -415,7 +415,7 @@ console:
 
 Switching to production mode can make it run faster by disabling development specific checks such as the dual change detection cycles.
 
-To enable [production mode](api/core/index/enableProdMode-function) when running remotely, add the following code to the `main.ts`.
+To enable [production mode](api/core/enableProdMode) when running remotely, add the following code to the `main.ts`.
 
 
 <code-example path="deployment/src/main.ts" region="enableProdMode" title="src/main.ts (enableProdMode)" linenums="false">

aio/content/guide/displaying-data.md

@@ -41,7 +41,7 @@ snippets described in this page.
 </div>
 
 
-
+{@a interpolation}
 
 ## Showing component properties with interpolation
 The easiest way to display a component property
@@ -162,7 +162,7 @@ Although this example uses variable assignment to initialize the components, you
 
 This app uses more terse "variable assignment" style simply for brevity.
 
-
+{@a ngFor}
 
 ## Showing an array property with ***ngFor**
 
@@ -306,7 +306,7 @@ Fix that to display only the hero's `name` property.
 
 The display looks the same, but the code is clearer.
 
-
+{@a ngIf}
 
 ## Conditional display with NgIf
 

aio/content/guide/dynamic-form.md

@@ -6,6 +6,7 @@ Render dynamic forms with FormGroup.
 
 @description
 
+{@a top}
 
 Building handcrafted forms can be costly and time-consuming,
 especially if you need a great number of them, they're similar to each other, and they change frequently

aio/content/guide/forms.md

@@ -29,7 +29,7 @@ This page shows you how to build a simple form from scratch. Along the way you'l
 
 You can run the <live-example></live-example> in Plunker and download the code from there.
 
-
+{@a template-driven}
 
 ## Template-driven forms
 
@@ -364,7 +364,7 @@ This code repeats the `<option>` tag for each power in the list of powers.
 The `pow` template input variable is a different power in each iteration;
 you display its name using the interpolation syntax.
 
-
+{@a ngModel}
 
 ## Two-way data binding with _ngModel_
 
@@ -429,12 +429,12 @@ The variable `heroForm` is now a reference to the `NgForm` directive that govern
 
 <div class="l-sub-section">
 
-
+{@a ngForm}
 
 ### The _NgForm_ directive
 
 What `NgForm` directive?
-You didn't add an [NgForm](api/forms/index/NgForm-directive) directive.
+You didn't add an [NgForm](api/forms/NgForm) directive.
 
 Angular did. Angular automatically creates and attaches an `NgForm` directive to the `<form>` tag.
 
@@ -733,7 +733,7 @@ Here you created a variable called `name` and gave it the value "ngModel".
 
 
 Why "ngModel"?
-A directive's [exportAs](api/core/index/Directive-decorator) property
+A directive's [exportAs](api/core/Directive) property
 tells Angular how to link the reference variable to the directive.
 You set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel".
 
@@ -762,7 +762,7 @@ you'll see the error message immediately, before you've done anything.
 
 Some developers want the message to display only when the user makes an invalid change.
 Hiding the message while the control is "pristine" achieves that goal.
-You'll see the significance of this choice when you [add a new hero](guide/forms#new-hero) to the form.
+You'll see the significance of this choice when you add a new hero to the form.
 
 The hero *Alter Ego* is optional so you can leave that be.
 

aio/content/guide/glossary.md

@@ -940,7 +940,7 @@ provide shared data or logic across components, or encapsulate external interact
 
 Applications often require services such as a data service or a logging service.
 
-For more information, see the [Services](guide/.ial/toh-pt4) page of the [Tour of Heroes](guide/.ial/) tutorial.
+For more information, see the [Services](tutorial/toh-pt4) page of the [Tour of Heroes](tutorial) tutorial.
 
 
 </div>

aio/content/guide/http.md

@@ -103,7 +103,7 @@ The root `AppComponent` orchestrates these demos:
 </code-example>
 
 
-
+{@a http-providers}
 
 # Providing HTTP services
 
@@ -167,7 +167,7 @@ Loading its module now saves time.
 </div>
 
 
-
+{@a http-client}
 
 ## The Tour of Heroes HTTP client demo
 
@@ -257,7 +257,7 @@ With a basic understanding of the component, you're ready to look inside the `He
 
 {@a HeroService}
 
-
+{@a fetch-data}
 
 ## Fetch data with _http.get()_
 
@@ -580,7 +580,7 @@ In the `headers` object, the `Content-Type` specifies that the body represents J
 
 Next, the `headers` object is used to configure the `options` object. The `options`
 object is a new instance of `RequestOptions`, a class that allows you to specify
-certain settings when instantiating a request. In this way, [headers](api/http/index/Headers-class) is one of the [RequestOptions](api/http/index/RequestOptions-class).
+certain settings when instantiating a request. In this way, [headers](api/http/Headers) is one of the [RequestOptions](api/http/RequestOptions).
 
 In the `return` statement, `options` is the *third* argument of the `post()` method, as shown above.
 

aio/content/guide/lifecycle-hooks.md

@@ -292,7 +292,7 @@ Other Angular sub-systems may have their own lifecycle hooks apart from these co
 3rd party libraries might implement their hooks as well in order to give developers more
 control over how these libraries are used.
 
-
+{@a the-sample}
 
 ## Lifecycle examples
 
@@ -648,7 +648,7 @@ This example monitors the `OnChanges` hook.
 
 
 The `ngOnChanges()` method takes an object that maps each changed property name to a
-[SimpleChange](api/core/index/SimpleChange-class) object holding the current and previous property values.
+[SimpleChange](api/core/SimpleChange) object holding the current and previous property values.
 This hook iterates over the changed properties and logs them.
 
 The example component, `OnChangesComponent`, has two input properties: `hero` and `power`.
@@ -760,7 +760,7 @@ The `AfterViewComponent` displays this child view *within its template*:
 
 The following hooks take action based on changing values *within the child view*,
 which can only be reached by querying for the child view via the property decorated with
-[@ViewChild](api/core/index/ViewChild-decorator).
+[@ViewChild](api/core/ViewChild).
 
 
 <code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="hooks" title="AfterViewComponent (class excerpts)" linenums="false">
@@ -896,7 +896,7 @@ projected into the component.
 
 The following *AfterContent* hooks take action based on changing values in a *content child*,
 which can only be reached by querying for them via the property decorated with
-[@ContentChild](api/core/index/ContentChild-decorator).
+[@ContentChild](api/core/ContentChild).
 
 
 <code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="hooks" title="AfterContentComponent (class excerpts)" linenums="false">

aio/content/guide/ngmodule-faq.md

@@ -358,7 +358,7 @@ The `forRoot` static method is a convention that makes it easy for developers to
 
 The `RouterModule.forRoot` method is a good example.
 Apps pass a `Routes` object to `RouterModule.forRoot` in order to configure the app-wide `Router` service with routes.
-`RouterModule.forRoot` returns a [ModuleWithProviders](api/core/index/ModuleWithProviders-interface).
+`RouterModule.forRoot` returns a [ModuleWithProviders](api/core/ModuleWithProviders).
 You add that result to the `imports` list of the root `AppModule`.
 
 

aio/content/guide/ngmodule.md

@@ -32,10 +32,10 @@ This page covers NgModules in greater depth.
 * [Shared modules](guide/ngmodule#shared-module "Create modules for commonly used components, directives, and pipes")
 * [The Core module](guide/ngmodule#core-module "Create a core module with app-wide singleton services and single-use components")
 * [Configure core services with _forRoot_](guide/ngmodule#core-for-root "Configure providers during module import")
-* [Prevent re-import of the _CoreModule_](guide/ngmodule#prevent-reimport "because bad things happen if a lazy loaded module imports Core")
+* [Prevent reimport of the _CoreModule_](guide/ngmodule#prevent-reimport "because bad things happen if a lazy loaded module imports Core")
+<!--
 * [NgModule metadata properties](guide/ngmodule#ngmodule-properties "A technical summary of the @NgModule metadata properties")
-
+ CF: This link goes to the top of this page. I would expect it to go to an "NgModule metadata properties"
-<!-- CF: This link goes to the top of this page. I would expect it to go to an "NgModule metadata properties"
  section at the end of this page, but that section doesn't exist. -->
 
 ### Live examples
@@ -52,7 +52,7 @@ Here's an index to live examples at key moments in the evolution of the sample:
 
 This page covers NgModule concepts in a tutorial fashion.
 
-The companion [NgModule FAQs](cookbook/ngmodule-faq "NgModule FAQs") cookbook
+The companion [NgModule FAQs](guide/ngmodule-faq "NgModule FAQs") guide
 offers answers to specific design and implementation questions.
 Read this page before reading those FAQs.
 
@@ -157,7 +157,7 @@ Angular offers a variety of bootstrapping options targeting multiple platforms.
 This page describes two options, both targeting the browser.
 
 ### Dynamic bootstrapping with the just-in-time (JIT) compiler
-In the first, _dynamic_ option, the [Angular compiler](cookbook/ngmodule-faq#q-angular-compiler "About the Angular Compiler")
+In the first, _dynamic_ option, the [Angular compiler](guide/ngmodule-faq#q-angular-compiler "About the Angular Compiler")
 compiles the application in the browser and then launches the app.
 
 
@@ -374,7 +374,7 @@ More accurately, `NgIf` is declared in `CommonModule` from `@angular/common`.
 
 `CommonModule` contributes many of the common directives that applications need, including `ngIf` and `ngFor`.
 
-`BrowserModule` imports `CommonModule` and [re-exports](cookbook/ngmodule-faq#q-re-export) it.
+`BrowserModule` imports `CommonModule` and [re-exports](guide/ngmodule-faq#q-re-export) it.
 The net effect is that an importer of `BrowserModule` gets `CommonModule` directives automatically.
 
 </div>
@@ -404,7 +404,7 @@ implemented with Angular forms in the [template-driven form](guide/forms#templat
 
 You can write Angular form components in
 template-driven or
-[reactive](cookbook/dynamic-form) style.
+[reactive](guide/dynamic-form) style.
 <!-- CF: this link goes to a page titled "Dynamic Forms". Should the link text be "dynamic" instead of "reactive"? -->
 
 The following sample imports the `FormsModule` from `@angular/forms` because
@@ -594,8 +594,8 @@ Now you can inject `ContactService` (like `UserService`) into any component in t
   To inject `ContactService`, you must first import its _type_.
   Only Contact components should import the `ContactService` type.
 
-  Read more in the [How do I restrict service scope to a module?](cookbook/ngmodule-faq#q-component-scoped-providers) section
+  Read more in the [How do I restrict service scope to a module?](guide/ngmodule-faq#q-component-scoped-providers) section
-  of the [NgModule FAQs](cookbook/ngmodule-faq) page.
+  of the [NgModule FAQs](guide/ngmodule-faq) page.
 
 
 </div>
@@ -824,8 +824,8 @@ Before `ContactComponent` can bind with `[(ngModel)]`, its `ContactModule` must
 
 
 You also replaced `BrowserModule` by `CommonModule`, for reasons explained in the
-[Should I import BrowserModule or CommonModule?](cookbook/ngmodule-faq#q-browser-vs-common-module)
+[Should I import BrowserModule or CommonModule?](guide/ngmodule-faq#q-browser-vs-common-module)
-section of the [NgModule FAQs](cookbook/ngmodule-faq) page.
+section of the [NgModule FAQs](guide/ngmodule-faq) page.
 
 You _declare_ the contact component, directive, and pipe in the module `declarations`.
 
@@ -1067,8 +1067,8 @@ _forRoot_ and _forChild_ are conventional names for methods that
 deliver different `import` values to root and feature modules.
 Angular doesn't recognize them but Angular developers do.
 
-[Follow this convention](cookbook/ngmodule-faq#q-for-root) if you write a similar module
+[Follow this convention](guide/ngmodule-faq#q-for-root) if you write a similar module
-that has both shared [declarables](cookbook/ngmodule-faq#q-declarable) and services.
+that has both shared [declarables](guide/ngmodule-faq#q-declarable) and services.
 
 
 </div>
@@ -1252,7 +1252,7 @@ and only one provider of it.
 
 `UserService` is an application-wide singleton.
 You don't want each module to have its own separate instance.
-Yet there is [a real danger](cookbook/ngmodule-faq#q-why-it-is-bad) of that happening
+Yet there is [a real danger](guide/ngmodule-faq#q-why-bad) of that happening
 <!-- CF: This link goes to the top of the NgModule FAQs page.
 It looks like it is supposed to go to a specific question/section within the page. -->
 if the `SharedModule` provides the `UserService`.
@@ -1419,7 +1419,7 @@ A module that adds providers to the application can offer a facility for configu
 
 By convention, the `forRoot` static method both provides and configures services at the same time.
 It takes a service configuration object and returns a
-[ModuleWithProviders](api/core/index/ModuleWithProviders-interface), which is
+[ModuleWithProviders](api/core/ModuleWithProviders), which is
 a simple object with the following properties:
 
 * `ngModule`: the `CoreModule` class
@@ -1495,7 +1495,7 @@ Remember to _import_ the result; don't add it to any other `@NgModule` list.
 ## Prevent reimport of the _CoreModule_
 
 Only the root `AppModule` should import the `CoreModule`.
-[Bad things happen](cookbook/ngmodule-faq#q-why-it-is-bad) if a lazy-loaded module imports it.
+[Bad things happen](guide/ngmodule-faq#q-why-bad) if a lazy-loaded module imports it.
 <!-- CF: Again, this link goes to the top of the NgModule FAQs page.
 It looks like it is supposed to go to a specific question/section within the page. -->
 
@@ -1538,5 +1538,5 @@ You made it! You can examine and download the complete source for this final ver
 ### Frequently asked questions
 
 Now that you understand NgModules, you may be interested
-in the companion [NgModule FAQs](cookbook/ngmodule-faq "NgModule FAQs") page
+in the companion [NgModule FAQs](guide/ngmodule-faq "NgModule FAQs") page
 with its ready answers to specific design and implementation questions.

aio/content/guide/npm-packages.md

@@ -104,7 +104,7 @@ the pieces that help render into the DOM.
 This package also includes the `bootstrapStatic()` method
 for bootstrapping applications for production builds that pre-compile templates offline.
 
-***@angular/platform-browser-dynamic***: Includes [Providers](api/core/index/Provider-type-alias)
+***@angular/platform-browser-dynamic***: Includes [Providers](api/core/Provider)
 and a [bootstrap](guide/ngmodule#bootstrap) method for applications that
 compile templates on the client. Don’t use offline compilation.
 Use this package for bootstrapping during development and for bootstrapping plunker samples.

aio/content/guide/pipes.md

@@ -51,7 +51,7 @@ Focus on the component's template.
 
 
 Inside the interpolation expression, you flow the component's `birthday` value through the
-[pipe operator](guide/template-syntax#pipe) ( | ) to the [Date pipe](api/common/index/DatePipe-pipe)
+[pipe operator](guide/template-syntax#pipe) ( | ) to the [Date pipe](api/common/DatePipe)
 function on the right. All pipes work this way.
 
 
@@ -85,7 +85,7 @@ They are all available for use in any template.
 
 
 
-Read more about these and many other built-in pipes in the [pipes topics](api/#!?query=pipe) of the
+Read more about these and many other built-in pipes in the [pipes topics](api?type=pipe) of the
 [API Reference](api); filter for entries that include the word "pipe".
 
 Angular doesn't have a `FilterPipe` or an `OrderByPipe` for reasons explained in the [Appendix](guide/pipes#no-filter-pipe) of this page.
@@ -154,7 +154,7 @@ As you click the button, the displayed date alternates between
 
 
 
-Read more about the `DatePipe` format options in the [Date Pipe](api/common/index/DatePipe-pipe)
+Read more about the `DatePipe` format options in the [Date Pipe](api/common/DatePipe)
 API Reference page.
 
 
@@ -586,7 +586,7 @@ It displays the same hero data in JSON format by chaining through to the built-i
 
 
 
-The [JsonPipe](api/common/index/JsonPipe-pipe)
+The [JsonPipe](api/common/JsonPipe)
 provides an easy way to diagnosis a mysteriously failing data binding or
 inspect an object for future binding.
 
@@ -621,7 +621,7 @@ transformations. Use them like styles, dropping them
 into your template's expressions to enrich the appeal and usability
 of your views.
 
-Explore Angular's inventory of built-in pipes in the [API Reference](api/#!?query=pipe).
+Explore Angular's inventory of built-in pipes in the [API Reference](api?type=pipe).
 Try writing a custom pipe and perhaps contributing it to the community.
 
 

aio/content/guide/quickstart.md

@@ -16,7 +16,7 @@ A _component_ is the combination of an HTML template and a component class that
 
 
 Try this **<live-example noDownload>QuickStart example on Plunker</live-example>** without installing anything.
-Try it locally with the [***QuickStart seed***](guide/guide/setup "Setup for local development with the QuickStart seed")
+Try it locally with the [***QuickStart seed***](guide/setup "Setup for local development with the QuickStart seed")
 and prepare for development of a real Angular application.
 
 
@@ -37,7 +37,7 @@ The `selector` property tells Angular to display the component inside a custom `
 
 The `template` property defines a message inside an `<h1>` header.
 The message starts with "Hello" and ends with `{{name}}`,
-which is an Angular [interpolation binding](guide/guide/displaying-data) expression.
+which is an Angular [interpolation binding](guide/displaying-data) expression.
 At runtime, Angular replaces `{{name}}` with the value of the component's `name` property.
 Interpolation binding is one of many Angular features you'll discover in this documentation.
 
@@ -57,7 +57,7 @@ In the example, change the component class's `name` property from `'Angular'` to
 
 <p>
   This example is written in <a href="http://www.typescriptlang.org/" title="TypeScript">TypeScript</a>, a superset of JavaScript. Angular
-  uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; <a href="cookbook/ts-to-js.html">this guide</a> explains how.
+  uses TypeScript because its types make it easy to support developer productivity with tooling. You can also write Angular code in JavaScript; [this guide](guide/ts-to-js] explains how.
 
 </p>
 
@@ -73,7 +73,7 @@ In the example, change the component class's `name` property from `'Angular'` to
 
 ### Next step
 
-Start [**learning Angular**](guide/guide/learning-angular "Learning Angular").
+Start the [**tutorial**](tutorial "Tour of Heroes tutorial").
 
 </div>
 

aio/content/guide/reactive-forms.md

@@ -233,7 +233,7 @@ In real apps, most form controls have both.
 
 
 This guide touches only briefly on `Validators`. For an in-depth look at them,
-read the [Form Validation](cookbook/form-validation) cookbook.
+read the [Form Validation](guide/form-validation) guide.
 
 
 </div>
@@ -317,21 +317,21 @@ Revise the `AppComponent` template so it displays the `HeroDetailComponent`.
 ### Essential form classes
 It may be helpful to read a brief description of the core form classes.
 
-* [_AbstractControl_](api/forms/index/AbstractControl-class "API Reference: AbstractControl")
+* [_AbstractControl_](api/forms/AbstractControl "API Reference: AbstractControl")
 is the abstract base class for the three concrete form control classes:
 `FormControl`, `FormGroup`, and `FormArray`.
 It provides their common behaviors and properties, some of which are _observable_.
 
-* [_FormControl_](api/forms/index/FormControl-class "API Reference: FormControl")
+* [_FormControl_](api/forms/FormControl "API Reference: FormControl")
 tracks the value and validity status of an _individual_ form control.
 It corresponds to an HTML form control such as an input box or selector.
 
-* [_FormGroup_](api/forms/index/FormGroup-class "API Reference: FormGroup")
+* [_FormGroup_](api/forms/FormGroup "API Reference: FormGroup")
 tracks the value and validity state of a _group_ of `AbstractControl` instances.
 The group's properties include its child controls.
 The top-level form in your component is a `FormGroup`.
 
-* [_FormArray_](api/forms/index/FormArray-class "API Reference: FormArray")
+* [_FormArray_](api/forms/FormArray "API Reference: FormArray")
 tracks the value and validity state of a numerically indexed _array_ of `AbstractControl` instances.
 
 You'll learn more about these classes as you work through this guide.
@@ -582,7 +582,7 @@ Using `Validators.required` is optional for the rest of the guide.
 It remains in each of the following examples with the same configuration.
 
 For more on validating Angular forms, see the
-[Form Validation](cookbook/form-validation) guide.
+[Form Validation](guide/form-validation) guide.
 
 
 ### More FormControls
@@ -645,9 +645,9 @@ You tie these controls to the template HTML elements in the same way,
 specifiying the `FormControl` name with the `formControlName` directive.
 
 See the API reference for more information about
-[radio buttons](api/forms/index/RadioControlValueAccessor-directive "API: RadioControlValueAccessor"),
+[radio buttons](api/forms/RadioControlValueAccessor "API: RadioControlValueAccessor"),
-[selects](api/forms/index/SelectControlValueAccessor-directive "API: SelectControlValueAccessor"), and
+[selects](api/forms/SelectControlValueAccessor "API: SelectControlValueAccessor"), and
-[checkboxes](api/forms/index/CheckboxControlValueAccessor-directive "API: CheckboxControlValueAccessor").
+[checkboxes](api/forms/CheckboxControlValueAccessor "API: CheckboxControlValueAccessor").
 
 
 
@@ -830,12 +830,12 @@ such as one of the following:
 
 
 Learn about other `FormControl` properties in the
-[_AbstractControl_](api/forms/index/AbstractControl-class) API reference.
+[_AbstractControl_](api/forms/AbstractControl) API reference.
 
 One common reason for inspecting `FormControl` properties is to
 make sure the user entered valid values.
 Read more about validating Angular forms in the
-[Form Validation](cookbook/form-validation) guide.
+[Form Validation](guide/form-validation) guide.
 
 
 

aio/content/guide/router.md

@@ -602,7 +602,7 @@ This short introduction will do for now.
 
 Proceed to the first application milestone.
 
-
+{@a getting-started}
 
 ## Milestone 1: Getting started with the router
 
@@ -710,7 +710,7 @@ A router must be configured with a list of route definitions.
 The first configuration defines an array of two routes with simple paths leading to the
 `CrisisListComponent` and `HeroListComponent`.
 
-Each definition translates to a [Route](api/router/index/Route-interface) object which has two things: a
+Each definition translates to a [Route](api/router/Route) object which has two things: a
 `path`, the URL path segment for this route; and a
 `component`, the component associated with this route.
 
@@ -1137,7 +1137,7 @@ Here are the files discussed in this milestone.
 </code-tabs>
 
 
-
+{@a routing-module}
 
 ## Milestone 2: *Routing module*
 
@@ -1152,7 +1152,7 @@ The **Routing Module** has several characteristics:
 * Separates routing concerns from other application concerns.
 * Provides a module to replace or remove when testing the application.
 * Provides a well-known location for routing service providers including guards and resolvers.
-* Does **not** [declare components](cookbook/ngmodule-faq#routing-module).
+* Does **not** [declare components](guide/ngmodule-faq#routing-module).
 
 
 {@a routing-refactor}
@@ -1230,7 +1230,7 @@ It makes testing the feature module easier.
 Its existence calls attention to the fact that a module is routed.
 It is where developers expect to find and expand routing configuration.
 
-
+{@a heroes-feature}
 
 ## Milestone 3: Heroes feature
 
@@ -1658,7 +1658,7 @@ the `HeroDetailComponent` via the `ActivatedRoute` service.
 ### ActivatedRoute: the one-stop-shop for route information
 
 The route path and parameters are available through an injected router service called the
-[ActivatedRoute](api/router/index/ActivatedRoute-interface).
+[ActivatedRoute](api/router/ActivatedRoute).
 It has a great deal of useful information including:
 
 
@@ -1859,7 +1859,7 @@ It holds the _path to the `HeroListComponent`_:
 </code-example>
 
 
-
+{@a optional-route-parameters}
 
 ### Route Parameters: Required or optional?
 
@@ -2861,7 +2861,7 @@ This time, the value of `'popup'` is `null`. That's not a route, but it is a leg
 Setting the popup `RouterOutlet` to `null` clears the outlet and removes
 the secondary popup route from the current URL.
 
-
+{@a guards}
 
 ## Milestone 5: Route guards
 
@@ -2903,15 +2903,15 @@ router will wait for the observable to resolve to `true` or `false`.
 
 The router supports multiple kinds of guards:
 
-1. [`CanActivate`](api/router/index/CanActivate-interface) to mediate navigation *to* a route.
+1. [`CanActivate`](api/router/CanActivate) to mediate navigation *to* a route.
 
-2. [`CanActivateChild()`](api/router/index/CanActivateChild-interface) to mediate navigation *to* a child route.
+2. [`CanActivateChild()`](api/router/CanActivateChild) to mediate navigation *to* a child route.
 
-3. [`CanDeactivate`](api/router/index/CanDeactivate-interface) to mediate navigation *away* from the current route.
+3. [`CanDeactivate`](api/router/CanDeactivate) to mediate navigation *away* from the current route.
 
-4. [`Resolve`](api/router/index/Resolve-interface) to perform route data retrieval *before* route activation.
+4. [`Resolve`](api/router/Resolve) to perform route data retrieval *before* route activation.
 
-5. [`CanLoad`](api/router/index/CanLoad-interface) to mediate navigation *to* a feature module loaded _asynchronously_.
+5. [`CanLoad`](api/router/CanLoad) to mediate navigation *to* a feature module loaded _asynchronously_.
 
 
 You can have multiple guards at every level of a routing hierarchy.
@@ -3612,7 +3612,7 @@ the `preserveQueryParams` and `preserveFragment` bindings respectively.
 </div>
 
 
-
+{@a asynchronous-routing}
 
 ## Milestone 6: Asynchronous routing
 
@@ -4186,8 +4186,7 @@ Those developers may still use HTML5 URLs by taking two remedial steps:
 1. Provide the router with an appropriate [APP_BASE_HREF][] value.
 1. Use _root URLs_ for all web resources: CSS, images, scripts, and template HTML files.
 
-[APP_BASE_HREF]: ../api/common/index/APP_BASE_HREF-let.html
+{@a hashlocationstrategy}
-
 
 ### *HashLocationStrategy*
 

aio/content/guide/security.md

@@ -37,7 +37,7 @@ You can run the <live-example></live-example> in Plunker and download the code f
 
 
 
-To report vulnerabilities in Angular itself, email us at [security@angular.io](guide/mailto:security@angular).
+To report vulnerabilities in Angular itself, email us at [security@angular.io](mailto:security@angular.io).
 
 For more information about how Google handles security issues, see [Google's security
 philosophy](https://www.google.com/about/appsecurity/).
@@ -174,7 +174,7 @@ and greatly improves application performance. Use the offline template compiler
 deployments; don't dynamically generate templates. Angular trusts template code, so generating
 templates, in particular templates containing user data, circumvents Angular's built-in protections.
 For information about dynamically constructing forms in a safe way, see the
-[Dynamic Forms](cookbook/dynamic-form) cookbook page.
+[Dynamic Forms](guide/dynamic-form) guide page.
 
 ### Server-side XSS protection
 

aio/content/guide/set-document-title.md

@@ -71,7 +71,7 @@ means that you could run your app inside Electron.js or Windows Universal to del
 
 ## Use the *Title* service
 Fortunately, Angular bridges the gap by providing a `Title` service as part of the *Browser platform*.
-The [Title](api/platform-browser/index/Title-class) service is a simple class that provides an API
+The [Title](api/platform-browser/Title) service is a simple class that provides an API
 for getting and setting the current HTML document title:
 
 * `getTitle() : string`—Gets the title of the current HTML document.

aio/content/guide/setup.md

@@ -284,7 +284,7 @@ The following are all in `src/`
     <td>
 
 
-      Compiles the application with the [JIT compiler](glossary#jit) and
+      Compiles the application with the [JIT compiler](guide/glossary#jit) and
       [bootstraps](guide/appmodule#main "bootstrap the application") 
       the application's main module (`AppModule`) to run in the browser.
       The JIT compiler is a reasonable choice during the development of most projects and
@@ -305,7 +305,7 @@ The following are all in `src/`
 
 ### Next Step
 
-If you're new to Angular, we recommend staying on the [learning path](guide/learning-angular "Angular learning path").
+If you're new to Angular, we recommend you follow the [tutorial](tutorial "Tour of Heroes tutorial").
 
 
 </div>
@@ -346,7 +346,7 @@ use other versions of node and npm.
 Links on almost every documentation page open completed samples in the browser.
 You can play with the sample code, share your changes with friends, and download and run the code on your own machine.
 
-The [QuickStart](quickstart "Angular QuickStart Playground") shows just the `AppComponent` file.
+The [QuickStart](guide/quickstart "Angular QuickStart Playground") shows just the `AppComponent` file.
 It creates the equivalent of `app.module.ts` and `main.ts` internally _for the playground only_.
 so the reader can discover Angular without distraction.
 The other samples are based on the QuickStart seed. 

aio/content/guide/structural-directives.md

@@ -339,7 +339,7 @@ It's intended source is implicit.
 Angular sets `let-hero` to the value of the context's `$implicit` property
 which `NgFor` has initialized with the hero for the current iteration.
 
-* The [API guide](api/common/index/NgFor-directive "API: NgFor")
+* The [API guide](api/common/NgFor "API: NgFor")
 describes additional `NgFor` directive properties and context properties.
 
 These microsyntax mechanisms are available to you when you write your own structural directives.
@@ -710,15 +710,15 @@ Angular's own directives do not.
 ### _TemplateRef_ and _ViewContainerRef_
 
 A simple structural directive like this one creates an
-[_embedded view_](api/core/index/EmbeddedViewRef-class "API: EmbeddedViewRef")
+[_embedded view_](api/core/EmbeddedViewRef "API: EmbeddedViewRef")
 from the Angular-generated `<ng-template>` and inserts that view in a
-[_view container_](api/core/index/ViewContainerRef-class "API: ViewContainerRef")
+[_view container_](api/core/ViewContainerRef "API: ViewContainerRef")
 adjacent to the directive's original `<p>` host element.
 
 You'll acquire the `<ng-template>` contents with a
-[`TemplateRef`](api/core/index/TemplateRef-class "API: TemplateRef")
+[`TemplateRef`](api/core/TemplateRef "API: TemplateRef")
 and access the _view container_ through a
-[`ViewContainerRef`](api/core/index/ViewContainerRef-class "API: ViewContainerRef").
+[`ViewContainerRef`](api/core/ViewContainerRef "API: ViewContainerRef").
 
 You inject both in the directive constructor as private variables of the class.
 

aio/content/guide/template-syntax.md

@@ -151,7 +151,7 @@ it assigns this composite interpolated result to an **element or directive prope
 You appear to be inserting the result between element tags and assigning it to attributes.
 It's convenient to think so, and you rarely suffer for this mistake.
 Though this is not exactly true. Interpolation is a special syntax that Angular converts into a
-[property binding](guide/template-syntax#property-binding), as is explained [below](guide/template-syntax#property-binding-or-interpolation-).
+[property binding](guide/template-syntax#property-binding), as is explained [below](guide/template-syntax#property-binding-or-interpolation).
 
 But first, let's take a closer look at template expressions and statements.
 <a href="#toc">back to top</a>
@@ -888,8 +888,8 @@ If the element raises events, you can listen to them with an [event binding](gui
 If you must read a target element property or call one of its methods,
 you'll need a different technique.
 See the API reference for
-[ViewChild](api/core/index/ViewChild-decorator) and
+[ViewChild](api/core/ViewChild) and
-[ContentChild](api/core/index/ContentChild-decorator).
+[ContentChild](api/core/ContentChild).
 
 
 </div>
@@ -1017,6 +1017,8 @@ not a template expression. Angular sets it and forgets about it.
 
 The `[hero]` binding, on the other hand, remains a live binding to the component's `currentHero` property.
 
+{@a property-binding-or-interpolation}
+
 ### Property binding or interpolation?
 
 You often have a choice between interpolation and property binding.
@@ -1407,7 +1409,7 @@ If the event belongs to a directive (recall that components are directives),
 
 ### Custom events with <span class="syntax">EventEmitter</span>
 
-Directives typically raise custom events with an Angular [EventEmitter](api/core/index/EventEmitter-class).
+Directives typically raise custom events with an Angular [EventEmitter](api/core/EventEmitter).
 The directive creates an `EventEmitter` and exposes it as a property.
 The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload, which can be anything.
 Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
@@ -1786,7 +1788,7 @@ The `ngModel` data property sets the element's value property and the `ngModelCh
 listens for changes to the element's value.
 
 The details are specific to each kind of element and therefore the `NgModel` directive only works for an element
-supported by a [ControlValueAccessor](api/forms/index/ControlValueAccessor-interface)
+supported by a [ControlValueAccessor](api/forms/ControlValueAccessor)
 that adapts an element to this protocol.
 The `<input>` box is one of those elements.
 Angular provides *value accessors* for all of the basic HTML form elements and the
@@ -2081,7 +2083,7 @@ The next example captures the `index` in a variable named `i` and displays it wi
 
 
 Learn about the other `NgFor` context values such as `last`, `even`,
-and `odd` in the [NgFor API reference](api/common/index/NgFor-directive).
+and `odd` in the [NgFor API reference](api/common/NgFor).
 
 
 </div>
@@ -2266,7 +2268,7 @@ What is the value of `heroForm`?
 
 If Angular hadn't taken it over when you imported the `FormsModule`,
 it would be the [HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement).
-The `heroForm` is actually a reference to an Angular [NgForm](api/forms/index/NgForm-directive "API: NgForm")
+The `heroForm` is actually a reference to an Angular [NgForm](api/forms/NgForm "API: NgForm")
 directive with the ability to track the value and validity of every control in the form.
 
 The native `<form>` element doesn't have a `form` property.

aio/content/guide/testing.md

@@ -898,6 +898,8 @@ into a `compileComponents().then(...)` callback and write only one `beforeEach`.
 Most developers find that hard to read.
 The two `beforeEach` calls are widely preferred.
 
+{@a live-external-template-example}
+
 ### Try the live example
 
 Take a moment to explore this component spec as a <live-example plnkr="banner-specs" title="Spec for component with external template" embedded-style></live-example>.
@@ -3013,6 +3015,7 @@ appropriate to the method, that is, the parameter of an `@NgModule`,
 
 
 {@a testbed-methods}
+{@a testbed-api-summary}
 
 
 The `TestBed` API consists of static class methods that either update or reference a _global_ instance of the`TestBed`.

aio/content/guide/ts-to-js.md

@@ -180,7 +180,7 @@ Use the constructor function pattern instead, adding methods to the prototype.
 When writing in _TypeScript_ or _ES6-with-decorators_,
 provide configuration and metadata by adorning a class with one or more *decorators*.
 For example, you supply metadata to a component class by preceding its definition with a
-[`@Component`](api/core/index/Component-decorator) decorator function whose
+[`@Component`](api/core/Component) decorator function whose
 argument is an object literal with metadata properties.
 
 In _plain ES6_, you provide metadata by attaching an `annotations` array to the _class_.
@@ -459,12 +459,12 @@ You can qualify injection behavior with injection decorators from `@angular/core
 In _TypeScript_ and _ES6-with-decorators_,
 you precede the constructor parameters with injection qualifiers such as:
 
-* [`@Optional`](api/core/index/Optional-decorator) sets the parameter to `null` if the service is missing.
+* [`@Optional`](api/core/Optional) sets the parameter to `null` if the service is missing.
-* [`@Attribute`](api/core/index/Attribute-interface) to inject a host element attribute value.
+* [`@Attribute`](api/core/Attribute) to inject a host element attribute value.
-* [`@ContentChild`](api/core/index/ContentChild-decorator) to inject a content child.
+* [`@ContentChild`](api/core/ContentChild) to inject a content child.
-* [`@ViewChild`](api/core/index/ViewChild-decorator) to inject a view child.
+* [`@ViewChild`](api/core/ViewChild) to inject a view child.
-* [`@Host`](api/core/index/Host-decorator) to inject a service in this component or its host.
+* [`@Host`](api/core/Host) to inject a service in this component or its host.
-* [`@SkipSelf`](api/core/index/SkipSelf-decorator) to inject a service provided in an ancestor of this component.
+* [`@SkipSelf`](api/core/SkipSelf) to inject a service provided in an ancestor of this component.
 
 In _plain ES6_ and _ES5_, create an instance of the equivalent injection qualifier in a nested array within the `parameters` array.
 For example, you'd write `new Optional()` in _plain ES6_ and `new ng.core.Optional()` in _ES5_.
@@ -505,9 +505,9 @@ element whose tag matches the component selector.
 
 In _TypeScript_ and _ES6-with-decorators_, you can use host property decorators to bind a host
 element to a component or directive.
-The [`@HostBinding`](api/core/index/HostBinding-interface) decorator
+The [`@HostBinding`](api/core/HostBinding) decorator
 binds host element properties to component data properties.
-The [`@HostListener`](api/core/index/HostListener-interface) decorator binds
+The [`@HostListener`](api/core/HostListener) decorator binds
 host element events to component event handlers.
 
 In _plain ES6_ or _ES5_, add a `host` attribute to the component metadata to achieve the
@@ -564,8 +564,8 @@ Several _property_ decorators query a component's nested view and content compon
 
 </div>
 
-The [`@ViewChild`](api/core/index/ViewChild-decorator) and
+The [`@ViewChild`](api/core/ViewChild) and
-[`@ViewChildren`](api/core/index/ViewChildren-decorator) property decorators
+[`@ViewChildren`](api/core/ViewChildren) property decorators
 allow a component to query instances of other components that are used in
 its view.
 
@@ -586,13 +586,13 @@ The `queries` property value is a hash map.
   </code-pane>
 </code-tabs>
 
-The [`@ContentChild`](api/core/index/ContentChild-decorator) and
+The [`@ContentChild`](api/core/ContentChild) and
-[`@ContentChildren`](api/core/index/ContentChildren-decorator) property decorators
+[`@ContentChildren`](api/core/ContentChildren) property decorators
 allow a component to query instances of other components that have been projected
 into its view from elsewhere.
 
-They can be added in the same way as [`@ViewChild`](api/core/index/ViewChild-decorator) and
+They can be added in the same way as [`@ViewChild`](api/core/ViewChild) and
-[`@ViewChildren`](api/core/index/ViewChildren-decorator).
+[`@ViewChildren`](api/core/ViewChildren).
 
 <code-tabs>
   <code-pane title="TypeScript" path="ts-to-js/ts/src/app/hero-queries.component.ts" region="content">

aio/content/guide/upgrade.md

@@ -75,6 +75,8 @@ much more easy to work with than others. There are a few key techniques
 and patterns that we can apply to future proof our apps even before we
 begin the migration.
 
+{@a follow-the-angular-styleguide}
+
 ### Follow the Angular Style Guide
 
 The [AngularJS Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility)
@@ -418,7 +420,7 @@ bindings get updated.
 In Angular things are different. While change detection still
 occurs after every event, no one needs to call `scope.$apply()` for
 that to happen. This is because all Angular code runs inside something
-called the [Angular zone](api/core/index/NgZone-class). Angular always
+called the [Angular zone](api/core/NgZone). Angular always
 knows when the code finishes, so it also knows when it should kick off
 change detection. The code itself doesn't have to call `scope.$apply()`
 or anything like it.
@@ -452,7 +454,7 @@ When we downgrade an Angular component and then use it from AngularJS,
 the component's inputs will be watched using AngularJS change detection.
 When those inputs change, the corresponding properties in the component
 are set. We can also hook into the changes by implementing the
-[OnChanges](api/core/index/OnChanges-class) interface in the component,
+[OnChanges](api/core/OnChanges) interface in the component,
 just like we could if it hadn't been downgraded.
 
 Correspondingly, when we upgrade an AngularJS component and use it from Angular,
@@ -1220,7 +1222,7 @@ Next we declare both AngularJS and Angular routes as normal:
 In our `app.module.ts` we need to add `AppComponent` to the declarations and boostrap array.
 
 Next we configure the router itself.
-We want to use [hash navigation](guide/router#-hashlocationstrategy-) in Angular
+We want to use [hash navigation](guide/router#hashlocationstrategy) in Angular
 because that's what we're also using in AngularJS.
 
 Lastly, and most importantly, we want to use a custom `UrlHandlingStrategy` that will tell
@@ -1451,7 +1453,7 @@ In terms of project structure, this is where our work begins:
 This is actually a pretty good starting point. The code uses the AngularJS 1.5
 component API and the organization follows the
 [AngularJS Style Guide](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md),
-which is an important [preparation step](guide/upgrade#following-the-angular-styleguide) before
+which is an important [preparation step](guide/upgrade#follow-the-angular-styleguide) before
 a successful upgrade.
 
 * Each component, service, and filter is in its own source file, as per the

aio/content/guide/webpack.md

@@ -402,7 +402,7 @@ The configuration imports dependencies with `require` statements
 and exports several objects as properties of a `module.exports` object.
 
 * [`entry`](guide/webpack#common-entries)—the entry-point files that define the bundles.
-* [`resolve`](guide/webpack#common-resolve)—how to resolve file names when they lack extensions.
+* [`resolve`](guide/webpack#common-resolves)—how to resolve file names when they lack extensions.
 * [`module.rules`](guide/webpack#common-rules)— `module` is an object with `rules` for deciding how files are loaded.
 * [`plugins`](guide/webpack#common-plugins)—creates instances of the plugins.
 
@@ -428,7 +428,7 @@ This `entry` object defines the three bundles:
 * `app`—the application code.
 
 
-{@a common-resolve}
+{@a common-resolves}
 
 
 #### _resolve_ extension-less imports

aio/content/tutorial/toh-pt4.md

@@ -137,7 +137,7 @@ Create a file in the `app` folder called `hero.service.ts`.
 
 
 The naming convention for service files is the service name in lowercase followed by `.service`.
-For a multi-word service name, use lower [dash-case](guide/glossary#!).
+For a multi-word service name, use lower [dash-case](guide/glossary).
 For example, the filename for `SpecialSuperHeroService` is `special-super-hero.service.ts`.
 
 </div>

aio/content/tutorial/toh-pt5.md

@@ -276,7 +276,7 @@ at the top of the `<head>` section.
 
 
 
-For more information, see the [Set the base href](guide/router#!)
+For more information, see the [Set the base href](guide/router)
 section of the [Routing and Navigation](guide/router) page.
 
 
@@ -482,7 +482,7 @@ to the array of route definitions:
 
 
 
-Read more about *redirects* in the [Redirecting routes](guide/router#!) section
+Read more about *redirects* in the [Redirecting routes](guide/router) section
 of the [Routing & Navigation](guide/router) page.
 
 
@@ -793,7 +793,7 @@ using the `Location` service you injected previously.
 
 Going back too far could take users out of the app.
 In a real app, you can prevent this issue with the <em>CanDeactivate</em> guard.
-Read more on the [CanDeactivate](api/router/index/CanDeactivate-interface) page.
+Read more on the [CanDeactivate](api/router/CanDeactivate) page.
 
 
 </div>