This article is Part 4 in a 5-Part series.

Welcome to part 4 of my multi part series on component development with Angular2 & Patterlab. In the last section we looked at configuring SystemJS and bundling our code. In this section we’ll look at bootstrapping our component into Patternlab.

4. Bootstrapping with dependencies

NOTE: The results of this section ( Part 4 ) are in this commit

First, issue the following:

npm install core-js reflect-metadata --save

Then copy the relevant files:-

cp node_modules/reflect-metadata/Reflect.js source/js
cp node_modules/zone.js/dist/zone.min.js source/js
cp node_modules/core-js/client/shim.min.js source/js

Now add the following lines to source/_meta/_00-head.mustache

    <script src="../../js/shim.min.js"></script>
    <script src="../../js/zone.js"></script>
    <script src="../../js/Reflect.js"></script>

There’s probably a more elegant way to do this, which I am open to suggestion on.

Now edit `source/ts/circle.ts’ so it reads like so:

import {Component} from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';

    selector: '[circle]',
	template: `<svg:circle [attr.fill]="fill" []="cx" []="cy" [attr.r]="r" [attr.stroke]="stroke" [attr.opacity]="opacity" />`

export class Circle {
  cx:number = 30;
  cy:number = 30;
  r:number = 29;
  opacity:number = 1.0;
  stroke:string = 'black';
  fill:string = 'darkred';


Now edit the gulpfile.js so that the pl-systemjs tasks packages section also has the following packages:-

'@angular/common' : { main: 'index.js' },
'@angular/compiler' : { main: 'index.js' },
'@angular/platform-browser' : { main: 'index.js' },
'@angular/platform-browser-dynamic' : { main: 'index.js' },

Additionally, modify the existing tasks pl-assets and add our new tasks so it reads:

gulp.task('pl-assets', gulp.series(

Note that I added our tasks before the parallel section.

Also modify the function watch() function so it watches for typescript changes:-

function watch() {, '**/*.ts')).on('change', gulp.series('pl-typescript', 'pl-systemjs','pl-copy:js', reload));

Now add the following lines to source/_meta/_01-foot.mustache:

  <!-- render after content due to this - -->
  <script src="../../js/circle.sfx.js"></script>

And that’s it, you should now have fully functional Angular with Patternlab!