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.

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.