{"id":1735,"date":"2019-05-13T07:54:07","date_gmt":"2019-05-13T00:54:07","guid":{"rendered":"https:\/\/www.linuxid.net\/post\/?p=1735"},"modified":"2025-04-18T15:22:00","modified_gmt":"2025-04-18T08:22:00","slug":"cara-membuat-aplikasi-angular-dengan-angular-cli","status":"publish","type":"post","link":"https:\/\/www.linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/","title":{"rendered":"Cara membuat Aplikasi Angular dengan Angular CLI"},"content":{"rendered":"<p>Angular adalah javascript frameworks, libraries, assets, dan utilitas yang cukup populer untuk pengembangan website. Tutorial ini akan membantu Anda membuat aplikasi Angular menggunakan tool Angular CLI pada platform apa pun.<\/p>\n<p>Angular project menyediakan dan Command Line Interface yang disebut Angular CLI untuk otomatisasi. Anda dapat melakukan operasi otomatisasi dalam proyek Angular daripada melakukannya secara manual dan menghemat waktu dan tenaga. Menggunakan CLI Angular, Anda dapat melakukan hal berikut:<\/p>\n<ul>\n<li>Membuat project baru.<\/li>\n<li>Pengaturan Lingkungan aplikasi.<\/li>\n<li>Kelola konfigurasi aplikasi.<\/li>\n<li>Membangun komponen, layanan, dan sistem perutean.<\/li>\n<li>Mulai aplikasi, menguji dan menggunakan proyek.<\/li>\n<li>Menginstal libraries pihak ke-3 seperti Bootstrap, Sass dll.<\/li>\n<\/ul>\n<p>Mari buat Aplikasi Angular Anda:<\/p>\n<h2 class=\"heading1\">Permulaan<\/h2>\n<p>Angode memerlukan Nodejs untuk diinstal pada sistem Anda. Anda dapat mengikuti salah satu tutorial berikut untuk menginstal Angular pada sistem sesuai sistem operasi Anda.<\/p>\n<p>Setelah instalasi, pastikan Node.js dan NPM terinstal dengan benar. Gunakan perintah berikut untuk menampilkan versi dari node dan npm yang terinstall.<\/p>\n<pre><strong>node -v<\/strong>&#13;\n<\/pre>\n<pre><strong>npm -v<\/strong>&#13;\n<\/pre>\n<h2 class=\"heading1\">Install Angular CLI<\/h2>\n<p>Sekarang, Instal utilitas Angular CLI menggunakan NPM package manager.<\/p>\n<pre>npm install -g @angular\/cli&#13;\n<\/pre>\n<p>Opsi -g memastikan untuk menginstal Angular CLI secara global pada sistem. Jadi, npm akan dapat diakses oleh semua pengguna dan aplikasi pada sistem. Angular CLI menyediakan perintah yang digunakan untuk operasi command line. Mari kita periksa versi ng yang diinstal pada sistem Anda.<\/p>\n<pre><strong>ng --version<\/strong>&#13;\n&#13;\n&#13;\n     __      ____ _     ___&#13;\n    \/ \\   _ __   __ _ _   _| | __ _ _ __     \/ ___| |   |_ _|&#13;\n   \/ \u25b3 \\ | '_ \\ \/ _` | | | | |\/ _` | '__|   | |   | |    | |&#13;\n  \/ ___ \\| | | | (_| | |_| | | (_| | |      | |___| |___ | |&#13;\n \/_\/   \\_\\_| |_|\\__, |\\__,_|_|\\__,_|_|       \\____|_____|___|&#13;\n     |___\/&#13;\n&#13;\n&#13;\nAngular CLI: 8.0.3&#13;\nNode: 12.4.0&#13;\nOS: linux x64&#13;\nAngular:&#13;\n...&#13;\n&#13;\nPackageVersion&#13;\n------------------------------------------------------&#13;\n@angular-devkit\/architect    0.800.3&#13;\n@angular-devkit\/core         8.0.3&#13;\n@angular-devkit\/schematics   8.0.3&#13;\n@schematics\/angular          8.0.3&#13;\n@schematics\/update0.800.3&#13;\nrxjs   6.4.0&#13;\n<\/pre>\n<h2 class=\"heading1\">Membuat Aplikasi Angular<\/h2>\n<p>Sistem Anda siap untuk membangun Aplikasi Angular. Perintah berikut akan membuat aplikasi Angular dengan nama <strong>hello-angular.<\/strong><\/p>\n<pre>ng new hello-angular&#13;\n<\/pre>\n<p>Dengan perintah ini akan membuat direktori dengan nama project Anda dan membuat semua file di bawahnya. Perintah ini juga menginstal semua libraries yang diperlukan dalam direktori tempat project tersimpan. Pada pembuatan yang berhasil, Anda akan melihat pesan di bawah ini di layar.<\/p>\n<pre class=\"pretty\">...&#13;\n...&#13;\nadded 1011 packages from 1041 contributors and audited 19005 packages in 55.774s&#13;\nfound 0 vulnerabilities&#13;\n&#13;\n    Successfully initialized git.&#13;\n<\/pre>\n<h2 class=\"heading1\">Menjalankan Aplikasi Angular<\/h2>\n<p>Aplikasi Angular dasar Anda siap untuk dijalankan. Ubah ke direktori <strong>hello-angular<\/strong> dan jalankan aplikasi Angular Anda menggunakan perintah ng serve.<\/p>\n<pre>cd hello-angular&#13;\nng serve&#13;\n<\/pre>\n<p><a href=\"https:\/\/www.linuxid.net\/assets\/media\/Angular-img_5d09bb9df291f.png\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-18710\" src=\"https:\/\/www.linuxid.net\/assets\/media\/Angular-img_5d09bb9df291f.png\" alt=\"Create Angular Application with CLI\" width=\"660\" height=\"340\"\/><\/a><\/p>\n<p>Anda dapat mengakses aplikasi angular Anda di localhost port 4200, Yang merupakan host dan port default yang digunakan oleh aplikasi Angular.<\/p>\n<pre class=\"pretty\">  http:\/\/localhost:4200&#13;\n<\/pre>\n<p><a href=\"https:\/\/www.linuxid.net\/assets\/media\/Angular-img_5d09bb9e4b3de.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-18711\" src=\"https:\/\/www.linuxid.net\/assets\/media\/Angular-img_5d09bb9e4b3de.png\" alt=\"Angular in web browser\" width=\"660\" height=\"440\"\/><\/a><\/p>\n<p>Anda dapat mengubah host dan port untuk menjalankan aplikasi Angular dengan memberikan argumen \u2013host dan \u2013port pada command line.<\/p>\n<pre>ng serve --host 0.0.0.0 --port 8080&#13;\n<\/pre>\n<p>Alamat IP 0.0.0.0 listens pada semua interface dan dapat diakses secara publik.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular adalah javascript frameworks, libraries, assets, dan utilitas yang cukup populer untuk pengembangan website. Tutorial&hellip;<\/p>\n","protected":false},"author":2,"featured_media":1736,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,10,6],"tags":[253,254,25,9,129,178],"class_list":["post-1735","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-centos","category-debian","category-ubuntu","tag-angular","tag-angular-cli","tag-fedora","tag-ubuntu","tag-ubuntu-18-04","tag-windows"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cara membuat Aplikasi Angular dengan Angular CLI - Linuxid<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara membuat Aplikasi Angular dengan Angular CLI - Linuxid\" \/>\n<meta property=\"og:description\" content=\"Angular adalah javascript frameworks, libraries, assets, dan utilitas yang cukup populer untuk pengembangan website. Tutorial&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/\" \/>\n<meta property=\"og:site_name\" content=\"Linuxid\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-13T00:54:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-18T08:22:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/linuxid.net\/post\/wp-content\/uploads\/2025\/03\/Cara-membuat-Aplikasi-Angular-dengan-Angular-CLI.png\" \/>\n\t<meta property=\"og:image:width\" content=\"649\" \/>\n\t<meta property=\"og:image:height\" content=\"446\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"xsand\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"xsand\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/\",\"url\":\"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/\",\"name\":\"Cara membuat Aplikasi Angular dengan Angular CLI - Linuxid\",\"isPartOf\":{\"@id\":\"https:\/\/linuxid.net\/post\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.linuxid.net\/post\/wp-content\/uploads\/2025\/03\/Cara-membuat-Aplikasi-Angular-dengan-Angular-CLI.png\",\"datePublished\":\"2019-05-13T00:54:07+00:00\",\"dateModified\":\"2025-04-18T08:22:00+00:00\",\"author\":{\"@id\":\"https:\/\/linuxid.net\/post\/#\/schema\/person\/e6642d26041eab9fef2677e204e89d79\"},\"breadcrumb\":{\"@id\":\"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/#primaryimage\",\"url\":\"https:\/\/www.linuxid.net\/post\/wp-content\/uploads\/2025\/03\/Cara-membuat-Aplikasi-Angular-dengan-Angular-CLI.png\",\"contentUrl\":\"https:\/\/www.linuxid.net\/post\/wp-content\/uploads\/2025\/03\/Cara-membuat-Aplikasi-Angular-dengan-Angular-CLI.png\",\"width\":649,\"height\":446},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Beranda\",\"item\":\"https:\/\/linuxid.net\/post\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara membuat Aplikasi Angular dengan Angular CLI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/linuxid.net\/post\/#website\",\"url\":\"https:\/\/linuxid.net\/post\/\",\"name\":\"Linuxid\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/linuxid.net\/post\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/linuxid.net\/post\/#\/schema\/person\/e6642d26041eab9fef2677e204e89d79\",\"name\":\"xsand\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/linuxid.net\/post\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cc8513768e15fa0758099a0ba5b898f3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cc8513768e15fa0758099a0ba5b898f3?s=96&d=mm&r=g\",\"caption\":\"xsand\"},\"url\":\"https:\/\/www.linuxid.net\/post\/author\/xsand\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara membuat Aplikasi Angular dengan Angular CLI - Linuxid","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/","og_locale":"id_ID","og_type":"article","og_title":"Cara membuat Aplikasi Angular dengan Angular CLI - Linuxid","og_description":"Angular adalah javascript frameworks, libraries, assets, dan utilitas yang cukup populer untuk pengembangan website. Tutorial&hellip;","og_url":"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/","og_site_name":"Linuxid","article_published_time":"2019-05-13T00:54:07+00:00","article_modified_time":"2025-04-18T08:22:00+00:00","og_image":[{"width":649,"height":446,"url":"https:\/\/linuxid.net\/post\/wp-content\/uploads\/2025\/03\/Cara-membuat-Aplikasi-Angular-dengan-Angular-CLI.png","type":"image\/png"}],"author":"xsand","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"xsand","Estimasi waktu membaca":"2 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/","url":"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/","name":"Cara membuat Aplikasi Angular dengan Angular CLI - Linuxid","isPartOf":{"@id":"https:\/\/linuxid.net\/post\/#website"},"primaryImageOfPage":{"@id":"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/#primaryimage"},"image":{"@id":"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/#primaryimage"},"thumbnailUrl":"https:\/\/www.linuxid.net\/post\/wp-content\/uploads\/2025\/03\/Cara-membuat-Aplikasi-Angular-dengan-Angular-CLI.png","datePublished":"2019-05-13T00:54:07+00:00","dateModified":"2025-04-18T08:22:00+00:00","author":{"@id":"https:\/\/linuxid.net\/post\/#\/schema\/person\/e6642d26041eab9fef2677e204e89d79"},"breadcrumb":{"@id":"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/#primaryimage","url":"https:\/\/www.linuxid.net\/post\/wp-content\/uploads\/2025\/03\/Cara-membuat-Aplikasi-Angular-dengan-Angular-CLI.png","contentUrl":"https:\/\/www.linuxid.net\/post\/wp-content\/uploads\/2025\/03\/Cara-membuat-Aplikasi-Angular-dengan-Angular-CLI.png","width":649,"height":446},{"@type":"BreadcrumbList","@id":"https:\/\/linuxid.net\/post\/cara-membuat-aplikasi-angular-dengan-angular-cli\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Beranda","item":"https:\/\/linuxid.net\/post\/"},{"@type":"ListItem","position":2,"name":"Cara membuat Aplikasi Angular dengan Angular CLI"}]},{"@type":"WebSite","@id":"https:\/\/linuxid.net\/post\/#website","url":"https:\/\/linuxid.net\/post\/","name":"Linuxid","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/linuxid.net\/post\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Person","@id":"https:\/\/linuxid.net\/post\/#\/schema\/person\/e6642d26041eab9fef2677e204e89d79","name":"xsand","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/linuxid.net\/post\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cc8513768e15fa0758099a0ba5b898f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cc8513768e15fa0758099a0ba5b898f3?s=96&d=mm&r=g","caption":"xsand"},"url":"https:\/\/www.linuxid.net\/post\/author\/xsand\/"}]}},"_links":{"self":[{"href":"https:\/\/www.linuxid.net\/post\/wp-json\/wp\/v2\/posts\/1735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.linuxid.net\/post\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.linuxid.net\/post\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.linuxid.net\/post\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.linuxid.net\/post\/wp-json\/wp\/v2\/comments?post=1735"}],"version-history":[{"count":1,"href":"https:\/\/www.linuxid.net\/post\/wp-json\/wp\/v2\/posts\/1735\/revisions"}],"predecessor-version":[{"id":2970,"href":"https:\/\/www.linuxid.net\/post\/wp-json\/wp\/v2\/posts\/1735\/revisions\/2970"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.linuxid.net\/post\/wp-json\/wp\/v2\/media\/1736"}],"wp:attachment":[{"href":"https:\/\/www.linuxid.net\/post\/wp-json\/wp\/v2\/media?parent=1735"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.linuxid.net\/post\/wp-json\/wp\/v2\/categories?post=1735"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.linuxid.net\/post\/wp-json\/wp\/v2\/tags?post=1735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}