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
With that error fixed (see https://erichelin.wordpress.com/2018/06/17/tgimba-net-core-upgrade-part-7-7-deploy-continued-and-some-additional-unit-tests/), I enthusiastically set my sights on the second error because if your project doesn’t ultimately work on production, what’s the point? However, this proved a lot more difficult than I thought it would have been. I did get it deployed where the Angular 4 site worked, but it took a lot longer than I originally thought. Before I go into details on the issues I had to overcome, if you go to my site, you will see this:
- Welcome Screen
- Angular 4 Site (empty templates at this point)
To get this to work on my production site, these ‘challenges’ presented themselves 🙂 Specifically:
- Node is required. I knew this and it worked perfectly on my local machine after I installed it (pretty basic). However, when I deployed to my hosting site, the Angular 4 portion of the application (i.e. clicking ‘here’ on welcome page) returned a mysterious Hyper Text Transfer Protocol (HTTP) 500 indicating the server was not happy. The Welcome Page always worked perfectly, so I knew it was not a .NET Core issue. Reading a bunch of articles didn’t help me zero in on the problem. So, I spoke with my hosting company’s support team and then said I needed to ‘link’ Node JS to my site. Initially when I did the first deploy, I had just assumed Node would be installed and linked up. Unlike your local box (as I learned), you have to enable it in your web.config (yes, there is a web.config in .NET Core when you publish your site) or through the IIS Handler Mappings. I tried both and even though the support guys said Node was installed, it turns out it wasn’t available on the server they were hosting tgimba.com on. The real clue was when I tried to add the iisnode option via IIS (remotely logged into the tgimba.com site), it wasn’t available.
Once I was migrated, this original error was gone:
- But, I now got a new error. Specifically:
NodeInvocationException: Prerendering failed because of error: Error: Cannot find module ‘E:\ClientApp\dist\main-server’
If you look in the .cshtml file that contains your Angular 4 reference, you will see a tag calling the ‘asp-prerender-module. This is where it is for me:
I tried a couple of ways to fix it:
- Commenting out @*<app asp-prerender-module=”~/ClientApp/dist/main-server”>Loading…</app>*@ removed the error, but my pages would not render.
- This was fixed by changing ‘asp-prerender-module’ to ‘asp-ng2-prerender-module’ as reference #3 suggested. It got rid of the error…but no angular pages. It gets stuck on ‘Loading…’
Then, it hit me…what the node_modules? It seems like that node_modules were not included. I do feel a little silly since all of my Node JS efforts to date have ALWAYS required node_modules on the server. However, that was part of the build script. Using the VS 2017’s publish option created a very different publish artifact then I am used too. Reviewing it made let me to just assumed that node_modules was not required. Silly me. Once I copied my node_modules out to the server, it worked!! It did take an hour plus to copy all of them though. But it works and that is enough for how 🙂
In my next blog post, I will start on completely automating my build. Once done and I check in to github.com, my changes will be built, the tests will be run and if they pass, it will be deployed to my production site. I did this with the previous .NET 4.6.x site using Amazon’s Code Pipeline, but I had to hack it together quite a bit. I am either going to use Amazon’s tools again with a docker container or perhaps some of the tools on Visual Studio.com.