{"id":1083,"date":"2017-11-22T10:13:50","date_gmt":"2017-11-22T10:13:50","guid":{"rendered":"https:\/\/www.moveoapps.com\/blog\/?p=1083"},"modified":"2018-01-05T09:09:27","modified_gmt":"2018-01-05T09:09:27","slug":"angular-5-with-cli-quick-guide-to-installation-and-setup","status":"publish","type":"post","link":"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/","title":{"rendered":"Angular 5 with CLI \u2013 Quick Guide to Installation and Setup"},"content":{"rendered":"<p>Angular 5, the latest version of Angular is out now, and developers are excited to try one of the most modern and popular frontend JavaScript frameworks. So here\u2019s a quick guide to installing Angular 5 with CLI on your system. While it\u2019s not a long process, you do need to make sure that you have all the dependencies 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<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>This should tell you the current version of Node installed. If your console doesn\u2019t recognize this command, it means you need to install the latest version of <a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noopener\">Node.js<\/a> first.<\/p>\n<p>Once installation is complete, close the command line and reload it again. The <strong>node -v<\/strong> command should work now and give you the current version number.<\/p>\n<p>The next step is to install <a href=\"https:\/\/cli.angular.io\/\" target=\"_blank\" rel=\"noopener\">Angular-CLI<\/a>. This tool is what helps you create Angular projects and makes other development tasks easier.<\/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>The output screen will look somewhat like this:<\/h5>\n<h5><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1111\" src=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/angularcli.png\" alt=\"\" width=\"621\" height=\"230\" srcset=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/angularcli.png 621w, https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/angularcli-300x111.png 300w\" sizes=\"auto, (max-width: 621px) 100vw, 621px\" \/><br \/>\n<strong>Now it\u2019s time to start a new ng5 project. Navigate to the right path, and type:<\/strong><\/h5>\n<pre>cd wamp64\/www\/<\/pre>\n<p><strong>And create the new project now.<\/strong><\/p>\n<pre>ng new angular5demo<\/pre>\n<p><strong>\u2028\u2028Navigate to the project and rev up the local server<\/strong><\/p>\n<pre>cd wamp64\/www\/angular5demo<\/pre>\n<p><strong>Open your projects<\/strong><\/p>\n<pre>$ ng serve --open<\/pre>\n<p>If it doesn\u2019t open automatically then open <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>\/angular5demo\/src\/app\/app.component.ts<\/a>:<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1110\" src=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/editproject1.png\" alt=\"\" width=\"686\" height=\"265\" srcset=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/editproject1.png 686w, https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/editproject1-300x116.png 300w\" 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-1114\" src=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/editproject2.png\" alt=\"\" width=\"684\" height=\"263\" srcset=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/editproject2.png 684w, https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/editproject2-300x115.png 300w\" 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>This will create a new folder called &#8220;\/dist\/&#8221; in the app root. So that\u2019s it. The new Angular 5 app is now compiled and ready for shipping. Now you too can install Angular 5 with CLI in no time, and create awesome apps. Happy coding.<\/p>\n<blockquote><p>Read also:<a href=\"https:\/\/www.moveoapps.com\/blog\/set-node-js-application-production-nginx-reverse-proxy\/\">How to Set Up a Node.js Application for Production with Nginx Reverse Proxy<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Angular 5, the latest version of Angular is out now, and developers are excited to try one of the most modern and popular frontend JavaScript frameworks. So here\u2019s a quick guide to installing Angular 5 with CLI on your system. While it\u2019s not a long process, you do need to make sure that you have &hellip; <a href=\"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Angular 5 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":1372,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[26],"tags":[],"class_list":["post-1083","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 5 CLI for better web app development<\/title>\n<meta name=\"description\" content=\"With this super easy tutorial, you will be able to install the all new Angular 5 CLI in no time, and start developing web apps that are faster and better.\" \/>\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-5-with-cli-quick-guide-to-installation-and-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 5 CLI for better web app development\" \/>\n<meta property=\"og:description\" content=\"With this super easy tutorial, you will be able to install the all new Angular 5 CLI in no time, and start developing web apps that are faster and better.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-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=\"2017-11-22T10:13:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-05T09:09:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/Angular-5-with-CLI-\u0442\u0410\u0423-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=\"2 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-5-with-cli-quick-guide-to-installation-and-setup\/\",\"url\":\"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/\",\"name\":\"Quick Guide to Installing Angular 5 CLI for better web app development\",\"isPartOf\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/Angular-5-with-CLI-\u0442\u0410\u0423-Quick-Guide-to-Installation-and-Setup.png\",\"datePublished\":\"2017-11-22T10:13:50+00:00\",\"dateModified\":\"2018-01-05T09:09:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/59404500d3fc1ef687e48abb867aec10\"},\"description\":\"With this super easy tutorial, you will be able to install the all new Angular 5 CLI in no time, and start developing web apps that are faster and better.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/#primaryimage\",\"url\":\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/Angular-5-with-CLI-\u0442\u0410\u0423-Quick-Guide-to-Installation-and-Setup.png\",\"contentUrl\":\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/Angular-5-with-CLI-\u0442\u0410\u0423-Quick-Guide-to-Installation-and-Setup.png\",\"width\":2560,\"height\":1294},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.moveoapps.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular 5 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 5 CLI for better web app development","description":"With this super easy tutorial, you will be able to install the all new Angular 5 CLI in no time, and start developing web apps that are faster and better.","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-5-with-cli-quick-guide-to-installation-and-setup\/","og_locale":"en_US","og_type":"article","og_title":"Quick Guide to Installing Angular 5 CLI for better web app development","og_description":"With this super easy tutorial, you will be able to install the all new Angular 5 CLI in no time, and start developing web apps that are faster and better.","og_url":"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/","og_site_name":"Moveo Apps","article_author":"https:\/\/www.facebook.com\/bhargav.patel.121","article_published_time":"2017-11-22T10:13:50+00:00","article_modified_time":"2018-01-05T09:09:27+00:00","og_image":[{"width":2560,"height":1294,"url":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/Angular-5-with-CLI-\u0442\u0410\u0423-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":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/","url":"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/","name":"Quick Guide to Installing Angular 5 CLI for better web app development","isPartOf":{"@id":"https:\/\/www.moveoapps.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/#primaryimage"},"image":{"@id":"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/#primaryimage"},"thumbnailUrl":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/Angular-5-with-CLI-\u0442\u0410\u0423-Quick-Guide-to-Installation-and-Setup.png","datePublished":"2017-11-22T10:13:50+00:00","dateModified":"2018-01-05T09:09:27+00:00","author":{"@id":"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/59404500d3fc1ef687e48abb867aec10"},"description":"With this super easy tutorial, you will be able to install the all new Angular 5 CLI in no time, and start developing web apps that are faster and better.","breadcrumb":{"@id":"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/#primaryimage","url":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/Angular-5-with-CLI-\u0442\u0410\u0423-Quick-Guide-to-Installation-and-Setup.png","contentUrl":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2017\/11\/Angular-5-with-CLI-\u0442\u0410\u0423-Quick-Guide-to-Installation-and-Setup.png","width":2560,"height":1294},{"@type":"BreadcrumbList","@id":"https:\/\/www.moveoapps.com\/blog\/angular-5-with-cli-quick-guide-to-installation-and-setup\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.moveoapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular 5 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\/1083","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=1083"}],"version-history":[{"count":49,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/posts\/1083\/revisions"}],"predecessor-version":[{"id":1373,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/posts\/1083\/revisions\/1373"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/media\/1372"}],"wp:attachment":[{"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/media?parent=1083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/categories?post=1083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/tags?post=1083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}