{"id":3259,"date":"2025-11-12T15:50:22","date_gmt":"2025-11-12T08:50:22","guid":{"rendered":"https:\/\/portal-atlasx.cdg.co.th\/home\/?post_type=docs&#038;p=3259"},"modified":"2025-11-12T15:52:34","modified_gmt":"2025-11-12T08:52:34","slug":"development-tips","status":"publish","type":"docs","link":"https:\/\/portal-atlasx.cdg.co.th\/home\/docs\/atlasx-web-application\/developing\/development-tips\/","title":{"rendered":"Development Tips"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\" id=\"development-tips\">Development Tips<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"migrate-arcgis-api-for-javascript-to-es-modules\">Migrate ArcGIS API for JavaScript to ES modules<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Install the modules into your project:<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>$ npm install @arcgis\/core --save<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #001080\">$<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">npm<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">install<\/span><span style=\"color: #000000\"> @<\/span><span style=\"color: #001080\">arcgis<\/span><span style=\"color: #000000\">\/<\/span><span style=\"color: #001080\">core<\/span><span style=\"color: #000000\"> --<\/span><span style=\"color: #001080\">save<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Copy assets &#8211; There are several small changes to this repo that enable the JS API to work. In\u00a0<code>angular.json<\/code>\u00a0copy the JS API assets folder to\u00a0<code>\/assets<\/code>. And, under\u00a0<code>build<\/code>\u00a0>\u00a0<code>options<\/code>\u00a0>\u00a0<code>allowedCommonJsDependencies<\/code>\u00a0you can add\u00a0<code>moment<\/code>\u00a0to the array to suppress\u00a0<code>CommonJS<\/code>\u00a0or\u00a0<code>AMD<\/code>\u00a0dependencies warnings in dev builds.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>  \"allowedCommonJsDependencies\": &#91;\n    \"moment\"\n  &#93;,\n  \"assets\": &#91;\n    {\n      \"glob\": \"**\/*\",\n      \"input\": \"node_modules\/@arcgis\/core\/assets\",\n      \"output\": \"\/assets\/\"\n    },\n    \"src\/favicon.ico\",\n    \"src\/assets\"\n  &#93;,<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #A31515\">&quot;allowedCommonJsDependencies&quot;<\/span><span style=\"color: #000000\">: &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #A31515\">&quot;moment&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  &#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #A31515\">&quot;assets&quot;<\/span><span style=\"color: #000000\">: &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #A31515\">&quot;glob&quot;<\/span><span style=\"color: #001080\">:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&quot;**\/*&quot;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #A31515\">&quot;input&quot;<\/span><span style=\"color: #001080\">:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&quot;node_modules\/@arcgis\/core\/assets&quot;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #A31515\">&quot;output&quot;<\/span><span style=\"color: #001080\">:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&quot;\/assets\/&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #A31515\">&quot;src\/favicon.ico&quot;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #A31515\">&quot;src\/assets&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  &#93;,<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Configure CSS. Choose a\u00a0<a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/styling\/index.html#themes\" target=\"_blank\" rel=\"noreferrer noopener\">theme<\/a>\u00a0and then configure your code to copy the theme files from\u00a0<code>@arcgis\/core\/assets\/esri\/themes\/<\/code>\u00a0into your project. If you want to apply the CSS globally then add it to\u00a0<code>angular.json<\/code>\u00a0and it will automatically be accessible for any components using the JS API:<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>  \"styles\": &#91;\n    \"src\/styles.scss\",\n    \"node_modules\/@arcgis\/core\/assets\/esri\/themes\/light\/main.css\"\n  &#93;,<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #A31515\">&quot;styles&quot;<\/span><span style=\"color: #000000\">: &#91;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #A31515\">&quot;src\/styles.scss&quot;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #A31515\">&quot;node_modules\/@arcgis\/core\/assets\/esri\/themes\/light\/main.css&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  &#93;,<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>To use the CSS at a component-level, set a CSS link in&nbsp;<code>index.html<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;link rel=\"stylesheet\" href=\"assets\/esri\/themes\/dark\/main.css\" \/><\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #800000\">&lt;link<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #E50000\">rel<\/span><span style=\"color: #000000\">=<\/span><span style=\"color: #A31515\">&quot;stylesheet&quot;<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #E50000\">href<\/span><span style=\"color: #000000\">=<\/span><span style=\"color: #A31515\">&quot;assets\/esri\/themes\/dark\/main.css&quot;<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #800000\">\/&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Working with Routes &#8211; when building routes, set the base url for the\u00a0<code>\/assets<\/code>\u00a0folder. Development and deployment will require setting different urls.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>import config from '@arcgis\/core\/config'\n\n  . . .\n\n  ngOnInit(): any {\n    \/\/ assuming assets are in \/assets\n    config.assetsPath = `${document.baseURI}\/assets`\n  }<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #AF00DB\">import<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">config<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #AF00DB\">from<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;@arcgis\/core\/config&#39;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  . . .<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #795E26\">ngOnInit<\/span><span style=\"color: #000000\">(): <\/span><span style=\"color: #001080\">any<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #008000\">\/\/ assuming assets are in \/assets<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #001080\">config<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">assetsPath<\/span><span style=\"color: #000000\"> = <\/span><span style=\"color: #A31515\">`<\/span><span style=\"color: #0000FF\">${<\/span><span style=\"color: #001080\">document<\/span><span style=\"color: #000000FF\">.<\/span><span style=\"color: #001080\">baseURI<\/span><span style=\"color: #0000FF\">}<\/span><span style=\"color: #A31515\">\/assets`<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  }<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>Migrate\u00a0<code>esri-loader<\/code>\u00a0to ES module. To migrate from\u00a0<code>esri-loader<\/code>\u00a0to ES modules, your code will need to be refactored to ES modules.<\/li>\n<\/ol>\n\n\n\n<p>Here is a snippet of esri-loader code:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>import { loadModules } from 'esri-loader'\n\nconst &#91;Map, MapView&#93; = await loadModules(&#91;'esri\/Map', 'esri\/views\/MapView'&#93;)<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #AF00DB\">import<\/span><span style=\"color: #000000\"> { <\/span><span style=\"color: #001080\">loadModules<\/span><span style=\"color: #000000\"> } <\/span><span style=\"color: #AF00DB\">from<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;esri-loader&#39;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #0000FF\">const<\/span><span style=\"color: #000000\"> &#91;<\/span><span style=\"color: #0070C1\">Map<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #0070C1\">MapView<\/span><span style=\"color: #000000\">&#93; = <\/span><span style=\"color: #AF00DB\">await<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #795E26\">loadModules<\/span><span style=\"color: #000000\">(&#91;<\/span><span style=\"color: #A31515\">&#39;esri\/Map&#39;<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #A31515\">&#39;esri\/views\/MapView&#39;<\/span><span style=\"color: #000000\">&#93;)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This is the code refactored with&nbsp;<code>@arcgis\/core<\/code>&nbsp;module paths:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ ES modules\nimport Map from '@arcgis\/core\/Map'\nimport MapView from '@arcgis\/core\/views\/MapView'<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #008000\">\/\/ ES modules<\/span><\/span>\n<span class=\"line\"><span style=\"color: #AF00DB\">import<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">Map<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #AF00DB\">from<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;@arcgis\/core\/Map&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #AF00DB\">import<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">MapView<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #AF00DB\">from<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;@arcgis\/core\/views\/MapView&#39;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This is the full sample code refactored with&nbsp;<code>@arcgis\/core<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>import { Component, ElementRef, OnInit } from '@angular\/core'\n\nimport config from '@arcgis\/core\/config'\nimport Map from '@arcgis\/core\/Map'\nimport MapView from '@arcgis\/core\/views\/MapView'\nimport FeatureLayer from '@arcgis\/core\/layers\/FeatureLayer'\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: &#91;'.\/app.component.scss'&#93;,\n})\nexport class AppComponent implements OnInit {\n  map: Map | null = null\n  view: MapView | null = null\n\n  private trailheadsLayer: FeatureLayer | null = null\n\n  constructor(private hostRef: ElementRef&lt;HTMLDivElement>) {}\n\n  ngOnInit() {\n    config.assetsPath = `${document.baseURI}\/assets`\n\n    this.map = new Map({\n      basemap: 'topo-vector',\n    })\n\n    this.view = new MapView({\n      container: this.hostRef.nativeElement,\n      map: this.map,\n      center: &#91;-118.805, 34.027&#93;, \/\/ longitude, latitude\n      zoom: 13,\n    })\n\n    this.trailheadsLayer = new FeatureLayer({\n      url: 'https:\/\/services3.arcgis.com\/GVgbJbqm8hXASVYi\/arcgis\/rest\/services\/Trailheads\/FeatureServer\/0',\n    })\n    this.map.add(this.trailheadsLayer)\n  }\n}<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #AF00DB\">import<\/span><span style=\"color: #000000\"> { <\/span><span style=\"color: #001080\">Component<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #001080\">ElementRef<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #001080\">OnInit<\/span><span style=\"color: #000000\"> } <\/span><span style=\"color: #AF00DB\">from<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;@angular\/core&#39;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #AF00DB\">import<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">config<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #AF00DB\">from<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;@arcgis\/core\/config&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #AF00DB\">import<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">Map<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #AF00DB\">from<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;@arcgis\/core\/Map&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #AF00DB\">import<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">MapView<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #AF00DB\">from<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;@arcgis\/core\/views\/MapView&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #AF00DB\">import<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">FeatureLayer<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #AF00DB\">from<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;@arcgis\/core\/layers\/FeatureLayer&#39;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">@<\/span><span style=\"color: #795E26\">Component<\/span><span style=\"color: #000000\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">selector:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;app-root&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">templateUrl:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;.\/app.component.html&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">styleUrls:<\/span><span style=\"color: #000000\"> &#91;<\/span><span style=\"color: #A31515\">&#39;.\/app.component.scss&#39;<\/span><span style=\"color: #000000\">&#93;,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">})<\/span><\/span>\n<span class=\"line\"><span style=\"color: #AF00DB\">export<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">class<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">AppComponent<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">implements<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #267F99\">OnInit<\/span><span style=\"color: #000000\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">map<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #267F99\">Map<\/span><span style=\"color: #000000\"> | <\/span><span style=\"color: #267F99\">null<\/span><span style=\"color: #000000\"> = <\/span><span style=\"color: #0000FF\">null<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #001080\">view<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #267F99\">MapView<\/span><span style=\"color: #000000\"> | <\/span><span style=\"color: #267F99\">null<\/span><span style=\"color: #000000\"> = <\/span><span style=\"color: #0000FF\">null<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #0000FF\">private<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">trailheadsLayer<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #267F99\">FeatureLayer<\/span><span style=\"color: #000000\"> | <\/span><span style=\"color: #267F99\">null<\/span><span style=\"color: #000000\"> = <\/span><span style=\"color: #0000FF\">null<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #0000FF\">constructor<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #0000FF\">private<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">hostRef<\/span><span style=\"color: #000000\">: <\/span><span style=\"color: #267F99\">ElementRef<\/span><span style=\"color: #000000\">&lt;<\/span><span style=\"color: #267F99\">HTMLDivElement<\/span><span style=\"color: #000000\">&gt;) {}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  <\/span><span style=\"color: #795E26\">ngOnInit<\/span><span style=\"color: #000000\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #001080\">config<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">assetsPath<\/span><span style=\"color: #000000\"> = <\/span><span style=\"color: #A31515\">`<\/span><span style=\"color: #0000FF\">${<\/span><span style=\"color: #001080\">document<\/span><span style=\"color: #000000FF\">.<\/span><span style=\"color: #001080\">baseURI<\/span><span style=\"color: #0000FF\">}<\/span><span style=\"color: #A31515\">\/assets`<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">this<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">map<\/span><span style=\"color: #000000\"> = <\/span><span style=\"color: #0000FF\">new<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #795E26\">Map<\/span><span style=\"color: #000000\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">basemap:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;topo-vector&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    })<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">this<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">view<\/span><span style=\"color: #000000\"> = <\/span><span style=\"color: #0000FF\">new<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #795E26\">MapView<\/span><span style=\"color: #000000\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">container:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">this<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">hostRef<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">nativeElement<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">map:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #0000FF\">this<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">map<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">center:<\/span><span style=\"color: #000000\"> &#91;-<\/span><span style=\"color: #098658\">118.805<\/span><span style=\"color: #000000\">, <\/span><span style=\"color: #098658\">34.027<\/span><span style=\"color: #000000\">&#93;, <\/span><span style=\"color: #008000\">\/\/ longitude, latitude<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">zoom:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #098658\">13<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    })<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">this<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">trailheadsLayer<\/span><span style=\"color: #000000\"> = <\/span><span style=\"color: #0000FF\">new<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #795E26\">FeatureLayer<\/span><span style=\"color: #000000\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">      <\/span><span style=\"color: #001080\">url:<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #A31515\">&#39;https:\/\/services3.arcgis.com\/GVgbJbqm8hXASVYi\/arcgis\/rest\/services\/Trailheads\/FeatureServer\/0&#39;<\/span><span style=\"color: #000000\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    })<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">    <\/span><span style=\"color: #0000FF\">this<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">map<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #795E26\">add<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #0000FF\">this<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">trailheadsLayer<\/span><span style=\"color: #000000\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #000000\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ol start=\"6\" class=\"wp-block-list\">\n<li>Run\u00a0<code>npx ng serve --open<\/code>\u00a0for a dev server that will automatically open a browser window.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/portal-atlasx.cdg.co.th\/share\/Portal%20Docs\/Framework\/AXWA\/migrate-arcgis-api-js-to-es-modules.png\" alt=\"\" title=\"null\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"references\">References:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/Esri\/jsapi-resources\/tree\/master\/esm-samples\/jsapi-angular-cli\" target=\"_blank\" rel=\"noreferrer noopener\">ArcGIS JSAPI Integration with Angular<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/es-modules\/\" target=\"_blank\" rel=\"noreferrer noopener\">Build with ES modules<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/create-a-starter-app\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create a starter app<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"resolving-permission-errors\">Resolving Permission Errors<\/h2>\n\n\n\n<p>\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14&nbsp;<code>EACCES<\/code>&nbsp;permission \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e01\u0e34\u0e14\u0e02\u0e36\u0e49\u0e19\u0e44\u0e14\u0e49\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e21\u0e35\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 global package \u0e2b\u0e32\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e23\u0e13\u0e35\u0e19\u0e35\u0e49 \u0e2d\u0e32\u0e08\u0e15\u0e49\u0e2d\u0e07\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 npm \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e21\u0e35\u0e01\u0e32\u0e23\u0e2d\u0e19\u0e38\u0e0d\u0e32\u0e15\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e2a\u0e39\u0e07<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<h5 class=\"wp-block-heading\">Note<\/h5>\n\n\n\n<p>\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49&nbsp;<code>sudo<\/code>&nbsp;\u0e01\u0e31\u0e1a\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07 npm \u0e19\u0e31\u0e49\u0e19<strong>\u0e44\u0e21\u0e48\u0e41\u0e19\u0e30\u0e19\u0e33<\/strong>\u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 \u0e40\u0e1e\u0e23\u0e32\u0e30\u0e08\u0e1e\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e01\u0e34\u0e14\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e41\u0e17\u0e23\u0e01\u0e0b\u0e49\u0e2d\u0e19\u0e17\u0e35\u0e48\u0e15\u0e32\u0e21\u0e21\u0e32\u0e44\u0e14\u0e49<\/p>\n<\/blockquote>\n\n\n\n<p>\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e19\u0e35\u0e49\u0e21\u0e35\u0e2a\u0e2d\u0e07\u0e15\u0e31\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e43\u0e19\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02\u0e1b\u0e31\u0e0d\u0e2b\u0e32 permission \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e09\u0e1a\u0e31\u0e1a\u0e40\u0e15\u0e47\u0e21\u0e41\u0e25\u0e30\u0e15\u0e31\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e14\u0e39\u0e17\u0e35\u0e48&nbsp;<a href=\"https:\/\/docs.npmjs.com\/resolving-eacces-permissions-errors-when-installing-packages-globally\" target=\"_blank\" rel=\"noreferrer noopener\">npm docs<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"option-1\">Option 1<\/h3>\n\n\n\n<p>\u0e27\u0e34\u0e18\u0e35\u0e17\u0e35\u0e48\u0e14\u0e35\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e2b\u0e25\u0e35\u0e01\u0e40\u0e25\u0e35\u0e48\u0e22\u0e07\u0e1b\u0e31\u0e0d\u0e2b\u0e32 permission \u0e04\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 NodeJS \u0e41\u0e25\u0e30 npm \u0e43\u0e2b\u0e21\u0e48 \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49 node version manager (NVM)<\/p>\n\n\n\n<p>\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e19\u0e35\u0e49\u0e08\u0e30\u0e2a\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19&nbsp;<a href=\"https:\/\/github.com\/nvm-sh\/nvm\" target=\"_blank\" rel=\"noreferrer noopener\">nvm<\/a>&nbsp;\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e09\u0e1a\u0e31\u0e1a\u0e40\u0e15\u0e47\u0e21 \u0e14\u0e39\u0e44\u0e14\u0e49\u0e17\u0e35\u0e48&nbsp;<a href=\"https:\/\/github.com\/nvm-sh\/nvm#installation-and-update\" target=\"_blank\" rel=\"noreferrer noopener\">nvm docs<\/a>&nbsp;\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e15\u0e31\u0e27\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e41\u0e25\u0e30\u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Windows \u0e14\u0e39\u0e44\u0e14\u0e49\u0e17\u0e35\u0e48&nbsp;<a href=\"https:\/\/docs.npmjs.com\/downloading-and-installing-node-js-and-npm#using-a-node-version-manager-to-install-nodejs-and-npm\" target=\"_blank\" rel=\"noreferrer noopener\">nvm docs<\/a><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 nvm<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>$ curl -o- https:\/\/raw.githubusercontent.com\/nvm-sh\/nvm\/v0.34.0\/install.sh | bash<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #001080\">$<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">curl<\/span><span style=\"color: #000000\"> -<\/span><span style=\"color: #001080\">o<\/span><span style=\"color: #000000\">- https:<\/span><span style=\"color: #008000\">\/\/raw.githubusercontent.com\/nvm-sh\/nvm\/v0.34.0\/install.sh | bash<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e34\u0e14 terminal \u0e02\u0e36\u0e49\u0e19\u0e21\u0e32\u0e43\u0e2b\u0e21\u0e48 \u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e27\u0e48\u0e32\u0e01\u0e32\u0e23\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c\u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>$ command -v nvm<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #001080\">$<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">command<\/span><span style=\"color: #000000\"> -<\/span><span style=\"color: #001080\">v<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">nvm<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14\u0e41\u0e25\u0e30\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 NodeJS \u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e48\u0e19 LTS \u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>$ nvm install --lts<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #001080\">$<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">nvm<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">install<\/span><span style=\"color: #000000\"> --<\/span><span style=\"color: #001080\">lts<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e43\u0e2b\u0e49 NodeJS \u0e17\u0e35\u0e48\u0e40\u0e1e\u0e34\u0e48\u0e07\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e40\u0e1b\u0e47\u0e19 environment \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>$ nvm alias default lts\/*<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #001080\">$<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">nvm<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">alias<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #AF00DB\">default<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">lts<\/span><span style=\"color: #008000\">\/*<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>\u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e34\u0e14 terminal \u0e02\u0e36\u0e49\u0e19\u0e21\u0e32\u0e43\u0e2b\u0e21\u0e48 \u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e44\u0e14\u0e49\u0e27\u0e48\u0e32 nvm \u0e01\u0e33\u0e25\u0e31\u0e07\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e01\u0e31\u0e1a NodeJS \u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e48\u0e19\u0e2d\u0e30\u0e44\u0e23\u0e2d\u0e22\u0e39\u0e48 \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>$ node -v # \u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e48\u0e19\u0e02\u0e2d\u0e07 NodeJS\n$ which npm # \u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07 path \u0e17\u0e35\u0e48\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c ~\/.nvm<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #001080\">$<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">node<\/span><span style=\"color: #000000\"> -<\/span><span style=\"color: #001080\">v<\/span><span style=\"color: #000000\"> # <\/span><span style=\"color: #001080\">\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07\u0e40\u0e27\u0e2d\u0e23<\/span><span style=\"color: #000000\">\u0e4c<\/span><span style=\"color: #001080\">\u0e0a\u0e31<\/span><span style=\"color: #000000\">\u0e48<\/span><span style=\"color: #001080\">\u0e19\u0e02\u0e2d\u0e07<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">NodeJS<\/span><\/span>\n<span class=\"line\"><span style=\"color: #001080\">$<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">which<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">npm<\/span><span style=\"color: #000000\"> # <\/span><span style=\"color: #001080\">\u0e08\u0e30\u0e41\u0e2a\u0e14\u0e07<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">path<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">\u0e17\u0e35<\/span><span style=\"color: #000000\">\u0e48<\/span><span style=\"color: #001080\">\u0e2d\u0e22\u0e39<\/span><span style=\"color: #000000\">\u0e48<\/span><span style=\"color: #001080\">\u0e43\u0e19\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23<\/span><span style=\"color: #000000\">\u0e4c ~\/.<\/span><span style=\"color: #001080\">nvm<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e19\u0e35\u0e49 global package \u0e08\u0e30\u0e16\u0e39\u0e01\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e2d\u0e22\u0e39\u0e48\u0e43\u0e19\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c&nbsp;<code>~\/.nvm<\/code>&nbsp;\u0e1b\u0e31\u0e0d\u0e2b\u0e32\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a permission \u0e08\u0e30\u0e44\u0e21\u0e48\u0e40\u0e01\u0e34\u0e14\u0e02\u0e36\u0e49\u0e19\u0e2d\u0e35\u0e01\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e43\u0e0a\u0e49&nbsp;<code>npm<\/code>&nbsp;\u0e42\u0e14\u0e22<em>\u0e44\u0e21\u0e48\u0e21\u0e35<\/em>\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07&nbsp;<code>sudo<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"option-2\">Option 2<\/h3>\n\n\n\n<p><small><em>\u0e43\u0e0a\u0e49\u0e01\u0e31\u0e1a Windows \u0e44\u0e21\u0e48\u0e44\u0e14\u0e49<\/em><\/small><\/p>\n\n\n\n<p>\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19 owner \u0e02\u0e2d\u0e07\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c npm \u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19 user \u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Fira-Code\" style=\"font-size:.875rem;font-family:Code-Pro-Fira-Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" style=\"color:#000000;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>$ sudo chown -R $(whoami) \/usr\/local\/{lib\/node_modules,bin,share}\n$ sudo chown -R $(whoami) ~\/.npm ~\/.npmrc<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki light-plus\" style=\"background-color: #FFFFFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #001080\">$<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">sudo<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">chown<\/span><span style=\"color: #000000\"> -<\/span><span style=\"color: #0070C1\">R<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #795E26\">$<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #001080\">whoami<\/span><span style=\"color: #000000\">) \/<\/span><span style=\"color: #001080\">usr<\/span><span style=\"color: #000000\">\/<\/span><span style=\"color: #001080\">local<\/span><span style=\"color: #000000\">\/{<\/span><span style=\"color: #001080\">lib<\/span><span style=\"color: #000000\">\/<\/span><span style=\"color: #001080\">node_modules<\/span><span style=\"color: #000000\">,<\/span><span style=\"color: #001080\">bin<\/span><span style=\"color: #000000\">,<\/span><span style=\"color: #001080\">share<\/span><span style=\"color: #000000\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #001080\">$<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">sudo<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #001080\">chown<\/span><span style=\"color: #000000\"> -<\/span><span style=\"color: #0070C1\">R<\/span><span style=\"color: #000000\"> <\/span><span style=\"color: #795E26\">$<\/span><span style=\"color: #000000\">(<\/span><span style=\"color: #001080\">whoami<\/span><span style=\"color: #000000\">) ~<\/span><span style=\"color: #811F3F\">\/.npm ~\/<\/span><span style=\"color: #000000\">.<\/span><span style=\"color: #001080\">npmrc<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e32\u0e01\u0e42\u0e1f\u0e25\u0e40\u0e14\u0e2d\u0e23\u0e4c global \u0e40\u0e2b\u0e25\u0e48\u0e32\u0e19\u0e35\u0e49\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e42\u0e14\u0e22&nbsp;<code>root<\/code>&nbsp;\u0e2d\u0e35\u0e01\u0e15\u0e48\u0e2d\u0e44\u0e1b \u0e04\u0e38\u0e13\u0e08\u0e36\u0e07\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07 global package \u0e44\u0e14\u0e49\u0e42\u0e14\u0e22<em>\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e43\u0e0a\u0e49<\/em>&nbsp;<code>sudo<\/code><\/p>\n","protected":false},"featured_media":0,"parent":3244,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nav_title":"","positive":"","negative":"","footnotes":""},"docs_category":[],"class_list":["post-3259","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/comments?post=3259"}],"version-history":[{"count":2,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3259\/revisions"}],"predecessor-version":[{"id":3261,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3259\/revisions\/3261"}],"up":[{"embeddable":true,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs\/3244"}],"wp:attachment":[{"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/media?parent=3259"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/portal-atlasx.cdg.co.th\/home\/wp-json\/wp\/v2\/docs_category?post=3259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}