{"id":3645,"date":"2016-09-28T16:38:41","date_gmt":"2016-09-28T14:38:41","guid":{"rendered":"https:\/\/adrhc.go.ro\/wordpress\/?p=3645"},"modified":"2017-05-09T12:15:35","modified_gmt":"2017-05-09T10:15:35","slug":"angularjs-2","status":"publish","type":"post","link":"https:\/\/adrhc.go.ro\/blog\/angularjs-2\/","title":{"rendered":"Angularjs 2"},"content":{"rendered":"<p><a href=\"http:\/\/embed.plnkr.co\/qZf6yv\/\" target=\"_blank\">http:\/\/embed.plnkr.co\/qZf6yv\/<\/a><\/p>\n<pre>\r\n<a href=\"https:\/\/benmccormick.org\/2015\/09\/14\/es5-es6-es2016-es-next-whats-going-on-with-javascript-versioning\/\" target=\"_blank\">https:\/\/benmccormick.org\/2015\/09\/14\/es5-es6-es2016-es-next-whats-going-on-with-javascript-versioning\/<\/a>\r\n\r\n<a href=\"http:\/\/onehungrymind.com\/build-a-simple-website-with-angular-2\/\" target=\"_blank\">http:\/\/onehungrymind.com\/build-a-simple-website-with-angular-2\/<\/a>\r\nhttp:\/\/blog.mgechev.com\/2016\/06\/26\/tree-shaking-angular2-production-build-rollup-javascript\/\r\n<a href=\"https:\/\/scotch.io\/tutorials\/use-the-angular-cli-for-faster-angular-2-projects\" target=\"_blank\">https:\/\/scotch.io\/tutorials\/use-the-angular-cli-for-faster-angular-2-projects<\/a>\r\n<a href=\"https:\/\/www.smashingmagazine.com\/2014\/06\/building-with-gulp\/\" target=\"_blank\">https:\/\/www.smashingmagazine.com\/2014\/06\/building-with-gulp\/<\/a>\r\n\r\n<strong>compatibility<\/strong>\r\nhttps:\/\/angular.io\/docs\/ts\/latest\/guide\/browser-support.html\r\n\r\n<strong>angular 2 project seed<\/strong>\r\nhttps:\/\/github.com\/angularclass\/awesome-angular2#current-browser-support-for-angular-2\r\nhttps:\/\/angularclass.github.io\/angular2-webpack-starter\/\r\nhttps:\/\/github.com\/AngularClass\/angular2-webpack-starter\r\nhttps:\/\/www.npmjs.com\/package\/angular2-webpack-starter\r\nhttps:\/\/github.com\/mgechev\/angular-seed\r\n<a href=\"https:\/\/github.com\/NathanWalker\/angular-seed-advanced\" target=\"_blank\">https:\/\/github.com\/NathanWalker\/angular-seed-advanced<\/a>\r\n<a href=\"http:\/\/www.devacron.com\/angular2-github-boilerplate-repositories\/\" target=\"_blank\">http:\/\/www.devacron.com\/angular2-github-boilerplate-repositories\/<\/a>\r\n<a href=\"http:\/\/stackoverflow.com\/questions\/29649578\/available-yeoman-generator-for-angular-2\" target=\"_blank\">http:\/\/stackoverflow.com\/questions\/29649578\/available-yeoman-generator-for-angular-2<\/a>\r\n\r\n<strong>webpack<\/strong>\r\nhttps:\/\/webpack.github.io\/docs\/\r\nhttp:\/\/stackoverflow.com\/questions\/39548175\/can-someone-explain-webpacks-commonschunkplugin\r\nhttps:\/\/blog.madewithlove.be\/post\/webpack-your-bags\/\r\nhttp:\/\/webpack.github.io\/analyse\/\r\n\r\n<strong>webpack lazy loading<\/strong>\r\n<em>not working for me<\/em>\r\nhttps:\/\/github.com\/Quramy\/angular2-load-children-loader\r\nhttps:\/\/github.com\/Quramy\/ng2-lazy-load-demo\r\n\r\n<strong>rxjs<\/strong>\r\n<a href=\"http:\/\/blog.falafel.com\/introduction-rxjs-angular2\/\" target=\"_blank\">http:\/\/blog.falafel.com\/introduction-rxjs-angular2\/<\/a>\r\n<a href=\"http:\/\/reactivex.io\/rxjs\/class\/es6\/Observable.js~Observable.html\" target=\"_blank\">http:\/\/reactivex.io\/rxjs\/class\/es6\/Observable.js~Observable.html<\/a>\r\n\r\n<strong>typings<\/strong>\r\nhttps:\/\/github.com\/typings\/typings\r\n<a href=\"https:\/\/neoheurist.wordpress.com\/2016\/06\/20\/definitely-typed\/\" target=\"_blank\">https:\/\/neoheurist.wordpress.com\/2016\/06\/20\/definitely-typed\/<\/a>\r\n<a href=\"https:\/\/blog.ionic.io\/ionic-and-typings\/\" target=\"_blank\">https:\/\/blog.ionic.io\/ionic-and-typings\/<\/a>\r\n<a href=\"https:\/\/blog.mariusschulz.com\/2014\/05\/19\/using-typescripts-type-definition-files-to-get-tooling-support-for-plain-javascript\" target=\"_blank\">https:\/\/blog.mariusschulz.com\/2014\/05\/19\/using-typescripts-type-definition-files-to-get-tooling-support-for-plain-javascript<\/a>\r\n\r\n<strong>Migrating from 2.x to 3.0<\/strong>\r\nhttp:\/\/getbootstrap.com\/migration\/\r\n\r\n<strong>basics<\/strong>\r\nhttps:\/\/egghead.io\/lessons\/typescript-installing-typescript-and-running-the-typescript-compiler-tsc?course=up-and-running-with-typescript\r\nhttps:\/\/egghead.io\/courses\/angular-2-fundamentals\r\nhttps:\/\/remysharp.com\/2010\/10\/08\/what-is-a-polyfill\r\n\r\n<strong>basics javascript<\/strong>\r\nhttps:\/\/www.safaribooksonline.com\/library\/view\/learning-javascript-design\/9781449334840\/ch11.html\r\nhttps:\/\/www.safaribooksonline.com\/library\/view\/learning-javascript-design\/9781449334840\/ch11s01.html\r\nhttps:\/\/www.safaribooksonline.com\/library\/view\/learning-javascript-design\/9781449334840\/ch11s02.html\r\nhttps:\/\/www.safaribooksonline.com\/library\/view\/learning-javascript-design\/9781449334840\/ch11s03.html\r\n\r\n<strong>nodejs<\/strong>\r\nhttp:\/\/stackoverflow.com\/questions\/8455290\/install-different-versions-of-nodejs\r\nhttps:\/\/github.com\/tj\/n\r\n\r\n<strong>initialize a node.js project (this creates package.json)<\/strong>\r\nnode init\r\n\r\n<strong>sass vs less<\/strong>\r\n<a href=\"https:\/\/css-tricks.com\/sass-vs-less\/\" target=\"_blank\">https:\/\/css-tricks.com\/sass-vs-less\/<\/a>\r\n\r\n<strong>Immediately-Invoked Function Expression (IIFE)<\/strong>\r\n<a href=\"http:\/\/benalman.com\/news\/2010\/11\/immediately-invoked-function-expression\/\" target=\"_blank\">http:\/\/benalman.com\/news\/2010\/11\/immediately-invoked-function-expression\/<\/a>\r\n\r\n<strong>basics webpack<\/strong>\r\n<a href=\"http:\/\/onehungrymind.com\/build-a-simple-website-with-angular-2\/\" target=\"_blank\">http:\/\/onehungrymind.com\/build-a-simple-website-with-angular-2\/<\/a>\r\n<a href=\"https:\/\/github.com\/simpulton\/angular2-website-routes.git\" target=\"_blank\">https:\/\/github.com\/simpulton\/angular2-website-routes.git<\/a>\r\nsudo npm list -g --depth=0\r\nsudo npm install -verbose webpack -g\r\nwebpack --progress --colors -d\r\nwebpack --progress --colors -d --config webpack.config.js\r\n\r\nhttp:\/\/semaphoreci.com\/community\/tutorials\/setting-up-angular-2-with-webpack\r\nhttps:\/\/github.com\/gonzofish\/semaphore-ng2-webpack.git\r\nhttps:\/\/docs.npmjs.com\/cli\/search\r\nnpm search angular-in-memory-web-api\r\ninstall dev dependencies:\r\nnpm install --dev -> deprecated, use the following below\r\nnpm install --only=dev\r\nERROR\r\n\tgigi@gigi-desktop:~\/Projects\/semaphore-ng2-webpack$ node start\r\n\tmodule.js:328\r\n\t\tthrow err;\r\n\t\t^\r\n\tError: Cannot find module '\/********\/Projects\/semaphore-ng2-webpack\/start'\r\n\t\tat Function.Module._resolveFilename (module.js:326:15)\r\n\t\tat Function.Module._load (module.js:277:25)\r\n\t\tat Function.Module.runMain (module.js:442:10)\r\n\t\tat startup (node.js:136:18)\r\n\t\tat node.js:966:3\r\nSOLUTION\r\n\tit's not \"node start\" but \"npm start\"\r\nlist dependencies for typings@1.4.0:\r\nsudo npm list typings@1.4.0\r\nother:\r\nnpm config list\r\nnpm config ls -l\r\nnpm config ls -l | grep cache\r\nHow to view the dependency tree of a given npm module?\r\nsudo npm install -g npm-remote-ls\r\nnpm-remote-ls typings\r\njust view a package\r\nnpm view typings@1.4.0\r\nhere <em>npm start<\/em> is equivalent to:\r\nnpm install webpack-dev-server@1.14.1 --only=dev\r\nfind . -name webpack-dev-server.js\r\n.\/node_modules\/webpack-dev-server\/bin\/webpack-dev-server.js --progress --display-errors-details --inline --colors --config .\/webpack\/webpack.dev.js\r\n\r\n<strong>npm<\/strong>\r\nhttps:\/\/www.keithcirkel.co.uk\/how-to-use-npm-as-a-build-tool\/\r\nnpm install tslint@3.13.0 --dev\r\ntslint --version\r\nnpm run lint\r\n\r\n<strong>debug with WebStorm<\/strong>\r\n<a href=\"https:\/\/blog.jetbrains.com\/webstorm\/2015\/09\/debugging-webpack-applications-in-webstorm\/\" target=\"_blank\">https:\/\/blog.jetbrains.com\/webstorm\/2015\/09\/debugging-webpack-applications-in-webstorm\/<\/a>\r\n\r\n<strong>webpack multiple entry points<\/strong>\r\nhttps:\/\/github.com\/gigihc11\/webpack\/tree\/master\/examples\/multiple-entry-points\r\nbuild with (this one uses template.md):\r\nrm js\/* 2>\/dev\/null; node build.js\r\nor install globally webpack@1.13.1:\r\nsudo npm install webpack@1.13.1 -g\r\nthen change webpack.config.js:\r\n\/\/ var CommonsChunkPlugin = require(\"..\/..\/lib\/optimize\/CommonsChunkPlugin\");\r\nvar webpack = require('webpack');\r\nconst CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;\r\nthen build with:\r\nrm js\/* 2>\/dev\/null; webpack\r\n\r\nhttps:\/\/github.com\/gigihc11\/webpack\/tree\/master\/examples\/multiple-entry-points\r\nFor changing webpack.config.js from \"commons\" to e.g. \"adunate\" you'll\r\nneed to also change in pageA.html, pageAB.html, template.md.\r\n\r\nhttps:\/\/webpack.github.io\/docs\/shimming-modules.html\r\nhttp:\/\/stackoverflow.com\/questions\/29596714\/new-es6-syntax-for-importing-commonjs-amd-modules-i-e-import-foo-require\r\nhttps:\/\/nodejs.org\/api\/modules.html#modules_core_modules\r\n\r\n<strong>angular2-webpack-starter<\/strong>\r\nhttps:\/\/github.com\/AngularClass\/angular2-webpack-starter\r\ngit clone https:\/\/github.com\/AngularClass\/angular2-webpack-starter.git\r\ngit checkout material2\r\ninstall global dependencies:\r\nsudo npm install --global webpack webpack-dev-server karma-cli protractor typescript rimraf\r\ninstall project dependencies (package.json):\r\nnpm install --verbose\r\n\r\n<strong>Webstorm<\/strong>\r\nPromise and catch keyword are highlighted with red\r\ngo to Languages & Frameworks -> JavaScript and select ECMAScript 6\r\n\r\n<strong>html5 semantic elements and its usage<\/strong>\r\nhttp:\/\/www.encodedna.com\/2014\/08\/html5-semantic-elements-and-its-usage.htm\r\n\r\n<strong>Angular 2 lazy loading with Webpack<\/strong>\r\n<em>angular2-router-loader is now angular-router-loader<\/em>\r\nSee <a href=\"https:\/\/github.com\/AngularClass\/angular2-webpack-starter.git\" target=\"_blank\">https:\/\/github.com\/AngularClass\/angular2-webpack-starter.git<\/a> for a working example.\r\n<a href=\"https:\/\/medium.com\/@daviddentoom\/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.bxpvfgzlw\" target=\"_blank\">https:\/\/medium.com\/@daviddentoom\/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.bxpvfgzlw<\/a>\r\n\r\n<strong>angular2-webpack-starter + bootstrap<\/strong>\r\nsee also \"'use:' revered back to 'loader:'\" in webpack.test.js\r\nnpm install --save-dev bootstrap\r\nnpm install --save-dev image-webpack-loader\r\nadd to vendor.browser.ts before \"if ('production' === ENV)\"\r\n\/\/ bootstrap 3.3.7:\r\nimport 'bootstrap\/dist\/css\/bootstrap';\r\nimport 'bootstrap\/dist\/css\/bootstrap-theme';\r\nchange webpack.common.js with this:\r\nresolve: {\r\n\textensions: [..., '.css'],\r\nand this:\r\n{\r\n\ttest: \/\\.css$\/,\r\n\tuse: ['to-string-loader', 'css-loader'],\r\n\tinclude: \/src\\\/\/,\r\n\texclude: \/node_modules\\\/\/\r\n},\r\n\/\/ for bootstrap\r\n{\r\n\ttest: \/\\.css$\/,\r\n\tloader: ['style-loader', 'css-loader'],\r\n\texclude: \/src\\\/\/,\r\n\tinclude: \/node_modules\\\/bootstrap\/\r\n},\r\nand this:\r\n\/\/ for bootstrap\r\n{\r\n\ttest: \/\\.(jpe?g|gif|svg)$\/i,\r\n\tloaders: [\r\n\t\t\/\/ image-webpack-loader chained with the file-loader (equivalent to: file?...!image-webpack?...)\r\n\t\t'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',\r\n\t\t'image-webpack-loader?bypassOnDebug=true&optimizationLevel=7&interlaced=false'\r\n\t]\r\n},\r\n{test: \/\\.png$\/, loader: \"url-loader?limit=100\"},\r\n{test: \/\\.eot(\\?v=\\d+\\.\\d+\\.\\d+)?$\/, loader: \"url-loader?limit=1000&mimetype=application\/vnd.ms-fontobject\"},\r\n{test: \/\\.(woff|woff2)$\/, loader: \"url-loader?&limit=1000&mimetype=application\/font-woff\"},\r\n{test: \/\\.ttf(\\?v=\\d+\\.\\d+\\.\\d+)?$\/, loader: \"url-loader?limit=1000&mimetype=application\/octet-stream\"}\r\n\r\n<strong>DEVELOPING A TABS COMPONENT IN ANGULAR<\/strong>\r\nAfterContentInit, ContentChildren\r\nhttp:\/\/blog.thoughtram.io\/angular\/2015\/04\/09\/developing-a-tabs-component-in-angular-2.html\r\nhttp:\/\/juristr.com\/blog\/2016\/02\/learning-ng2-creating-tab-component\/\r\n\r\n<strong>difference between @ContentChildren and @ViewChildren<\/strong>\r\nviewProviders vs providers\r\nAfterViewInit, ViewChild, ViewChildren, ContentChild\r\nhttp:\/\/blog.mgechev.com\/2016\/01\/23\/angular2-viewchildren-contentchildren-difference-viewproviders\/\r\n\r\n<strong>Fine grained change detection with Angular 2<\/strong>\r\nDoCheck, KeyValueDiffers\r\nhttp:\/\/juristr.com\/blog\/2016\/04\/angular2-change-detection\/\r\n\r\n<strong>ChangeDetectionStrategy: OnPush vs Default<\/strong>\r\nhttp:\/\/www.syntaxsuccess.com\/viewarticle\/change-detection-in-angular-2.0\r\nhttp:\/\/www.syntaxsuccess.com\/angular-2-samples\/#\/demo\/change\r\nhttps:\/\/vsavkin.com\/change-detection-in-angular-2-4f216b855d4c#.thlsx9ipr\r\n\r\n<strong>How to use IterableDiffers<\/strong>\r\nhttp:\/\/embed.plnkr.co\/qZf6yv\/ -> see app.component.ts\r\nexcerpt:\r\nngDoCheck() {\r\n\tconst changes = this.differ.diff(this.heroes);\r\n\tif (changes) {\r\n\t\tconsole.log('new change');\/\/ for splitting up changes\r\n\t\tchanges.forEachAddedItem(r => console.log('added ', r));\r\n\t\tchanges.forEachRemovedItem(r => console.log('removed ', r))\r\n\t\tchanges.forEachMovedItem(r => console.log('moved ', r))\r\n\t}\r\n}\r\n\r\n<strong>Pipes and Internationalization API<\/strong>\r\n<a href=\"https:\/\/github.com\/andyearnshaw\/Intl.js\/\" target=\"_blank\">https:\/\/github.com\/andyearnshaw\/Intl.js\/<\/a>\r\n\r\n<strong>Animation<\/strong>\r\n<a href=\"https:\/\/css-tricks.com\/ease-out-in-ease-in-out\/\" target=\"_blank\">https:\/\/css-tricks.com\/ease-out-in-ease-in-out\/<\/a>\r\n<a href=\"http:\/\/easings.net\/\" target=\"_blank\">http:\/\/easings.net\/ -> click on ease function for cubic-bezier code<\/a>\r\ntransition(':leave', [\r\n  animate('2s cubic-bezier(0.755, 0.05, 0.855, 0.06)', style({\r\n\topacity: 0,\r\n\ttransform: 'translateY(100%)'\r\n  }))\r\n])\r\n\r\n<strong>Build error<\/strong>\r\n[at-loader] Checking finished with 4 errors\r\n[at-loader] src\/app\/gui\/components\/validation-alerts.component.ts:6:14 \r\n    Cannot find namespace 'jasmine'. \r\n\r\n[at-loader] src\/app\/gui\/components\/validation-alerts.component.ts:32:23 \r\n    Cannot find name '$'. \r\n\r\n[at-loader] src\/app\/gui\/components\/validation-alerts.component.ts:34:14 \r\n    Cannot find name '$'. \r\n\r\n[at-loader] src\/app\/gui\/components\/validation-alerts.component.ts:158:26 \r\n    Cannot find name '$'. \r\n<em>SOLUTION<\/em>\r\nsearch the appropriate tsconfig.json (or all of them - tsconfig*.json) file and add:\r\n  \"compilerOptions\": {\r\n    \"types\": [\r\n      \"jasmine\",\r\n      \"jquery\",\r\n      ...\r\n    ]\r\n\r\n<strong>Important details<\/strong>\r\n<ul>\r\n<li><a href=\"https:\/\/angular.io\/docs\/ts\/latest\/guide\/router.html\" target=\"_blank\">https:\/\/angular.io\/docs\/ts\/latest\/guide\/router.html<\/a>\r\nBy default, the router re-uses a component instance when it re-navigates to the same component type without visiting a different component first.<\/li>\r\n<li>When subscribing to an observable in a component, you almost always arrange to unsubscribe when the component is destroyed.\r\nThere are a few exceptional observables where this is not necessary. The ActivatedRoute observables are among the exceptions.\r\nThe ActivatedRoute and its observables are insulated from the Router itself. The Router destroys a routed component when it is no longer needed and the injected ActivatedRoute dies with it.\r\nFeel free to unsubscribe anyway. It is harmless and never a bad practice.\r\n<em>See also route.snapshot<\/em><\/li>\r\n<li>Use <em>route parameters<\/em> to specify a <em>required parameter<\/em> value within the <em>route URL<\/em><\/li>\r\n<\/ul>\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>http:\/\/embed.plnkr.co\/qZf6yv\/ https:\/\/benmccormick.org\/2015\/09\/14\/es5-es6-es2016-es-next-whats-going-on-with-javascript-versioning\/ http:\/\/onehungrymind.com\/build-a-simple-website-with-angular-2\/ http:\/\/blog.mgechev.com\/2016\/06\/26\/tree-shaking-angular2-production-build-rollup-javascript\/ https:\/\/scotch.io\/tutorials\/use-the-angular-cli-for-faster-angular-2-projects https:\/\/www.smashingmagazine.com\/2014\/06\/building-with-gulp\/ compatibility https:\/\/angular.io\/docs\/ts\/latest\/guide\/browser-support.html angular 2 project seed https:\/\/github.com\/angularclass\/awesome-angular2#current-browser-support-for-angular-2 https:\/\/angularclass.github.io\/angular2-webpack-starter\/ https:\/\/github.com\/AngularClass\/angular2-webpack-starter https:\/\/www.npmjs.com\/package\/angular2-webpack-starter https:\/\/github.com\/mgechev\/angular-seed https:\/\/github.com\/NathanWalker\/angular-seed-advanced http:\/\/www.devacron.com\/angular2-github-boilerplate-repositories\/ http:\/\/stackoverflow.com\/questions\/29649578\/available-yeoman-generator-for-angular-2 webpack https:\/\/webpack.github.io\/docs\/ http:\/\/stackoverflow.com\/questions\/39548175\/can-someone-explain-webpacks-commonschunkplugin https:\/\/blog.madewithlove.be\/post\/webpack-your-bags\/ http:\/\/webpack.github.io\/analyse\/ webpack lazy loading not working for me https:\/\/github.com\/Quramy\/angular2-load-children-loader https:\/\/github.com\/Quramy\/ng2-lazy-load-demo rxjs http:\/\/blog.falafel.com\/introduction-rxjs-angular2\/ http:\/\/reactivex.io\/rxjs\/class\/es6\/Observable.js~Observable.html typings https:\/\/github.com\/typings\/typings https:\/\/neoheurist.wordpress.com\/2016\/06\/20\/definitely-typed\/ [&hellip;]<\/p>\n<div class=\"link-more\"><a href=\"https:\/\/adrhc.go.ro\/blog\/angularjs-2\/#more-3645\" class=\"more-link\">Continue reading &#10142; <span class=\"screen-reader-text\">Angularjs 2<\/span><\/a><\/div>","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[46,43,10],"tags":[],"class_list":["post-3645","post","type-post","status-publish","format-standard","hentry","category-angular","category-javascript","category-programming"],"_links":{"self":[{"href":"https:\/\/adrhc.go.ro\/blog\/wp-json\/wp\/v2\/posts\/3645","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adrhc.go.ro\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/adrhc.go.ro\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/adrhc.go.ro\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/adrhc.go.ro\/blog\/wp-json\/wp\/v2\/comments?post=3645"}],"version-history":[{"count":0,"href":"https:\/\/adrhc.go.ro\/blog\/wp-json\/wp\/v2\/posts\/3645\/revisions"}],"wp:attachment":[{"href":"https:\/\/adrhc.go.ro\/blog\/wp-json\/wp\/v2\/media?parent=3645"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/adrhc.go.ro\/blog\/wp-json\/wp\/v2\/categories?post=3645"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/adrhc.go.ro\/blog\/wp-json\/wp\/v2\/tags?post=3645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}