Technical presentation given by Laurent Duveau at the .NET BC meetup in Vancouver on April 25, 2018. https://www.meetup.com/NET-User-Group-of-BC/events/249548701/

1. ASP.NET Core 2.1 and Angular 6 in
Visual Studio 2017
LAURENT DUVEAU
APRIL 25TH, 2018

2. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Vancouver FTW!

3. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
BCIT - March 15, 2017

4. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Laurent Duveau
@LaurentDuveau
Microsoft MVP in Montreal
Founder of the Angular Academy
2-day Angular Classroom Training
101 classes in 2 years!
Montreal, Quebec, Toronto, Ottawa ,
Vancouver, Calgary, Winnipeg, London,
Copenhagen, Helsinki…

5. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Stack Overflow Dev Survey 2018

6. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Agenda
Overview of ASP.NET Core + Angular in VS2017
Coding an App!
Update to Angular 6
QnA

7. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Setup
.NET Core 2.1 Preview (Win, MacOS, and Linux)
◦ .NET Core 2.1 Preview 1 SDK
◦ .NET Core 2.1 Preview 1 Runtime
Visual Studio 2017 Preview
◦ https://www.visualstudio.com/vs/preview/
Angular Item Templates extension

8. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Setup
Visual Studio and Visual Studio “Preview” can be installed side-by-side.
=
VS2017 PreviewVS2017

9. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Roadmap
https://github.com/dotnet/corefx/milestone/12
https://github.com/dotnet/core/blob/master/roadmap.md

10. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
New ASP.NET Core + Angular Project template

11. New ASP.NET Core + Angular Project template
ASP.NET CORE 2.0 ASP.NET CORE 2.1 (PREVIEW)
11
Where is my View??
Angular
ASP.NET
MVC
API
Controller
Angular CLI
Project!

12. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
New ASP.NET Core + Angular Project template
We get the best of both worlds!
◦ ASP.NET Core project: act as an API backend (data access, authorization, …)
◦ Regular Angular CLI project (ClientApp folder): act as a UI web app
The template offers the convenience of hosting both project
types in a single Visual Studio project, that can be built and
published as a single unit.

13. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Architecture
ASP.NET Core
Web API (RESTFUL)
Server side
Client side
Database
HTML +
Js

14. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
New Project template
Angular CLI
◦ Built-in commands: ng serve, ng test, ng lint, …
◦ Easier to follow Angular versions (ng update!)
Webpack middleware integration
◦ In dev, you don’t need to keep rebuilding your client-side application
Hot module replacement
◦ Any file changed is pushed into the browser immediately without
reloading the page

15. Demo

16. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Or just using dotnet cli…
Step 1: Install the templates
Step 2: Create a new Angular App
Step 3: Change Environment variable to “Development”
Step 4: Build the application (restore npm dependencies on the first run…)
Step 5: Finally, run the app
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0
dotnet new angular
SET ASPNETCORE_Environment=Development
dotnet build
dotnet run

17. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Already familiar with Angular CLI?
No need to run ng serve!
By default the ASP.NET Core app deals with serving both
server-side and client-side parts of your app
(Internally, it uses ng serve).
But you can customize this…
Run and build your ASP.NET Core server app independently
from the Angular CLI app.

18. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Run "ng serve" independently!
Startup.cs
◦ Replace:
◦ With:
Now just ng serve in your ClientApp folder!
spa.UseAngularCliServer(npmScript: "start");
spa.UseAngularCliServer("http://localhost:4200");

19. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Angular Core Concepts
Components Modules
Dependency
Injection
Language
(TypeScript)
Services Data Binding Decorators Routing

20. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Building SPAs with Components
Header Component
Menu
Component
Footer Component
List ComponentGrid Component

21. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
What is a Component?

22. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
What is a Component?
A component is a reusable object
Made up of: HTML
Template
Code
(ts class)

23. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Map Update
App
DetailsList
ProductsMenu Contact
Your app is a tree of Components

24. Demo

25. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Update to Angular 6!
Using Angular CLI!
ng update

26. Demo

27. ASP.NET Core 2.1 and Angular 6 in Visual Studio 2017 .NET User Group of BC, april 2018
Angular classroom training

28. Thank you!