Angular build fails when npm Artifactory changes

I have a project that's behind corporate proxy. We used to use an internal Artifactory (X) - everything works. I can commit and push, the build agent picks it up, downloads npm packages, builds and publishes it. All good.

Recently it was decided that Artifactory X will be retired and everyone will move to Artifactory Y. I went over to my .npmrc file and updated the artifactory settings to the new one, something like:

email = my.email@company.com
always-auth = true
registry=https://y-artifactory.company.com/artifactory/new/url/
//y-artifactory.company.com/artifactory/new/url/:_authToken=here-goes-my-auth-token

I got this from the "set me up" from the new Y Artifactory, the same way I had set up the old one.

However, here, when I build the project either locally or via our build agent, I first get a missing package error - for @types/minimatch. According to some GitHub posts, I should never even add it, but I added it to my development packages and run, but now it throws an even weirder error:

ERROR in ./node_modules/react-draggable/build/cjs/Draggable.js 210:22
Module parse failed: Unexpected token (210:22)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // the underlying DOM node ourselves. See the README for more information.
| findDOMNode() /: ?HTMLElement/{
> return this.props?.nodeRef?.current ?? _reactDom.default.findDOMNode(this);
| }
| render() /: ReactElement<any>/{

Angular/TypeScript is complaining about optional property chaining. I understand the error, and know why it usually happens, but in my case, I'm targeting ES2015. Here's my relevant config:

    "lib": ["es2015", "dom", "ES2020.String"],
    "target": "es2015",
    "experimentalDecorators": true,
    "lib": ["es2015", "dom", "ES2020.String"],
    "module": "esnext",
    "moduleResolution": "node",
    "target": "es2015",

So I don't understand why I am getting this error. It should have been transpiled. Furthermore, this error is pointed at a third party library we use (we use both Angular and React in the same project).

If I switch back to Artifactory X, everything just compiles well and runs okay. Literally no other changes but the Artifactory change and it fails.

I can see that:

I am authenticated successfully
npm packages are downloaded successfully
Build started successfully
Build fails with either missing type definitions for minimatch, or when I explicitily add the package, it fails with optional prop chaining.

What would make my Angular build fail when just an Artifactory change?

Solution

I ended up fixing this one myself. I had a few ideas and tried them out, which led to a different error messages and when put together, gave me an idea of what was happening.

I deleted the package-lock.json and generated new one (as recommended on npm website and everywhere else, for a repository change) and generated a new one. Turns out, the new package-lock.json had a combination of different minor versions (because of the usage of ^ in package.json) as well as slightly different sha hash for some of the package. I was in the unfortunate sweet spot for those minor version changes to trip the build errors.

To fix this, I made these changes:

Took the old package-lock.json that was still pointed to X Artifactory
Manually updated only the url for repository from X to Y Artifactory
For every SHA checksum fail error I got, I manually updated the checksum - thankfully there were only a handful.

In my case, the recommended way of deleting package-lock.json and creating a new one was exactly the wrong thing to do.