Using Angular in Dynamics 365 CRM – Part II

By | January 16, 2019

Introduction

In our previous blog, we have seen how to create and deploy a simple hello world Angular application in Dynamics 365. In this blog, we will see how to work with CRM Client API, CRM Web API and how to use JavaScript libraries.

Work with Client API in Angular Application

The first thing that we would need to do is, add the reference of ClientGlobalContext.js.aspx. in index.html. Refer a screenshot below.

Angular in Dynamics 365 CRM

Now let’s use ClientGlobalContext.js.aspx to use some Client API. Open app.component.ts and write a code to get the logged-in user as shown below,

Angular in Dynamics 365 CRM

When building the application using ng build you will get the below error,

Angular in Dynamics 365 CRM

To fix this install @types/xrm. Open terminal and type following command, npm install –save @types/xrm

You will then see the xrm type get added in your node_modules -> @types folder.

Angular in Dynamics 365 CRM

Add type ‘xrm’ in “types” of tsconfig.app.json file as shown below,

Angular in Dynamics 365 CRM

Now build the application and update the main.js file in Dynamics 365. This should work now and lets give you the name of logged in user.

So this way you can use Xrm object in Angular application.

Work with CRM Web API in Angular Application

If you are on Dynamics 365 version 9.x and above then you can directly use Xrm.WebApi to perform CRUD operations on CRM data. But if you are on 8.x and below then you would need to add reference of Web API in your Angular Application.

Run “npm install –save-dev xrm-webapi” command in terminal. This will add xrm-webapi in your current project’s node_modules. Refresh the project folder if xrm-webapi folder not showing in the node-modules folder.

Angular in Dynamics 365 CRM

To use this import xrm-webapi in your component or in service of angular application. We recommend to initialize or add the reference of web api in service as it may be reused in several parts of Angular Application.

Below is how I have imported the xrm-webapi in app.service.ts.

//app.service.ts

import { Injectable } from ‘@angular/core’;

import { WebApi } from “xrm-webapi”;

@Injectable({

providedIn: ‘root’

})

export class AppService {

webApi: WebApi;

constructor() {

this.webApi = new WebApi(“9.1”);

}

}

Angular in Dynamics 365 CRM

Below is how we have used the functions of xrm-webapi in app.component.ts.

//app.component.ts

import { Component } from ‘@angular/core’;

import { AppService } from “./app.service”;

@Component({

selector: ‘app-root’,

templateUrl: ‘./app.component.html’,

styleUrls: [‘./app.component.css’]

})

export class AppComponent {

title = ‘first-crm-angular-app’;

loggedInUserName: string;

constructor(public appService: AppService) {

}

ngOnInit() {

let context = Xrm.Utility.getGlobalContext();

this.loggedInUserName = context.userSettings.userName;

console.log(“Logged in user: ” + this.loggedInUserName);

//retrieve Accounts

this.appService.webApi.retrieveMultiple(“accounts”).then(response => {

console.log(“Accounts: ” + response.value);

},

error => {

console.log(“Error: ” + error.message);

});

}

}

Angular in Dynamics 365 CRM

Build application and upload main.js and vendor.js file in Dynamics 365. Refresh the page and check the console. The Web API should work.

Angular in Dynamics 365 CRM

How to use JavaScript library in Angular Application

Suppose you have util.js a common JavaScript library in your system and you want to use it in your Angular application. This is also possible, there are several ways to achieve this. Here we will see the one of the way to use a JavaScript library.  You would need to add the reference of your JavaScript library in index.html and to able add this reference in index.html you would need to this util.js file in your Angular Application project directory with structure.

Here is how util.js web resource is created in CRM,

new_scripts/shared/util.js

Angular in Dynamics 365 CRM

Here is how util.js added into Angular Application,

Angular in Dynamics 365 CRM

Here is how it being referenced in index.html,

Angular in Dynamics 365 CRM

Finally, here is how it is being used in component,

//app.component.ts

import { Component } from ‘@angular/core’;

declare function getText(): string;

@Component({

selector: ‘app-root’,

templateUrl: ‘./app.component.html’,

styleUrls: [‘./app.component.css’]

})

export class AppComponent {

title = ‘first-crm-angular-app’;

constructor() {

}

ngOnInit() {

//call JavaScript Library Function

let text = getText();

console.log(“JavaScript Function Result: ” + text);

}

}

Conclusion

In this blog, we have seen how to work with CRM Client API, CRM Web API and how to use JavaScript libraries. In the next blog, we will see the development build and production build and will see how to increase the development speed as every time when we make any changes into our application we need to upload and publish the Web Resources in CRM to see the changes.

4 thoughts on “Using Angular in Dynamics 365 CRM – Part II

  1. Sven Vervynckt

    Hi, thank you for this interesting Post, I was looking for something like this since very long time. I am very new to Angular and while trying to follow along with the example code, I experienced an error while creating the app.service.ts class.

    It says that xrm-webapi has no exported member “WebApi”.

    You can find a screenshot of my code with the error here: https://ibb.co/C1CqSQz

    Reply
    1. inogic Post author

      Hi,

      Maybe your xrm-webapi is different than the one I used. The version of my xrm-webapi is 3.0.0.0.

      angular

      Thanks!

      Reply
  2. vishal.giri

    Hi Sven Vervynckt,
    Did you found solution I am also facing same issue.

    Reply

Leave a Reply to vishal.giri Cancel reply

Your email address will not be published. Required fields are marked *