{"id":1875,"date":"2018-05-22T12:51:21","date_gmt":"2018-05-22T12:51:21","guid":{"rendered":"https:\/\/www.moveoapps.com\/blog\/?p=1875"},"modified":"2018-07-10T11:01:10","modified_gmt":"2018-07-10T11:01:10","slug":"angular-6-cli-quick-guide-installation-setup","status":"publish","type":"post","link":"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/","title":{"rendered":"Angular 6 with CLI \u2013 Quick Guide to Installation and Setup"},"content":{"rendered":"<p>The right tools make app development a whole lot easier than doing everything by hand. And for a long time no, Angular has been one of the best tools for app developers. It can easily handle multiple tasks in app development, including creating a project, adding files, testing and deployment.<\/p>\n<p>Angular\u2019s latest version Angular 6 is available now. It is undoubtedly one of the most modern and popular frontend JavaScript frameworks and developers can\u2019t wait to try it out. If you too are one of them, here\u2019s a quick guide to help you install Angular 6 with CLI on your system. The installation is not a long process, and you can start developing your first app in no time. All you need is to make sure that all the dependencies are properly installed. The two prerequisites you need to check for are:<\/p>\n<ul>\n<li><strong>Node.js with NPM (Node Package Manager)<\/strong><\/li>\n<li><strong>Angular-CLI (Command Line Interface)<\/strong><\/li>\n<\/ul>\n<blockquote><p>Read also:<a href=\"https:\/\/www.moveoapps.com\/blog\/angular-6-make-developers-lives-easier\/\">New Features of Angular 6 Are Here to Make Developers\u2019 Lives Easier<\/a><\/p><\/blockquote>\n<h5>So, to verify if you have Node.js correctly installed, go to the command line and put in:<\/h5>\n<pre>node -v<\/pre>\n<p>Entering that will show you the current version of Node you have on your computer. If your console doesn\u2019t recognize this command, it means that you need to first install the latest version of <a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noopener\">Node.js<\/a>.<\/p>\n<p>Once you are done installing, close the command line and reload it again. The node -v command should be working now and you should be seeing the current version number.<\/p>\n<p>It\u2019s now time to install <a href=\"https:\/\/cli.angular.io\/\" target=\"_blank\" rel=\"noopener\">Angular-CLI<\/a>. This is the tool that helps you create Angular projects and takes the hard manual work out of app development.<\/p>\n<h5>So in the command line, type:<\/h5>\n<pre>npm install -g @angular\/cli<\/pre>\n<h5>After installation, type:<\/h5>\n<pre>ng -v<\/pre>\n<h5>You will now see an output screen that looks as follows:<\/h5>\n<h5><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1877\" src=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/angularcli.jpg\" alt=\"\" width=\"621\" height=\"230\" srcset=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/angularcli.jpg 621w, https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/angularcli-300x111.jpg 300w, https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/angularcli-150x56.jpg 150w\" sizes=\"auto, (max-width: 621px) 100vw, 621px\" \/><br \/>\n<strong>Are you excited to start a new ng6 project already? We are too. Just Navigate to the right path, and type:<\/strong><\/h5>\n<pre>cd wamp64\/www\/<\/pre>\n<p><strong>You can now create the new project.<\/strong><\/p>\n<pre>ng new angular6demo<\/pre>\n<p><strong>\u2028\u2028Navigate to the project and rev up the local server<\/strong><\/p>\n<pre>cd wamp64\/www\/angular6demo<\/pre>\n<p><strong>Open your projects<\/strong><\/p>\n<pre>$ ng serve --open<\/pre>\n<p>If it doesn\u2019t open up automatically, you can go to <a href=\"http:\/\/localhost:4200\/\" target=\"_blank\" rel=\"noopener\">http:\/\/localhost:4200\/<\/a><\/p>\n<p><strong>*note<\/strong>: <a>ng serve<\/a> command launches the server, watches your files, and rebuilds the app as you make changes to those files*<\/p>\n<h3>Edit project:<\/h3>\n<ul>\n<li>Open file in<a>\/angular6demo\/src\/app\/app.component.ts<\/a>:<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1878\" src=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/editproject1.jpg\" alt=\"\" width=\"686\" height=\"265\" srcset=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/editproject1.jpg 686w, https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/editproject1-300x116.jpg 300w, https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/editproject1-150x58.jpg 150w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><\/p>\n<ul>\n<li>Save <a>app.component.ts<\/a><\/li>\n<li>With <a>ng serve<\/a> still running, make and save a new change in <a>app.component.ts<\/a>:<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1880\" src=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/editproject2.jpg\" alt=\"\" width=\"684\" height=\"263\" srcset=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/editproject2.jpg 684w, https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/editproject2-300x115.jpg 300w, https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/editproject2-150x58.jpg 150w\" sizes=\"auto, (max-width: 684px) 100vw, 684px\" \/><\/p>\n<ul>\n<li>Open <a href=\"http:\/\/localhost:4200\/\" target=\"_blank\" rel=\"noopener\">http:\/\/localhost:4200\/<\/a> &#8212; notice how it changed automatically.<\/li>\n<\/ul>\n<h4>Test build<\/h4>\n<pre>ng build<\/pre>\n<p>you will now have created a new folder called \u201c\/dist\/\u201d in the app root. That\u2019s all there is to it. The new Angular 6 app is now compiled and ready for shipping. Now that you know how easy it is to install Angular 6 on your system, go on ang create some great projects with it. Do share your experience with us and if you need some help, we are just a message away. Happy coding!<br \/>\n<script src=\"\/\/newsharecounts.s3-us-west-2.amazonaws.com\/nsc.js\" type=\"text\/javascript\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The right tools make app development a whole lot easier than doing everything by hand. And for a long time no, Angular has been one of the best tools for app developers. It can easily handle multiple tasks in app development, including creating a project, adding files, testing and deployment. Angular\u2019s latest version Angular 6 &hellip; <a href=\"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Angular 6 with CLI \u2013 Quick Guide to Installation and Setup<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":101018,"featured_media":1882,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[26],"tags":[],"class_list":["post-1875","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Quick Guide to Installing Angular 6 CLI for better web app development<\/title>\n<meta name=\"description\" content=\"Angular 6 is finally out in May 2018 and it comes with some great new features. Check out this quick guide to install and start using it today.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quick Guide to Installing Angular 6 CLI for better web app development\" \/>\n<meta property=\"og:description\" content=\"Angular 6 is finally out in May 2018 and it comes with some great new features. Check out this quick guide to install and start using it today.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/\" \/>\n<meta property=\"og:site_name\" content=\"Moveo Apps\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/bhargav.patel.121\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-22T12:51:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-07-10T11:01:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/Angular-6-with-CLI-\u2013-Quick-Guide-to-Installation-and-Setup.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1294\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bhargav Patel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/Bhargav_bkpatel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bhargav Patel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/\",\"url\":\"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/\",\"name\":\"Quick Guide to Installing Angular 6 CLI for better web app development\",\"isPartOf\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/Angular-6-with-CLI-\u2013-Quick-Guide-to-Installation-and-Setup.png\",\"datePublished\":\"2018-05-22T12:51:21+00:00\",\"dateModified\":\"2018-07-10T11:01:10+00:00\",\"author\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/59404500d3fc1ef687e48abb867aec10\"},\"description\":\"Angular 6 is finally out in May 2018 and it comes with some great new features. Check out this quick guide to install and start using it today.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/#primaryimage\",\"url\":\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/Angular-6-with-CLI-\u2013-Quick-Guide-to-Installation-and-Setup.png\",\"contentUrl\":\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/Angular-6-with-CLI-\u2013-Quick-Guide-to-Installation-and-Setup.png\",\"width\":2560,\"height\":1294},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.moveoapps.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular 6 with CLI \u2013 Quick Guide to Installation and Setup\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/#website\",\"url\":\"https:\/\/www.moveoapps.com\/blog\/\",\"name\":\"Moveo Apps\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.moveoapps.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/59404500d3fc1ef687e48abb867aec10\",\"name\":\"Bhargav Patel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/76bba2d4a1c359a815c5f3cfec27863933eecf8884d2008798d5786216b930b3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/76bba2d4a1c359a815c5f3cfec27863933eecf8884d2008798d5786216b930b3?s=96&d=mm&r=g\",\"caption\":\"Bhargav Patel\"},\"description\":\"Bhargav Patel is a passionate frontend developer at MoveoApps with expertise in React Native, Angular5, NodeJS and ReactJS. With a keen interest in apps and a sharp eye for the latest trends, he doesn\u2019t let pass an opportunity to help the developer community with articles and tips on honing the craft.\",\"sameAs\":[\"http:\/\/www.moveoapps.com\",\"https:\/\/www.facebook.com\/bhargav.patel.121\",\"https:\/\/x.com\/https:\/\/twitter.com\/Bhargav_bkpatel\"],\"url\":\"https:\/\/www.moveoapps.com\/blog\/author\/bhargav-patel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Quick Guide to Installing Angular 6 CLI for better web app development","description":"Angular 6 is finally out in May 2018 and it comes with some great new features. Check out this quick guide to install and start using it today.","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:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/","og_locale":"en_US","og_type":"article","og_title":"Quick Guide to Installing Angular 6 CLI for better web app development","og_description":"Angular 6 is finally out in May 2018 and it comes with some great new features. Check out this quick guide to install and start using it today.","og_url":"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/","og_site_name":"Moveo Apps","article_author":"https:\/\/www.facebook.com\/bhargav.patel.121","article_published_time":"2018-05-22T12:51:21+00:00","article_modified_time":"2018-07-10T11:01:10+00:00","og_image":[{"width":2560,"height":1294,"url":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/Angular-6-with-CLI-\u2013-Quick-Guide-to-Installation-and-Setup.png","type":"image\/png"}],"author":"Bhargav Patel","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/Bhargav_bkpatel","twitter_misc":{"Written by":"Bhargav Patel","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/","url":"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/","name":"Quick Guide to Installing Angular 6 CLI for better web app development","isPartOf":{"@id":"https:\/\/www.moveoapps.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/#primaryimage"},"image":{"@id":"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/#primaryimage"},"thumbnailUrl":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/Angular-6-with-CLI-\u2013-Quick-Guide-to-Installation-and-Setup.png","datePublished":"2018-05-22T12:51:21+00:00","dateModified":"2018-07-10T11:01:10+00:00","author":{"@id":"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/59404500d3fc1ef687e48abb867aec10"},"description":"Angular 6 is finally out in May 2018 and it comes with some great new features. Check out this quick guide to install and start using it today.","breadcrumb":{"@id":"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/#primaryimage","url":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/Angular-6-with-CLI-\u2013-Quick-Guide-to-Installation-and-Setup.png","contentUrl":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/05\/Angular-6-with-CLI-\u2013-Quick-Guide-to-Installation-and-Setup.png","width":2560,"height":1294},{"@type":"BreadcrumbList","@id":"https:\/\/www.moveoapps.com\/blog\/angular-6-cli-quick-guide-installation-setup\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.moveoapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular 6 with CLI \u2013 Quick Guide to Installation and Setup"}]},{"@type":"WebSite","@id":"https:\/\/www.moveoapps.com\/blog\/#website","url":"https:\/\/www.moveoapps.com\/blog\/","name":"Moveo Apps","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.moveoapps.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/59404500d3fc1ef687e48abb867aec10","name":"Bhargav Patel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/76bba2d4a1c359a815c5f3cfec27863933eecf8884d2008798d5786216b930b3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/76bba2d4a1c359a815c5f3cfec27863933eecf8884d2008798d5786216b930b3?s=96&d=mm&r=g","caption":"Bhargav Patel"},"description":"Bhargav Patel is a passionate frontend developer at MoveoApps with expertise in React Native, Angular5, NodeJS and ReactJS. With a keen interest in apps and a sharp eye for the latest trends, he doesn\u2019t let pass an opportunity to help the developer community with articles and tips on honing the craft.","sameAs":["http:\/\/www.moveoapps.com","https:\/\/www.facebook.com\/bhargav.patel.121","https:\/\/x.com\/https:\/\/twitter.com\/Bhargav_bkpatel"],"url":"https:\/\/www.moveoapps.com\/blog\/author\/bhargav-patel\/"}]}},"_links":{"self":[{"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/posts\/1875","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/users\/101018"}],"replies":[{"embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/comments?post=1875"}],"version-history":[{"count":8,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/posts\/1875\/revisions"}],"predecessor-version":[{"id":1883,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/posts\/1875\/revisions\/1883"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/media\/1882"}],"wp:attachment":[{"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/media?parent=1875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/categories?post=1875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/tags?post=1875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}