{"id":2658,"date":"2017-06-22T17:17:07","date_gmt":"2017-06-22T11:47:07","guid":{"rendered":"https:\/\/code4developers.com\/?p=2658"},"modified":"2017-06-22T17:17:07","modified_gmt":"2017-06-22T11:47:07","slug":"angular-4-application-with-visual-studio","status":"publish","type":"post","link":"https:\/\/code4developers.com\/angular-4-application-with-visual-studio\/","title":{"rendered":"Angular 4 in Visual Studio"},"content":{"rendered":"

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

In this article, we will discuss about how to set up and start Angular 4 in visual studio. As many of developers have worked with Microsoft tools and technologies, they preferred visual studio as web development platform.<\/p>\n

<\/p>\n

Step 1: <\/strong>Install Node.js and npm<\/h4>\n

The first step is to install Node.js and npm (Node Package Manager) in your system. It is recommended that you have node version 6.10 or greater and npm version 3.10 or greater. You can check the versions that you have on your machine type the following commands in a command window.
\nnode -v
\nnpm \u2013v<\/strong><\/p>\n

You can get the latest version of Node.js from the following website. Click on the download link depending on your operating system.
\nhttps:\/\/nodejs.org\/en\/download\/<\/a><\/p>\n

Step 2: Install Visual Studio 2015 Update 3<\/strong><\/p>\n

Make sure you have Visual Studio 2015 Update 3 installed. To check the version of Visual Studio you have click on the\u00a0“Help”<\/strong>\u00a0menu and then select\u00a0“About Microsoft Visual Studio”<\/strong>. The following are the download links if you don’t have Visual Studio 2015 Update 3.<\/p>\n

Visual Studio Enterprise 2015 – Update 3<\/strong><\/a><\/h4>\n

Visual Studio Professional 2015 – Update 3<\/strong><\/a><\/h4>\n

Visual Studio Community 2015 – Update 3<\/strong><\/a><\/h4>\n

\u00a0\"VS15\"<\/strong><\/p>\n

Step 3: <\/strong>Now\u00a0Configure environment settings for\u00a0node\u00a0and\u00a0npm<\/strong>\u00a0in Visual Studio<\/h4>\n
    \n
  1. In Visual Studio click on Tools – Options.<\/li>\n
  2. In the “Options” window, expand “Projects and Solutions” and select “External Web Tools”<\/li>\n<\/ol>\n
      \n
    1. In the right pane, move the global $(PATH) entry to be above the internal path $(DevEnvDir) entries. This tells Visual Studio to look for external tools (like npm) in the global path before the internal path.\"nd\"<\/li>\n<\/ol>\n
        \n
      1. Click “OK” to close the “Options” window and then restart Visual Studio for the changes to take effect<\/li>\n<\/ol>\n

        Step 4:<\/strong>\u00a0\u00a0Install TypeScript for Visual Studio 2015<\/h4>\n
          \n
        1. To develop Angular applications you need TypeScript 2.2.0 or later.<\/li>\n
        2. To check the version of TypeScript, clik on the\u00a0“Help”menu in Visual Studio and Select\u00a0“About Microsoft Visual Studio”.
          \n\"vs\"<\/li>\n
        3. Download and install the latest version of TypeScript for Visual Studio 2015 from the following URLhttps:\/\/www.microsoft.com\/en-us\/download\/details.aspx?id=48593<\/a><\/li>\n
        4. After installing TypeScript, the installation wizard prompts you to restart Visual Studio. So, please restart Visual Studio for the changes to take effect.<\/li>\n<\/ol>\n

          Step 5:<\/strong>\u00a0<\/strong>Create Empty ASP.NET Web Application project<\/h4>\n
            \n
          1. Run Visual Studio as Administrator<\/li>\n
          2. Click on File – New Project<\/li>\n
          3. Select “Web” under “Visual C#”. From the right pane select “ASP.NET Web Application”<\/li>\n
          4. Name the project “Angular4Demo”<\/li>\n
          5. On the next screen, select “Empty” template and click “OK”<\/li>\n<\/ol>\n

            Step 6<\/strong>:<\/strong>\u00a0Download the\u00a0“Quick Start Files”<\/strong>\u00a0from the Angular web site using the link below. Extract the contents of the downloaded .ZIP folder.<\/p>\n

            https:\/\/github.com\/angular\/quickstart<\/a><\/p>\n

            Step 7<\/strong>:<\/strong>\u00a0Copy the required “Starter files” to the web application project<\/h4>\n

            We do not need all the starter files that we downloaded. As you can see from the image below, we need 4 folders\/files.<\/p>\n

              \n
            • src folder and its contents<\/li>\n
            • bs-config.json<\/li>\n
            • package.json<\/li>\n
            • tslint.json
              \n\"cd\"<\/li>\n<\/ul>\n

              Copy the above files\/folders and paste them in the root directory of “Angular2Demo” web application project.<\/p>\n

              Now click “Show All File” icon in “Solution Explorer” and include all the copied files\/folders in the project.<\/p>\n

              At this stage your project structure in Visual Studio should be as shown below.<\/p>\n

              \"\"<\/p>\n

              When including the files in the project if you get a prompt to\u00a0“Search for Typescript Typings”<\/strong>\u00a0click “No”.<\/p>\n

              \"\"<\/p>\n

              \u00a0<\/strong>Step 8:<\/strong>\u00a0Restore the required packages<\/h4>\n

              In the “Solution Explorer” right click on “package.json” file and select “Restore Packages” from the context menu. This takes a few minutes to load all the modules. You can see the status in “Visual Studio Output” window. After the restoration is complete, you will see a message “Installing Packages Complete”. To see all the installed node modules, click on “Show all Files” icon in Solution Explorer.\u00a0DO NOT include “node_modules” folder in the project.<\/p>\n

              \"asd\"<\/p>\n

              Step 9: Run the project<\/strong><\/h4>\n
                \n
              1. In the “RUN” window type “cmd” and press enter<\/li>\n
              2. Change the directory in the command prompt to the directory where you have the web application project. I have my web application project in \u201cD:\\AngularJS\\Angular4Demo\\Angular4Demo”. So I typed\u00a0CD D:\\AngularJS\\Angular4Demo\\Angular4Demo\u00a0and upon pressing the enter key I ta am in the root folder.<\/li>\n
              3. Type “npm start” and press “Enter” key.
                \n\"cmd\"<\/li>\n<\/ol>\n
                  \n
                1. This launches the TypeScript compiler (tsc) which compile the application and wait for changes. It also starts the lite-server and launches the browser where you will see the output – Hello Angular<\/li>\n
                2. At this point, open “app.component.ts” file from “Solution Explorer”. This file is present in “app” folder in “src” folder.<\/li>\n
                3. Change “name” value from “Angular” to “Angular 4” and you will see the changes reflected on the web page automatically.<\/li>\n<\/ol>\n

                  At the moment we do not have the capability to run the project by pressing F5 or CTRL + F5.<\/p>\n

                  Summary<\/strong><\/h4>\n

                  In this article, I discussed about how to configure Angular 4 in Visual Studio and develop Angular 4 application on Visual Studio platform. In next article we will discuss about how to run Angular 4 application using F5 or CTRl + F5.<\/p>\n","protected":false},"excerpt":{"rendered":"

                  Introduction In this article, we will discuss about how to set up and start Angular 4 in visual studio. As many of developers have worked with Microsoft tools and technologies,…<\/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,31],"tags":[29,30],"powerkit_post_featured":[],"class_list":{"0":"post-2658","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-angular","8":"category-visual-studio","9":"tag-angular","10":"tag-visual-studio"},"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-GS","jetpack-related-posts":[{"id":2586,"url":"https:\/\/code4developers.com\/angular-4-installations\/","url_meta":{"origin":2658,"position":0},"title":"Angular 4 Installations","author":"Nisarg Dave","date":"June 14, 2017","format":false,"excerpt":"Introduction This article demonstrates how to install Angular 4 in your local system and start working with angular\/cli using basic commands. What is Angular 4? Before starting with Angular 4, we need to know about Angular 2. Angular 2 is totally different kind of framework from Angular 1. Angular 1\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.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1.png?resize=700%2C400 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/1.png?resize=1050%2C600 3x"},"classes":[]},{"id":2568,"url":"https:\/\/code4developers.com\/angularjs-application-end-to-end-testing-with-protractor-tool-part-1\/","url_meta":{"origin":2658,"position":1},"title":"AngularJS Application End to End Testing with Protractor Tool : Part 1","author":"Sneha Jaiswal","date":"June 8, 2017","format":false,"excerpt":"What is End to End Testing? End to End Testing is used to determine the performance of application as per requirement. For large and complex applications manual testing is not sufficient to verify the correctness of new features, catch bugs and notice regression. To resolve issue of integration between components\u2026","rel":"","context":"In "AngularJs"","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3544,"url":"https:\/\/code4developers.com\/angular-6-crud-part-1-project-setup-routing-service\/","url_meta":{"origin":2658,"position":2},"title":"Angular 6 CRUD \u2013 Part 1: Project Setup, Routing, Service","author":"Nisarg Dave","date":"May 9, 2018","format":false,"excerpt":"This article is Part 1 Angular 6 CRUD. In this article and upcoming article, we will discuss performing CRUD operations in Angular 6 i.e. Creating, Reading, Updating and Deleting in Angular 6 with simple examples. We will also discuss about the Angular 6 Project setup, apply Routing, create service 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\/2018\/05\/json-server-call-300x297.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":12847,"url":"https:\/\/code4developers.com\/connect-firebase-database-and-angular-app\/","url_meta":{"origin":2658,"position":3},"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":3886,"url":"https:\/\/code4developers.com\/getting-started-with-miscrosoft-visual-studio-code\/","url_meta":{"origin":2658,"position":4},"title":"Getting Started with Miscrosoft Visual Studio Code","author":"Pawan Ingale","date":"August 27, 2018","format":false,"excerpt":"The Visual Studio Code integrated development environment is a creative launching pad, that you can use to edit, debug, and build code, and then publish an app. VS Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, MacOS and Linux.\u2026","rel":"","context":"In "Visual Studio"","block_context":{"text":"Visual Studio","link":"https:\/\/code4developers.com\/category\/visual-studio\/"},"img":{"alt_text":"VS Code","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/08\/opengraph-blog-1.png?fit=1200%2C618&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/08\/opengraph-blog-1.png?fit=1200%2C618&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/08\/opengraph-blog-1.png?fit=1200%2C618&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/08\/opengraph-blog-1.png?fit=1200%2C618&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/08\/opengraph-blog-1.png?fit=1200%2C618&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3376,"url":"https:\/\/code4developers.com\/ionic-project-structure-installation\/","url_meta":{"origin":2658,"position":5},"title":"Ionic Project Structure and Installation","author":"Pratik Maniar","date":"April 1, 2018","format":false,"excerpt":"Ionic is a framework for web developers to develop a mobile application. It is used to create an hybrid application which works as an native apps. Using Ionic we can build mobile, web, and desktop applications with one shared code. In this getting started with Ionic article we will talk\u2026","rel":"","context":"In "Ionic"","block_context":{"text":"Ionic","link":"https:\/\/code4developers.com\/category\/ionic\/"},"img":{"alt_text":"Ionic","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/03\/Ionic-And-its-Tools-in-Brief-scaled.jpg?fit=1200%2C775&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2658","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=2658"}],"version-history":[{"count":3,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2658\/revisions"}],"predecessor-version":[{"id":2660,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2658\/revisions\/2660"}],"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=2658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=2658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=2658"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=2658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}