[SalesForce] Cannot find module ‘forcejs’. while using angular 2 in ionic 2

I am working as a noob on my ionic 2 / ang 2 application. I am trying to set it up to use forcejs auth implementation.

Now I create a basic app following the ionic 2 tutorial here – http://ionicframework.com/docs/v2/getting-started/tutorial/

Now I am trying to integrate my force js implementation based on – http://coenraets.org/blog/2015/10/integrating-ecmascript-6-web-applications-with-salesforce-using-oauth-and-rest/

Now on app initialization I want to login using SF dev creds and Oauth.

I did a forcejs install using 

npm install forcejs --save-dev

And in my app.ts file I am trying to import same. App.ts – 

import {Component, ViewChild} from '@angular/core';
import {ionicBootstrap, Platform, MenuController, Nav} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HelloIonicPage} from './pages/hello-ionic/hello-ionic';
import {ListPage} from './pages/list/list';

//ERROR on this line - TypeScript error: app/app.ts(7,24): Error TS2307: Cannot find module 'forcejs'
// wbile doing a gulp build
import * as force from 'forcejs';


@Component({
  templateUrl: 'build/app.html'
})
class MyApp {
  @ViewChild(Nav) nav: Nav;

  // make HelloIonicPage the root (or first) page
  rootPage: any = HelloIonicPage;
  pages: Array<{title: string, component: any}>;

  constructor(
    private platform: Platform,
    private menu: MenuController
  ) {
    this.initializeApp();

    // set our app's pages
    this.pages = [
      { title: 'Hello Ionic', component: HelloIonicPage },
      { title: 'My First List', component: ListPage }
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

      // Login in Salesforce using forcejs
      force.init({
          proxyURL: "https://dev-cors-proxy.herokuapp.com/"
      });

      force.login().then(() => {
          console.log("logged in");
      });

      StatusBar.styleDefault();
    });
  }

  openPage(page) {
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    this.nav.setRoot(page.component);
  }
}

ionicBootstrap(MyApp);

Now check top of the page for imports

TypeScript error: app/app.ts(7,24): Error TS2307: Cannot find module
'forcejs'

I can see forcejs under node_modules folder but not sure now how to import same.

Please help with same.

Best Answer

Finally I was able to solve this.

For now - we can use relative path of ES6 .ts files to be used as import modules in app.js. I moved the force ts file to local app.js folder.Structure -

enter image description here

After adding the ts file successfully, there were still issues around building the app using gulp.

Because TS files are considered as superset of js files but there are lot of differences when it comes to syntax an rules. So after changing lot of syntax and research, it got solved.

Once I was able to make sure my app.ts file was able to identify the forcejs file I started working on the issues where code base like

window.cordova

was not getting identified by gulp build. so to solve that I changed

window.cordava to be like window["cordova"] so as to resolve typescript related compilation errors.

Finally after changing the actual forcejs file, and successful compilation it started working properly with ionic 2 / Angular 2 and forcejs auth with Salesforce.

Related Topic