Angular 5 error - only happens after "dotnet publish"

[mleader1]

Hi,

I updated my solution with the latest files/changes from this repo. Everything worked really well locally until I did the "dotnet publish" and uploaded the files to our server.

When running the published files directly by "dotnet XXXXX.dll" it will go error when I hit the web url. The console shows the following error:

---> (Inner Exception #0) Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: Prerendering failed because of error: SyntaxError: Invalid regular expression: /^[_A-Za-zÀ-ÖØ-öø-˿Ͱ-ͽͿ-῿‌-‍⁰-↏Ⰰ-⿯、-퟿豈-﷏ﷰ-��-󯰀-�:][-._A-Za-z0-9·À-ÖØ-öø-˿̀-ͽͿ-῿‌‍‿⁀⁰-⿯、-퟿豈-﷏ﷰ-��-󯰀-�:]*$/: Range out of order in character class

The trace logs showed that the error happens when calling the server method Prerenderer.RenderToString()

So in summary - the whole project runs and without any problem in local development mode. However the published version doesn't work and reports prerendering failure due to regular expression error (weird).

I simplified the server transferData object but it fell into the same error.... Help please...

[MarkPieszak]

We’re working on it but there’s some fundamental changes in AngularCompilerPlugin and the engine that will probably need to updated.

Apologies on the delay!

[richdafunk]

Having the same issue here. Any way around this?

[mleader1]

I temporarily did it by using the dist folders generated in dev mode. The websites now work, however my clients reported their websites having issues here and there another... and I guess I will have to spend my weekend for finding alternatives...

If anyone could have a quick fix for this issue that'll be great (And highly appreciate it's open source repo and would love to contribute if I could). thanks!

[danielnajera]

There's another Angular 5 repo that is working correctly with production publishing, maybe we can all take a look at this to see how we can fix this template.

https://github.com/asadsahi/AspNetCoreSpa

[MarkPieszak]

@asadsahi are you using AngularCompilerPlugin etc?

[richdafunk]

I just realised that there are some suggestions for this in this dup thread: https://github.com/MarkPieszak/aspnetcore-angular2-universal/issues/460

[asadsahi]

@MarkPieszak yup, first I thought damn it can't be angular. Then these instructions helped to upgrade with angular.

[e-davidson]

@danielnajera That project doesn't offer SSR.

[danielnajera]

Yes, I agree however the constant changes to this solution and the fact that the package.json by default marks most of the dependencies as upgradeable (^) make it hard to not run into problems. I literally can't fork this solution and change the Angular version to 4.4.6 and then begin to use it. The solution is well built and I don't mean to beat up on the creator but version 5 should have perhaps been a new project on here. The Angular changelog describes a lot of breaking changes. We are having a hell of a time trying to troubleshoot the many problems we are running into on version 4 solution as well as attempting to create new solutions that don't compile, as this template is setup for version 5. All well and good until you attempt to publish the solution. Our firm is in a world of trouble. We are exploring other templates that might offer a more stable platform. SSR is no good if the site is down and a site deployed on JIT that is working is better than a site that is deployed using SSR/AOT that returns a 500. I'm just a little upset because people's jobs are on the line, all because in my view this template jumped the gun and moved us into version 5 without even running "npm run build:prod" and testing to see if the template worked. I like @MarkPieszak, I think he has done a wonderful job creating this template. I just wish this issue here on this thread is priority number one. We are down and several of the other dependencies are creating problems for @MarkPieszak, I understand that, which is why maybe we should release package.json without (^). I'm sorry @MarkPieszak I know you're doing your best, it's just been weeks now since we went down and we are struggling to keep it together.

[danielnajera]

I wanted to share with everyone on here that NodeJs is part of the deployment problem our firm has been running into. The current version of 8.9.2 causes a stall right after "node node_modules/webpack/bin/webpack.js --env.prod" message. We discovered that installing NodeJs version 6.12.1 allowed us to again publish the template into production.

[MarkPieszak]

You're able to have it all working with Node 6.x? @danielnajera I've checked in and removed SSR from the template at the moment, as there is some fundamental issue with AngularCompilerPlugin that I finally have some time to have some other team members to look at with me.

Sorry it's been a nightmare everyone - time has not been on my side and I've been unbelievably busy - but I'm trying to have this fixed as soon as I can, even if it kills me 🗡 🤕

I've reverted the repo back to Angular 4.x for the time being, so everyone else doesn't run into these issues, and I pushed up the 5.0 work into a branch, where SSR is disabled for the time being until everything is up and running. https://github.com/MarkPieszak/aspnetcore-angular2-universal/tree/angular-5.0-WIP

Hope to post back soon when I have that one figured out and I'll merge it back into Master! :(

[danielnajera]

