Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Microsoft Dynamics CRM (Archived) / angular 2 / angular 4 ...
Microsoft Dynamics CRM (Archived)

angular 2 / angular 4 in webresources

(0) ShareShare
ReportReport
Posted on by Peter Widmer 40

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

  • Kjeld Poulsen Profile Picture
    Kjeld Poulsen 180 on at
    RE: angular 2 / angular 4 in webresources

    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

  • Suggested answer
    sandeepstw Profile Picture
    sandeepstw 4,601 on at
    RE: angular 2 / angular 4 in webresources

    Hi,

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

  • Suggested answer
    Kjeld Poulsen Profile Picture
    Kjeld Poulsen 180 on at
    RE: angular 2 / angular 4 in webresources

    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.

  • Suggested answer
    Community Member Profile Picture
    Community Member on at
    RE: angular 2 / angular 4 in webresources

    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/

  • Suggested answer
    Community Member Profile Picture
    Community Member on at
    RE: angular 2 / angular 4 in webresources

    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,

    1. Name: <prj_name>/ctl_name/main.bundle.js
    2. Display Name: ctl_main.bundle.js
    3. Description: ctl_main.bundle.js
    4. Type: Script (JScript)
    5. 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.

  • Suggested answer
    JohnAnonymous Profile Picture
    JohnAnonymous 5,241 on at
    RE: angular 2 / angular 4 in webresources

    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

  • Community Member Profile Picture
    Community Member on at
    RE: angular 2 / angular 4 in webresources

    Were you able to use Angular4 for Dynamics 365?

  • Community Member Profile Picture
    Community Member on at
    RE: angular 2 / angular 4 in webresources

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

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Daivat Vartak – Community Spotlight

We are honored to recognize Daivat Vartak as our March 2025 Community…

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Kudos to the February Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 292,516 Super User 2025 Season 1

#2
Martin Dráb Profile Picture

Martin Dráb 231,409 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans