Prior to installing ng-salesforce, you must have access to a Salesforce org and have an @angular/cli application.

Downloads in past


1.0.66 years ago7 years agoMinified + gzip package size for ng-salesforce in KB



Pre Installation

Prior to installing ng-salesforce, you must have access to a Salesforce org and have an @angular/cli application.


To install this library, run: ```bash $ npm install ng-salesforce ``` During installation, you will be asked for a number of things to connect the application to your salesforce org. and then from your Angular AppModule: ```typescript import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // Import your library import { SalesforceModule } from 'ng-salesforce'; // salesforce.config.ts will be created during installation and saved at src/app/salesforce.config.ts import { Configuration } from './salesforce.config'; @NgModule({ declarations:
, imports:
// Specify your ng-salesforce as an import
, providers: , bootstrap: AppComponent }) export class AppModule { } ``` Once your library is imported, you can use its components, directives and pipes in your Angular application:

Defining a model

Propert state management is crucial to a successful Angular PWA. To that end, accessing data within Salesforce requires you to define your model within a Typescript class. Behind the scenes, ng-salesforce is managing how your components access and interact with that data to avoid uncessary operations and maintain synchronicity. Here's an example that defines the account and contact relationship for a component. ```typescript import { SObjectModel, SObject, ChildRecord } from 'ng-salesforce'; // We use the decorator SObjectModel to tell ng-salesforce this class maps to the 'Account' object // In order to access standard sObject fields, our Account class must extend 'SObject' // The class name can be anything, but the name property in the SObjectModel decorator must map to an object API name @SObjectModel({name : 'Account'}) export class Account extends SObject{ // Define the fields you would like in your object. The name of the field must map to a field API name in salesforce public Name: string = null; public IsCustomerPortal: boolean = null; public MyCustomFieldc: number = null; //Related Lists public Opportunities: ChildRecord = new ChildRecord(new Opportunity()) } @SObjectModel({name : 'Opportunity'}) export class Oppoortunity extends SObject{ public Name: string = null; public AccountId: string = null; } @SobjectModel({name : 'Contact'}) export class Contact extends SObject{ public Name: string = null; //Lookup public Account: Account = new Account(); } ```

Defining a Service

After defining your model, you can access the data by creating a service for the models. The SObjectService class contains many of the standard DML and query operations to access the data, however you may add any convenience methods you want to your service. The core service methods are usually very simple. ```typescript import { SObjectService, SObjectType } from 'ng-salesforce'; import { Injectable } from '@angular/core'; import { Account } from './account.model.ts' // This is a reference to the account model created in the previous section @Injectable({
providedIn : 'root'
}) export class AccountService extends SObjectService{ //Add service methods here type = Account; } ```

Access the data in your component

```typescript import { Component, OnOnit } from '@angular/core'; import { AccountService } from './account.service.ts'; import { Account } from './account.model.ts'; @Component({ selector : 'app-account', template : ` `, styles : ``
}) export class AccountComponent implements OnInit{ constructor(private accountService: AccountService){} // Always perform service methods in the ngOnInit method ngOnInit(){
this.accountService.where(`Id <> NULL LIMIT 1`).subscribe(res => {
res === [
Name : 'Account A',
IsCustomerPortal : false,
My_Custom_Field__c : 1,
Id : 'xxx',
Opportunities : {
totalSize : 1,
records : [
Name : 'Opportunity A',
AccountId : 'xxx',
Id : 'xxx',
this.accountService.describe('My_Custom_Field__c', false).subscribe(res => {
// Describe information for My_Custom_Field__c
});`FIND 'map*' IN ALL FIELDS RETURNING Account (Id, Name)`).subscribe(res => {
// SOSL Search Results
// Note : search does not follow the model pattern and will return results specified in the query
this.accountService.get(['00Fxxxxxxx', '00Fxxxxxxx']).subscribe(res => {
// Returns an array of account records
this.accountService.aggregate(`ID <> NULL`).subscribe(res => {
// Returns aggregates for the specified clause. (i.e. total records as well as max/min values for all 
// fields specified in the model)
this.accountService.create([new Account()]).subscribe(res => {
// Returns list of id's created
this.accountService.update([new Account()]).subscribe(res => {
// Returns list of id's updated
this.accountService.upsert([new Account()]).subscribe(res => {
// Returns list of objects upserted
this.accountService.delete([new Account()]).subscribe(res => {
// Returns list of boolean values for accounts that were successfully deleted
*  Low level method to build a structured query
*  @Param where clause
*  @Param limit (optional)
*  @Param offset (optional)
*  @Param sort by (optional)
*  @Param sort direction (optional)
*  @Param ignore cache (optional default false)
*  @Param ignore constraints (optional default false)
this.accountService.queryBuilder('ID <> NULL', 5, 2, 'Name', 'ASC', false, false).subscribe(res => {
// Returns query results
} } ```


To lint all *.ts files: ```bash $ npm run lint ``` To deploy your code to your salesforce org ```bash $ npm run deploy ```

Known Issues

@Angular/cli 6.0.0 Can't Resolve Stream

If you've upgraded to @angular/cli 6, and you're seeing the following error ```bash WARNING in C:/Workspace/ngs-workspace/nodemodules/xml2js/nodemodules/sax/lib/sax.js Module not found: Error: Can't resolve 'stream' in 'C:\Workspace\ngs-workspace\nodemodules\xml2js\nodemodules\sax\lib' ERROR in C:/Workspace/ngs-workspace/nodemodules/csv-parse/lib/index.js Module not found: Error: Can't resolve 'stream' in 'C:\Workspace\ngs-workspace\nodemodules\csv-parse\lib' ERROR in C:/Workspace/ngs-workspace/nodemodules/csv-stringify/lib/index.js Module not found: Error: Can't resolve 'stream' in 'C:\Workspace\ngs-workspace\nodemodules\csv-stringify\lib' ERROR in C:/Workspace/ngs-workspace/nodemodules/xml2js/lib/parser.js Module not found: Error: Can't resolve 'timers' in 'C:\Workspace\ngs-workspace\nodemodules\xml2js\lib' i 「wdm」: Failed to compile. ```

Fix: Add path

Add the following to your file under 'compilerOptions': ```json "paths" : { "jsforce" : "./nodemodules/jsforce/build/jsforce.min.js" ... } ```

Uncaught Error: No base href set. Please provide a value for the APPBASEHREF token or add a base element to the document.

In order to work on a visualforce page, your app needs to be setup to use the hash routing location strategy instead of the default

Fix: Set the useHash flag in your app-routing.module.ts file

In your app-routing.module.ts file, set the useHash flag in the RouterModule.forRoot(...) call ```typescript @NgModule({ imports: RouterModule.forRoot(appRoutes, { useHash: true }), exports: RouterModule }) export class AppRoutingModule { } ```

No 'Access-Control-Allow-Origin' header is present on the requested resource

Even if you enabled CORS during setup, Salesforce only supports it for certain APIs. This won't be an issue when you deploy to production. However, during development you will see this error for calls to the SOAP API. To bypass this, you must setup a proxy in @angular/cli.

Fix: Setup @angular/cli proxy

First, create a file called 'proxy.conf.json' in your root directory. This json file will look like the following: ```json { "/services/Soap/": {
"target": "",
"secure": false,
"logLevel": "debug"
} } ``` Make sure you set the target to be the community url you are using. Secondly, point your angular.json configuration to this newly created proxy configuration. ```json { ... "projects" : {
"myProject" : {
"architect" : {
"serve" : {
"options" : {
"proxyConfig": "./proxy.conf.json"
} } ```


MIT © Christopher Moyle