feat(aio): refactor DocViewer w/ services component builder (#14294)

Adds basic functionality to fetch documents and display them based on the v42 prototype 

https://github.com/igorMinar/angular-io-v42

angular.io/e2e/app.e2e-spec.ts

@@ -3,6 +3,13 @@ import { SitePage } from './app.po';
 describe('site App', function() {
   let page: SitePage;
 
+  beforeAll(done => {
+    // Hack:  CI has been failing on first test so
+    // buying time by giving the browser a wake-up call.
+    // Todo:  Find and fix the root cause for flakes.
+    new SitePage().navigateTo().then(done);
+  });
+
   beforeEach(() => {
     page = new SitePage();
   });
@@ -16,4 +23,14 @@ describe('site App', function() {
         expect(page.getDocViewerText()).toContain('Progressive web apps');
       });
   });
+
+  it('should convert code-example in pipe.html', () => {
+    page.navigateTo()
+      .then(() => {
+        return page.datePipeLink.click();
+      })
+      .then(() => {
+        expect(page.codeExample.count()).toBeGreaterThan(0, 'should have code-example content');
+      });
+  });
 });

angular.io/e2e/app.po.ts

@@ -2,13 +2,18 @@ import { browser, element, by } from 'protractor';
 
 export class SitePage {
 
-  featureLink = element(by.css('md-toolbar a[aioNavLink=features]'));
+  links = element.all(by.css('md-toolbar a'));
+  datePipeLink = element(by.css('md-toolbar a[aioNavLink="docs/api/common/date-pipe"]'));
+  docViewer = element(by.css('aio-doc-viewer'));
+  codeExample = element.all(by.css('aio-doc-viewer code-example > pre > code'));
+  featureLink = element(by.css('md-toolbar a[aioNavLink="features"]'));
 
   navigateTo() {
     return browser.get('/');
   }
 
   getDocViewerText() {
-    return element(by.css('aio-doc-viewer')).getText();
+    return this.docViewer.getText();
   }
+
 }