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

Git  Code Commit (this and all commits back to my last blog post)

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.

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

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).

5

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.

6

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

7

  • 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.

8

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

1

  • Login with bad credentials

2

  • Login with good credentials

4

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!

References

  1. https://stackoverflow.com/questions/36669222/vs-angular2-changes-do-not-update-on-browser
  2. https://stackoverflow.com/questions/44530354/running-visual-studio-2017-with-angular-4-and-angular-cli
  3. https://github.com/aspnet/JavaScriptServices/issues/709
  4. https://stackoverflow.com/questions/41797199/angular2-asp-net-no-resourceloader-implementation-has-been-provided-cant-re
  5. https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr-typescript-webpack?view=aspnetcore-2.1&tabs=visual-studio
  6. https://stackoverflow.com/questions/47322555/how-to-get-value-of-input-field-in-typescript-file-angular-4
  7. https://stackoverflow.com/questions/48537188/get-value-from-input-text-field-in-angular-5
  8. https://angular.io/guide/http
  9. https://www.metaltoad.com/blog/angular-5-making-api-calls-httpclient-service
  10. https://stackoverflow.com/questions/45207615/cannot-find-the-angular-common-http-module
  11. https://stackoverflow.com/questions/41944650/this-implicitly-has-type-any-because-it-does-not-have-a-type-annotation
  12. https://github.com/aspnet/JavaScriptServices/issues/1288
  13. https://www.c-sharpcorner.com/article/create-angular-5-application-using-net-core-2-0-template-in-visual-studio-2017/
  14. https://stackoverflow.com/questions/35212341/angular2
  15. http-post-request-parametershttp://www.talkingdotnet.com/how-to-create-an-angular-6-app-with-visual-studio-2017/
  16. https://www.microsoft.com/net/download/dotnet-core/2.1#sdk-2.1.300-rc1
  17. https://angular.io/guide/http
  18. https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr-typescript-webpack?view=aspnetcore-2.1&tabs=visual-studiohttps://codingsight.com/using-npm-webpack-and-typescript-to-create-simple-aspnet-core-web-app/-
  19. https://www.metaltoad.com/blog/angular-6-upgrading-api-calls-rxjs-6-
  20. https://www.metaltoad.com/blog/angular-5-making-api-calls-httpclient-service
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