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 loopback-sdk-builder supports the latests Angular 2 APIs it also maintain backwards compatibility for those applications below RC5.

##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/sdk.module
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/sdk.module';

@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

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