ng-salesforce
Pre Installation
Prior to installing ng-salesforce, you must have access to a Salesforce org and have an @angular/cli application.
Installation
To install this library, run:
$ 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
:
;; ; // Import your library; // salesforce.config.ts will be created during installation and saved at src/app/salesforce.config.ts;
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.
; // 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
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.
;;
Access the data in your component
;;;
deploy
To lint all *.ts
files:
$ npm run lint
To deploy your code to your salesforce org
$ 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
WARNING in C:/Workspace/ngs-workspace/node_modules/xml2js/node_modules/sax/lib/sax.jsModule not found: Error: Can't resolve 'stream' in 'C:\Workspace\ngs-workspace\node_modules\xml2js\node_modules\sax\lib' ERROR in C:/Workspace/ngs-workspace/node_modules/csv-parse/lib/index.jsModule not found: Error: Can't resolve 'stream' in 'C:\Workspace\ngs-workspace\node_modules\csv-parse\lib'ERROR in C:/Workspace/ngs-workspace/node_modules/csv-stringify/lib/index.jsModule not found: Error: Can't resolve 'stream' in 'C:\Workspace\ngs-workspace\node_modules\csv-stringify\lib'ERROR in C:/Workspace/ngs-workspace/node_modules/xml2js/lib/parser.jsModule not found: Error: Can't resolve 'timers' in 'C:\Workspace\ngs-workspace\node_modules\xml2js\lib'i 「wdm」: Failed to compile.
Fix: Add path
Add the following to your tsconfig.app.json file under 'compilerOptions':
"paths" :
Uncaught Error: No base href set. Please provide a value for the APP_BASE_HREF 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
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:
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.
License
MIT © Christopher Moyle