HI WELCOME TO KANSIRIS

How To Start Angular App In VS 2017

In this blog, we will see how to get started with Angular 5 in Visual Studio 2017 with .NET Core 2.1. This blog includes the introduction of Angular and .NET Core opensource also.
Flow of the blog
  1. Overview of ASP.NET Core + Angular in VS2017
  2. Installation
  3. Architecture
  4. Demo Project
  5. Angular Core Concepts
  6. Building SPAs with components
  7. What a component is
  8. Your app is a tree of components
Overview of ASP.NET Core + Angular in VS2017
  • ASP.NET Core is an open source and cloud-optimized web framework for developing modern web applications that can be developed and run on Windows, Linux, and Mac. It includes the MVC framework which now combines the features of MVC and Web API into a single web programming framework.
  • Angular is a platform and framework for building client applications in HTML and TypeScript. Angular is itself written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps.
Installation
  • Download and install the latest version of Node.js from here.
  • SQL Server 2014 or above
  • NET Core 2.1 Preview (Win, MacOS, and Linux)
  • .NET Core 2.1 Preview 1 SDK from here
  • .NET Core 2.1 Preview 1 Runtime here
  • Visual Studio 2017 Preview

    https://www.visualstudio.com/vs/preview/
  • Angular Item Templates extension
Archistructure
Angular

Demo Project
  • Open VS 2017, create a new project. Go to New Project >>Web >> select .Net Core >> ASP.NET Core Web application.
Angular
 
Angular
  • Select the Angular app template and click OK.
Angular
  • Now, right-click your ClientApp folder and select open the containing folder.
Angular
  • Write cmd on the path bar and hit Enter. In the CMD, run npmInstall command.
Angular
Angular
  • Now, run your application and automatically, restore your npm packages.
  • See your project structure given below.
Angular
Angular Core Concepts
Angular
 
Building SPAs with Components
Angular
What is a Component?
Angular
  • A component is a reusable object made up of TypeScript Code (.ts class) + HTML Template.
Your app is a tree of components
Angular
Now, see the output of your first project.
Angular
You can check my code from here