Wednesday, April 27, 2016

Angular 2 and Sitecore Example

Having worked on a number of Sitecore projects which used version 1.x of AngularJS, and with Angular 2 now in beta, I decided to take a look and see how a migration path would be for existing Sitecore sites.

Initial thoughts

  • I was able to get Node.JS (including npm) integration into Visual studio which provided Typescript project templates and had a gulp file compiling the Angular 2 Typescript to ES5 JavaScript.
  • There is a learning curve after using Angular 1.x and not having used Typescript before.
  • Angular 2 appears to have large amounts of JavaScript (file size once compiled and minified) which will affect page load times.
  • It has been built with single page apps in mind, which is how a lot of the demos are structured (using routing for example). 
  • It's still in it's early stages so tooling and error reporting still have some way to come. Features apparent in documentation and example blogs have since been removed.

Setting up the environment

There are a lot of detailed blog posts about doing this, however the quick list of pre-requisites is:
  • Install Visual Studio 2015 - Select Visual C++ features to support Node
  • Install Node 5.x
  • Register Node at the top of External Web Tools in Visual Studio


  • Install Python 2.7.x - this is needed for Node and the C++ compiler
    • Set Python in the windows path
    • Run the command: npm config set python python2.7
    • Run the command: npm config set msvs_version 2015 --global
  • Install this Visual Studio add-on to get npm script support in task runner explorer
  • Install Typescript for Visual Studio
  • Install Node.js tools for Visual Studio - see Node.js npm integration with Visual Studio 2015 for more information

Setting up the solution

I chose to split the Visual Studio solution into two main projects:
  1. Typescript project for the Angular 2 app - this used gulp to compile into JavaScript
  2. A standard web forms project which had user controls which referenced the compiled JavaScript (and standard Angular 2 requirements)
I didn't want to get carried away with the tooling here, but the [future] idea was that the build of the Sitecore web forms project would compile the Angular 2 and clean/deploy it onto the target website, then deploy itself. It's manual deploy right now ;)

The code is available at: Sitecore Angular 2 on Github.



Angular (Ang) Project
The structure is:
  • dist - compiled JavaScript I checked this in (not included in solution) for demo purposes
  • src/app - the TypeScript source
  • gulpfile.ts - can be run from Task Runner Explorer to compile the TypeScript into JavaScript (ES5)
  • package.json - used by Node to define the various npm packages used y the solution
  • tsconfig.json - configuration for the TypeScript and is used for compiliation
To restore the npm packages, right click npm and select Update npm Packages - this will use package.json

To compile the TypeScript, open up the Task Runner Explorer and run the build. This will output it to the dist directory. 



Sitecore (Sc) Project
This one is fairly self explanatory, it contains one layout and two sublayouts. The layout references all of the required JavaScript resources and instantiates the Angular 2 (the script below the body tag). The two sublayouts simply output their Angular 2 components.

In Sitecore
Now it's simply a matter of creating a layout, two sublayouts and then assigning them to a page:


Then the two Angular 2 components as Sitecore sublayouts will appear on the page:


Final thoughts

This exercise was a proof of concept to get Angular 2 working in Sitecore. As Angular 2 is current under development/in beta it's not production ready, however it is a good idea to get a handle on the changes from Angular 1.x. I'll be working with some more advanced concepts in a future blog post.

From what I have seen, the framework is ever improving, and breaking changes are made with each beta release. Many of the code samples online contain broken code, so I would recommend waiting for a more stable state before bringing larger solutions into the fold.

I kept this post brief as to cover a few concepts, feel free to comment below if you have any issues getting setup. Or you have any more discussion points on Angular 2 with Sitecore 8.1.

2 comments:

  1. Why Node 5.x? and why Python 2.7.x? Why not Node 6.x and Python 3.x? Are there compatibility issues?

    ReplyDelete
  2. Hi Bilal,

    No compatibility issues of which I am aware of, however I have only tested with Node 5.x? and why Python 2.7.x - as these are the versions on my dev environment.

    ReplyDelete