diff --git a/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart b/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart
index 11f2184242..a52ea6d267 100644
--- a/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart
+++ b/public/docs/_examples/dependency-injection/dart/lib/providers_component.dart
@@ -29,15 +29,18 @@ class ProviderComponent1 {
 
 /// Component just used to ensure that shared E2E tests pass.
 @Component(
-  selector: 'provider-3a',
+  selector: 'provider-3',
   template: '{{log}}',
-  providers: const [const Provider(Logger, useClass: Logger)]
+  providers: 
+    // #docregion providers-3
+    const [const Provider(Logger, useClass: Logger)]
+    // #enddocregion providers-3
 )
-class ProviderComponent3a {
+class ProviderComponent3 {
   String log;
 
-  ProviderComponent3a(Logger logger) {
-    logger.log('Hello from logger provided with {provide: Logger, useClass: Logger}');
+  ProviderComponent3(Logger logger) {
+    logger.log('Hello from logger provided with useClass:Logger');
     log = logger.logs[0];
   }
 }
@@ -250,7 +253,7 @@ class ProviderComponent10 implements OnInit {
     template: '''
       <h2>Provider variations</h2>
       <div id="p1"><provider-1></provider-1></div>
-      <div id="p3a"><provider-3a></provider-3a></div>
+      <div id="p3"><provider-3></provider-3></div>
       <div id="p4"><provider-4></provider-4></div>
       <div id="p5"><provider-5></provider-5></div>
       <div id="p6a"><provider-6a></provider-6a></div>
@@ -261,7 +264,7 @@ class ProviderComponent10 implements OnInit {
       <div id="p10"><provider-10></provider-10></div>''',
     directives: const [
       ProviderComponent1,
-      ProviderComponent3a,
+      ProviderComponent3,
       ProviderComponent4,
       ProviderComponent5,
       ProviderComponent6a,
diff --git a/public/docs/_examples/dependency-injection/e2e-spec.ts b/public/docs/_examples/dependency-injection/e2e-spec.ts
index d4625478f3..51b73ad40f 100644
--- a/public/docs/_examples/dependency-injection/e2e-spec.ts
+++ b/public/docs/_examples/dependency-injection/e2e-spec.ts
@@ -80,9 +80,9 @@ describe('Dependency Injection Tests', function () {
       expect(element(by.css('#p1')).getText()).toEqual(expectedMsg);
     });
 
-    it('P3a (provide) displays as expected', function () {
-      expectedMsg = 'Hello from logger provided with { provide: Logger, useClass: Logger }';
-      expect(element(by.css('#p3a')).getText()).toEqual(expectedMsg);
+    it('P3 (provide) displays as expected', function () {
+      expectedMsg = 'Hello from logger provided with useClass:Logger';
+      expect(element(by.css('#p3')).getText()).toEqual(expectedMsg);
     });
 
     it('P4 (useClass:BetterLogger) displays as expected', function () {
diff --git a/public/docs/_examples/dependency-injection/ts/app/providers.component.ts b/public/docs/_examples/dependency-injection/ts/app/providers.component.ts
index 61c53bb862..74c36d8e62 100644
--- a/public/docs/_examples/dependency-injection/ts/app/providers.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/providers.component.ts
@@ -31,17 +31,17 @@ export class ProviderComponent1 {
 
 //////////////////////////////////////////
 @Component({
-  selector: 'provider-3a',
+  selector: 'provider-3',
   template: template,
   providers:
-    // #docregion providers-3a
+    // #docregion providers-3
     [{ provide: Logger, useClass: Logger }]
-    // #enddocregion providers-3a
+    // #enddocregion providers-3
 })
-export class ProviderComponent3a {
+export class ProviderComponent3 {
   log: string;
   constructor(logger: Logger) {
-    logger.log('Hello from logger provided with { provide: Logger, useClass: Logger }');
+    logger.log('Hello from logger provided with useClass:Logger');
     this.log = logger.logs[0];
   }
 }
@@ -252,7 +252,7 @@ export class ProviderComponent10 {
   template: `
   <h2>Provider variations</h2>
   <div id="p1"><provider-1></provider-1></div>
-  <div id="p3a"><provider-3a></provider-3a></div>
+  <div id="p3"><provider-3></provider-3></div>
   <div id="p4"><provider-4></provider-4></div>
   <div id="p5"><provider-5></provider-5></div>
   <div id="p6a"><provider-6a></provider-6a></div>
@@ -264,7 +264,7 @@ export class ProviderComponent10 {
   `,
   directives: [
     ProviderComponent1,
-    ProviderComponent3a,
+    ProviderComponent3,
     ProviderComponent4,
     ProviderComponent5,
     ProviderComponent6a,
diff --git a/public/docs/dart/latest/guide/dependency-injection.jade b/public/docs/dart/latest/guide/dependency-injection.jade
index 0f991c5673..aaef0260d9 100644
--- a/public/docs/dart/latest/guide/dependency-injection.jade
+++ b/public/docs/dart/latest/guide/dependency-injection.jade
@@ -43,8 +43,10 @@ block real-logger
       A real implementation would probably use the
       [logging package](https://pub.dartlang.org/packages/logging).
 
-block optional-logger
-  //- TBC.
+block canonical-provider-expr
+  | &nbsp;that creates a new instance of the&nbsp;
+  a(href="../api/core/Provider-class.html") Provider
+  | &nbsp;class:
 
 block provider-ctor-args
   - var _secondParam = 'named parameter, such as <code>useClass</code>' 
@@ -61,7 +63,8 @@ block dart-diff-const-metadata
       Instead, we use constant literals or constant constructors.
       For example, a TypeScript program will use the
       object literal `{ provide: Logger, useClass: BetterLogger }`.
-      A Dart annotation would instead use the constant value `const Provider(Logger, useClass: BetterLogger)`.
+      A Dart annotation would instead use the constant value 
+      `const Provider(Logger, useClass: BetterLogger)`.
 
 block dart-diff-const-metadata-ctor
   .callout.is-helpful
diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade
index 9e5ccf2f7d..94e0ec0111 100644
--- a/public/docs/ts/latest/guide/dependency-injection.jade
+++ b/public/docs/ts/latest/guide/dependency-injection.jade
@@ -518,14 +518,16 @@ code-example(format="nocode").
 
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-1')
 
-:marked
-  This is actually a short-hand expression for a provider registration using the _provider_ object literal.
+p
+  | This is actually a short-hand expression for a provider registration
+  block canonical-provider-expr
+    | &nbsp;using a <i>provider</i> object literal with two properties:
 
-+makeExample('dependency-injection/ts/app/providers.component.ts','providers-3a')
++makeExample('dependency-injection/ts/app/providers.component.ts','providers-3')
 
 block provider-ctor-args
   - var _secondParam = 'provider definition object';
-//- var _secondParam = _docsFor == 'dart' ? 'named parameter, such as <code>useClass</code>' : 'provider definition object';
+
 :marked
   The first is the [token](#token) that serves as the key for both locating a dependency value
   and registering the provider.