{"id":71624,"date":"2020-01-10T15:52:11","date_gmt":"2020-01-10T10:22:11","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=71624"},"modified":"2024-04-12T14:22:36","modified_gmt":"2024-04-12T08:52:36","slug":"angular-installation-2","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-installation-2\/","title":{"rendered":"Angular Installation"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-7-developer-tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">Go back to Tutorial<\/a><\/p>\n\n\n<p>The Angular CLI, Angular applications, and Angular itself depend upon features and functionality provided by libraries that are available as npm packages.<\/p>\n<p>You can download and install these npm packages with the npm client, which runs as a node.js application.<\/p>\n<p>The yarn client is a popular alternative for downloading and installing npm packages. The Angular CLI uses yarn by default to install npm packages when you create a new project.<\/p>\n<h4>package.json<\/h4>\n<p>Both npm and yarn install packages identified in a package.json file. The CLI ng new command creates a default package.json file for your project. This package.json specifies a starter set of packages that work well together and jointly support many common application scenarios. You will add packages to package.json as your application evolves. You may even remove some.<\/p>\n<h4>dependencies and devDependencies<\/h4>\n<p>The package.json includes two sets of packages, dependencies and devDependencies. The dependencies are essential to running the application. The devDependencies are only necessary to develop the application.<\/p>\n<p>The dependencies section of package.json contains:<\/p>\n<ul>\n<li>Angular packages: Angular core and optional modules; their package names begin @angular\/.<\/li>\n<li>Support packages: 3rd party libraries that must be present for Angular apps to run.<\/li>\n<li>Polyfill packages: Polyfills plug gaps in a browser&#8217;s JavaScript implementation.<\/li>\n<\/ul>\n<h4>Angular Packages<\/h4>\n<ul>\n<li>@angular\/animations: Angular&#8217;s animations library makes it easy to define and apply animation effects such as page and list transitions.<\/li>\n<li>@angular\/common: The commonly needed services, pipes, and directives provided by the Angular team. The HttpClientModule is also here, in the &#8216;@angular\/common\/http&#8217; subfolder.<\/li>\n<li>@angular\/core: Critical runtime parts of the framework needed by every application. Includes all metadata decorators, Component, Directive, dependency injection, and the component lifecycle hooks.<\/li>\n<li>@angular\/compiler: Angular&#8217;s Template Compiler. It understands templates and can convert them to code that makes the application run and render. Typically you don\u2019t interact with the compiler directly; rather, you use it indirectly via platform-browser-dynamic when JIT compiling in the browser.<\/li>\n<li>@angular\/forms: support for both template-driven and reactive forms.<\/li>\n<li>@angular\/http: Angular&#8217;s old, soon-to-be-deprecated, HTTP client.<\/li>\n<li>@angular\/platform-browser: Everything DOM and browser related, especially the pieces that help render into the DOM. This package also includes the bootstrapStatic() method for bootstrapping applications for production builds that pre-compile with AOT.<\/li>\n<li>@angular\/platform-browser-dynamic: Includes Providers and methods to compile and run the app on the client using the JIT compiler.<\/li>\n<li>@angular\/router: The router module navigates among your app pages when the browser URL changes.<\/li>\n<li>@angular\/upgrade: Set of utilities for upgrading AngularJS applications to Angular.<\/li>\n<\/ul>\n<h4>Polyfill packages<\/h4>\n<p>Many browsers lack native support for some features in the latest HTML standards, features that Angular requires. &#8220;Polyfills&#8221; can emulate the missing features. The default package.json installs the core-js package which polyfills missing features for several popular browser.<\/p>\n<h4>Support packages<\/h4>\n<ul>\n<li>rxjs: Many Angular APIs return observables. RxJS is an implementation of the proposed Observables specification currently before the TC39 committee that determines standards for the JavaScript language.<\/li>\n<li>js: Angular relies on zone.js to run Angular&#8217;s change detection processes when native JavaScript operations raise events. Zone.js is an implementation of a specification currently before the TC39 committee that determines standards for the JavaScript language.<\/li>\n<\/ul>\n<h4>DevDependencies<\/h4>\n<p>The packages listed in the devDependencies section of the package.json help you develop the application on your local machine. You don&#8217;t deploy them with the production application although there is no harm in doing so.<\/p>\n<ul>\n<li>@angular\/cli: The Angular CLI tools.<\/li>\n<li>@angular\/compiler-cli: The Angular compiler, which is invoked by the Angular CLI&#8217;s build and serve commands.<\/li>\n<li>@angular\/language-service: The Angular language service analyzes component templates and provides type and error information that TypeScript-aware editors can use to improve the developer&#8217;s experience. For example, see the Angular language service extension for VS Code<\/li>\n<li>@types\/&#8230; : TypeScript definition files for 3rd party libraries such as Jasmine and node.<\/li>\n<li>codelyzer: A linter for Angular apps whose rules conform to the Angular style guide.<\/li>\n<li>jasmine\/&#8230; : packages to support the Jasmine test library.<\/li>\n<li>karma\/&#8230; : packages to support the karma test runner.<\/li>\n<li>protractor: an end-to-end (e2e) framework for Angular apps. Built on top of WebDriverJS.<\/li>\n<li>ts-node: TypeScript execution environment and REPL for node.<\/li>\n<li>tslint: a static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.<\/li>\n<li>typescript: the TypeScript language server, including the tsc TypeScript compiler.<\/li>\n<\/ul>\n<h4>NPM, Git and Visual Studio Code Installation<\/h4>\n<p>To start working with Angular 2, you need to get the following key components installed.<\/p>\n<ul>\n<li>Npm \u2212 This is known as the node package manager that is used to work with the open source repositories. Angular JS as a framework has dependencies on other components. And npm can be used to download these dependencies and attach them to your project.<\/li>\n<li>Git \u2212 This is the source code software that can be used to get the sample application from the github angular site.<\/li>\n<li>Editor \u2212 There are many editors that can be used for Angular JS development such as Visual Studio code and WebStorm.<\/li>\n<\/ul>\n<p><u>npm Installation<\/u><\/p>\n<p>Let\u2019s now look at the steps to get npm installed. The official site for npm is https:\/\/www.npmjs.com\/<\/p>\n<p>Step 1 \u2212 Go to the \u201cget stated with npm\u201d section in the site.<\/p>\n<p>Step 2 \u2212 In the next screen, choose the installer to download, depending on the operating system. For the purpose of this exercise, download the Windows 64 bit version.<\/p>\n<p>Step 3 \u2212 Launch the installer. In the initial screen, click the Next button.<\/p>\n<p>Step 4 \u2212 In the next screen, Accept the license agreement and click the next button.<\/p>\n<p>Step 5 \u2212 In the next screen, choose the destination folder for the installation and click the Next button.<\/p>\n<p>Step 6 \u2212 Choose the components in the next screen and click the Next button. You can accept all the components for the default installation.<\/p>\n<p>Step 7 \u2212 Click the Install button.<\/p>\n<p>Step 8 \u2212 Once the installation is complete, click the Finish button.<\/p>\n<p>Step 9 \u2212 To confirm the installation, in the command prompt you can issue the command npm version. You will get the version number of npm.<\/p>\n<p><u>Installation of Visual Studio Code<\/u><\/p>\n<p>Following are the features of Visual Studio Code \u2212<\/p>\n<ul>\n<li>Light editor when compared to the actual version of Visual Studio.<\/li>\n<li>Can be used for coding languages such as Clojure, Java, Objective-C and many other languages.<\/li>\n<li>Built-in Git extension.<\/li>\n<li>Built-in IntelliSense feature.<\/li>\n<li>Many more extensions for development.<\/li>\n<\/ul>\n<p>The official site for Visual Studio code is https:\/\/code.visualstudio.com\/ and installation steps are<\/p>\n<p>Step 1 \u2212 After the download is complete, please follow the installation steps. In the initial screen, click the Next button.<\/p>\n<p>Step 2 \u2212 Accept the license agreement and click the Next button.<\/p>\n<p>Step 3 \u2212 Choose the destination location for the installation and click the next button.<\/p>\n<p>Step 4 \u2212 Choose the name of the program shortcut and click the Next button.<\/p>\n<p>Step 5 \u2212 Accept the default settings and click the Next button.<\/p>\n<p>Step 6 \u2212 Click the Install button.<\/p>\n<p>Step 7 \u2212 In the final screen, click the Finish button to launch Visual Studio Code.<\/p>\n<p><u>Installing Git<\/u><\/p>\n<p>Some of the key features of Git are \u2212<\/p>\n<ul>\n<li>Easy branching and merging of code.<\/li>\n<li>Provision to use many techniques for the flow of code within Git.<\/li>\n<li>Git is very fast when compared with other SCM tools.<\/li>\n<li>Offers better data assurance.<\/li>\n<li>Free and open source.<\/li>\n<\/ul>\n<p>The official site for Git is https:\/\/git-scm.com\/ and installation steps are<\/p>\n<p>Step 1 \u2212 After the download is complete, please follow the installation steps. In the initial screen, click the Next button.<\/p>\n<p>Step 2 \u2212 Choose the components which needs to be installed. You can accept the default components.<\/p>\n<p>Step 3 \u2212 In the next step, choose the program shortcut name and click the Next button.<\/p>\n<p>Step 4 \u2212 Accept the default SSH executable and click the Next button.<\/p>\n<p>Step 5 \u2212 Accept the default setting of \u201cCheckout Windows style, commit Unix style endings\u201d and click the Next button.<\/p>\n<p>Step 6 \u2212 Now, accept the default setting of the terminal emulator and click the Next button.<\/p>\n<p>Step 7 \u2212 Accept the default settings and click the Next button.<\/p>\n<p>Step 8 \u2212 You can skip the experimental options and click the Install button.<\/p>\n<p>Step 9 \u2212 In the final screen, click the Finish button to complete the installation.<\/p>\n\n\n<p><a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-7-developer-tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">Go back to Tutorial<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Go back to Tutorial The Angular CLI, Angular applications, and Angular itself depend upon features and functionality provided by libraries that are available as npm packages. You can download and install these npm packages with the npm client, which runs as a node.js application. The yarn client is a popular alternative for downloading and installing&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8294],"tags":[7275],"class_list":["post-71624","page","type-page","status-publish","hentry","category-angular-7","tag-angular-installation"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular Installation - Tutorial<\/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:\/\/www.vskills.in\/certification\/tutorial\/angular-installation-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Installation - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Go back to Tutorial The Angular CLI, Angular applications, and Angular itself depend upon features and functionality provided by libraries that are available as npm packages. You can download and install these npm packages with the npm client, which runs as a node.js application. The yarn client is a popular alternative for downloading and installing...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-installation-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:52:36+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-installation-2\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-installation-2\/\",\"name\":\"Angular Installation - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2020-01-10T10:22:11+00:00\",\"dateModified\":\"2024-04-12T08:52:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-installation-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-installation-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-installation-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Installation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Installation - Tutorial","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.vskills.in\/certification\/tutorial\/angular-installation-2\/","og_locale":"en_US","og_type":"article","og_title":"Angular Installation - Tutorial","og_description":"Go back to Tutorial The Angular CLI, Angular applications, and Angular itself depend upon features and functionality provided by libraries that are available as npm packages. You can download and install these npm packages with the npm client, which runs as a node.js application. The yarn client is a popular alternative for downloading and installing...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-installation-2\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:52:36+00:00","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-installation-2\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-installation-2\/","name":"Angular Installation - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2020-01-10T10:22:11+00:00","dateModified":"2024-04-12T08:52:36+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-installation-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/angular-installation-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-installation-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Angular Installation"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=71624"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71624\/revisions"}],"predecessor-version":[{"id":87807,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71624\/revisions\/87807"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=71624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=71624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=71624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}