Bug: Module does not have a module def (ɵmod property)

[wvankoppen]

Description of the bug

I am using ngx-translate in one of our projects. I created a wrapper around this module, which re-exports the TranslatePipe and TranslateDirective. When I use MockBuilder to generate mocks for this module, I got the following error:

Error: TranslateModule does not have a module def (ɵmod property)
  ....

A repo with an example of the bug

It can be reproduced with the following minimal test case:

import { Component, NgModule } from '@angular/core';
import { TranslateDirective, TranslateModule, TranslatePipe } from '@ngx-translate/core';

import { MockBuilder } from 'ng-mocks';

@NgModule({
  imports: [TranslateModule],
  exports: [TranslatePipe, TranslateDirective],
})
class CustomTranslateModule {}

@Component({ selector: 'mycomp', template: '' })
class MyComponent {}

@NgModule({ imports: [CustomTranslateModule], declarations: [MyComponent] })
class MyModule {}

describe('test', () => {
  beforeEach(() => MockBuilder(MyComponent, MyModule));

  it('it', () => {
    console.log('test it');
  });
});

Expected vs actual behavior

Expected behavior: MockBuilder promise should resolve to the generated mocks needed for MyComponent, as declared by MyModule. Actual behavior: The promise from MockBuilder is rejected with the error as shown above.

[satanTime]

Hi there,

Thanks for the report. I'll take a look on the weekend.

[satanTime]

Could you also provide a min repo if you have a chance?

I assume it's something related to the config of the project.

[wvankoppen]

Thanks for the quick reply. Yes, actually I created this example in the test folder in my local clone of the ngmocks repo. I'll make sure to create a repo later today.

[satanTime]

Yep. I need a repo: a zip file or a github link.

es5:

> [email protected] test:jasmine:es5
> npm run ng test -- --ts-config ./tsconfig.es5ivy.spec.json --progress=false


> [email protected] ng
> ng

25 06 2022 10:08:47.281:INFO [karma-server]: Karma v6.4.0 server started at http://localhost:9876/
25 06 2022 10:08:47.286:INFO [launcher]: Launching browsers ChromeCi with concurrency unlimited
25 06 2022 10:08:47.293:INFO [launcher]: Starting browser ChromeHeadless
25 06 2022 10:08:53.707:INFO [Chrome Headless 104.0.5109.0 (Mac OS 10.15.7)]: Connected on socket NH3d1vk4S5O50wlQAAAB with id 70368904
LOG: 'test it'
WARN: 'Spec 'issue-2907 it' has no expectations.'
TOTAL: 1 SUCCESS

es2015

> [email protected] test:jasmine:es2015
> npm run ng test -- --ts-config ./tsconfig.es2015ivy.spec.json --progress=false


> [email protected] ng
> ng

25 06 2022 10:09:22.748:INFO [karma-server]: Karma v6.4.0 server started at http://localhost:9876/
25 06 2022 10:09:22.751:INFO [launcher]: Launching browsers ChromeCi with concurrency unlimited
25 06 2022 10:09:22.756:INFO [launcher]: Starting browser ChromeHeadless
25 06 2022 10:09:23.274:INFO [Chrome Headless 104.0.5109.0 (Mac OS 10.15.7)]: Connected on socket jPvE80kst6-kx2_XAAAB with id 9363783
LOG: 'test it'
WARN: 'Spec 'issue-2907 it' has no expectations.'
TOTAL: 1 SUCCESS

[wvankoppen]

I tried to create a StackBlitz to reproduce the error, but in StackBlitz it is running perfectly. https://stackblitz.com/edit/github-rh6cyc?file=src%2Ftest.ts,src%2Ftest.spec.ts

Could you give me a pointer to which project config could be causing the problem?

[satanTime]

Could you try to run: npx ngcc? And then tests? Maybe there is a need to compile some dependencies.

[wvankoppen]

In my mininal testcase (the code I posted above) your suggestion worked! After running ngcc, the test ran without any error.

However, in my original monorepo the issue still exists. Any other suggestion that I can try?

[satanTime]

Hi. Please check if you have .angular directories and try to delete them before running ngcc and tests

[wvankoppen]

Thanks, I removed the .angular directory (and also the node_modules followed by an npm install), but with no luck.

Anything else that I can try?

[satanTime]

Would it be possible for you to gmeet and to take a look at what's happening?

[wvankoppen]

