Document using ASP.NET Core with Angular 2

[danroth27]

We should see what docs we should add to the official ASP.NET Core docs for using Angular 2 with ASP.NET Core given the great work @SteveSandersonMS and the community have been doing in this area:

http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/

see Suggestion for new page in client side development #2926

[spboyer]

Document Outline

• Using SpaServices for Angular and ASP.NET Core
• What is SpaServices
  • Pre-rendering
  • TagHelpers
  • webpack / build and bundling
• Middleware
  • MapSpaFallbackRoute
  • UseWebpackDevMiddleware
• Prerequisites
• Creating a new project
  • Using the yeoman generator
    • What does it produce
    • Web API
    • Angular
• Debugging your application
  • VS Code
  • Visual Studio
• Deploying your application
  • Azure
  • Docker

Please review and comment : @danroth27 @SteveSandersonMS

[SteveSandersonMS]

Good plan @spboyer! Suggested tweaks:

• Using SpaServices for Angular and ASP.NET Core / Overview of features
  • Pre-rendering
  • webpack / build and bundling
  • Ability to invoke Node.js code/packages from .NET code
  • Associated project templates
• Creating a new project
  • Prerequisites
  • Using the yeoman generator (+ when implemented, using dotnet new to create the same projects)
  • What does it produce
    • Web API
    • Angular
    • Build configuration
    • Tests and test runner
• Using SpaServices features
  • UseWebpackDevMiddleware
  • MapSpaFallbackRoute
  • asp-prerender-module tag helper
• Debugging your application
  • In browser dev tools (e.g., in Chrome)
  • VS Code
  • Visual Studio
• Deploying your application
  • Azure
  • Docker

If this doesn't make sense, let me know. Of course you should change it in any other way you think best :)

[damienbod]

Should also add a section about AoT, treeshaking, HMR, angular lazy loading and using npm, yarn

[FabianGosebrink]

Hey, how about this:

• Using SpaServices for Angular and ASP.NET Core
• What is SpaServices
  • Pre-rendering
  • TagHelpers
• Middleware
  • MapSpaFallbackRoute
  • UseWebpackDevMiddleware
• Prerequisites
• Creating a new project
  • Using the dotnet cli
  • using npm/yarn
  • What does it produce
  • Web API
  • Angular
• Developing your project
  • Create the Backend (Controller/REST)
  • Create Module & Components Angular
  • Add Lazy Loading
• Debugging your application
  • VS Code
  • Visual Studio
  • Chrome
• Distribution
  • Use Ahead of Time Compilation
  • Use TreeShaking with webpack
• Deploying your application
  • Azure
  • Docker

[Rick-Anderson]

@SteveSandersonMS can you split up an outline into a couple docs? Your outline (and @FabianGosebrink ) look like they could be spit up. Please consider @FabianGosebrink outline.
@spboyer won't be doing the work so it would be great if you can come up with the outline.

@fiyazbinhasan are you interested in this?

[fiyazbinhasan]

@Rick-Anderson interested! should i start with @FabianGosebrink outline?

[SteveSandersonMS]

@FabianGosebrink's outline looks great! Only points I'd add:

• Would be good to describe testing with Karma (i.e., just that you can run npm test and what happens - once people realise there's a working Karma setup out of the box, they will go forwards with that)
• The AOT/treeshaking stuff is a work-in-progress right now, so you might just have to leave a placeholder until that's streamlined.