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:
- Clone the angular2-salesforce repository:
git clone https://github.com/ccoenraets/angular2-salesforce
- Navigate (cd) to the angular2-salesforce directory.
- Install the dependencies:
npm install
- Start the application:
npm start
- 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:
- Use the ES5 version using a definition file (.d.ts)
- Use the ES6 module version already transpiled with Webpack
- 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.