yes, absolutely! I just sent you an email.

[satanTime]

Hi @wvankoppen, have you been able to find a solution for your issue?

[wvankoppen]

hi @satanTime , unfortunately not, would you still like to have a look at it together?

[satanTime]

sure, starting Monday I'm available almost at any time. Please, send here a comment and we can have a call together.

[wvankoppen]

Sounds good! I'm also available most of today, if you want we can have a call now. (gMeet?) I tried to minimalize an existing test that still produces the problem. We can have a look at it together.

[wvankoppen]

would have a gmeet at 13:00 work for you?

Meeting url: https://meet.google.com/tog-xves-uoy

[wvankoppen]

@satanTime please write me which time would work for you, thanks.

[satanTime]

In 5 mins?

[wvankoppen]

souds good! See you in 5 min in the gmeet call above :)

[satanTime]

I'm there

[wvankoppen]

@satanTime Thanks for the help this afternoon. Small status update: I'm working on a reproducable test case of the problem in the ng-mocks repo. I haven't finished it yet, I'll send it to you later this week.

[satanTime]

Hi @wvankoppen, I hope life is good, and I wanted to check whether you had a chance to create a min repo with the issue.

[wvankoppen]

hi @satanTime! I kindof underestimated the effort for providing a minimal test case.

I first tried to prune my existing repo, but it is so big that I ran into dependency problems in which the tests no longer ran at all. So I moved back to the approach of creating a new repo and trying to introducing the same error. Please find the attachement. I did not manage to get Jest up and running, but the errror occurs when creating a mock for a component that gets the localization service injected.

Unfortunately I could not get Jest up and running. Let me know whether you can reproduce the problem using this repo.

ex.tar.gz

[satanTime]

Hi @wvankoppen, could you also share it with node_modules? Because you are using own registry, I cannot download all dependencies.

[wvankoppen]

Hi @satanTime , sorry I removed them to meet the file size constrains. Here is a new upload: https://we.tl/t-DReRMWRWnG

[satanTime]

Hi @wvankoppen, I'm very sorry, could you re-upload it? "Transfer expired. Sorry, this transfer has expired and is not available any more".

[wvankoppen]

@satanTime yes, please see here: https://we.tl/t-Yx7Dko7vdN

[satanTime]

Thank you, I've got it!

[satanTime]

Hi @wvankoppen, could you tell me the steps, looks like it works for me:

npm run start

> [email protected] start
> ng serve

⠙ Generating browser application bundles (phase: setup)...
- @ngx-translate/core [es2015/esm2015] (git+https://github.com/ngx-translate/core.git)
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.37 MB |
polyfills.js          | polyfills     | 315.28 kB |
styles.css, styles.js | styles        | 207.83 kB |
runtime.js            | runtime       |   6.53 kB |
main.js               | main          |   5.69 kB |

                      | Initial Total |   2.89 MB

Build at: 2022-08-06T06:27:41.258Z - Hash: d18da66e5238fbc4 - Time: 29373ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.
✔ Browser application bundle generation complete.

5 unchanged chunks

Build at: 2022-08-06T06:27:42.799Z - Hash: d18da66e5238fbc4 - Time: 777ms

✔ Compiled successfully.

or

npm run build

> [email protected] build
> ng build

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.012c26427710c40f.js      | main          | 248.14 kB |                53.74 kB
polyfills.c90a33f9fab2ff8e.js | polyfills     |  33.08 kB |                10.67 kB
runtime.cd9b176e14871d3a.js   | runtime       |   1.06 kB |               605 bytes
styles.ef46db3751d8e999.css   | styles        |   0 bytes |                       -

                              | Initial Total | 282.28 kB |                65.00 kB

Build at: 2022-08-06T06:29:28.396Z - Hash: 83d5a1266bf8950c - Time: 22724ms

or

npm run test:es5

> [email protected] test:es5
> jest -w 1 --config jest.es5ivy.js

ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.
 PASS  src/app/app.component.spec.ts (5.056 s)
  AppComponent
    ✓ should create the app (87 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        6.381 s
Ran all test suites.

I do still believe this is a misconfiguration of your project. Let's have a call next week and check how the jest is configured. Because in the repo you provided I needed:

• install jest@28
• install jest-preset-angular@^12
• configure them together

[wvankoppen]

That indeed looks good.. Lets have a call on Thursday or Friday? Let me know what time suits you best.