Written by

Jayakumar Balasubramaniam

Share

  

Category

see all categories
Request Demo

How to setup Angular4 in Visual Studio 2017

Angular 4 is here and it's the right time to learn one of the most popular and powerful JavaScript frameworks. Angular as you might already know is one of the most popular JavaScript frameworks already for creating web apps. Developed by Google, you can be assured that this powerhouse of a framework is built with speed and purpose.

Setting up Angular 4 in Visual Studio 2017 – step by step

Ensure you follow the below steps and code snippets to setup the Visual Studio environment to run Angular 4 application.

  1. Create an empty Asp.net Web application Angular4 Setup
  2. Download the angular quick start from GitHub by using the URL https://github.com/angular/quickstart
  3. Make sure Node.js and Typescript latest version is installed in your machine.
  4. Extract the downloaded quick start project sample.
  5. From the downloaded quick start project copy and paste below files into your visual studio solution
    • Copy Package.json,  main.ts,  systemjs.config.js, tsconfig.json to project main folder
    • Create a folder called “app” where all our angular stuffs to be placed.
    • Copy src/app/app.module.ts and src/app/app.component.ts file to your “app” folder.
    • Now Right click the package.json file from your solution and click “Restore Packages” to install all packages.
    • Once installed successfully you will get the “node_modules” folder in your solution.
  6. Add Default.aspx file to the solution. In order to imitate the first component in angular which is probably your app.component use the selector of this component in Default.aspx file like below,Angular4 Code
  7. In systemjs.config.js file comment the meta section under packages section like belowAngular4 Module
  8. Add module id to all the component which you add like below

Angular4 Codes

Here is yet another interesting article on how to create reusable Chart components with Angular 4.

That’s it. Now you are ready to run the Angular 4 application in Visual Studio just by hitting the F5 button like running other applications in visual studio. If you want to explore SharePoint Framework with Angular 4, this blog will help you  How to Integrate SharePoint Framework-SPFx with Angular 4Hope you find this article useful. If you are looking for any topics that we can cover or have a comment on this blog, you are welcome to let us know via the comments below.

Jayakumar Balasubramaniam

Written by Jayakumar Balasubramaniam

A technology evangelist working on Microsoft 365, SharePoint & Azure. Gets my hands dirty with latest and greatest of SharePoint, Azure & front-end frameworks. Currently working with “Hubfly – A unified digital workplace” as a Product Engineer. Getting in to the depth of the domain & technology, with my eyes for perfection, ensures that the product releases go right every time.