angularnpmbuildng

Angular ng build gives error link.parentNode.insertBefore is not a function


I have an Angular v16 app that currently works fine when I serve it on my local machine. Anyway when I try to build it, it gives me the following response:

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✖ Index html generation failed.
link.parentNode.insertBefore is not a function

I don't use the insertBefore function in any of my components or services. I thought it could depend from the fact I have installed jquery and datatables in my project (since I know there are some incompatibility issues between angular and jquery and I saw insertBefore is used frequently in jquery.js) but even after uninstalling all the dependencies and commenting the references, it keeps failing the ng build with the same error. What can it be? I truly have no clue...


Solution

  • I think there is an issue with when Angular is trying to manipulate the DOM during the build process.

    1. You can clear the cache and install all the dependencies again.

      npm cache clean --force

      rm -rf node_modules

      npm install

    2. Update Angular dependencies

      ng update @angular/cli @angular/core

    3. Checked if you're using any custom scripts or there is third-party library issues.

    4. Also check if there's any misconfiguration in angular.json and tsconfig.json that might affect the build process.

    5. Sometimes, index.html file can cause issues in the build process. What you can try is, create a new Angular project and copy the index.html from the new project to your existing project. And do the adjustment according to your needs.

    6. You can also used verbose logging for more build details.

      ng build --verbose

    You can try all these steps. I hope you will find the solution in the process.