diff --git a/aio/content/examples/elements/src/app/app.component.ts b/aio/content/examples/elements/src/app/app.component.ts
index 2ef51e0ebe..2e7fb600f8 100644
--- a/aio/content/examples/elements/src/app/app.component.ts
+++ b/aio/content/examples/elements/src/app/app.component.ts
@@ -1,6 +1,5 @@
-// #docregion
 import { Component, Injector } from '@angular/core';
-import { createNgElementConstructor } from '../elements-dist';
+import { createCustomElement } from '@angular/elements';
 import { PopupService } from './popup.service';
 import { PopupComponent } from './popup.component';
 
@@ -15,7 +14,7 @@ import { PopupComponent } from './popup.component';
 export class AppComponent {
   constructor(injector: Injector, public popup: PopupService) {
     // Convert `PopupComponent` to a custom element.
-    const PopupElement = createNgElementConstructor(PopupComponent, {injector});
+    const PopupElement = createCustomElement(PopupComponent, {injector});
     // Register the custom element with the browser.
     customElements.define('popup-element', PopupElement);
   }
diff --git a/aio/content/examples/elements/src/app/app.module.ts b/aio/content/examples/elements/src/app/app.module.ts
index 3b78fa6951..f273e77b14 100644
--- a/aio/content/examples/elements/src/app/app.module.ts
+++ b/aio/content/examples/elements/src/app/app.module.ts
@@ -1,4 +1,3 @@
-// #docregion
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
diff --git a/aio/content/examples/elements/src/app/popup.component.ts b/aio/content/examples/elements/src/app/popup.component.ts
index cc8f9610a7..6fee4ef8c1 100644
--- a/aio/content/examples/elements/src/app/popup.component.ts
+++ b/aio/content/examples/elements/src/app/popup.component.ts
@@ -1,4 +1,3 @@
-// #docregion
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 
diff --git a/aio/content/examples/elements/src/app/popup.service.ts b/aio/content/examples/elements/src/app/popup.service.ts
index 0c44615e84..11cd98ec1f 100644
--- a/aio/content/examples/elements/src/app/popup.service.ts
+++ b/aio/content/examples/elements/src/app/popup.service.ts
@@ -1,9 +1,8 @@
 
-// #docregion
 import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
-
+import { NgElement, WithProperties } from '@angular/elements';
 import { PopupComponent } from './popup.component';
-import { NgElementConstructor } from '../elements-dist';
+
 
 @Injectable()
 export class PopupService {
@@ -40,7 +39,7 @@ export class PopupService {
   // This uses the new custom-element method to add the popup to the DOM.
   showAsElement(message: string) {
     // Create element
-    const popupEl = document.createElement('popup-element');
+    const popupEl: NgElement & WithProperties<PopupComponent> = document.createElement('popup-element') as any;
 
     // Listen to the close event
     popupEl.addEventListener('closed', () => document.body.removeChild(popupEl));
diff --git a/aio/content/examples/elements/src/main.ts b/aio/content/examples/elements/src/main.ts
new file mode 100644
index 0000000000..a9ca1caf8c
--- /dev/null
+++ b/aio/content/examples/elements/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/tools/examples/shared/package.json b/aio/tools/examples/shared/package.json
index 1b74fa4af6..1d0bdbc183 100644
--- a/aio/tools/examples/shared/package.json
+++ b/aio/tools/examples/shared/package.json
@@ -22,6 +22,7 @@
     "@angular/common": "^6.0.0",
     "@angular/compiler": "^6.0.0",
     "@angular/core": "^6.0.0",
+    "@angular/elements": "^6.0.0",
     "@angular/forms": "^6.0.0",
     "@angular/http": "^6.0.0",
     "@angular/platform-browser": "^6.0.0",
diff --git a/aio/tools/examples/shared/yarn.lock b/aio/tools/examples/shared/yarn.lock
index 3313b5b4fb..96143da810 100644
--- a/aio/tools/examples/shared/yarn.lock
+++ b/aio/tools/examples/shared/yarn.lock
@@ -140,6 +140,12 @@
   dependencies:
     tslib "^1.9.0"
 
+"@angular/elements@^6.0.0":
+  version "6.0.9"
+  resolved "https://registry.yarnpkg.com/@angular/elements/-/elements-6.0.9.tgz#6c238632631fa545f4893db8b48a4e89b2a277b2"
+  dependencies:
+    tslib "^1.9.0"
+
 "@angular/forms@^6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-6.0.0.tgz#436e2df39dc57db124da5a5c02bc63909fdf7046"