{"id":2141,"date":"2018-12-05T12:42:54","date_gmt":"2018-12-05T12:42:54","guid":{"rendered":"https:\/\/www.moveoapps.com\/blog\/?p=2141"},"modified":"2018-12-06T09:40:05","modified_gmt":"2018-12-06T09:40:05","slug":"angular-7-with-cli-quick-guide-to-installation-and-setup","status":"publish","type":"post","link":"https:\/\/www.moveoapps.com\/blog\/angular-7-with-cli-quick-guide-to-installation-and-setup\/","title":{"rendered":"Angular 7 with CLI \u2013 Quick Guide to Installation and Setup"},"content":{"rendered":"<p>Angular 7, the latest version of Angular is out now, and developers have sound reason to be excited. Angular is after all, one of the most popular frontend JavaScript frameworks with. Right from the beginning, developers have loved Angular for its ease of access, even for beginners, and its designer friendliness. So now that the much awaited Angular 7 is out, we\u2019re sure you can\u2019t wait to get started with it. <\/p>\n<p>That is why we bring to you this quick tutorial, to help you install Angular 7 on your system with the CLI. It\u2019s a fairly quick process once you have all the dependencies properly installed. The two prerequisites you need to have installed 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\/reactjs-vs-angularjs\/\">ReactJS vs AngularJS \u2013 Choose The Best Framework For Your Project<\/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>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 node -v 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><strong>You are now ready to start your new ng7 project. First 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 angular7demo<\/pre>\n<p><strong>You will be presented with a couple of questions before beginning:<\/strong><br \/>\n<img decoding=\"async\" src=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot-2018-12-05-at-1.10.49-PM.png\"\/><br \/>\n<strong>It will take a minute or two and once completed, you can now \u2028\u2028navigate to the project and rev up the local server<\/strong><\/p>\n<pre>cd wamp64\/www\/angular7demo<\/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*<br \/>\nIf you made it this far, awesome! You should now be presented with the standard landing page template for your new Angular 7 project:<br \/>\n<img decoding=\"async\" src=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/12\/angular-7-demo.png\" alt=\"\" \/><\/p>\n<h3>Edit project:<\/h3>\n<ul>\n<li>Open file in<a>\/angular7demo\/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\/12\/angular7-app-component.png\" alt=\"\" width=\"686\" height=\"265\" \/><\/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\/12\/angular7-editproject.png\" alt=\"\" width=\"684\" height=\"263\" \/><\/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 \u201c\/dist\/\u201d in the app root. And there you have it, the all new Angular 7, all compiled and ready to ship. So whatever you want to code next is only limited by your imagination. Go on an make some apps. 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>Angular 7, the latest version of Angular is out now, and developers have sound reason to be excited. Angular is after all, one of the most popular frontend JavaScript frameworks with. Right from the beginning, developers have loved Angular for its ease of access, even for beginners, and its designer friendliness. So now that the &hellip; <a href=\"https:\/\/www.moveoapps.com\/blog\/angular-7-with-cli-quick-guide-to-installation-and-setup\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Angular 7 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":2147,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[26],"tags":[],"class_list":["post-2141","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>Angular 7 with CLI \u2013 Quick Guide to Installation and Setup<\/title>\n<meta name=\"description\" content=\"A quick and easy guide to install the all-new Angular 7 from CLI and start developing apps like a pro\" \/>\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-7-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=\"Angular 7 with CLI \u2013 Quick Guide to Installation and Setup\" \/>\n<meta property=\"og:description\" content=\"A quick and easy guide to install the all-new Angular 7 from CLI and start developing apps like a pro\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.moveoapps.com\/blog\/angular-7-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=\"2018-12-05T12:42:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-12-06T09:40:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/12\/Angular-7-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=\"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-7-with-cli-quick-guide-to-installation-and-setup\/\",\"url\":\"https:\/\/www.moveoapps.com\/blog\/angular-7-with-cli-quick-guide-to-installation-and-setup\/\",\"name\":\"Angular 7 with CLI \u2013 Quick Guide to Installation and Setup\",\"isPartOf\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-7-with-cli-quick-guide-to-installation-and-setup\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-7-with-cli-quick-guide-to-installation-and-setup\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/12\/Angular-7-with-CLI-\u2013-Quick-Guide-to-Installation-and-Setup.png\",\"datePublished\":\"2018-12-05T12:42:54+00:00\",\"dateModified\":\"2018-12-06T09:40:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/59404500d3fc1ef687e48abb867aec10\"},\"description\":\"A quick and easy guide to install the all-new Angular 7 from CLI and start developing apps like a pro\",\"breadcrumb\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-7-with-cli-quick-guide-to-installation-and-setup\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.moveoapps.com\/blog\/angular-7-with-cli-quick-guide-to-installation-and-setup\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-7-with-cli-quick-guide-to-installation-and-setup\/#primaryimage\",\"url\":\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/12\/Angular-7-with-CLI-\u2013-Quick-Guide-to-Installation-and-Setup.png\",\"contentUrl\":\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/12\/Angular-7-with-CLI-\u2013-Quick-Guide-to-Installation-and-Setup.png\",\"width\":2560,\"height\":1294},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/angular-7-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 7 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":"Angular 7 with CLI \u2013 Quick Guide to Installation and Setup","description":"A quick and easy guide to install the all-new Angular 7 from CLI and start developing apps like a pro","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-7-with-cli-quick-guide-to-installation-and-setup\/","og_locale":"en_US","og_type":"article","og_title":"Angular 7 with CLI \u2013 Quick Guide to Installation and Setup","og_description":"A quick and easy guide to install the all-new Angular 7 from CLI and start developing apps like a pro","og_url":"https:\/\/www.moveoapps.com\/blog\/angular-7-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":"2018-12-05T12:42:54+00:00","article_modified_time":"2018-12-06T09:40:05+00:00","og_image":[{"width":2560,"height":1294,"url":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/12\/Angular-7-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":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.moveoapps.com\/blog\/angular-7-with-cli-quick-guide-to-installation-and-setup\/","url":"https:\/\/www.moveoapps.com\/blog\/angular-7-with-cli-quick-guide-to-installation-and-setup\/","name":"Angular 7 with CLI \u2013 Quick Guide to Installation and Setup","isPartOf":{"@id":"https:\/\/www.moveoapps.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.moveoapps.com\/blog\/angular-7-with-cli-quick-guide-to-installation-and-setup\/#primaryimage"},"image":{"@id":"https:\/\/www.moveoapps.com\/blog\/angular-7-with-cli-quick-guide-to-installation-and-setup\/#primaryimage"},"thumbnailUrl":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/12\/Angular-7-with-CLI-\u2013-Quick-Guide-to-Installation-and-Setup.png","datePublished":"2018-12-05T12:42:54+00:00","dateModified":"2018-12-06T09:40:05+00:00","author":{"@id":"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/59404500d3fc1ef687e48abb867aec10"},"description":"A quick and easy guide to install the all-new Angular 7 from CLI and start developing apps like a pro","breadcrumb":{"@id":"https:\/\/www.moveoapps.com\/blog\/angular-7-with-cli-quick-guide-to-installation-and-setup\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.moveoapps.com\/blog\/angular-7-with-cli-quick-guide-to-installation-and-setup\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.moveoapps.com\/blog\/angular-7-with-cli-quick-guide-to-installation-and-setup\/#primaryimage","url":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/12\/Angular-7-with-CLI-\u2013-Quick-Guide-to-Installation-and-Setup.png","contentUrl":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/12\/Angular-7-with-CLI-\u2013-Quick-Guide-to-Installation-and-Setup.png","width":2560,"height":1294},{"@type":"BreadcrumbList","@id":"https:\/\/www.moveoapps.com\/blog\/angular-7-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 7 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\/2141","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=2141"}],"version-history":[{"count":4,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/posts\/2141\/revisions"}],"predecessor-version":[{"id":2150,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/posts\/2141\/revisions\/2150"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/media\/2147"}],"wp:attachment":[{"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/media?parent=2141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/categories?post=2141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/tags?post=2141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}