This article is Part 2 in a 5-Part series.
- Part 1 - Atomic Design with Patternlab & Angular 2 - part 1
- Part 2 - This Article
- Part 3 - Atomic Design, Patternlab & Angular 2 - part 3
- Part 4 - Atomic Design, Patternlab & Angular 2 - part 4
- Part 5 - Atomic Design, Patternlab & Angular 2 - part 5
Welcome to part 2 of my multi part series on component development with Angular2 & Patterlab. In the first section we looked at configuring typescript, the next section we will look at setting up Angular 2 rc4.
2. Now we want to install Angular2
NOTE: The results of this section ( Part 2 ) are in this commit
rxjs and zone.js are dependencies for @angular/core, rxjs is a ‘reactive’ extension library for building modern reactive apps. zone.js is like thread-local storage for js.
I’ve bundled these npm commands together in order of dependencies.
source/ts/circle.ts and replace it’s contents with the following:
We have replaced the old circle class with a new Angular 2 Component that will render an SVG circle when used. We will come back to this later!
Now, from the command line run:
You should see an error:
"compilerOptions" key of the
Run the task again:
Now you should see the transpiled output in
source/js/circle.js, something like:
Excellent, now we have typescript compiling Angular2 code, but we’re not done yet. See the
var core_1 = require('@angular/core'); line of code in the above? If we were to execute this in a browser in its current form it would error out on this line, complaining that it doesn’t know how to resolve the require or something similar. This takes us on to the third part of this series, dealing with module resolution.
3. System Js
System Js 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 `gulp’.
npm install --save-dev systemjs systemjs-builder
Install all the dependencies