At this post, I will be implementing solutions to some Angular errors I stumbled upon that downgrades my coding experience. The Angular errors are the client side errors and nothing to do with your back-end.

The Requested URL was not Found on This Server Error

This workaround is for the IIS server. I don’t know pretty much the solution for Apache or other frameworks. At the root directory of the Angular project, create a web.config file and then paste the code inside. This fault pops out when you can’t manually route a web URL through your browser but with just clicks.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
 
  <rewrite>
    <rules>
      <rule name="Angular" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="./index.html" />
      </rule>
    </rules>
  </rewrite>
 
</system.webServer>
</configuration>

Loading Chunk Failed” with Angular Lazy Loaded Modules

I couldn’t create a solution for this error. Somehow old Angular versions popping out this error on the developer console. Some solutions proposed on the web doesn’t work either.

One possible solution is loading the chunks again and again but this does not work. I will write a post again when I find a solution. Keep up updating your Angular modules and clients for any possible irritating bugs. This code below enters an infinite loop.

No solution indeed! I can’t believe how many references to the code below on the internet exists. What happens if you load a problematic chunk again and again?

The Solution

When you copy for Angular artifacts to a server, CTRL + C doesn’t capture your content in the meantime. Please, add your content into a zip. Weird isn’t it but really logical. CTRL + C requires a time don’t you can’t recognize.

For the sake of the post, I am putting a code batch here to make load the newer version but as I said, the most probable error is this zip issue. This is global error handling. Pop out an error message. The catch block isn’t a good practice since you need to micromanage each catch blog per instance.

Again, you can spice up your error handling creating a custom class.

import { ErrorHandler } from "@angular/core";
@Injectable()
export class GlobalErrorHandler implements ErrorHandler{
  handleError(error: any): void {
    const chunkFailedMessage = /Loading chunk [\d]+ failed/;
    if(chunkFailedMessage.test(err.message)) {
       if(confirm("New version available. Load New Version?")) {
           window.location.reload();
         }
    }
  }
}

Ebusy: resource busy or locked

Delete the dist folder and build again for the production.

Angular App: Unexpected token <

I used to publish the Angular project with outputhashing all but this way operating system sometimes has problems with long file names so disable the output hashing. Copy-paste the below snippet to your build script. I guess Angular glues the files on the fly so the operating system detects long file names. When you simply put the file names 1, 2, 3 the concatenated file name will be shorter.

–outputHashing=none