diff --git a/public/docs/dart/latest/tutorial/toh-pt5-NEW.jade b/public/docs/dart/latest/tutorial/toh-pt5-NEW.jade
index 685048157c..95c2994d3b 100644
--- a/public/docs/dart/latest/tutorial/toh-pt5-NEW.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt5-NEW.jade
@@ -445,7 +445,7 @@ code-example(format='').
:marked
Going back too far could take us out of the application.
That's acceptable in a demo. We'd guard against it in a real application,
- perhaps with the [*routerCanDeactivate* hook](/docs/ts/latest/api/router/CanDeactivate-interface.html).
+ perhaps with the [*routerCanDeactivate* hook](../api/router/CanDeactivate-interface.html).
:marked
Then we wire this method with an event binding to a *Back* button that we add to the bottom of the component template.
+makeExample('toh-5/dart/lib/hero_detail_component.html', 'back-button')(format=".")
diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade
index c1958c69b3..c2cfd5861e 100644
--- a/public/docs/ts/latest/guide/dependency-injection.jade
+++ b/public/docs/ts/latest/guide/dependency-injection.jade
@@ -534,7 +534,7 @@ code-example(format, language="html").
- var loggerlike = lang == 'dart' ? '' : 'We could provide a logger-like object. '
:marked
The `providers` array appears to hold a service class.
- In reality it holds an instance of the [Provider](/docs/ts/latest/api/core/Provider-class.html) class that can create that service.
+ In reality it holds an instance of the [Provider](../api/core/Provider-class.html) class that can create that service.
There are many ways to *provide* something that #{implements} `Logger`.
The `Logger` class itself is an obvious and natural provider — it has the right shape and it's designed to be created.
@@ -563,13 +563,13 @@ code-example(format, language="html").
// #docregion providers-provide-2
:marked
This is actually a short-hand expression for a provider registration that creates a new instance of the
- [Provider](/docs/ts/latest/api/core/Provider-class.html) class.
+ [Provider](../api/core/Provider-class.html) class.
// #enddocregion providers-provide-2
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-2')
// #docregion providers-provide-3
// Skip for Dart, where the provide() function won't pass type checking.
:marked
- The [provide](/docs/ts/latest/api/core/provide-function.html) function is the more common, friendlier way to create a `Provider`:
+ The [provide](../api/core/provide-function.html) function is the more common, friendlier way to create a `Provider`:
// #enddocregion providers-provide-3
+makeExample('dependency-injection/ts/app/providers.component.ts','providers-3')
// #docregion providers-provide-4-1
@@ -802,7 +802,7 @@ code-example(format, language="html").
// #docregion tokens-opaque-1
- var lang = current.path[1]
-- var opaquetoken = lang == 'dart' ? 'OpaqueToken
' : 'OpaqueToken
'
+- var opaquetoken = lang == 'dart' ? 'OpaqueToken
' : 'OpaqueToken
'
h3 OpaqueToken
p.
The solution is to define and use an !{opaquetoken}.
diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade
index c5fd8fc2af..96922a0dac 100644
--- a/public/docs/ts/latest/guide/forms.jade
+++ b/public/docs/ts/latest/guide/forms.jade
@@ -477,7 +477,7 @@ figure.image-display
.l-sub-section
:marked
Why "ngForm"?
- A directive's [exportAs](/docs/ts/latest/api/core/DirectiveMetadata-class.html#!#exportAs) property
+ A directive's [exportAs](../api/core/DirectiveMetadata-class.html#!#exportAs) property
tells Angular how to link local variable to the directive.
We set `name` to `ngForm` because the `NgControlName` directive's `exportAs` property happens to be "ngForm".
diff --git a/public/docs/ts/latest/guide/lifecycle-hooks.jade b/public/docs/ts/latest/guide/lifecycle-hooks.jade
index 192e7a9aa2..b373d638ac 100644
--- a/public/docs/ts/latest/guide/lifecycle-hooks.jade
+++ b/public/docs/ts/latest/guide/lifecycle-hooks.jade
@@ -467,7 +467,7 @@ figure.image-display
.l-sub-section
:marked
We see also that the `ngOnChanges` method is called in contradiction of the
- [incorrect API documentation](/docs/ts/latest/api/core/DoCheck-interface.html).
+ [incorrect API documentation](../api/core/DoCheck-interface.html).
.l-main-section
:marked
diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade
index 1b4c4427ca..c0c9ef16ad 100644
--- a/public/docs/ts/latest/guide/template-syntax.jade
+++ b/public/docs/ts/latest/guide/template-syntax.jade
@@ -533,8 +533,8 @@ table
If we must read a target element property or call one of its methods,
we'll need a different technique.
See the API reference for
- [viewChild](/docs/ts/latest/api/core/ViewChild-var.html) and
- [contentChild](/docs/ts/latest/api/core/ContentChild-var.html).
+ [viewChild](../api/core/ViewChild-var.html) and
+ [contentChild](../api/core/ContentChild-var.html).
// #enddocregion property-binding-6
// TODO (global): once we have api docs everywhere, change /docs/ts/latest/ to ../
@@ -829,7 +829,7 @@ code-example(format="", language="html").
### Custom events with EventEmitter
- Directives typically raise custom events with an Angular [EventEmitter](/docs/ts/latest/api/core/EventEmitter-class.html).
+ Directives typically raise custom events with an Angular [EventEmitter](../api/core/EventEmitter-class.html).
A 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 that can be anything.
Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
@@ -1224,7 +1224,7 @@ figure.image-display
// #docregion directives-ngFor-7
.l-sub-section
:marked
- Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](/docs/ts/latest/api/common/NgFor-directive.html).
+ Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](../api/common/NgFor-directive.html).
// #enddocregion directives-ngFor-7
// #docregion directives-ngForTrackBy-1
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index 23c308eda3..a17f65395d 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -447,7 +447,7 @@ code-example(format='').
:marked
Going back too far could take us out of the application.
That's acceptable in a demo. We'd guard against it in a real application,
- perhaps with the [*routerCanDeactivate* hook](/docs/ts/latest/api/router/CanDeactivate-interface.html).
+ perhaps with the [*routerCanDeactivate* hook](../api/router/CanDeactivate-interface.html).
:marked
Then we wire this method with an event binding to a *Back* button that we add to the bottom of the component template.
+makeExample('toh-5/ts/app/hero-detail.component.html', 'back-button')(format=".")