search

OpenWaterFoundation / owf-app-infomapper-ng

Open Water Foundation InfoMapper web application for menu-driven maps and visualizations, using Angular
GNU General Public License v3.0
1 stars 2 forks source link

Upgrade Angular and Material to version 11 #360

Closed Nightsphere closed 2 years ago

Nightsphere commented 3 years ago

Now that Angular 11 has been out for longer than a month, I think enough time has been given to iron out any issues. This update is less than 5 months from the Angular 10 release, which is a little ridiculous, but that means using outdated/deprecated/antiquated Angular versions and code can sneak up quick. Better to try to stay on top of major updates, even if they are coming out 3 times a year now.

Nightsphere commented 3 years ago

After briefly looking into what I would need to do to upgrade, this is the full list I'll need to do to upgrade to Angular 11:

image

Support for IE is officially done with Angular, but I know some users were still using IE. Maybe with this upgrade, we could get people into more modern times and let them know IE is no longer workable for viewing the InfoMapper?

smalers commented 3 years ago

I agree that we cannot maintain support for old browsers, especially if it holds back updating the framework. Would it be possible to do something like:

  1. Add some code in index.html to detect unsupported browser and at least warn the user prior to them getting a blank window?
  2. If the issues are more nuanced and the application does start, detect the browser version and provide some indicator for unsupported versions. I'm not sure what that is.. maybe an obvious warning icon in the title or left of the map legend that would cause someone to click on the icon and see a fuller warning?
  3. I think there is another issue that discusses what to do when the application has been updated on the server but has not been reloaded. Maybe the same code is involved for "There is a new InfoMapper version available - refresh the page to load." or "There is a new Poudre Basin Information available - refresh the page to load." What I don't fully understand is what happens when lazy loading of the application and server has new code? Sometimes I do have to reload because things are not behaving. Can we control better to avoid user experience problems?
Nightsphere commented 3 years ago

The first merge for this has been done, and the InfoMapper has successfully been updated to Angular 11. In case it gives the same warnings for someone else, here are some updates I had to do. The first time ng serve is run after the update, a few dozen of my packages displayed warnings claiming that there were some circular dependencies in them. This is a small hiccup in the Angular 11 compiler that the following steps will remove. In the InfoMapper top-level directory, use these commands:

  1. rm -rf node_modules
  2. rm package-lock.json
  3. npm cache verify
  4. npm i

This will reinstall node_modules and package-lock.json and resolve the issue. I've also noticed that first using the ng serve command is noticeably quicker than it was previously, which was a nice change (or reversion really). Hopefully others can see this as well. I will keep looking into checking for a browser and letting users know that if they're using IE, it is no longer supported by Angular, and therefore the InfoMapper.

smalers commented 3 years ago

Where can this be documented? README, developer documentation? What section? Having a troubleshooting section is helpful and would need to include a typical warning message.

I recently added a new script build-util/ng-serve.sh. Can this script detect common update issues and echo suggestions such as the steps above? Or, is it hard to automate those checks.

Also, I typically avoid abbreviated commands like i and use the longer install because it helps people understand better.

Nightsphere commented 3 years ago

I'm leaning more towards a troubleshooting section for this. In order for a script to determine if the circular dependencies warnings occurred, the script would need to know what's being printed to console. When running the ng serve command, there will be warnings printed out. Is there a way for a script to listen to or see what's been printed to the terminal? I haven't heard of anything like that, but obviously my scripting skills aren't exactly hacker level.

A troubleshooting section would contain something like, 'If these warnings are being displayed when ng serve is run, follow these steps to resolve the issue'.

smalers commented 3 years ago

Output from a program can be piped to grep (or grep -i for ignore case), for example, to search for a string. There are ways to pipe both standard output (stdout) nd standard error (stderr), for example using the tee command. Output can also be directed to a log file, which can be searched after the fact for strings. The following is documentation that I have put together:

http://learn.openwaterfoundation.org/owf-learn-linux-shell/useful-scripts/useful-scripts/#log-messages-and-program-output

I can provide training and contribute to this scripting but need to know specifically what needs to be done.

Nightsphere commented 2 years ago

This has been done for a while, as the Infomapper was updated from version 11 to 13. There are 2 things to note after reading my previous comments:

Closing this issue.