That was fun: Angular 5 updates

(This post should have been uploaded in November, 2017, when it happened. I should post more often.)

I noticed that the Angular.io docs were written with Angular 5 in mind. I especially noticed it when the Http methods did not load properly in my project. It turns out that HttpClient was moved to into @angular/common. However, my version of Angular had HttpClient still in @angular/http. I ended up with bad files when I followed the documentation. To stay current, I decided to  update my copy of Angular 4 to Angular 5.

I did a search on how to do the update and I ran across this site: angular-update-guide.firebaseapp.com. Their suggestions helped a lot. I did notice that when I ran the update, I kept seeing messages about ‘invalid’ modules. I’m still not sure why I saw that message, but I’ve seen odd messages from other updates before, so I filed it away to follow up in case the update did not work.

I run my development server with Angular CLI, so I entered ‘>ng serve’ to start the new server. It did not work. I saw an odd message saying my version of ‘angular/compiler-cli needs to be 2.3.1 or greater. Current version is 5.0.2’. Clearly, something was wrong with the angular-cli files. I considered updating the project.json file and updating everything with npm. It turns out I had to be more systematic to make sure everything related was updated properly.

I installed Angular-cli globally, so I had to remove it globally first. I also removed it from the dependency list in the project. I deleted the node modules to make sure every change shown in project.json was accepted correctly. I reloaded angular-cli globally and in the project dependencies again. Finally, I ran ‘>npm install’ to make sure the modules were fresh.

‘> ng serve’ worked as expected. That took longer than I thought.

Advertisements

That would have been nice to know!

I run VirtualBox on my machine to test Ansible playbooks and to run (my legal copy of) Windows 7. I’ve received noticed from VirtualBox that there was a new version of VirtualBox available. (I run 5.1.28. The notice says 5.1.30.) After several weeks of delay, I decide to check it out.

I go to the VirtualBox website and discover that VB is now up to version 5.2.2. This is interesting. I wonder what they fixed? I like that it’s on minor version x.x.2, so they’ve tracked down the errors. I like it. I’ll download it and test it.

It looks good. It starts up as usual. The Windows 7 VM starts as expected. OK, let’s check out ansible. (Record scratch!!!) It won’t run any more. Vagrant 1.9.7 insists that it needs a copy of VirtualBox to run. I have VB installed. This can’t be right. I’ll force it and try again. Still not go with vagrant.

Let me run a Google search. It turns out that vagrant 2 won’t run VirtualBox 5.2 until the next minor update. What’s the newest version of vagrant available? 2.0.1. That’s it. I download it and attach the machine to a good internet pipe to handle the playbook.yml file. It starts up finally. A wasted afternoon on a machine that was not fixed until 9 pm.

Flask validation OR that would have been nice to know!

I’m building some sample sites to display my python skills. In one site, I’m building a app using Flask as the framework to show the web pages. In this page, I need to enter a username that will be used to collect some data from another site. Before I start writing the function to collect and massage the data, I want to be sure I could capture the username entered. I think “No problem”. The Flask module has several examples and tutorials on how to build a form and validate the data entered. I set it up … and it does not work.

I want to set up the same form in two places: as a form field in a navigation bar and as a separate form page, in case there was a problem using the original form field. In the navigation bar, I set up a simple form with one field, the username. The form would send the HTTP request to a submit page, where the form would be validated and sent back to the original form page with an additional  message OR stop and display the full form again in the same separate page (in case someone clicked the submit button in the nav bar without filling in the form field). In both forms, I was sent to the submit page, even after filling out the form field. The form data was never validated in the submit page, so that submit page was redrawn. Why?

I thought there was something wrong with the HTML generated by the flask templates, so I reviewed that HTML. It was fine. I figured out how to include bootstrap classes into flask forms, so that review was helpful. However, I was still stuck on the submit page. I thought there was something wrong with the HTML names and ids of the forms and form fields, but no. Everything was named properly. I reviewed my flask tutorial and the FlaskForm and flask-wtf module documentation pages. My forms.py and views.py pages were set up properly. Wait … What’s this bit about CSRF (cross site request forgery) tokens included in flask forms? That’s nice to use eventually, but I’m doing local testing. Why should I care about CSRF checking?

It turns out that the hidden CSRF field generated by a flask form is what is used to validate the form itself. If the CSRF field is not included in the original form, the form will never validate. That would have been nice to know.

I found one line in the (old) tutorial I used from Miguel Grinberg that says “The SECRET_KEY setting is only needed when CSRF is enabled, and is used to create a cryptographic token that is used to validate a form.” That line does not appear in sections describing form templates or form views, but at the top section describing configuration. I read nothing that confirms this in the flask docs or the flask-wtf docs. However, it appears to be true. The flask CSRF token is required to validate the form. No CSRF token:  no validation. A day and a half wasted.

nice to know: python imports

I am writing a Python command line app that cleans up data scraped from a web page and imports that data into associated tables inside a MySQL database. The top level of the directory holding the python files is getting crowded. I wanted to move the dependent modules into a directory and import those modules into the main file. I find out that I need to add that child directory into a sys.path list before I can import the modules. That’s good to know, but it’s too much for a command line script.

See here for more info:

Smarty template paths

You may or may not know that I like boardgames. I like playing them. I like organizing them. I like tracking what I’ve played recently and what needs to be played again. One of those games is called “Advanced Squad Leader” (ASL). Honestly, it’s so big it could be called a boardgame life style. I don’t have enough time to play it regularly. All I can do is try to stay current with parts like modules, game boards and game scenarios.

