How to setup Angular 4 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 Web application Angular4 Setup
  2. Download the angular quick start from GitHub by using the URL
  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.

Sharing is Caring!

Leave a Reply

Your email address will not be published. Required fields are marked *