Sample Application with Angular 2 and Salesforce REST Services

December 18, 2015 in AngularJS, ECMAScript 6, TypeScript

The beta version of Angular 2 was released earlier this week. Check out the announcement blog post here.

The Hero Editor tutorial is a great place to start. You can write Angular 2 apps with TypeScript, plain JavaScript, or Dart, and a version of the tutorial is available for each option. I chose TypeScript which seems to be the new default in the Angular community. The Hero Editor tutorial currently works with a hardcoded list of heroes. As an experiment, I decided to replace the hardcoded list with real data: I used the Salesforce REST APIs to work with a simple list of contacts. I also tweaked a few styles.

Source Code

The source code for the application is available in this repository.

To install and run the app:

  1. Clone the angular2-salesforce repository: 
    git clone https://github.com/ccoenraets/angular2-salesforce
  2. Navigate (cd) to the angular2-salesforce directory.
  3. Install the dependencies: 
    npm install
  4. Start the application: 
    npm start
  5. Enter your salesforce userid and password.
If you don’t have a Salesforce account to run this application, you can sign up for a free developer account here. It takes less than a minute.

ECMAScript 6 Module Interoperability

I used the forcejs OAuth and REST library for the Salesforce integration. I currently maintain forcejs as a plain ES5 library and as an ECMAScript 6 module. The best way to use/import that existing library in my TypeScript application was not immediately obvious to me. I considered different options:

  1. Use the ES5 version using a definition file (.d.ts)
  2. Use the ES6 module version already transpiled with Webpack
  3. Use the ES6 version as a TypeScript source file

Ideally, I’d like to maintain a single forcejs code base that can be used as a module in a plain ECMAScript 6 app or in a TypeScript app, which is why I initially chose the second option. I ran into some issues and eventually used the third option after making some quick changes to the source code to avoid some type-related compilation warnings. Any further insight from TypeScript folks is appreciated.

  • thank you Christophe , great post

  • I have been playing with Angular2, React and webpacks for quite some time. I just want to know, does Salesforce have any roadmap to provide transpiler for Typescript. Bigger question is, how do we use typescript in existing salesforce pages (native to platform)

    • Christophe Vidal

      Salesforce is probably too busy at reinventing the wheel with Aura/Lightning while breaking ES6 standards to take care about things like that…
      This being said, you probably don’t want to put your JS/TS straight in a VF page, but instead in a zip static resource, in structured dir/files. Hence you can just compile your ts files locally instead, zip the result and upload to SFDC (MavensMate automates many steps for you).

      • Christophe, that what I am doing but honestly I am not super impressed with Aura beside encapsulating spreaded piece, it doesn’t do much for and readability is not as great as React. Also, usage of VirtualDOM react diff algo are backbone of React while Aura fail to offer those key powerful feature. I agree it is evolving but long long way to to go.

        • VM

          Hey Harshit,

          Did you try to put angular2 app in VF… If yes then can you please let me know any limitations you faced while doing?

  • Christophe Vidal

    Well, option 3 feels like the natural choice in regards of simplicity. I found last time an article which is relatively clear on the different options to work with typescript: http://www.jbrantly.com/typescript-and-webpack/

  • James Carlos

    Informative blog… Qtriangle InfoTech is a mobile application development company India provides all types of app for any iphone and android. It uses latest techniques for application advancement.

  • It is a really an instructive peace of article. I love working in Angular. You have nicely covered everything.

  • happy new years my friends

  • This article really helps me to get the idea about angular. Thanks for sharing a source code i really appriciate your work.

  • good of nice bloged

  • that is good and it is very simple to try, always learning something new from you.

  • Preferably a purchaser of Pune private property can thump the entryways of the court in the event that they are not given auspicious ownership. The manufacturers of private properties in Pune dread that in spite of finishing all the work on time they may confront purchasers and customer courts rage. Numerous individuals who have put resources into the range because of sensible property rates in Pune may likewise feel tricked as they are not getting the guaranteed fundamental offices.
    Affordable apartments in Mumbai

  • I must say that your post is fantastic. Thanks for sharing with us.

  • xicicora

    I followed your instruction and had it set up on my computer, but when I tried to run it I only saw “Loading…”. Did I do miss something?

  • Thanks, for sharing this great information with us. These tips are helpful and it is very simple to try. I will surely recommend these tips to all web designers going through “Angular”. http://jrwebmd.com

  • Vicky Rathore

    We have found awesome sample of application with Angular 2. Your post is very helpful, Thanks for sharing : http://internetmarketingupdates.weebly.com

  • Bilal N. Ajam

    Thank you for your very helpful article.
    Consequently, how can we run the app from a vf page.
    Thank you!

css.php