diff --git a/angular/lib/src/common/directives/ng_if.dart b/angular/lib/src/common/directives/ng_if.dart
index 0ded974d9e..d667d2d351 100644
--- a/angular/lib/src/common/directives/ng_if.dart
+++ b/angular/lib/src/common/directives/ng_if.dart
@@ -10,17 +10,33 @@ import 'package:angular/src/core/linker/app_view_utils.dart';
 ///
 /// ### Examples
 ///
-/// <?code-excerpt "docs/template-syntax/lib/app_component.html (NgIf-1)"?>
+/// <?code-excerpt "examples/hacker_news_pwa/lib/src/item_detail_component.html"?>
 /// ```html
-/// <hero-detail *ngIf="isActive"></hero-detail>
+/// <!-- Loading view -->
+/// <div *ngIf="item == null" class="notice">Loading...</div>
+///
+/// <!-- Loaded view -->
+/// <template [ngIf]="item != null">
+///   <item [item]="item"></item>
+///   <div *ngIf="item['comments'].isEmpty">There are no comments yet.</div>
+///   <comment
+///       *ngFor="let comment of item['comments']"
+///       [comment]="comment">
+///   </comment>
+/// </template>
+/// ```
+///
+/// <?code-excerpt "packages/template_syntax/app_component.html (NgIf-1)"?>
+/// ```html
+/// <my-hero *ngIf="isActive"></my-hero>
 /// ```
 ///
-/// <?code-excerpt "docs/structural-directives/lib/app_component.html (asterisk)"?>
+/// <?code-excerpt "packages/structural_directives/app_component.html (asterisk)"?>
 /// ```html
 /// <div *ngIf="hero != null" >{{hero.name}}</div>
 /// ```
 ///
-/// <?code-excerpt "docs/structural-directives/lib/app_component.html (ngif-template)"?>
+/// <?code-excerpt "packages/structural_directives/app_component.html (ngif-template)"?>
 /// ```html
 /// <template [ngIf]="hero != null">
 ///   <div>{{hero.name}}</div>
diff --git a/angular_forms/lib/src/directives/ng_model.dart b/angular_forms/lib/src/directives/ng_model.dart
index 453eabfa11..2d8acef4b8 100644
--- a/angular_forms/lib/src/directives/ng_model.dart
+++ b/angular_forms/lib/src/directives/ng_model.dart
@@ -30,14 +30,14 @@ import 'shared.dart' show setUpControl;
 ///
 /// ### Examples
 ///
-/// <?code-excerpt "docs/template-syntax/lib/app_component.html (NgModel-1)"?>
+/// <?code-excerpt "packages/template_syntax/app_component.html (NgModel-1)"?>
 /// ```html
 /// <input [(ngModel)]="currentHero.name">
 /// ```
 ///
 /// This is equivalent to having separate bindings:
 ///
-/// <?code-excerpt "docs/template-syntax/lib/app_component.html (NgModel-3)"?>
+/// <?code-excerpt "packages/template_syntax/app_component.html (NgModel-3)"?>
 /// ```html
 /// <input
 ///   [ngModel]="currentHero.name"
diff --git a/build.excerpt.yaml b/build.excerpt.yaml
new file mode 100644
index 0000000000..ef5af06c57
--- /dev/null
+++ b/build.excerpt.yaml
@@ -0,0 +1,11 @@
+targets:
+  $default:
+    sources:
+      include:
+        - examples/**
+      exclude:
+        - '**/.*/**'
+        - '**/build/**'
+    builders:
+      code_excerpter|code_excerpter:
+        enabled: true
diff --git a/pubspec.yaml b/pubspec.yaml
index d58a74f351..f0a00183c7 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -5,5 +5,24 @@
 name: repository
 
 dev_dependencies:
+  build_runner: any
+  code_excerpter:
+    git: https://github.com/chalin/code_excerpter.git
+  code_excerpt_updater:
+    git: https://github.com/chalin/code_excerpt_updater.git
   dev:
     path: dev
+
+  # Source of some of the code examples
+  structural_directives:
+    git:
+      url: https://github.com/dart-lang/site-webdev.git
+      path: examples/ng/doc/structural-directives
+  template_syntax:
+    git:
+      url: https://github.com/dart-lang/site-webdev.git
+      path: examples/ng/doc/template-syntax
+  pipes:
+    git:
+      url: https://github.com/dart-lang/site-webdev.git
+      path: examples/ng/api/common/pipes