Many years ago, I started writing a web application that would help me track all the parts that came with ASL. (It’s that big.) Game scenarios come with game modules and also come separately in scenario packs and magazines. I would frequently run into this situation: I find a game scenario that looks interesting, but do I own all the parts needed? The web app was supposed to supply that information.

I remember starting on this project back when I felt Dreamweaver was limiting my development as a programmer (2006?) At that time, I was impressed with Smarty as a PHP template engine. Smarty 2 became Smarty 3 eventually. Composer allowed me to load the Smarty libraries as a vendor module. I started using Bootstrap 3 (4 coming out of beta soon) to handle css design work that I did not want to do.

The web app has sections where the user can look up specifics about the game set owned, among other things. There is an admin section in the site that was supposed to handle updates to boards, modules, scenarios and overlays. In the refactored version, I built a admin section that was supposed to be a landing page for a successful administrator login. Unfortunately, it did not work.

I had problems displaying the associated Smarty template file for a page that was not on the top level, but inside a directory on the top level. It did not matter which smarty template file was tried with the new admin page. It would not display.  Aha!

It’s not a problem with a specific template file, but a larger issue with paths, somehow. I went as far as giving an absolute path to the Smarty template engine for the correct template file, but … (new problem) I was having trouble writing a compiled template file. Aha! Another clue.

It turns out that I was using relative paths in one of my include files that described where to find the Smarty template directories. Once I fixed the paths and made them absolute using $_SERVER[‘DOCUMENT_ROOT’], the problems went away. That was a nice problem to track down on a weekend of coding.

I’m not sure I’ll stick with the Smarty template library going forward. Twig (associated with Symfony) and Blade (associated with Laravel) look useful to know. Twig reminds me of Jinja2, so that would be an easier transition. I can still make Smarty work, though, even though the docs style pages remind me of 2006.

error on part 0 of Ansible install

I’ve mentioned that I decided to use Ansible for my server configuration management. This installation has finally bubbled up as the first item on my to-do list. I looked around to see how to install it. Since I already have Homebrew installed on my mac, I saw two options:

  1. > brew install ansible
  2. > pip3 install ansible

I did not know any reason why these would be different, so I went ahead and ran ‘> brew install ansible’. That was a mistake. Ansible lists Python 2 as a dependency, which is not included in my Homebrew installation. Homebrew installs Python 2.7.13. I also have Python 3 running (3.6.2). I also found out there’s a third version of Python (2.7.10) which is part of the default installation in my laptop. 3 versions of Python on one machine. Wonderful!

I created a /etc/ansible/hosts file and did a test ping, which returns UNREACHABLE. That makes no sense, but I think I have to use some command line options to use the correct account.

Also, I don’t know which version of ansible is running. I may want to remove the Homebrew version and figure out how to use the python3 version. What a mess.

After a day of thought, I decided to check a few things:

> ansible —version

> ansible 2.3.2.0 (good)

… python version = 3.6.2 (what? Why not 2.7.13 or 2.7.10? Interesting.)

I checked the documents page at ansible.com. They say that ansible can run with python3 in one of two ways:

  1. > python3 <path/to/ansible> localhost -m ping
  2. > ansible localhost -m ping -e ‘ansible_python_interpreter=<path/to/python3>

To see what happens, I also tried

  1. > ansible localhost -m ping

It turns out all return good pings from localhost, so … I guess my installation is OK. Even so, next time, avoid using Homebrew for ansible installations.

More deployment strangeness: Capistrano, part 0

As mentioned before, my web/database server infrastructure is becoming more complicated. I need to figure out a way to make things easier and repeatable for me. I’m going to test Ansible for server configuration. I also decided to try Capistrano for website deployment.

Originally, I was thinking of using Deployer. I liked the idea of having a PHP tool to deploy PHP websites, but then I realized I also want to deploy Node.js and Python WSDL sites. (By the way, deploying Python sites using Flask or Django as the web framework looks unusually complicated. More about that later.) For the PHP sites, I wrote a Phing script to collect everything I needed. My plan is for Capistrano to take that bundle and deploy that. We’ll see.

To use Capistrano, I need Ruby. I installed that somewhere when I took the Berkeley MOOC class.

>ruby –version
ruby 2.1.5p211 (2014-11-13 revision 48405)

Wow, that seems old. I’ll update it. After some google searches, I settle on this set of instructions to upgrade ruby. Their process in a nutshell:

  • install home-brew and git
  • install rvm. Over rbenv? Uh, OK.
  • install ruby
  • install any needed gems

Homebrew are already covered. Git works as expected. They also recommend the latest version of the macOS, along with Xcode and the Xcode command line tools. I’ve got that covered, too. Let’s keep moving.

Next: install gpg? What is that? It checks cryptographic security of the rvm download. OK, sure. I installed the security key as described. (When I went through this process on a different machine, I forgot about the security key and did not have any issues with the rvm download.)

Next: download rvm. It looks simple enough. After the installation, I get a notice about two versions of rvm running on my machine. Apparently, I need to either source my .bash_process file or reload a terminal window, which does the same thing. OK. that’s working now.

Next: use rvm to install ruby. Am I seeing things? Why is it installing ruby into my home directory? Well,iIt seems to work. Ruby has the correct version. Final stuff: update bundler and nokigiri using the gem installer.

Everything looks good. Next, Capistrano.