This article is Part 3 in a 5-Part series.
- Part 1 - Atomic Design with Patternlab & Angular 2 - part 1
- Part 2 - Atomic Design, Patternlab & Angular 2 - part 2
- Part 3 - This Article
- Part 4 - Atomic Design, Patternlab & Angular 2 - part 4
- Part 5 - Atomic Design, Patternlab & Angular 2 - part 5
Welcome to part 3 of my multi part series on component development with Angular2 & Patterlab. In the last section we looked at configuring Angular2 and transpiling our first component with Typescript. In this section we’ll look at server side module resolution and bundling for use.
NOTE: The results of this section ( Part 3 ) are in this commit
SystemJS is a dependency resolution tool, and shares some similarity to webpack, here I’m installing the
systemjs-builder lib which enables it’s use in
First, issue the following:
Now add the following task to
map section in
builder.config tells SystemJS where to find things referenced in
require statments and the
packages section explicitly grants access to packages that are required and nothing else.
Now run the task from the command line:
This will output a file
source/js/circle.sfx.js. Be warned, this file will be huge, because it includes all the dependencies the Angular 2 Circle component needs to run in the broweser without ( most ) other dependencies.
You now have a working bundle!