{"id":4252,"date":"2020-09-02T23:18:54","date_gmt":"2020-09-02T23:48:54","guid":{"rendered":"https:\/\/ultering.com\/it4us\/?p=4252"},"modified":"2020-09-12T18:04:23","modified_gmt":"2020-09-12T18:34:23","slug":"angular-creating-a-local-installation-to-preserve-current-environment","status":"publish","type":"post","link":"https:\/\/ultering.com\/it4us\/?p=4252","title":{"rendered":"ANGULAR 10: Step One B &#8211; Creating A Local Installation To Preserve Current Environment"},"content":{"rendered":"<p><a href=\"https:\/\/ultering.com\/it4us\/?p=4244\">Back to index&nbsp;<\/a><\/p>\n<p><span style=\"font-size: 14pt;\">&lt;<a href=\"https:\/\/ultering.com\/it4us\/?p=4246\">Previous <\/a> <a href=\"https:\/\/ultering.com\/it4us\/?p=4284\">Next &gt;<\/a><\/span><\/p>\n<p><a href=\"https:\/\/ultering.com\/it4us\/?p=4294\">Code download<\/a><\/p>\n<h1><\/h1>\n<div style=\"font-size: 14pt;\"><span style=\"font-size: 14pt;\">Usually, the tutorials show how to install&nbsp; <em>angular\/cli<\/em>&nbsp; globally.<\/span><\/div>\n<div><\/div>\n<div style=\"font-size: 14pt;\"><span style=\"font-size: 14pt;\">It happens that sometimes our environment has already a previous installation different from the new one we desire to use for a new project.<br>\nFor instance, suppose that you&#8217;re working using the latest versions but you need to maintain an old project that was built using Angular 7.<br>\n<\/span><span style=\"font-size: 14pt;\">In this case, it is required to install the Angular 7&nbsp; locally, isolating it from your global environment configuration.<\/span><\/div>\n<div><\/div>\n<div>This example uses Angular 7 plus Bootstrap.<br>\nTo use other versions, just switch the version in the commands used in the example.<\/div>\n<p>The recipe:<\/p>\n<ol>\n<li>Create a new folder for the new project.<br>\n<em><em>mkdir it4us_v7_demo<br>\n<\/em><\/em><br>\nNOTE: Be really patient, the command will take some time to finish.<br>\nTake advantage to grab your coffee, or better two or three!! &nbsp; <noscript><img decoding=\"async\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/plugins\/wp-edit\/plugins\/emoticons\/img\/smiley-smile.gif\"><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/plugins\/wp-edit\/plugins\/emoticons\/img\/smiley-smile.gif\" class=\" lazyload\">.Depending on your environment security configuration, a good idea is to turn off the antivirus real-time scanning for some minutes to agile the installation.<br>\n.<\/li>\n<li>&nbsp;Go to the new folder.<br>\n<em>cd it4us_v7_demo<\/em><br>\n.<\/li>\n<li>Create the local Angular 7 env plus the new project in just one command.<br>\n<em><em><em>npx -p @angular\/cli@7.3.9 ng new it4us-a7<\/em><\/em><\/em>&#8212;In this example, I&#8217;ve made the choices &#8220;yes for adding Angular Routing&#8221; and &#8220;CSS&#8221; option.<br>\nAs expected, you shall have deprecated packages since it is an old version.<br>\n.<br>\n<noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-4468\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/angular7_local_install_01.jpg\" alt width=\"1200\" height=\"577\" srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/angular7_local_install_01.jpg 1200w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/angular7_local_install_01-300x144.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/angular7_local_install_01-768x369.jpg 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\"><\/noscript><img decoding=\"async\" class=\"alignnone size-full wp-image-4468 lazyload\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20577%22%3E%3C%2Fsvg%3E\" alt width=\"1200\" height=\"577\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20577%22%3E%3C%2Fsvg%3E 1200w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" data-srcset=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/angular7_local_install_01.jpg 1200w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/angular7_local_install_01-300x144.jpg 300w, https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/angular7_local_install_01-768x369.jpg 768w\" data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/angular7_local_install_01.jpg\"><br>\n.<\/li>\n<li>The final structure you get for the project.Notice that it was created a root directory for the project named &#8220;it4us_v7_demo&#8221;.Three reasons for that.<br>\nThe first one is that the &#8220;ng new&#8221; command requires project names following its pattern, otherwise the command may refuse to run, returning an error message.<br>\nA second reason it is a good idea to detach the root name from the project name because you get the freedom to choose a different name to make it more semantic.<br>\nEventually, the third reason is that you have an upper level above the angular project to keep stuff that shall not be inside the angular project itself.This is it, what you get:<br>\n.<br>\n<a href=\"https:\/\/ultering.com\/it4us\/?p=4244\"><noscript><img decoding=\"async\" src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/angular7_local_install_02-70x56.jpg\" alt><\/noscript><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt data-src=\"https:\/\/ultering.com\/it4us\/wp-content\/uploads\/2020\/09\/angular7_local_install_02-70x56.jpg\" class=\" lazyload\"><\/a><br>\n.<\/li>\n<li>Now, under the <em>it4us-a7<\/em> folder you may use the usual commands to get your server up and running.<br>\nFor instance:<br>\nng build<br>\nor<br>\nng serve<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/ultering.com\/it4us\/?p=4244\"><span style=\"font-size: 14pt;\">Back to index&nbsp;<\/span><\/a><\/p>\n<p><span style=\"font-size: 14pt;\">&lt;<a href=\"https:\/\/ultering.com\/it4us\/?p=4246\">Previous <\/a>&nbsp;&nbsp;<a href=\"https:\/\/ultering.com\/it4us\/?p=4284\">Next &gt;<\/a><\/span><\/p>\n<p>&nbsp;<\/p>\n<!--CusAds0-->\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Back to index&nbsp; &lt;Previous Next &gt; Code download Usually, the tutorials show how to install&nbsp; angular\/cli&nbsp; globally. It happens that sometimes our environment has already a previous installation different from the new one we desire to use for a new project. For instance, suppose that you&#8217;re working using the latest versions but you need to &#8230; <a href=\"https:\/\/ultering.com\/it4us\/?p=4252\" class=\"more-link\">Read More<span class=\"screen-reader-text\"> &#8220;ANGULAR 10: Step One B &#8211; Creating A Local Installation To Preserve Current Environment&#8221;<\/span> &raquo;<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[192,193,26],"tags":[],"class_list":["post-4252","post","type-post","status-publish","format-standard","hentry","category-angular","category-bootstrap","category-javascript"],"_links":{"self":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/4252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4252"}],"version-history":[{"count":6,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/4252\/revisions"}],"predecessor-version":[{"id":4524,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=\/wp\/v2\/posts\/4252\/revisions\/4524"}],"wp:attachment":[{"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ultering.com\/it4us\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}