Microsoft Dynamics CRM (Archived)

angular 2 / angular 4 in webresources

(0) Share

Report

Posted on by Peter Widmer

Hi all,

does anybody use angular 2 or angular 4 in webresources of dynamics 365?

My concerns about how to use it best - when I run

ng build --prod

to build it, a new vendor.4e0fa2a6295e1efa44f2.bundle.js file is created - isn't there a possibility to have a central vendor-file and just link to it in the index.html from my webresource?
Does any body have a solution with multiple webresources using angular, which you could share as a demo?

With angularjs this seemed lot easier but I'm concerned that it will die...

Best regards
Peter

*This post is locked for comments

I have the same question (0)

All responses (8)

Answers (0)

Community Member on at

Like (0)

Report

Were you able to create Angular 2/ Angular 4 web resources in CRM and use it?

Was this reply helpful? Yes No
Community Member on at

Like (0)

Report

Were you able to use Angular4 for Dynamics 365?

Was this reply helpful? Yes No
Suggested answer

JohnAnonymous 5,241 on at

Like (0)

Report

This build process is the main reason I stick with AngularJS and why I'm looking into VueJS.

However, I did find a blog using typescript that has a buildprocess using webpack. It should be possible to add angular to that build process. medium.com/.../using-typescript-in-dynamics-365-499a0e56b143

Was this reply helpful? Yes No
Suggested answer

Community Member on at

Like (1)

Report
Yes. It works fine with "ng build --prod" for Angular 5.

You must copy out the "index.html" to a separate folder and modify it to use your WebResource names. Also, when you upload your files as Web Resources, use a naming convention that makes it easy to upload new versions of the bundle and have them in a Angular Control folder.

For instance,

Name: <prj_name>/ctl_name/main.bundle.js

Display Name: ctl_main.bundle.js

Description: ctl_main.bundle.js

Type: Script (JScript)

Upload File (from dist folder): main.3c350691c60f1b6d932a.bundle.js

Upload "index.html" from a separate folder where you have tweaked the file to work in CRM. Use the WebResource names for the "src": "main.bundle.js" (correct CRM folder hierarchy) instead of the "main.<uniqueid>.bundle.js".

Your application code gets lumped in with the "main.bundle.js" along with all of the Angular libraries. I wish that were not the case.

For debugging, you should be able to use Fiddler with Imposter to pull in your code. Get your HTML from a separate directory when you create your Imposter Rules. You will be debugging the "main.bundle.js". Copy the Dev build output for the "index.html" and change it to use the Web Resource folder that matches your uploaded one, and follow the naming pattern previously used.

Eg: src="crm_instance_name/WebResources/solution_prefix_/multiassign/main.bundle.js""

Create an Imposter rule for the "index.html" and another rule for the "bundle.js" files so that it retrieves them from the dist folder (following ng build --dev). Just remember to upload only the production (ng build --prod) items to the CRM Web Resources. Hopefully I will put up a Blog Post that shows this better.

Was this reply helpful? Yes No
Suggested answer

Community Member on at

Like (1)

Report

I created a Blog Post showing the process. Once you have the initial resources uploaded, it is not so hard.

http://f7bit.com/angular-within-dynamics-crm-2016/

Was this reply helpful? Yes No
Suggested answer

Kjeld Poulsen 180 on at

Like (0)

Report

For the sake of alternatives, here is my suggestion

I wrote an article that explains how to get started, and also an angular 4/5/6 wrapper for the dynamics 365 web api.

You can find the first one here:

github.com/.../angular-xrm-webresource

This explains in detail how to get started, and even provide a deployment automation tool

and if you wish to jump start, and make it easy to build angular services targeting the dynamics 365 web api, take a look at this open source project:

github.com/.../angular-xrmservice

Hope this help.

Was this reply helpful? Yes No
Suggested answer

sandeepstw 4,601 on at

Like (0)

Report

Hi,

Please check this link - github.com/.../angular-xrm-webresource

Was this reply helpful? Yes No
Kjeld Poulsen 180 on at

Like (0)

Report

Thanks for linking to my artical, but what is the purpose. That is exactly what i did in the post 12 minutes ago.

Regards

Kjeld

Was this reply helpful? Yes No