2. Setup SDK

How to setup the SDK

The LoopBack SDK Builder has been around for many versions of Angular 2 and this is not trivial, anyone who has been using this framework before its stable release may know the API has changed multiple times.

Even-though the @mean-expert/loopback-sdk-builder supports the latests Angular 2 APIs it also maintain backwards compatibility for those applications below RC5.

Install Dependencies

You will always need to have the @angular/http module available in your application, since it is not a core module you will need to install it.

$ npm install --save @angular/http

If you have enabled real-time functionality you will also need to install one of the following libraries according your application environment.

When using the SDK for Web and/or Progressive Apps

$ npm install --save socket.io-client

When using the SDK for NativeScript

$ npm install --save nativescript-socket.io

Install Socket IO Type

If you enable the Real-Time support, then you will need to install the right types for socket.io-client as follows:

$ cd /to/ng-project/
$ npm install --save-dev @types/socket.io-client

Then within the src directory there is a tsconfig.json file. Open it and then add the following

{
  "compilerOptions": {
    ...
    "types": [
        "socket.io-client"
    ]
  }
}

Setup using NgModule

Make sure you Install and Configure the LoopBack SDK Builder prior this setup process.

NOTE: It is recommended to follow the Angular 2 Style Guide and build your sdk within the shared directory. e.g. app/shared/sdk.

1. Open your RootModule file. e.g app/app.module.ts
2. Import the SDKBrowserModule | SDKNodeModule | SDKNativeModule from ./shared/sdk
3. Add SDKBrowserModule | SDKNodeModule | SDKNativeModule within the imports array.

Setup in web environments

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SDKBrowserModule } from './shared/sdk/index';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    SDKBrowserModule.forRoot()
  ],
  providers       : [ ],
  entryComponents : [ AppComponent ],
  bootstrap       : [ AppComponent ]
})

export class AppModule {

}

You will need to execute the SDKModule method forRoot() which will allow to use the SDK app wide using singleton instances.

or in {N}

import { SDKNativeModule } from './shared/sdk/index';

or in Angular Universal

import { SDKBrowserModule } from './shared/sdk/index';

import { SDKNodeModule } from './shared/sdk/index';

Basically the only difference is the module that is different between these platforms.