Asp.Net Core + Angular 2/4: Saga Continues

Dedicated time to code is limited.  Each month, I try to find blocks of programming time between emergency shifts, and after completing fpnotebook.com content updates. This past year I was also distracted by the Microsoft Data Science curriculum.

Coding projects generally center around medical apps for the site.  Small, self-limited projects that can be completed in a couple of weeks are ideal.  However, most projects require months to complete and it can be difficult to frequently leave and return to these projects, each time spending time to reacquaint myself with the code.  In the meantime, frameworks update, at times with breaking changes.

This month I returned to one of my most challenging projects of recent time: Integrating an angular 2/4 application into asp.net core.  Pluralsight, Lynda.com and Udemy have covered most topics I need, related to angular and asp.net core (including their combination).  In addition, Angular and Asp.net Core both have excellent online documentation.   Microsoft has even created combined SPA project templates for angular within asp.net core projects (Javascript Services).

But these lessons and documentation do not cover my approach well, which I describe in this post.  I think Javascript Services, which embeds the angular app within asp.net core MVC is not the right approach (at least for me), as they do not preserve the angular cli tool chain nor allow for testing angular in isolation of asp.net core.

So the last 2 days, I had time to reacquaint myself with this project and experience frustrations that brought any chance of productivity to a screeching halt.   Day 1 was  spent on deployment to IIS with sql database (one db on development machine, one db on server) – which is not covered well in any video series I have seen.  Many demo videos use Auth0 for authorization and Firebase for database.  But authorization and database are some of the key reasons I use the asp.net core framework.  Why defer that functionality?

Elsewhere, I cover deployment and database.  Despite keeping these blogs for my own reference, it still takes hours to get the whole publish process working.  That is when I found IIS related errors despite my angular + asp.net core working when built on my development machine or on the production server when using local host.  The problem I have had previously, and had again, was the issue with angular base href statement in the index.cshtml file.  My key finding was that the base href works fine as long as it remains “~/” and not a subdirectory (e.g. angular_dist).  Previously, my angular cli project would build its files and send them to a subdirectory of wwwroot.  I did this to prevent overwriting the other assets in the main directory not related to angular.  However, the cli build command has options allowing to not delete files in the destination directory and to not hash file names.

Now I am using the following command line to build angular destination files directly into the asp.net core wwwroot directory:

ng build --prod --extract-css=false --output-hashing=none
     --delete-output-path=false 
     --output-path="../backend/wwwroot/"

 

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.