Edit 11/10/21
Below is the original question for this post. Since posting, I figured out that the issue is not in the application code itself, but how webpack compiles/packages the final deployment files. As part of the build process, I am uglifying my resulting JS files, which contain the Angular templates, using Webpack.optimize.UglifyJsPlugin. I am observing that my *ngFor attributes are being lowercased to *ngfor which is why I am seeing the error documented in my original question below. How can I instruct Webpack.optimize.UglifyJsPlugin not to lowercase HTML template attribute names?
Original Question
Title: ngUpgrade-d application runs locally but fails when built for deployment
I am upgrading an AngularJS application to Angular 12 and have followed the angular.io tutorial. The application is now a hybrid of AngularJS modules and Angular modules, and works very well... when served locally. However, when I build the application and deploy to one of my test servers, I get the following runtime error:
Can't bind to 'ngforOf' since it isn't a known property of 'th'.
...
Property binding ngforOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations
I have searched low and high for a solution, but all suggest adding the BrowserModule to the main application module imports list and CommonModule to child modules. I have already done that, which is why everything works when serving the application locally. Any ideas on what I might be missing?
Thanks in advance.
After figuring out the issue was with the compilation of the application, and doing a bit of research into how UglifyJsPlugin works, the issue was found to be in the html loader and the solution was found in this thread: