Using Angular in Dynamics 365 CRM – Part I

By | January 14, 2019

Introduction:

Angular, a TypeScript based framework that helps to build applications that work across all the platforms. We thought of writing a blog to help the developers of Dynamics community to build Angular Application as an HTML web resource in Dynamics 365 and further help them to set up a development process that speeds up the development.

What version of Angular we are talking about?

When you see the word “Angular” then you are looking at the latest version of Angular which is based on TypeScript and when you see the word “AngularJS” then you are in the older version of Angular which is a JavaScript library.

Here we are talking about Angular 4/6/7 the latest version of Angular at the time of writing this blog.

When to consider building of Angular application in Dynamics 365?

Before commencing the development or customization in Dynamics 365 CE it is important to understand which option is suitable for particular requirement.

If your requirement requires development of HTML application then you can consider Angular framework as an option. Angular is not for Form scripting, Ribbon button scripting it can be considered when you have HTML page development.

Let’s start with basic “Hello World” application. You can learn more about how to get started with Angular from here.

Prerequisites: Before you begin make sure your development environment has the following installed,

Step 1: Create working project directory and create Angular project

Create a folder where your Angular application source code will reside. In our case, we have created a folder in my local drive with named as “Angular Application”.

Open Visual Studio Code tool and open the created folder. Open a terminal by clicking on “Terminal” + “New Terminal” from top navbar.

Run the Angular CLI command ‘ng new’ and provide the name of your project as shown below,

ng new first-crm-angular-app

Angular in Dynamics 365

This will create a sample Angular application which we will use as a starting point of our development.

Angular in Dynamics 365

Step 2: Run the application on local host

Go to the project folder by using ‘cd’ as shown below,

cd first-crm-angular-app

Run ‘ng serve –open’ Angular CLI command to run the application in browser on local host.

Angular in Dynamics 365

This will open an index.html in your default browser.

Angular in Dynamics 365

Step 3: Modify the application

In generated sample application you will see ‘app’ folder and you will see the app.module.ts, app.component.ts, app.component.html and app.component.css files.  These files are referring to the Root component of your Angular application.

Open app.component.html and replace existing HTML code with following.

Angular in Dynamics 365

As soon as you save the file you will see the changes reflected in the already opened page in the browser. This is pretty cool. Isn’t it?

Angular in Dynamics 365

Step 4: Build the application to generate JavaScript files

As we said Angular is based on TypeScript so you write your logic or code in TypeScript. To generate the source code that can be then uploaded to CRM as a web resource you would need to build the project using ‘ng build’ Angular CLI command.

This command creates an indext.html and 5 other JavaScript files (main.js, polyfills.js, runtime.js, vendor.js and styles.js).

Angular in Dynamics 365

You can find those files under the “dist” folder.

Angular in Dynamics 365

You can change this folder structure where to these files get generated.

Step 5: Deploy source files in Dynamics 365 as a Web Resources

Now it’s time to run this application from inside Dynamics 365. Upload the aforementioned JavaScript files and index.html in your Dynamics 365 as a web resource. Refer the screenshot below.

Angular in Dynamics 365

Now open index.html web resource and preview. Oops! What happened? Nothing rendered. If you do F12 you will see Failed to load resource errors.

Angular in Dynamics 365

To fix this modify index.html as shown below. Comment the following line “<base href=”/”>”.

Angular in Dynamics 365

Build the project again using ng build and upload the main.js in Dynamics 365. This time you will get the correct output.

Angular in Dynamics 365

Conclusion:

In this blog we saw how to build Angular Application as an HTML web resource in Dynamics 365. In the next blog, we will see how to build the production release version of angular application and how to use Client API and Web API to perform operations on CRM data.

Clone Dynamics 365 CRM Records

2 thoughts on “Using Angular in Dynamics 365 CRM – Part I

  1. Aaron

    Hi. Thanks for the post. Having issues with section one though. I got to the part where it 404’s on the javascript files. Went back to the project in in VS Code, commented out the tag in index.html, and did an ng build. I then uploaded main.js, and republished to CRM. Still getting the same 404 errors. Also tried commenting out the tab in the actual index.html web resource. Then throws error about pleae provide value for APP_BASE_REF, or add the base ref tag. Am I misunderstanding the requirement above? Thanks!

    Reply
    1. inogic Post author

      If you are still getting 404 error on JavaScript files then there is something wrong in how you uploaded files in CRM. Check your webresource directory/file structure. If your index.html webresource is inside some folder like https:/// WebResources/new_/projectfolder/index.html then your main.js should be like follow, https:///WebResources/new_/projectfolder/main.js

      If your index.html webresource is like https:/// WebResources/new_/index.html then your main.js should be like follow, https:///WebResources/new_/main.js

      Hope this solves your issue.

      Thanks!

      Reply

Leave a Reply to Aaron Cancel reply

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