{"id":14047,"date":"2019-01-14T12:42:48","date_gmt":"2019-01-14T12:42:48","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=14047"},"modified":"2022-07-19T16:46:49","modified_gmt":"2022-07-19T11:16:49","slug":"using-angular-in-dynamics-365-part-i","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2019\/01\/using-angular-in-dynamics-365-part-i\/","title":{"rendered":"Using Angular in Dynamics 365 CRM \u2013 Part I"},"content":{"rendered":"<h2><strong>Introduction:<\/strong><\/h2>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/angular.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Angular<\/a>, a\u00a0<a href=\"https:\/\/www.typescriptlang.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">TypeScript<\/a> 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.<\/p>\n<h2><strong>What version of Angular we are talking about?<\/strong><\/h2>\n<p style=\"text-align: justify;\">When you see the word \u201cAngular\u201d then you are looking at the latest version of Angular which is based on TypeScript and when you see the word \u201cAngularJS\u201d then you are in the older version of Angular which is a JavaScript library.<\/p>\n<p>Here we are talking about Angular 4\/6\/7 the latest version of Angular at the time of writing this blog.<\/p>\n<h2><strong>When to consider building of Angular application in Dynamics 365?<\/strong><\/h2>\n<p style=\"text-align: justify;\">Before commencing the development or customization in Dynamics 365 CE it is important to understand which option is suitable for particular requirement.<\/p>\n<p style=\"text-align: justify;\">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.<\/p>\n<p>Let\u2019s start with basic \u201cHello World\u201d application. You can learn more about how to get started with Angular from <a href=\"https:\/\/angular.io\/guide\/quickstart\">here<\/a>.<\/p>\n<p><strong>Prerequisites: <\/strong>Before you begin make sure your development environment has the following installed,<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/angular.io\/guide\/quickstart#step-1-install-the-angular-cli\" target=\"_blank\" rel=\"noopener noreferrer\">Angular CLI<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Visual Studio Code<\/a><\/strong><strong>\/ Visual Studio<\/strong><\/li>\n<\/ul>\n<h3><strong>Step 1: Create working project directory and create Angular project<\/strong><\/h3>\n<p style=\"text-align: justify;\">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 \u201cAngular Application\u201d.<\/p>\n<p style=\"text-align: justify;\">Open Visual Studio Code tool and open the created folder. Open a terminal by clicking on \u201cTerminal\u201d + \u201cNew Terminal\u201d from top navbar.<\/p>\n<p>Run the Angular CLI command \u2018ng new\u2019 and provide the name of your project as shown below,<\/p>\n<p><strong>ng new first-<\/strong>crm<strong>-angular-app<\/strong><\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14048\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/01\/1Angular-in-Dynamics-365.png\" alt=\"Angular in Dynamics 365\" width=\"1440\" height=\"418\" \/><\/p>\n<p>This will create a sample Angular application which we will use as a starting point of our development.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14049\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/01\/2Angular-in-Dynamics-365.png\" alt=\"Angular in Dynamics 365\" width=\"1092\" height=\"424\" \/><\/p>\n<h3><strong>Step 2: Run the application on local host<\/strong><\/h3>\n<p>Go to the project folder by using \u2018cd\u2019 as shown below,<\/p>\n<p><strong>cd first-<\/strong>crm<strong>-angular-app<\/strong><\/p>\n<p>Run \u2018<strong>ng serve \u2013open<\/strong>\u2019 Angular CLI command to run the application in browser on local host.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14050\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/01\/3Angular-in-Dynamics-365.png\" alt=\"Angular in Dynamics 365\" width=\"1083\" height=\"257\" \/><\/p>\n<p>This will open an index.html in your default browser.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14051\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/01\/4Angular-in-Dynamics-365.png\" alt=\"Angular in Dynamics 365\" width=\"928\" height=\"572\" \/><\/p>\n<h3><strong>Step 3: Modify the application<\/strong><\/h3>\n<p style=\"text-align: justify;\">In generated sample application you will see \u2018app\u2019 folder and you will see the app.module.ts, app.component.ts, app.component.html and app.component.css files. \u00a0These files are referring to the Root component of your Angular application.<\/p>\n<p>Open app.component.html and replace existing HTML code with following.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14052\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/01\/5Angular-in-Dynamics-365.png\" alt=\"Angular in Dynamics 365\" width=\"1353\" height=\"400\" \/><\/p>\n<p style=\"text-align: justify;\">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\u2019t it?<\/p>\n<p><img decoding=\"async\" class=\"wp-image-14053 alignnone\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/01\/6Angular-in-Dynamics-365.png\" alt=\"Angular in Dynamics 365\" width=\"820\" height=\"318\" \/><\/p>\n<h3><strong>Step 4: Build the application to generate JavaScript files<\/strong><\/h3>\n<p style=\"text-align: justify;\">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 \u2018<strong>ng build<\/strong>\u2019 Angular CLI command.<\/p>\n<p>This command creates an indext.html and 5 other JavaScript files (main.js, polyfills.js, runtime.js, vendor.js and styles.js).<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14054\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/01\/7Angular-in-Dynamics-365.png\" alt=\"Angular in Dynamics 365\" width=\"865\" height=\"210\" \/><\/p>\n<p>You can find those files under the \u201cdist\u201d folder.<\/p>\n<p style=\"padding-left: 120px;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-14055\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/01\/8Angular-in-Dynamics-365.png\" alt=\"Angular in Dynamics 365\" width=\"320\" height=\"533\" \/><\/p>\n<p>You can change this folder structure where to these files get generated.<\/p>\n<h3><strong>Step 5: Deploy source files in Dynamics 365 as a Web Resources<\/strong><\/h3>\n<p style=\"text-align: justify;\">Now it\u2019s 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.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14056\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/01\/9Angular-in-Dynamics-365.png\" alt=\"Angular in Dynamics 365\" width=\"1365\" height=\"491\" \/><\/p>\n<p style=\"text-align: justify;\">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.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14057\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/01\/10Angular-in-Dynamics-365.png\" alt=\"Angular in Dynamics 365\" width=\"1164\" height=\"627\" \/><\/p>\n<p>To fix this modify index.html as shown below. Comment the following line \u201c&lt;base href=\u201d\/\u201d&gt;\u201d.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-14058\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/01\/11Angular-in-Dynamics-365.png\" alt=\"Angular in Dynamics 365\" width=\"921\" height=\"343\" \/><\/p>\n<p style=\"text-align: justify;\">Build the project again using ng build and upload the main.js in Dynamics 365. This time you will get the correct output.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-14059\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/01\/12Angular-in-Dynamics-365.png\" alt=\"Angular in Dynamics 365\" width=\"820\" height=\"248\" \/><\/p>\n<h2><strong>Conclusion:<\/strong><\/h2>\n<p style=\"text-align: justify;\">In this blog we saw how to build Angular Application as an HTML web resource in Dynamics 365. In the <a href=\"https:\/\/www.inogic.com\/blog\/2019\/01\/using-angular-dynamics-365-crm-part-ii\/\" target=\"_blank\" rel=\"noopener noreferrer\">next blog<\/a>, 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.<\/p>\n<h2 style=\"text-align: left;\"><div class=\"su-heading su-heading-style-default su-heading-align-center\" id=\"\" style=\"font-size:15px;margin-bottom:5px\"><div class=\"su-heading-inner\">70% of global 2000 companies apply gamification to improve productivity and returns!<\/div><\/div><\/h2>\n<p><em><strong><a href=\"https:\/\/bit.ly\/3RD4lYW\" target=\"_blank\" rel=\"noopener noreferrer\">Gamifics365<\/a> <\/strong>\u2013 Spin the magic of games within Microsoft Dynamics 365 CRM to improve user adoption, enhance productivity, and achieve company goals!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction: Angular, a\u00a0TypeScript 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\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2019\/01\/using-angular-in-dynamics-365-part-i\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":14060,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[3,16,18,19],"tags":[129,131],"class_list":["post-14047","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-dynamics-365","category-dynamics-365-v9-2","category-dynamics-crm","tag-angular-dynamics-365","tag-angular-dynamics-crm"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/14047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=14047"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/14047\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/14060"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=14047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=14047"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=14047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}