mnv mnv - 9 months ago 144
Javascript Question

Is it possible to generate services for Angular2 from Loopback?

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?


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.


  1. Loopback-sdk-builder

mnv mnv

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


"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';

  selector: 'my-app',
  providers: [UserService,HTTP_PROVIDERS],
  template: 'some template'

export class AppComponent {

  private login: string;
  private password: string;

  constructor(protected user: UserService) {}

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

  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
          offset: 0,
          limit: 100
        .subscribe(function(response: any) {
          // Process response