Your template running on Angular version 4x publishes properly using Node 6x. Angular version 5 template still has issues. We have had teams around the clock looking into the package.json. Some of our solutions would publish properly while others with the same packages would stall or fail completely. That's where we started to look at why the same solutions would work on certain computers and not on others. The answer of course was Node. The upgrade from Angular 2 to 4 was nowhere near this problematic I guess we all just assumed that everything would upgrade fine and that the template would just have some deprecated issues to be addressed. We have been reimaging, restoring computers, rolling back Visual Studio version updates down from 15.5 to 15.3. From our current testing, all of our computers are now running your template on version 4.4.6 with Node 6.12.1. Version 7 and above of Node causes the production publish to stall "Halt & Catch Fire". Strange we don't get any error but the publish process never completes. We all want to go to Angular 5 because of the many improvements but it seems that we will be stuck on 4 for the time being. This problem is so strange with Angular 5, the SSR doesn't generate a coherent error. I wouldn't be surprised if somewhere between version 8,9.2 and 6.12.1 there might be a Node version that would compile your Angular 5 template properly. We will be looking into that but for right now we are still putting out fires. Another clue we picked up on is the webpack, it's version is 2.7.0, the latest is version 3.10. Having the current package version combinations seem to stabilize the solutions. Automatically upgrading everything upon forking your solution just creates a lot of problems, like for example certain packages are installed even though the new versions are just not supported, take Typescript, for a long time we had to make sure we did not install a non supported version by Angular. The Angular 5 template work fine in development but the process that compiles the js files seems to generate rending problems. It could just be that we need to revert to an earlier version of that plugin.

[MarkPieszak]

So the problem is there are Core issues with AngularCompilerPlugin, in that the improvements there were made with the CLI in-mind, and it wasn't prepared for the way we need to use it here within this dotnet + angular environment.

I had to revert the repo back to 4.x for now, so please stick with that for now - as the performance and benefits of 5.x are very small regardless. You won't really lose any "functionality" either, there wasn't much new introduced in 5 yet.

I'll get 5.x back into master once we get some updated code into angular-cli @ngtools/webpack packages, and we're able to fix AoT SSR here.

Sorry for the huge mixup! I'll never roll out newer versions without insane amounts of testing again.

[danielnajera]

Thanks, @MarkPieszak We here in Las Vegas are using your template to build solutions for the city and we are so grateful for your time and dedication to making this template available to us. Your template is touching many people's lives in a positive way. I will continue to support any efforts to test or enhancement this template. My desire is that anyone can build your template and start off coding away rather than troubleshooting packages, Node and, other anomalies. If there's anything we can do as a community of developers to help you out please reach out and let us know. I've been working on Angular since it's beta days in 2014, it was a painful process. I think it was a good idea to separate the Angular versions but, I think you should consider a 4x, template and a 5x template. Not all packages may be compatible with a working version of Angular 5. I can see that we will run into this problem in the future, As Google keeps releasing new versions. 3rd party vendors may not have enough time to catch up. It's just a thought but it would be nice to not be forced to work with the most current version of Angular if your current version works or if company policy dictates that you remain one version behind.

[MarkPieszak]

Yeah I agree, for now if SSR is important, everyone please stick with the 4.x version (that's now in Master) where everything is rock-solid.

I'll hopefully fine tune the 5.x versions soon, or we'll be switching to the ASPNET & Angular-CLI that the amazing Steve Sanderson has been working on. Either way the long term goal is to have everything using that, as it'll remove manually touching webpack, and allows everyone to let the CLI handle better optimization / generators / etc.

[EmaGht]

Maybe is unrelated but the latest LTS version of Node bundles up with npm5 which is a bug laywaste... Even the most simple "npm i" would crush on basically every configuration i tried. It's possible, however, to install node 8.9.2 and then revert npm using npm install -g npm@4 (this luckily doesn't crash :D)

Hope this might help to shed some light

[MarkPieszak]

Waiting on ngtools/webpack PR to get merged and published here and this should allow us to upgrade back to Angular 5.x https://github.com/angular/angular-cli/pull/8951

[danielnajera]

Keeping Angular 4 running smoothly has been a pain, when running npm install other libraries have made breaking changes and well as Angular 5.0.0 requirements, needless to say we have had to remove the "^" from many of the libraries in the package.json and target the correct versions before the Angular 5 jump. Compiling new solutions has been a tough task. We have had to go through the entire package file and hard code versions so that when compiling new solutions we don't run into problems. Keeping the package.json set to always upgrade to the latest version of most of the packages may aid in taking notice of issues sooner but it also means that we should expect the template to always fail until we can sort out what package is causing the problem. It's an uneasy feeling.

[Adondriel]

@danielnajera You could add "<5.0.0" to the end of all the things that want to update to angular 5. https://docs.npmjs.com/files/package.json for reference, scroll down to the "dependencies" section, where they show you how to format the version numbers.

[danielnajera]

I found an article online that might help us with getting past this issue:

https://www.codeproject.com/Articles/1221503/Angular-and-NET-Core-with-Visual-Studio

From Article: Tweaks Now we need to modify the webpack.config.js Why? Because the Angular 4 and below support AOT compiler but Angular 5 and above do no support AOT compile while deployment. Reference - https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack

Open webpack.config.js in Visual Studio and replace all occurrences of AotPlugin to AngularCompilerPlugin

Save and close webpack.config.js.

In Visual Studio open file ClientApp/boot.server.ts

You will see error at line 25 (zone.onError.subscribe((errorInfo: any) => reject(errorInfo));)

Change the declaration at line 22

From this - const zone = moduleRef.injector.get(NgZone);

To this - const zone: NgZone = moduleRef.injector.get(NgZone);

The error will now be gone. Save and close this file.

In Visual Studio open file ClientApp/app/app.browser.module.ts

And add the following after the last import statement:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Also, in the import section add – BrowserAnimationsModule

[MarkPieszak]

Production builds should be now all set, and 5.0 fixes has been merged into Master via PR #538

Let me know!

[odahcam]

@MarkPieszak is there a Gitter where we can talk about the project? I'm excited to share my code back here, with material and all stuff but I'm a little busy at the moment to create a fork to PR later.

[helloWorld-EHoT]

What`s happens? 404 - page not found... https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack