Is it possible to generate services for Angular2 from Loopback?

Question

Here is documentation about AngularJS JavaScript SDK

This example works perfect for Angular. It is possible to generate Angular client library with command

$ lb-ng ../server/server.js js/lb-services.js

Does exist same easy way to use Angular2 with Loopback?

EDIT

What I found on this theme currently.

1. Issue in loopback-sdk-angular Github repository with discussion.
2. Example of realisation: BaseResource and Model mased on BaseResource.
3. And another way - using upgrade from Angular to Angular2 until the official implemntation of Loopback Angular 2 SDK.
4. I have done alpha version of code generator for Angular 2 in fork of loopback-sdk-angular.

EDIT

5. Loopback-sdk-builder (comment)

Hearsh

Answer 1

At this moment you may use fork of loopback-sdk-angular and loopback-sdk-angular-cli packages.

package.json:

"devDependencies": {
  //...
  "loopback-sdk-angular": "github:qeti/loopback-sdk-angular#188-angular2-support",
  "loopback-sdk-angular-cli": "github:qeti/loopback-sdk-angular-cli#37-angular2-support"
}

Generate client code (TypeScript):

./node_modules/.bin/lb-ng ./server/server.js ./client/src/app/lb-services.ts -l angular2

Example of usage:

import {Component,Injectable} from 'angular2/core';
import {UserApi as UserService} from './lb-services';
import {HTTP_PROVIDERS} from 'angular2/http';

@Component({
  selector: 'my-app',
  providers: [UserService,HTTP_PROVIDERS],
  template: 'some template'
})

@Injectable()
export class AppComponent {

  private login: string;
  private password: string;

  constructor(protected user: UserService) {}

  onLogin() {
    let self = this;
    // Example 1
    this.user.login({
      username: self.login,
      password: self.password
    })
    .subscribe(res => {
      // some actions on login
      this.getData();
    });
  }

  onLogout() {
    // Example 2
    this.user.logout().subscribe(() => {
      // some actions on logout
    });
  }

  public getData() {
    // Example 3
    this.user.count().subscribe((response: any) => {
      let lastRow = response.count;

      let data = this.user
        // Example 4
        .find({
          offset: 0,
          limit: 100
        })
        .subscribe(function(response: any) {
          // Process response
        });
    });
  }
}

Hearsh

I am getting the following exception EXCEPTION: No provider for Http! (App -> UserApi -> Http) thoughts? – Sideward

@essaji, show your code please. How you provide Http into your component? Are there providers: [Http]?. You can create an issue (github.com/Qeti/loopback-sdk-angular/issues) with code example. – Hearsh

Using providers: [UserService,Http], produces EXCEPTION: No provider for ConnectionBackend! (AppComponent -> UserApi -> Http -> ConnectionBackend) and using providers: [UserService,Http,ConnectionBackend], produces EXCEPTION: No provider for RequestOptions! (AppComponent -> UserApi -> Http -> RequestOptions) – Sideward

And using providers: [UserService,Http,ConnectionBackend,RequestOptions], produces EXCEPTION: Cannot resolve all parameters for 'RequestOptions'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RequestOptions' is decorated with Injectable. – Sideward

Here is the link to plunker see console for the error messages. – Sideward

Try to provide also HTTP_PROVIDERS – Hearsh

Let us continue this discussion in chat. – Sideward

Did you use Codegen for generating Angular2 typescript SDK? – Sideward

@essaji I use loopback-sdk-angular package – Hearsh

Would you mind sharing the server.js file of the above application? I'm trying to implement a similar application with a loopback API and Angular 2 frontend and having a difficulty in integrating them. Thanks! – Demoiselle

@Demoiselle Did you try github.com/mean-expert-official/loopback-sdk-builder ? – Hearsh