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.

css.php