This article is Part 1 in a 5-Part series.
Welcome to part one of my multi part series on component development with Angular 2 & Patternlab Node. With web components becoming all the rage and component based frontend frameworks taking up the reigns of frontend development. I thought I’d take a look at mixing some great open source tools that will enable you to build better components more collaboratively than ever.
If you just want see/run the code for this series, you can clone it from my Github Repo
rc.4version for the rest of this series.
CAUTION!Angular 2 is still beta software so caution is advised, it’s implementation could change at any moment! Please stay locked to
rc.4for this series.
- Unix command line
- You’ll need the Nodejs edition of Patternlab, which you can download here.
1. Set up Typescript.
NOTE: The results of this section ( Part 1 ) are in this commit
From a terminal cd into the
edition-node-gulp folder you just downloaded.
Now edit the
.gitignore file and add a line with
typings/, if you plan on commiting this to git this is advisable.
Angular2 leverages Typescript for a multitude of reasons ( which I’m not going to go into in this post ), to get it set up issue the following command lines:
Now edit the
packages.json file and add the following just before the last parenthesis:
patternlab-config.json file at the root of the project add
"ts" : "./source/ts" after the
"js" key, under the
"source" key. the file should now look like (excluding ellipses):
Now, edit the
gulpfile.js at the root of the project: We need to require some files:
And ( in the same file ) add a gulp task for transpiling typescript …
This sets up typescript as we need it.
Now we want to test transpiling some typescript.
And you should now have a transpiled file js at:
source/js/circle.js, the contents of which should look a bit like:
Congratulations! You can haz Typescript and Patternlab! Tune in for part two to follow shortly!