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.

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

        • VM April 27, 2017 at 5:56 pm #

          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?

  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.

  12. xicicora July 6, 2016 at 12:33 pm #

    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?

  13. James Parker July 16, 2016 at 7:53 am #

    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

  14. Vicky Rathore October 5, 2016 at 6:54 am #

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

  15. Bilal N. Ajam November 26, 2016 at 4:09 pm #

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

  16. Cinphe January 15, 2018 at 12:12 pm #

    Nice Post Thanks For Sharing!

  17. Ipad Hire February 21, 2018 at 5:30 am #

    Such a great post to know different useful information.

  18. CIIT Noida April 21, 2018 at 2:32 am #

    Really appreciate you sharing this blog.Really looking forward to read more. Much obliged.

    Hadoop Training Institute in Noida

  19. CIIT Noida April 25, 2018 at 2:44 am #

    You have share the great info. I like your post. Thanks for sharing

    Best B.Tech College in Noida

  20. Devesh Agarwal (IN) April 30, 2018 at 9:40 am #

    I want to call the salesforce login at a different point in my app. This is after 3-4 pages. My app is using Angular 2 and Ionic. Can you please help me on how to achieve this? On calling the login function in oauth later, I get the following error:

    TIMING com.salesforce.oauth:getAuthCredentials failed

  21. tiara tech June 11, 2018 at 6:14 am #

    This article has covered so many topics that are helpful for mobile app development,
    visitmobile-app-development for more new ideas, we are thankful for this article.

  22. alsen alse November 21, 2018 at 8:47 am #

    Everybody can learn lots of ideas from here. Really nice blog.

    freelance web designer dubai

  23. saadashraf January 15, 2019 at 12:25 am #

    Salesforce Rest API is really good!

    web designer in dubai

    web designer dubai

    freelance web designer in dubai

  24. mistersaad January 15, 2019 at 12:28 am #

    Thanks for sharing such an interesting and helpful article!

    mobile app developer in dubai
    mobile app developer dubai
    mobile app developers dubai

  25. McCollins Media January 21, 2019 at 11:09 am #

    Its very helpfull article for the one who is just starting.
    social media agency in Dubai
    social media marketing company uae
    Social media advertising

  26. Pioneer Mea January 21, 2019 at 12:28 pm #

    salesforce havent used yet, but now understood clearly thanks.

    Pioneer subwoofer
    Car audio system Dubai
    Car sound system Dubai

  27. Mint Event Rental January 21, 2019 at 12:56 pm #

    Like your post, thanks for sharing it.
    Furniture Rental in Dubai
    Event Rentals Dubai
    Party Furniture Rentals Dubai

  28. athi syam March 9, 2019 at 10:01 am #

    Nice blog and thanks for sharing it.
    interior design consultants dubai
    Interior companies in dubai

  29. athi syam March 17, 2019 at 10:18 am #

    Thanks for sharing
    commercial fit out company in dubai
    commercial fit out company in dubai

  30. Tahid uzun April 10, 2019 at 8:06 am #

    Hi
    Thanks for sharing this useful information and also you are the excellent effort to making the interesting article. also Get in Touch Our Web Design Service In Dubai.

  31. Yes Machinery May 7, 2019 at 1:57 am #

    Amazing Post, Thank you for sharing this post really this is awesome and very useful

    Work station in uae

    Kanban in uae

    Light rail system uae

  32. Sachlo Riyadh May 15, 2019 at 6:24 am #

    Quite an informative article, things are very open and intensely clear.Really very useful tips are provided here.

    Liquid Chlorine Supplier Saudi Arabia

    Caustic Soda Flakes Supplier Saudi Arabia

    Hydro Chloric Acid Supplier Saudi Arabia

  33. elanat classified June 19, 2019 at 3:51 pm #

    Thanks for the useful article.

    Dubai Classifieds
    UAE Classifieds
    Free Classifieds in Dubai
    Classifieds ads in Dubai

  34. SEO Matrix Web Studio June 21, 2019 at 7:20 am #

    Quiet informative article. Anyone can use beta version of Angular 2 with this helpful blog.
    Hire a professional designer agency in Delhi and grow your business.
    web designing company in delhi
    best web development company in delhi
    website development company in delhi
    web designing services delhi

  35. nila printing July 23, 2019 at 3:49 pm #

    Thanks for sharing…

    Printing Company in Dubai
    Printing Services in Dubai
    Brochure Design Dubai

  36. XICOM TECHNOLOGIES Dubai September 3, 2019 at 5:15 am #

    Nice post Thanks for sharing!!! <a href="https://www.xicom.ae/services/mobile-app-development/

    “>app development companies in dubai

  37. Abdul Haseeb Khaleefa January 10, 2020 at 8:30 am #

    The integration is surprisingly simple. Thanks for sharing.
    http://www.webreacts.com

  38. IT Plus January 18, 2020 at 9:39 am #

    Thanks for sharing. We at IT Plus, one of the best web design company in Dubai look forward to use it.

  39. Kristy Hill February 24, 2020 at 5:21 am #

    Thanks for sharing such a useful information.
    Software Companies in Dubai

  40. Victoria James March 9, 2020 at 2:03 am #

    This software lets you decide and create your own workflows, on boarding schedules or performance review templates and appraisal schedules, plus your own reporting structure. This is the software that looks like your own.hr system dubai

  41. IT Plus March 18, 2020 at 10:02 am #

    Thanks for sharing. We at IT Plus, one of the best web design company in Dubai look forward to use it.

  42. SEO Guys April 1, 2020 at 5:50 am #

    Nice article. I am working as a developer at SEO Guys

  43. Faraji Trading April 3, 2020 at 1:26 am #

    Everybody can learn lots of ideas from here. Really nice blog.dubai oil

  44. Aliza Davis April 4, 2020 at 1:21 am #

    Everybody can learn lots of ideas from here. Really nice blog.Furnished Offices near to Dubai Mall & Burj Khalifa

  45. Sandy Bayne April 16, 2020 at 3:24 pm #

    Thanks for sharing the valuable information. I am Link-building expert at Chasein Digital Marketing Agency

  46. Pallet UAE May 5, 2020 at 2:13 am #

    great post with useful contents. Thanks for sharing this with us. keep posting

    Pallets Abu Dhabi

  47. Website Designer May 16, 2020 at 10:45 am #

    Thank you sharing great information. We are website design company in ahmedabad and use salesforce from last 3 year. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!
    website development company in ahmedabad for startup business

  48. RedspiderAgency May 30, 2020 at 5:19 am #

    great blog

  49. royextec June 20, 2020 at 8:45 am #

    Awesome Post. Thanks for sharing such useful Post.

    Mobile App Development Company in Dubai

  50. Lisa Watson June 29, 2020 at 1:52 pm #

    We are providing the best quality of work. Our staff is highly trained and have loads of experience.We provide all excavation, and underground utility services. We also service lines for all wet utilities.https://www.greenfieldservicesinc.com/oil-water-separator

  51. Alisajohnson August 7, 2020 at 6:22 am #

    Nice

    http://seoprismatic.com/

  52. iBrandox Online Pvt Ltd October 19, 2020 at 1:56 am #

    With the advancement in web technology, you will find many beautifully designed and efficiently run websites. On the other hand, despite all the technology in the world and so many web developers around, there are still plenty of bad websites. The fact is not every web designing company is the best web designing company in Delhi India like iBrandox. iBrandox Online Pvt. Ltd. is an innovative agency is your go to place for any web design & development services in India.

  53. Doc Genie October 19, 2020 at 4:17 am #

    DocGenie is one of the best telemedicine apps in India. We Provide online doctor consultation, video chat, Telehealth, appointments for doctors and hospitals in India.

  54. Luxury Rehab Finder October 19, 2020 at 6:25 am #

    We are one of India’s leading rehabs center in Gurgaon listing sites. Here to get you the best drug and alcohol addiction rehabilitation treatment centers in Gurgaon.

  55. Mahira Homes October 20, 2020 at 2:55 am #

    Mahira Homes is a new and much awaited affordable housing project in Gurgaon by Mahira Group coming up with a perfect place for your abode, situated in Upcoming Housing Projects.

  56. Reward Eagle October 20, 2020 at 7:45 am #

    At RewardEagle you can get free Beauty & makeup discount coupon codes, cosmetics deals, and promo codes for your online Beauty orders at hundreds of stores.

  57. H Barman November 30, 2020 at 10:37 am #

    Thanks for sharing such useful Post. Read Jobassam
    The Hindu Newspaper PDF

  58. tomato sale December 4, 2020 at 2:11 am #

    Excellent article

    Dubai shopping festival offers

  59. Caroline Ann Maria December 8, 2020 at 2:56 am #

    Great article …. Thanks for sharing.

    Mobile app development company in Dubai

  60. yuvaraj singh December 22, 2020 at 6:22 am #

    Thanks for sharing this informative content
    Leanpitch provides online training in Devops coaching during this lockdown period everyone can use it wisely.
    Devops Online Training

  61. Puminati Digital December 23, 2020 at 3:35 am #

    Thank you sharing great information. We are website design company in Haldwani and provides Digital marketing services. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!

  62. Perkminds December 26, 2020 at 2:33 am #

    Thanks for Sharing Such a amazing post. I loved the content.
    Website Designing Company In India

  63. yuvaraj singh January 8, 2021 at 4:16 am #

    Thanks for sharing this informative content .,GREAT WORK
    Leanpitch provides online training in Scrum Master during this lockdown period everyone can use it wisely.
    Join Leanpitch 2 Days CSM Certification Workshop in different cities.

    CSM certification online

    CSM online

    CSM online certification

    Scrum master certification online

    CSM online training

  64. Safari Oil and Gas January 28, 2021 at 11:53 pm #

    Enjoyed reading the article above , really explains everything in detail, the article is very interesting and effective.

    Protective Coatings For Oil And Gas Pipeliness

    Weld Overlay Companies Saudi Arabia

    Strengthening Reinforced Concrete Beams Using Fiber Glass Composite

  65. Aarush January 30, 2021 at 1:22 am #

    Really Informative post for the beginners i am sure it will help so many freshers Thanks For Sharing
    Visit : https://www.buildmyrebusiness.com/

  66. teccodd February 20, 2021 at 6:55 am #

    Very informative . The best mobile app development company in the uae (https://www.teccodd.com).

  67. Simone Sam March 2, 2021 at 1:32 am #

    Thanks for sharing this informative content
    mobile app development company Dubai
    Hire Ecommerce Developer
    Ecommerce Companies in Dubai

  68. tomato sale March 3, 2021 at 4:00 am #

    So much goodness here! I think I’ll have to read through this a few times so I don’t miss anything… Thanks for sharing!

    Bridal makeup packages in Ernakulam

  69. Muhammad Gulfam March 8, 2021 at 6:14 am #

    Thanks dear admin, I appreciate your effort, you have quality content on your website,
    I have bookmarked for future pursue. Keep it up Truly decent and intriguing post. I was searching for this type of information and delighted in perusing this one.
    Continue posting. A debt of gratitude is in order for sharing
    Usually, I never comment on blogs but your article is so convincing that I never stop myself to say something about it. You’re doing a great job Man, Keep it up. very interesting, good job and thanks for sharing such a good blog. checkout this link

  70. Safari Oil and Gas March 23, 2021 at 4:44 am #

    Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this.
    Intervension & Pipe Insulation Services Saudi Arabia

  71. napollo March 25, 2021 at 12:34 am #

    Really nice blog.

    Best Software Development Agency Dubai UAE

Leave a Reply

css.php