{"id":2586,"date":"2017-06-14T22:45:53","date_gmt":"2017-06-14T17:15:53","guid":{"rendered":"https:\/\/code4developers.com\/?p=2586"},"modified":"2018-02-21T17:01:40","modified_gmt":"2018-02-21T11:31:40","slug":"angular-4-installations","status":"publish","type":"post","link":"https:\/\/code4developers.com\/angular-4-installations\/","title":{"rendered":"Angular 4 Installations"},"content":{"rendered":"

Introduction<\/strong><\/p>\n

This article demonstrates how to install Angular 4 in your local system and start working with angular\/cli using basic commands.<\/p>\n

<\/p>\n

What is Angular 4?<\/strong><\/p>\n

Before starting with Angular 4, we need to know about Angular 2. Angular 2 is totally different kind of framework from Angular 1.<\/p>\n

Angular 1 is based on MVC structure and used to do two-way data binding, whereas Angular 2 is based on components. For every single task, we need to create component. Angular 4 has same concept and same structure as Angular 2 but better in performance. We can create component, directives, services in Angular 4 same as Angular 2.<\/p>\n

Before starting with Angular 4<\/strong><\/p>\n

Go to URL https:\/\/cli.angular.io<\/strong><\/a> . <\/strong><\/p>\n

\"\"<\/strong>Angular given us Angular cli , which contains bunch of commands in order to work with Angualar project.  Before star working in Angular 4, Need to have NPM installed in your system.NPM stands for Node Package Manager.When you install Node.js , it will automatically add NPM in your system.<\/p>\n

Make sure for running Angular 4 in your system , You must have latest version of Node.js which is 6.10 right now or atleast 6.9. Also you have to upgrate NPM version 3.10 or greater in your system.<\/p>\n

 <\/p>\n

Node.js  Command Prompt<\/strong><\/h3>\n

Open Node.js command prompt and check for Node.js installed or not using command.<\/p>\n

node -v<\/pre>\n
Also check for NPM latest version on your system using command.<\/p>\n
npm \u2013v<\/pre>\n
\"\"<\/p>\n
Now on https:\/\/cli.angular.io<\/a>  few commands are available to install angular\/cli. These commands help us to create and manage Angular 4 projects.<\/p>\n
Step 1 :<\/strong> Install angular\/cli using command.<\/p>\n
npm  install  \u2013g  @angular\/cli<\/pre>\n
\"\"<\/strong><\/p>\n
It will take few minutes to install as per your system speed.<\/p>\n
Here \u2013g means angular\/cli will be installed and available for every project in your system.<\/p>\n
If you not include \u2013g , it will install in specific folder and only available for specific project.<\/p>\n
Step 2 :<\/strong> Now check angular\/cli installed in your system or not using command.<\/p>\n
ng \u2013v.<\/strong><\/p>\n
This will show cli version, node version and OS version of your system.<\/p>\n
\"\"<\/p>\n
Step 3 :<\/strong> Now you are good to go for writing with Angular 4 in specific directory. In node command prompt, create project using below mentioned command.<\/p>\n
ng new ProjectName    For ex.  ng new Angular4Demo<\/strong><\/h4>\n
\"\"<\/p>\n
This command will create all the require packages for running Angular 4 application.<\/p>\n
Now go into the \u2018Angular4\u2019 directory. We can see project call \u2018ANGULAR4DEMO\u2019 along with node_modules.  Here node_modules contains all the packages for automating the task for manage front end and back end of our Angular 4 application. It also contains various library and packages.<\/p>\n
Open project in editor. Here I am using visual studio Code as editor.<\/p>\n
\"\"<\/p>\n
you can see all the dependencies added in package.json file are belong from Angular 4.<\/p>\n
Now navigate to the Angular4Demo folder in command prompt and write ng serve<\/strong> to run project.<\/p>\n
\"\"<\/p>\n
This command will compile your code and prepare browser for running application. Generally it will run on http:\/\/localhost:4200\/<\/a>. So navigate in browser.<\/p>\n
\"\"<\/p>\n
If you want to modify port uses below mention command.<\/p>\n
ng  serve --host 0.0.0.0 -port 4201<\/pre>\n
Now your application will run on http:\/\/localhost:4201\/<\/a> .<\/p>\n
It is very useful to create Angular 4 application using angular\/cli as we can get well defined folder structure.<\/p>\n
Navigate to src folder, you can find index.html file. You can change code in this flie and save, browser detects the changes and automatically reloads the page and you can find your change.<\/p>\n
\"\"<\/p>\n
 <\/p>\n
\"\"<\/p>\n
Summary<\/strong><\/p>\n
In this article, I discussed how to start angular 4 and create sample application using angular\/cli. We also saw the basic commands of angular\/cli to run application and how to change the default port of our angular application using angular\/cli.<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction This article demonstrates how to install Angular 4 in your local system and start working with angular\/cli using basic commands.<\/p>\n","protected":false},"author":5,"featured_media":2649,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28],"tags":[29],"powerkit_post_featured":[],"class_list":{"0":"post-2586","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-angular","8":"tag-angular"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-FI","jetpack-related-posts":[{"id":3934,"url":"https:\/\/code4developers.com\/angular-version-7-released\/","url_meta":{"origin":2586,"position":0},"title":"Angular Version 7 Released","author":"Yatendrasinh Joddha","date":"October 19, 2018","format":false,"excerpt":"Finally, the Angular version 7 (Angular v7) is out with some awesome features. Thanks to Angular team for all the efforts, in this major release angular team is spanning the entire platform, with the core framework, Angular Material, and the CLI with corresponding key versions. This release covers new landscapes\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"Virtual Scrolling","src":"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/1200\/1%2ACQKUmJrBs-523I4GOiEUaA.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/1200\/1%2ACQKUmJrBs-523I4GOiEUaA.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/cdn-images-1.medium.com\/max\/1200\/1%2ACQKUmJrBs-523I4GOiEUaA.gif?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":2625,"url":"https:\/\/code4developers.com\/angular-4-project-structure\/","url_meta":{"origin":2586,"position":1},"title":"Angular 4 Project Structure","author":"Nisarg Dave","date":"June 18, 2017","format":false,"excerpt":"Introduction In previous article we learned about Angular 4 Installation. You can find that article on https:\/\/code4developers.com\/angular-4-installations\/\u00a0. This article describes the project structure of Angular 4 application which Angular CLI created for us. I have already created ANGULAR4DEMO project in my previous article, so we will use that project to\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1-1.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":12847,"url":"https:\/\/code4developers.com\/connect-firebase-database-and-angular-app\/","url_meta":{"origin":2586,"position":2},"title":"Connect Firebase Realtime NoSQL Database with Angular App from Scratch","author":"Arif Khoja","date":"August 30, 2020","format":false,"excerpt":"In this tutorial, We are going to learn\u00a0How to connect Firebase Realtime NoSQL cloud database with Angular app from scratch?. We\u2019ll be using\u00a0AngularFire library for setting up Firebase database in the Angular web application. Firebase is a Google product, It is a real-time NoSQL cloud database that allows you to\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"connect-angular-firebase","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3576,"url":"https:\/\/code4developers.com\/angular-6-features\/","url_meta":{"origin":2586,"position":3},"title":"Angular 6 Features","author":"Yatendrasinh Joddha","date":"May 9, 2018","format":false,"excerpt":"On 4th May 2018 angular team announced new version of Angular i.e., Angular V6. In this major release they are not much focusing on Framework but on toolchain. They have tried to unify the framework, CLI, and Material more. In this article we will talk about some of the major\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":4091,"url":"https:\/\/code4developers.com\/create-custom-pipes-aka-filters-in-angular-2-x\/","url_meta":{"origin":2586,"position":4},"title":"Create Custom Pipes – Filters in Angular 2.X +","author":"Arif Khoja","date":"March 10, 2019","format":false,"excerpt":"Our applications may have a lot of data for presentation, But for creating a good user experience it is preferable to see in a more understandable format like March 12, 2010 is better to read then Mon Mar 12 2010 15:23:40 GMT-0700 (Pacific Daylight Time). For such small and repeated\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":9279,"url":"https:\/\/code4developers.com\/what-is-new-in-angular-10\/","url_meta":{"origin":2586,"position":5},"title":"What is new in Angular 10?","author":"Yatendrasinh Joddha","date":"June 25, 2020","format":false,"excerpt":"Today Angular Teams has announced Version 10.0.0 of Angular! This release is smaller than typical, but it covers the entire platform, including the framework, Angular Material, and the CLI. What's new here? Optional Stricter Settings ng new --strict Enabling this flag initializes your new project with a few new settings\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/miro.medium.com\/max\/60\/0*ruU5G-8_hqEp3UBY?q=20","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=2586"}],"version-history":[{"count":9,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2586\/revisions"}],"predecessor-version":[{"id":3244,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2586\/revisions\/3244"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/2649"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=2586"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=2586"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=2586"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=2586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}