How To Start Angular App In VS 2017

In this blog, I will explain how to start Angular 5 in Visual Studio 2017 with .NET Core 2.1.

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

Demo Project

• Open VS 2017, create a new project. Go to New Project >>Web >> select .Net Core >> ASP.NET Core Web application.

 

• Select the Angular app template and click OK.

• Now, right-click your ClientApp folder and select open the containing folder.

• Write cmd on the path bar and hit Enter. In the CMD, run npmInstall command.

• Now, run your application and automatically, restore your npm packages.

• See your project structure given below.

Angular Core Concepts

 

Building SPAs with Components

What is a Component?

• A component is a reusable object made up of TypeScript Code (.ts class) + HTML Template.

Your app is a tree of components

Now, see the output of your first project.

You can check my code from here