Sample Application with Angular 2 and Salesforce REST Services

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.

13 Responses to Sample Application with Angular 2 and Salesforce REST Services

  1. دوربین مداربسته December 19, 2015 at 10:47 am #

    thank you Christophe , great post

  2. Harshit Pandey December 19, 2015 at 5:37 pm #

    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 December 21, 2015 at 4:20 am #

      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).

      • Harshit January 16, 2016 at 7:34 pm #

        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.

  3. Christophe Vidal December 21, 2015 at 4:07 am #

    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/

  4. James Carlos December 22, 2015 at 7:18 am #

    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.

  5. Nimblechapps December 24, 2015 at 5:48 am #

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

  6. çelik raf January 1, 2016 at 2:20 pm #

    happy new years my friends

  7. James Smith February 25, 2016 at 1:54 am #

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

  8. agario March 8, 2016 at 10:08 pm #

    good of nice bloged

  9. unbelievable facts April 24, 2016 at 6:21 am #

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

  10. propchill May 19, 2016 at 7:31 am #

    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

  11. Jitesh Manaktala May 21, 2016 at 6:22 am #

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

Leave a Reply

css.php