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-socketio

##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 (>= RC5) 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 SDKModule from ./shared/sdk
3. Add SDKModule within the imports array.

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 { SDKModule } from './shared/sdk/index';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    SDKModule.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.

##Setup using Providers (< RC5) If you don't have NgModules support in your application, then you may want to install the SDK using the API_PROVIDERS, but first you will need to manually remove the 'sdk.module.ts' file.

$ rm app/shared/sdk/sdk.module.ts

IMPORTANT NOTE. I won't add a flag or option to not create the sdk.module.ts since this is the current valid API implementation, manually removing the file is an extra step for those applications running below RC5.

And then you can setup your application as follows:

####Setup for Web or Progressive Apps

angular-web/app/main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { API_PROVIDERS } from './shared/sdk';

bootstrap(AppComponent, [...API_PROVIDERS]);

or in {N}

native-script/app/main.ts

import { nativeScriptBootstrap } from "nativescript-angular/application";
import { AppComponent } from "./app.component";
import { API_PROVIDERS } from "./shared/sdk";

nativeScriptBootstrap(AppComponent, [ ...API_PROVIDERS ]);

Basically the only difference is the bootstrap component that is different between these platforms.

IMPORTANT NOTE. It is recommended to Migrate your application so you can support NgModules, old APIs will be deprecated.