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.
- Create an empty Asp.net Web application
- Download the angular quick start from GitHub by using the URL https://github.com/angular/quickstart
- Make sure Node.js and Typescript latest version is installed in your machine.
- Extract the downloaded quick start project sample.
- 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.
- 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,
- In systemjs.config.js file comment the meta section under packages section like below
- Add module id to all the component which you add like below
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 4. Hope 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.