TGIMBA .NET Core Upgrade – Angular 5 TypeScript Login View Added

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

Welcome back! Before I go onto registration, I have decided to work on the Angular 4 site in parallel with the native JavaScript. I may also include a React JS and JQuery client.  If successful, I will have four JavaScript clients for the price of one 🙂

If you remember, I was stumbling over the Angular 4 portion of the website not working.  There were a number of issues, but I was able to figure them out by creating a new .NET Core Angular project using a later template and looking at the differences in WinMERGE.  Highlights include:

  • Things started working correctly when I reinstated app.UseStaticFiles(); in Startup.cs -> Configure(args).  This seems to be required for any files in the wwwroot to be used.  There are also a number of other items I cut from Startup.cs because I had issues deploying to production.  This code is not on production yet as I will have to address how to add a production environment variable.
  • While researching errors, I had set this flag in the .cproj -> to false thinking it was preventing my changes from appearing.  Setting it back to true was part of the fix.


Additionally, when updating to the new template (the one I had previously was from 2017), npm-shrinkwrap.json was updated a ton. I think this is where the ng and other ‘bundles’ of code that handle the angular part get build. If all you have is the localhost code bundle, none of your events will fire (at least they did not for me).


Also, if you watch, main-server.js and main-client.js are the compiled versions (i.e. to vanilla javascript) from the TypeScript. In my previous API experience with Node JS TypeScript, the entire TypeScript tree got compiled into individual files and run in a folder on the server. Mass compilation into one file is a different, but widely used approach as I understand it.

To complete the login page, there were two challenges – getting value from <input/> back to typescript code behind (reference #6 and #7) and then posting it.

  •  To pass values from the view to the TypeScript code, you have to use a <button> tag with a click event tied to your event handler.  You bind your data based on the ngModel syntax.


  • The TypeScript file gets the values passed in the event handler call.


  • Posting to server to validate credentials involves the deprecated http module.  There are multiple ways to do this, but this is the first one I got to work.  I will update to Angular 6 at some point. btoa is a JavaScript method the Base64 encodes a string.


Running it (remember, I will not be adding Cascading Style Sheets (CSS) to make it pretty until the pages are all functional)

  • Login page on load


  • Login with bad credentials


  • Login with good credentials


While working on this, I also realized how out of date of the Angular 4 template I was using is.  Angular 6 is hot off of the presses and has changed a lot of things.  I almost signed up to use it, but when I set up the template using Visual Studio 2017, I got stuck because none of my existing Angular 4 code would work.   I tried to use the new Angular Http code (as of Angular 4.3, the older http module was replaced).  However, I could never get passed an error where angular/common/http could not be found when using this import:

import { HttpHeaders } from ‘@angular/common/http’;

Angular 5 still supports the old http module, so that is what I am using for now.  I am constructing each page one at a time, so I am sure I will update to Angular 6 by the time I have replicated the previous The Globe In My Bucket Application (TGIMBA) functionality.

Stay tuned!


  15. http-post-request-parameters

Leave a Reply

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

You are commenting using your 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