TGIMBA .NET Core Upgrade – Angular 5 replaced with Angular 6 Login

NOTICE: The TGIMBA git hub repository has been corrupted and I had to start over.  The link to the repository is here -> Git  Code Commit

For this post, I started out with the ambition of upgrading the intermediate Angular 5 Type Script client I got working earlier to Angular 6. Why? I really want to see if a React JS/Redux client can exist with an Angular 6 Type Script client. If so, I had planned on using both of them on The Globe In My Bucket list Application (TGIMBA).

However, after a couple of days of trying, I was not successful. I DID successfully update the Angular 5 client to Angular 6 when I can post on the login page. I was not successful in combining the Angular 6 and React JS clients though. Even more distressing is that a step in the Angular 6 client (at least in reference #1) requires outputting the Angular 6 compiled JavaScript to the wwwroot. This is not compatible with my intent of having the Angular 6 client live with the Vanilla JavaScript client.

My initial strategy was to have both inhabit a ‘ClientApp’ folder under the .NET Core Web App folder. The Vanilla JavaScript client would inhabit the wwwroot. I was also thinking the JQuery client I want to bring in (I mean, a website with 4 scripting clients is way cooler than just one, right?!? 🙂 ). But it seems like this structure went away with the Angular 6 client. From what I can see, the ‘new’ structure places folders/files in the root of the .NET core project.

1

I tried re-wiring this back into the ClientApp folder structure, but I ran into issues if the angular.json file was not in the root. More specifically, the ng build –aot command that is placed in the .csproj file (reference #1) appears to require that the angular.json file be in the root. I tried two flavors of re-wiring this – redirecting the ng build –aot command to look for the angular.json file in ‘ClientApp’ and placing the angular.json file root, but redirecting its references to the ‘ClientApp’ folder. Neither were successful. So, what to do?

For this post, I am going to update the TGIMBA code to use Angular 6 (i.e. you always want to use the latest in any technology). Then, I will create another .NET Core web app to host the React JS client. The React JS client will either another website that I host separately or it will just stay a local host experiment. If it becomes hotter than Angular 6 in the next year or so, I will promote it 🙂 Additionally, I am going to keep the Angular 6 and React JS clients in their own websites. I will keep the Vanilla JavaScript client in the existing website along withe the JQuery client (I hope).

Updating the Angular 5 client proved a little difficult at first. So, I started over again from scratch creating an Angular 6 client using the process listed in reference #1 in my TGIMBA code based (basically gutting the previous code and adding it back in). My use of reference #1 yielded this process:

  • Clone a new version of TGIMBA (always best in case you blow something up and need to start over again a few times).
  • Cmd prompt (w/vs 2017 closed) -> npm install (in TgimbaNetCoreWeb)
  • Open v 2017 solution and restore nuget packages/clean/build/run tests/run app to verify good code base
  • Upgrade every project to .NET Core 2.1 and repeat the above step

NOTE: I had to update my nuget references to Microsoft.AspNetCore.App to 2.1.1
5

  • Open v 2017 solution and restore nuget packages/clean/build/run tests/run app to verify good code base
  • Remove Angular 5 ClientApp folder, package.json and all Angular related items
  • Delete node_modules from TgimbaNetCoreWeb directory
  • Revert TgimbaNetCoreWeb.csproj back to basics

2

  • Revert Home/Index.cshtml back to basics

3

  • Remove webpack code from Startup.cs

4

  • Open v 2017 solution and restore nuget packages/clean/build/run tests/run app to verify good code base

NOTE: All my tests ran and the Vanilla JavaScript login and Welcome pages worked as expected. The Angular 5 login page was predictably empty 🙂

Another thing. The previous Angular 4 component structure seem to have changed. I do not know if this changed to a Single Page Application (SPA) template or not, but I am not sure exactly where to put my TypeScript Hyper Text Markup Language (HTML) files. For this blog post, I have commandeered app.component.html for the login page temporarily.

6

When I get to the registration page, I will figure out where these files should go and act accordingly. Please remember, I am going to complete a React.js and Jquery login page first before moving on to the registration page. My ‘plan’ is to do each page in the 4 client technologies (Vanilla JavaScript, Angular 6 TypeScript, React JS and Jquery).

The app.component.ts is where the login code goes.

10

Running it:

  • Login Screen

7

  • Failed Login

8

  • Login Successful

9

NOTE: Because I do not know at the point the ‘proper’ Angular 6 way to place HTML view, I am using alert prompts to show the login.

Next will either be the React JS or JQuery login.

Stay tuned!

References

  1. http://www.talkingdotnet.com/how-to-create-an-angular-6-app-with-visual-studio-2017/
  2. https://www.dotnetcurry.com/angularjs/1438/http-client-angular
  3. https://stackoverflow.com/questions/51173290/angular-asp-core-2-http-post-data-is-always-null
  4. https://stackoverflow.com/questions/43703846/null-value-when-pass-values-frombody-to-post-method-by-postman-plugin
  5. https://stackoverflow.com/questions/51566355/angular-6-post-request-to-net-core-api
  6. https://stackoverflow.com/questions/51096781/setting-values-of-input-fields-with-angular-6/51097484
  7. https://www.c-sharpcorner.com/article/crud-operation-with-angular-5-http-client-and-asp-net-core-web-api/
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s