Aspnetcore.docs: 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.

[Rick-Anderson]

@fiyazbinhasan Yes, with Steve's points. cc @tdykstra

[fiyazbinhasan]

@SteveSandersonMS @Rick-Anderson got it! will be on it ASAP

[FabianGosebrink]

@fiyazbinhasan would love to help

[fiyazbinhasan]

@FabianGosebrink awesome!!! it would be great if you can refer me to some online resources :D

[FabianGosebrink]

@fiyazbinhasan add me on Skype with my email here in github. Let's continue there...are you okay with that?

[fiyazbinhasan]

@SteveSandersonMS can you refer me some Api docs where the SpaServices taghelpers are briefly described. TIA :)

[fiyazbinhasan]

@Rick-Anderson @FabianGosebrink starting here, angular2-doc

[damienbod]

Hi @fiyazbinhasan

I think you should rename the doc to just angular-doc
angular == version 2, 4 and 5 later this year
1 == angularJS

Then also remove all the 2s from the doc.

Is this the right place for feedback or should I add it directly on your branch?

Greetings Damien

[fiyazbinhasan]

@damienbod you can add it to the branch :)

[damienbod]

@fiyazbinhasan pull-request or issue?

[fiyazbinhasan]

PR :)