Library tests fail for projects which don't include @angular/animations module

[zuzusik]

We have a library where in tests we use ng-mocks. Our project doesn't include @angular/animations module as we don't use animations in our app. Our Angular is 12.2.13

After updating ng-mocks from 11.x to latest 12.x (12.5.0 at the moment of writing), following error started to appear when running library tests (ng test <library-name>), preventing tests from being run:

./node_modules/@angular/platform-browser/fesm2015/animations.js:9:0-83 - Error: Module not found: Error: Can't resolve '@angular/animations' in '/Users/vzozuliak/projects/dxng/node_modules/@angular/platform-browser/fesm2015'

./node_modules/@angular/platform-browser/fesm2015/animations.js:10:0-227 - Error: Module not found: Error: Can't resolve '@angular/animations/browser' in '/Users/vzozuliak/projects/dxng/node_modules/@angular/platform-browser/fesm2015'

With further investigation traced the issue to ca65de3 which was introduced in 12.1.0. Double checked and re-assured that version 12.0.2 works well.

Also, went to dist code of 12.5.0 and commented out this code in ng-mocks/cjs/lib/mock-module/create-resolvers.js, and again it proved to work just fine:

https://github.com/ike18t/ng-mocks/blob/17d798e74730fedff3b6af69f5fda70eecb89cc7/libs/ng-mocks/src/lib/mock-module/create-resolvers.ts#L19-L31

My assumption - Angular library builder is slightly different from app builder. I assume it tries to analyze all files for requires and to include them in it's own way, and so it tries to include @angular/platform-browser/animations which then tries to include @angular/animations and so that fails, but since it all happens out of context of executing the actual file, it's not get caught with that try/catch

Workarounds:

• downgrade to ng-mocks 12.0.2 (not cool as we stuck with old version)
• write a script that patches ng-mocks commenting out the code above (not coll at all - monkey patching should be the last possible resort)

[satanTime]

Hi, thanks for the info.

I got the same error lately, you are right. It's because of the mixture of cjs and mjs.
The idea here was to support @angular/platform-browser/animations only if it's present, whereas now it doesn't seem possible and @angular/platform-browser must be a required dependency.
In this case cjs support can be eliminated and so does the issue.

Currently plan is to fix A13 support. It requires similar changes so the issue should be fixed automatically.

Let's keep this issue open, so we could verify that the fix for A13 solves it too.

[satanTime]

Hi @zuzusik,

have you been able to solve the issue?

Looks like it belongs to Karma and Angular 13 and that files .mjs instead of .js now there.
I was trying to find a way how to let Karma know that it should look up for .mjs files too, but haven't found a solution so far.

[satanTime]

Hi @zuzusik,

could you try ng-mocks@13.0.0 and let me know whether it has solved your issue?

[zuzusik]

@satanTime we haven't moved to Angular 13 yet - I have added a point into our Angular 13 update ticket to try to update ng-mocks and report back in this issue if the fix worked.

[satanTime]

Hi @zuzusik, there is no real dependency between versions, you can use ng-mocks@13 on Angular 5+.

[zuzusik]

@satanTime gotcha - thanks for heads up, that's good to know!

still we would probably prefer to update everything Angular related when we update to next major version of Angular

I might try carve out some time to try to update to ng-mocks 13 outside of that, though

[satanTime]

yep, understand you.

It would be great if you could find time to check locally whether it works or not on ng-mocks@13 so I know whether I need to continue investigation myself until there is more info or simply to close the issue :)

[GilSokolov]

Hello, I have a very similar issue.
I'm using Angular 13 project with nx workspace and jest testing framework.
getting this error when running the test

Cannot find module '@angular/core' from '../../../../../../node_modules/@angular/animations/bundles/animations-browser.umd.js'

Require stack:
  C:/Users/user/node_modules/@angular/animations/bundles/animations-browser.umd.js
  C:/Users/user/Desktop/nx-workspaces/project/node_modules/@angular/platform-browser/fesm2015/animations.mjs
  C:/Users/user/Desktop/nx-workspaces/project/node_modules/ng-mocks/index.js
  src/test-setup.ts

  at Resolver.resolveModule (../../../node_modules/jest-runtime/node_modules/jest-resolve/build/resolver.js:324:11)       
  at ../../../../../../node_modules/@angular/animations/bundles/animations-browser.umd.js:8:117
  at Object.<anonymous> (../../../../../../node_modules/@angular/animations/bundles/animations-browser.umd.js:11:2) 

downgrading to ng-mocks 12.0.2 solves this issue.

[satanTime]

Hi @GilSokolov, could you post here your package.json?

[satanTime]

v13.4.0 has been released and contains a fix for the issue. Feel free to reopen the issue or to submit a new one if you meet any problems.