How to create Angular 6 and Asp.net Core 2.0 App in Visual Studio

 This article describes how to start the angular 6 with Asp.net core in Visual Studio. Here are some steps that will guide beginners to start a project with angular 6 and Asp.net Core. Hope it will help.

1. Create Blank Solution in Visual Studio.
2. Add new project on Blank Solution

3. Choose Asp.Net Core Web Appication

4. Select API option or you can Choose Empty as well.

5. Your project Structure will look like as depicted below.

6. Open Startup.cs file and add following line of below code.

app.UseDefaultFiles();
app.UseStaticFiles();

7. Build the Project and run on browser.

8. Open the developers command or Node.js Command. Subsequently, install Angular CLI globally using the following command

npm install -g @angular/cli

9. Then navigate to the solution folder and run

ng new AngularBeginnerWebApp

10. Angular solution will be created in your Visual Studio project and the folder structure will be look like

11. Before running the app we need to configure certain thing, for this purpose open the .csproj file

12. Add following line under the Property group.

<TypeScriptCompilerBlocked>true</TypeScriptCompilerBlocked>
<PostBuildEvent>ng build –aot</PostBuildEvent> as illustrated below. This will compile the Typescript file using angular cli instead of Visual Studio.

13. Then edit angular.json file and set the outputPath to wwwroot. This setting will make sure that the Angular CLI will copy the assets to wwwroot after the build (Cntrl + F5)

14. Execute the ng build command in Command Prompt to build the project and hit cntrl+F5 in Visual Studio to run the application. In browser your project will look  as shown below.