How to upload a modified angular2 module to server in production?

Question

I am using angular2-image-gallery.

It is causing me an error on production (also locally) about importing twice BrosweModule from angular. In my local build, I have changed the main component BrowseModule import to CommonModule as suggested on the error message and it works perfectly.

However, I could not get it to work in production when uploading it to netlify.

I have tried forcing git add node_modules/angular2-image-gallery folder and deleting it from package.json so netlify does not install it and uses the one I have modified.

Deployment is successful after git push but the same error happens. How? I realised it was using old dependencies so the error remained the same.

So, I created another website and started to deploy using the same repository and the build fails. Actually, it compiles everything, and once compiled it says the following error:

ERROR in /opt/build/repo/src/app/gallery/gallery.module.ts (8,42): Cannot find module 'angular2-image-gallery'.

There a lot of errors related to this module not beign found. But it's there in the node_modules folder. What should I do?

Answer 1

Note: I work for Netlify.

This article describes our build process.

The behavior you're seeing shows that we run npm install automatically if we find a package.json, but what you might be missing is that we run it before your build starts, and we will only re-run that (instead of using a cached copy of the output of the last run) if the checksum on the file changes.

Some folks who've needed to do some finicky installation tricks have used something like npm install package-name -g ; npm build as a build command, but I don't think that will help you install a modified package unless you've republished it on npm.

I don't think this is the right solution - I think fixing the double import is a superior solution but I don't have any advice on that - but here's our best methodology for adding a package from your repo into the right location so it works. Note that you will be responsible for making sure all of that package's dependencies are listed explicitly in your package.json so that they get installed for you. Like I said, this is not the right way to do this (the right way would have you fixing the import and us installing the dependencies as intended from package.json automatically without you maintaining a list), but it is a way.

To do this, you might try copying your module into our node directory rather than using your own. We store node dependencies in /opt/cache/build/node_modules rather than in the typical ./node_modules.

You'll first want to check this modified copy into your repo (sounds like it is there already) and then copy it out into that directory, making sure to put any auxiliary links/pieces in .../bin and similar directories within that node_modules tree as well as the package itself in its node_modules/X directory. I might do this in a build command of:

cp -R node_modules/X /opt/build/cache/node_modules && 
cp node_modules/bin/X /opt/build/cache/node_modules/bin && 
npm build