{"id":10996,"date":"2019-11-29T07:46:42","date_gmt":"2019-11-29T07:46:42","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=10996"},"modified":"2025-03-10T11:11:19","modified_gmt":"2025-03-10T11:11:19","slug":"how-to-create-own-library-with-angular-cli","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/how-to-create-own-library-with-angular-cli","title":{"rendered":"How to Create Your Own Library with Angular CLI  (Angular Version 8)"},"content":{"rendered":"<style>\nul.index-list {\n    text-align: left;\n    list-style-type: square;\n}\np{\n   width:100%;\n}\n.post-content p img {\n    margin-bottom: 0 !important;\n}\n.text-orange,.text-orange> strong{\ncolor: #ec6100 !important;\nfont-weight: 700;\n}\n.border-box{\npadding: 12px;\nborder: 1px solid #000;\nmargin-bottom: 16px;\n}\n.border-div{border: 1px solid #000; padding: 22px; text-align: center; margin-bottom: 32px;}\n\t\t.border-bottom{\n\t\t\tborder-bottom: 1px solid #000;\n\t\t\ttext-align: center;\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t.border-div p{text-align: left;}\n\t\t.cust-list{padding: 0; text-align: left;}\n\t\t.cust-list li{padding-left: 32px; list-style: none}\npre {\n    background: #f7e9dd;\n    border: none;\n    font-size: 16px;\n}\n.cross-platform{\n    background: #f7e9dd;\n    border: none;\n    font-size: 16px;\n    text-align:center;\n    padding:40px;\n}\n.cross-platform a{\n   font-size:20px;\n   font-weight:bold !imporatnt;\n   margin-top:10px;\n}\n<\/style>\n<p>It\u2019s been 3+ years since I have been working on Angular. From AngularJS to Angular 8, I have served my expertise on different Angular projects; meanwhile, I have used many different third-party packages(libraries). But each library has its interface. Suppose you want to extend that library feature by creating your library, thanks to the Angular team, as they provided the features to build your very own library. I am writing this blog to make you understand how you can create your project library.<\/p>\n<div class=\"border-div\">\n<h2 class=\"border-bottom\">Table of contents:<\/h2>\n<p><a href=\"#1\"><strong>1. Introduction<\/strong><\/a><\/p>\n<p><a href=\"#2\"><strong>2. Process<\/strong><\/a><\/p>\n<p><a href=\"#3\"><strong>3. Create your Angular Library<\/strong><\/a><\/p>\n<p><a href=\"#4\"><strong>4. Generate library build<\/strong><\/a><\/p>\n<p><a href=\"#5\"><strong>5. Understanding the Project Library structure<\/strong><\/a><\/p>\n<p><a href=\"#6\"><strong>6. Test Project Library into Application<\/strong><\/a><\/p>\n<p><a href=\"#7\"><strong>7. Conclusion<\/strong><\/a><\/p>\n<p><a href=\"#8\"><strong>8. FAQs<\/strong><\/div>\n<p><\/a><\/p>\n<p>The version I have used for this demo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/image_2019_11_29T08_25_25_045Z.png\" alt=\"Angualr CLI\" width=\"646\" height=\"582\" class=\"aligncenter size-full wp-image-11024\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/image_2019_11_29T08_25_25_045Z.png 646w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/image_2019_11_29T08_25_25_045Z-300x270.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/image_2019_11_29T08_25_25_045Z-20x18.png 20w\" sizes=\"auto, (max-width: 646px) 100vw, 646px\" \/><\/p>\n<p><strong>Note:<\/strong>Note: If you have not installed the AngularCLI, I would like to request you to open a terminal and type.<\/p>\n<pre>npm i -g angular-cli<\/pre>\n<h2 id=\"1\">Introduction: Angular CLI<\/h2>\n<p><a href=\"https:\/\/angular.io\/\" target=\"_blank\" rel=\"noopener\">Angular<\/a> CLI helps to create a new workspace for us at the time of using `ng new`<\/p>\n<p>In our workspace, we will have two projects:<\/p>\n<ul class=\"bullets\">\n<li><strong>A library project<\/strong><\/li>\n<p>It is the library of components and services that we want to provide. This is the code which we will publish to <strong>npm<\/strong>, for example.<\/p>\n<li><strong>An application project<\/strong><\/li>\n<p>It will be only used to create <a href=\"https:\/\/www.bacancytechnology.com\/blog\/angular-component-libraries\" target=\"_blank\" rel=\"noopener\">Angular component library<\/a>; Sometimes, it can be used as documentation and example usage of the library.<\/p>\n<\/ul>\n<h2 id=\"2\">Process<\/h2>\n<ul class=\"bullets\">\n<li>Create a new workspace with the name `<strong>ng-components-app<\/strong>` using Angular CLI<\/li>\n<li>ng-components-app is the test application for testing our library: <strong>ng-components-lib<\/strong><\/li>\n<li>Generate Angular library with named:`<strong>ng-components-lib<\/strong>` using `ng g library ng-components-lib` command<\/li>\n<li>Our Generated library will have the prefix of <strong>uic<\/strong> to identify our library.\n<li>For testing our library ng-components-lib, We will import <strong>ng-components-lib<\/strong> as<\/li>\n<p> a library into our <strong>ng-components-app<\/strong> application.<\/li>\n<li>After completing the above steps, we will generate project build and then use the library in another angular project<\/li>\n<\/ul>\n<h2 id=\"3\">Create an Angular Library<\/h2>\n<p>Now let\u2019s create Angular Workspace and then create the project Library by using the below <strong>command<\/strong>:<\/p>\n<pre>ng new components-app --style=scss --create-application=false\r\ncd components-app\r\nng g library components-lib --prefix=uic<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/2.png\" alt=\"2\" width=\"680\" height=\"396\" class=\"aligncenter size-full wp-image-11005\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/2.png 680w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/2-300x175.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/2-20x12.png 20w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/3.png\" alt=\"3\" width=\"734\" height=\"519\" class=\"aligncenter size-full wp-image-11007\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/3.png 734w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/3-300x212.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/3-20x14.png 20w\" sizes=\"auto, (max-width: 734px) 100vw, 734px\" \/><\/p>\n<p><strong>Notice<\/strong>:  we used the <strong>&#8211;prefix<\/strong> flag to make our library components to be distinct. If we do not use it, then Angular CLI will take `lib` by default.<\/p>\n<p>ALWAYS: keep the habit of using a prefix when generating a project library.<\/p>\n<p>Now, let&#8217;s understand what generated library command will do:<\/p>\n<ul class=\"bullets\">\n<li>Will add a new `components-lib` project in angular.json file.<\/li>\n<li>Will add `ng-packagr` dependencies to our package.json<\/li>\n<li>Will add a reference to the `components-lib` build path in tsconfig.json<\/li>\n<li>We will create sources for our library in `projects\/components-lib` folder.<\/li>\n<\/ul>\n<p>The <strong>`projects\/components-lib`<\/strong> folder inside our application contains a component and a service inside a NgModule. Our Application\u2019s  angular.json is updated with a project of type of \u2018library.\u2019<\/p>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #c7c7c7; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);\">You may also like to read; <a href=\"https:\/\/www.bacancytechnology.com\/blog\/angular-component-libraries\" target=\"_blank\" rel=\"noopener\">Top Angular Component Libraries<\/a><\/p>\n<h2 id=\"4\">Updated angular.json of components-app after Generate Library<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/image_2019_11_29T08_28_08_112Z.png\" alt=\" angular.json \" width=\"581\" height=\"530\" class=\"aligncenter size-full wp-image-11025\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/image_2019_11_29T08_28_08_112Z.png 581w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/image_2019_11_29T08_28_08_112Z-300x274.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/image_2019_11_29T08_28_08_112Z-20x18.png 20w\" sizes=\"auto, (max-width: 581px) 100vw, 581px\" \/><\/p>\n<p>Let&#8217;s learn the key elements of \u201cprojects\u201d to be generated in angular.json :<\/p>\n<p><strong>Root:<\/strong> It points to root folder of our library projects.<\/p>\n<p><strong>Sourcebook:<\/strong> It points to the root of our library\u2019s actual source code.<\/p>\n<p><strong>project-type:<\/strong> It specifies this is a library as opposed to our other two projects, which are of the type: application.<\/p>\n<p><strong>Prefix:<\/strong> The prefix identifies that we will use in the selectors of our components. Remember, we specified \u2018uic\u2019 when we generated the library.<\/p>\n<p><strong>Architect:<\/strong>It specifies how Angular CLI can handle build, test, and lint for our project. In this section, the builder makes use of ng-packagr for building.<\/p>\n<h3>The dependency of ng-packagr in package.json<\/h3>\n<p>When we start to generate the library, Angular CLI realizes that it needs ng-packagr. So, `ng-packagr` added into our devDependencies in our workspace package.json: &#8220;<strong>ng-packagr&#8221;: &#8220;^4.1.0<\/strong>&#8220;,<\/p>\n<h2 id=\"5\">Understand `components-lib` Library sources<\/h2>\n<p>In library \u201cProject\u201d folder, Angular CLI created a new module with a service and a component inside the \u201cprojects\/components-lib\/src\/lib\u201d folder. Also, there we can see another few more files:<\/p>\n<p><strong>public_api.ts<\/strong><\/p>\n<p>This is called the entry file. It determines what parts of our library are visible externally. In our application, we will export only our library parent module: `ComponentsLibModule`<\/p>\n<p><strong>package.json<\/strong><\/p>\n<p>This package.json file exists inside \/projects\/components-lib` folder specially for our library. This file will get published with our library as an npm package. When the developer installs our library using npm, it will install the dependent packages specified in package.json ng-package.json: configuration file of ng-packagr.<\/p>\n<p>Now we will export the library parent module `ComponentsLibModule` in public_api.ts file. And after then we will import it to our application `src\/app\/app.module.ts\u2019 file for testing.<\/p>\n<h2>How to Build our Library<\/h2>\n<p>Let&#8217;s create build of newly generated library by using below command:<\/p>\n<pre>ng build components-lib\r\nIt builds our library to the folder:\r\ncomponents-app\\dist\\components-lib<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/How-to-Build-our-Library-min.png\" alt=\"How to Build our Library\" width=\"933\" height=\"536\" class=\"aligncenter size-full wp-image-26669\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/How-to-Build-our-Library-min.png 933w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/How-to-Build-our-Library-min-300x172.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/How-to-Build-our-Library-min-768x441.png 768w\" sizes=\"auto, (max-width: 933px) 100vw, 933px\" \/><\/p>\n<h2 id=\"6\">Testing Library in Application<\/h2>\n<p>We have created a workspace with the name `components-app,` which will now use to test our generated library.<\/p>\n<p>Now we want to test our generated `components-lib` library is working successfully or not. For that, we will import `components-lib` as a library into our `components-app` application.<\/p>\n<h2>Import Library Module into the Application Module<\/h2>\n<p>Here we will display the default component that Angular CLI created for us in the library that is `components-lib.component.ts` file.<\/p>\n<p>In `components-lib.module.ts,` exports the `components-lib.component.ts` file.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/Import-Library-Module-into-the-Application-Module-min.png\" alt=\"Import Library Module into the Application Module\" width=\"933\" height=\"536\" class=\"aligncenter size-full wp-image-26671\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/Import-Library-Module-into-the-Application-Module-min.png 933w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/Import-Library-Module-into-the-Application-Module-min-300x172.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/Import-Library-Module-into-the-Application-Module-min-768x441.png 768w\" sizes=\"auto, (max-width: 933px) 100vw, 933px\" \/><\/p>\n<p>Now, Import `ComponentsLibModule` inside `src\/app\/app.module.ts\u2019 file as per the below screenshot.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/6.png\" alt=\"6\" width=\"1122\" height=\"519\" class=\"aligncenter size-full wp-image-11012\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/6.png 1122w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/6-300x139.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/6-768x355.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/6-1024x474.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/6-20x9.png 20w\" sizes=\"auto, (max-width: 1122px) 100vw, 1122px\" \/><\/p>\n<p><strong>Note:<\/strong> we should have to export the `components-lib.module.ts` file from `public_api.ts` file<\/p>\n<p><strong>For Example<\/strong>, open `public_api.ts` file and export library module as per the below-mentioned code:<\/p>\n<pre>export * from \u2018.\/lib\/components-lib.module\u2019;<\/pre>\n<h3>Displaying the \u2018components-lib\u2019 Component<\/h3>\n<p>We are going to add the default generated component from our library into our AppComponent template: app.component.html (Main Application Component).<\/p>\n<p>Please go through the app.component.html file and put the selector of the `components-lib.component.ts` file as shown in the screenshot below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/1212.png\" alt=\"app.component.html\" width=\"1117\" height=\"293\" class=\"aligncenter size-full wp-image-11016\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/1212.png 1117w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/1212-300x79.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/1212-768x201.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/1212-1024x269.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/1212-20x5.png 20w\" sizes=\"auto, (max-width: 1117px) 100vw, 1117px\" \/><\/p>\n<h3>Run an Application<\/h3>\n<p>Now simply run the application using `ng command; if it runs successfully that means library project structure has been successfully created.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/9.png\" alt=\"9\" width=\"1085\" height=\"726\" class=\"aligncenter size-full wp-image-11017\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/9.png 1085w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/9-300x201.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/9-768x514.png 768w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/9-1024x685.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2019\/11\/9-20x13.png 20w\" sizes=\"auto, (max-width: 1085px) 100vw, 1085px\" \/><\/p>\n<p>Excellent. It is running successfully? We successfully created an angular 8 library. <\/p>\n<p><strong>Happy coding.<\/strong><\/p>\n<p>Please feel free to comment below if you need any further assistance.<\/p>\n<p>In the next session, We will learn about `<strong>How to use Generated library in another Application&#8217;<\/strong>.<\/p>\n<p class=\"cross-platform\"><strong>Leverage Expertise of our Full-stack AngularJS Development Team<\/strong><br \/>\n   <a href=\"https:\/\/www.bacancytechnology.com\/angular-js-development\" target=\"_blank\" class=\"btn btn--primary\" rel=\"noopener\"><strong>Hire our Angular Developers Now!<\/strong><\/a><\/p>\n<h2 id=\"7\">Conclusion<\/h2>\n<p>So, this was about how to create an Angular Library. I hope the tutorial helped you the way you expected. For learning more about Angular, please feel free to visit <a href=\"https:\/\/www.bacancytechnology.com\/tutorials\/angularjs\" target=\"_blank\" rel=\"noopener\">Angular Tutorials<\/a>.<\/p>\n<p>At Bacancy, we have dedicated and enthusiastic Angular developers.<br \/>\nAre you looking for Angular developers? If yes, then without wasting a second, contact Bacancy and <a href=\"https:\/\/www.bacancytechnology.com\/angular-js-development\" target=\"_blank\" rel=\"noopener\">hire Angular developers<\/a>.<\/p>\n<\/p>\n<style>\n.faqs-tran-black-border li{ list-style:none;}\n<\/style>\n<section class=\"bg--white faqs-tran-black-border\" style=\"padding-top: 60px;\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-sm-12\">\n<h2 id=\"8\">FAQs<\/h2>\n<ul class=\"accordion accordion--oneopen\">\n<li class=\"active\">\n<div class=\"accordion__title\"> <span class=\"h5\">What is NPM and NG?<\/span> <\/div>\n<div class=\"accordion__content\">\n<p>NPM (Node Package Manager) is a dependency provider mainly used to manage all packages. It is a hotspot that offers us all the required packages. On the other hand, NG is Angular\u2019s core module. Whenever an Angular app starts, the very first module to be loaded is &#8211; NG.\n<\/p>\n<\/p><\/div>\n<\/li>\n<li>\n<div class=\"accordion__title\"> <span class=\"h5\">What is an Angular library?<\/span> <\/div>\n<div class=\"accordion__content\">\n<p>A library is defined as a collection of directives, components, precompiled routines that can be used across various projects. The Angular library is an Angular project with the limitation of not running it on its own. It has to be imported first and then later we can use it.<\/p>\n<\/p><\/div>\n<\/li>\n<li>\n<div class=\"accordion__title\"> <span class=\"h5\">What is the difference between ng serve and ng build?<\/span> <\/div>\n<div class=\"accordion__content\">\n<p> The <strong>ng serve<\/strong> is used for fast and local developments. Without generating an output folder, unlike ng build, it builds the artifacts from the memory for fast development.<\/p>\n<p>The <strong>ng build<\/strong> command is used to build the application and deploy the artifacts. It builds an output folder: dist\/. The command will generate the output files only one time and won\u2019t serve them.<\/p>\n<\/p><\/div>\n<\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>It\u2019s been 3+ years since I have been working on Angular. From AngularJS to Angular 8, I have served my expertise on different Angular projects; meanwhile, I have used many different third-party packages(libraries). But each library has its interface. Suppose you want to extend that library feature by creating your library, thanks to the Angular [&hellip;]<\/p>\n","protected":false},"author":146,"featured_media":11018,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[989,1265],"tags":[],"coauthors":[2427],"class_list":["post-10996","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","category-web-development"],"acf":[],"modified_by":"Binal Prajapati","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/10996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=10996"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/10996\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/11018"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=10996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=10996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=10996"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=10996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}