docs(cb-third-party-lib) create a third party lib

s

s

s

s

s

c

s

c

s

s

s

s

s

s

s

s

s

s

s

s

s

s

s

s

s

s

s

s

s

s

s

s

s

Author: thelgevold

gulpfile.js

@@ -51,6 +51,8 @@ var regularPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/regularPl
 var embeddedPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/embeddedPlunker'));
 var fsUtils = require(path.resolve(TOOLS_PATH, 'fs-utils/fsUtils'));
 
+var publish = require(path.resolve(EXAMPLES_PATH + '/cb-third-party-lib/hero-profile/publish'));
+
 const WWW = argv.page ? 'www-pages' : 'www'
 
 const isSilent = !!argv.silent;
@@ -464,7 +466,9 @@ gulp.task('add-example-boilerplate', function(done) {
     fsUtils.addSymlink(realPath, linkPath);
   });
 
-  return buildStyles(copyExampleBoilerplate, done);
+  publish().then(function(){
+    return buildStyles(copyExampleBoilerplate, done);
+  });
 });
 
 

public/docs/_examples/_boilerplate/package.json

@@ -18,6 +18,7 @@
     "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
     "build:cli": "ng build",
     "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+    "build:aot:jit": "npm run build:aot && npm run tsc",
     "copy-dist-files": "node ./copy-dist-files.js",
     "i18n": "ng-xi18n"
   },

public/docs/_examples/_boilerplate/systemjs.config.js

@@ -26,7 +26,8 @@
 
       // other libraries
       'rxjs':                      'npm:rxjs',
-      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
+      'hero-profile': 'npm:hero-profile/bundles/hero-profile.umd.js'
     },
     // packages tells the System loader how to load when no filename and/or no extension
     packages: {

public/docs/_examples/_boilerplate/tsconfig.json

@@ -16,6 +16,7 @@
   "compileOnSave": true,
   "exclude": [
     "node_modules/*",
-    "**/*-aot.ts"
+    "**/*-aot.ts",
+    "app-aot"
   ]
 }

public/docs/_examples/cb-third-party-lib/.gitignore

@@ -0,0 +1,9 @@
+**/*.ngfactory.ts
+**/*.metadata.json
+**/*.css.shim.ts
+*.js
+!/hero-profile/rollup-config.js
+!/hero-profile/publish.js
+!/hero-profile/inline-resources.js
+!/hero-profile/package.json
+!ts/rollup-config.js

public/docs/_examples/cb-third-party-lib/e2e-spec.ts

@@ -0,0 +1,22 @@
+'use strict'; // necessary for es6 output in node 
+
+import { browser, element, by } from 'protractor';
+
+describe('Third Party Lib Cookbook', function () {
+
+  let expectedMsgAoT = 'Library consumed by AoT application';
+  let expectedMsgJiT = 'Library consumed by JiT application';
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it(`should load AoT compiled version`, function () {
+    expect(element(by.css('.aot')).getText()).toEqual(expectedMsgAoT);
+  });
+
+  it('should load JiT compiled version', function () {
+    expect(element(by.css('.jit')).getText()).toEqual(expectedMsgJiT);
+  });
+
+});

public/docs/_examples/cb-third-party-lib/hero-profile/hero-profile.component.css

@@ -0,0 +1,6 @@
+/*#docregion*/
+.bio {
+  border: 1px solid black;
+  padding: 10px;
+  width: 300px; 
+}

public/docs/_examples/cb-third-party-lib/hero-profile/hero-profile.component.html

@@ -0,0 +1,7 @@
+<!--#docregion-->
+<div class="bio">
+  <h1>Featured Hero</h1>
+
+  <h3>{{hero.name}}</h3>
+  <div>{{hero.bio}}</div>
+</div>

public/docs/_examples/cb-third-party-lib/hero-profile/hero-profile.component.ts

@@ -0,0 +1,14 @@
+// #docregion
+import { Component, Input } from '@angular/core';
+
+import { Hero } from './hero';
+
+@Component({
+  moduleId: module.id,
+  selector: 'hero-profile',
+  templateUrl: 'hero-profile.component.html',
+  styleUrls: ['hero-profile.component.css']
+})
+export class HeroProfileComponent {
+  @Input() hero: Hero;
+}

public/docs/_examples/cb-third-party-lib/hero-profile/hero-profile.module.ts

@@ -0,0 +1,12 @@
+// #docregion
+import { NgModule } from '@angular/core';
+
+import { HeroProfileComponent } from './hero-profile.component';
+
+@NgModule({
+  declarations: [HeroProfileComponent],
+  exports: [HeroProfileComponent]
+})
+export class HeroProfileModule {
+
+}