# Cannot find module '@jsonforms/angular-material'

**URL:** <https://jsonforms.discourse.group/t/cannot-find-module-jsonforms-angular-material/2370>\
**Category:** General\
**Created:** [October 1, 2024, 5:18pm UTC](https://jsonforms.discourse.group/t/cannot-find-module-jsonforms-angular-material/2370 "2024-10-01T17:18:22Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jjain77\_jcplc](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/jjain77_jcplc/32/1124_2.png) [@jjain77\_jcplc](https://jsonforms.discourse.group/u/jjain77_jcplc)\
**Post date:** [October 1, 2024, 5:18pm UTC](https://jsonforms.discourse.group/t/cannot-find-module-jsonforms-angular-material/2370/1 "2024-10-01T17:18:22Z")

</div>

I am using `angularMaterialRenderers` in my Angular project (version 16.2.12) with the following dependencies based on I read in this document, “Use JSON Forms 3.2 if you need to stay on Angular 16.”, I have used 3.2.0 version as well.([jsonforms/MIGRATION.md at master · eclipsesource/jsonforms · GitHub](https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md)):

- `"@jsonforms/angular": "^3.2.1"`
- `"@jsonforms/angular-material": "^3.2.1"`
- `"@jsonforms/core": "^3.2.1"`
- `"@jsonforms/material-renderers": "^3.2.1"`

```auto
here is usage in my component :

import { angularMaterialRenderers } from '@jsonforms/angular-material';

this.renderers = angularMaterialRenderers;

 <jsonforms
 [(data)]="dynamicFormData"
 [schema]="schema"
 [uischema]="uiSchema"
 [renderers]="renderers"
 (errors)="setJsonFormError($event)"
></jsonforms>

```

The project compiles and runs successfully, and all features and functionalities work correctly on the UI.

**ui schema**

```auto
{
    "elements": [
        {
            "type": "Control",
            "label": "API URL",
            "scope": "#/properties/properties/properties/URL"
        },
        {
            "type": "Control",
            "label": "Account",
            "scope": "#/properties/credentials/properties/Account"
        },
        {
            "type": "Control",
            "label": "API Key",
            "scope": "#/properties/credentials/properties/ApiKey",
            "options": {
                "format": "password"
            }
        }
    ],
    "type": "VerticalLayout"
}

```

Schema

```auto
{
    "type": "object",
    "properties": {
        "properties": {
            "type": "object",
            "properties": {
                "URL": {
                    "type": "string",
                    "description": "The URL of the PointGrab API.",
                    "default": "https://cpms.pointgrab.com/be/cp"
                }
            },
            "required": [
                "URL"
            ]
        },
        "credentials": {
            "type": "object",
            "properties": {
                "Account": {
                    "type": "string",
                    "description": "The PointGrab account."
                },
                "ApiKey": {
                    "type": "string",
                    "description": "The PointGrab API key."
                }
            },
            "required": [
                "Account",
                "ApiKey"
            ]
        }
    },
    "required": [
        "properties",
        "credentials"
    ]
}

```

However, when I run the test cases using `npm run test`, I encounter the following error:  
Even I have checked module is correctly installed and present in node\_modules

```auto
Test suite failed to run
Cannot find module '@jsonforms/angular-material' from 'src/app/ingress/dialogs/ingress-dialog.component.ts'

Require stack:
  src/app/ingress/dialogs/ingress-dialog.component.ts
  src/app/ingress/dialogs/ingress-dialog.component.spec.ts

```

How can I resolve this issue?

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [October 2, 2024, 6:03am UTC](https://jsonforms.discourse.group/t/cannot-find-module-jsonforms-angular-material/2370/2 "2024-10-02T06:03:12Z")

</div>

Hi @jjain77_jcplc,

This is very hard to diagnose from afar as there are many different ways of setting up tests. You could take a look at [our renderers and their test setup](https://github.com/eclipsesource/jsonforms/tree/d7f34b98d9091fa29bc61178b33b96ae2cbd8519/packages/angular-material) and see whether you can find something that’s missing on your side.

To help you in more detail, you need to provide a reproducible example of the issue.

---

<div class="post-metadata">

**Author:** ![daniela](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@daniela](https://jsonforms.discourse.group/u/daniela)\
**Post date:** [November 6, 2024, 9:54am UTC](https://jsonforms.discourse.group/t/cannot-find-module-jsonforms-angular-material/2370/3 "2024-11-06T09:54:25Z")

</div>

@jjain77_jcplc Have you found a way to resolve this issue?

---

<div class="post-metadata">

**Author:** ![jjain77\_jcplc](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/jjain77_jcplc/32/1124_2.png) [@jjain77\_jcplc](https://jsonforms.discourse.group/u/jjain77_jcplc)\
**Post date:** [November 6, 2024, 10:25am UTC](https://jsonforms.discourse.group/t/cannot-find-module-jsonforms-angular-material/2370/4 "2024-11-06T10:25:26Z")

</div>

Yes, but temporary, I just ignore my spec file in jest.config.js.

testPathIgnorePatterns: [  
‘/src/app/dynamic-forms/dialogs/dynamic-forms-dialog.component.spec.ts’,  
‘/src/app/dynamic-forms/components/ingress-list/dynamic-forms-list.component.spec.ts’,  
],

---

<div class="post-metadata">

**Author:** ![daniela](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@daniela](https://jsonforms.discourse.group/u/daniela)\
**Post date:** [November 6, 2024, 2:40pm UTC](https://jsonforms.discourse.group/t/cannot-find-module-jsonforms-angular-material/2370/5 "2024-11-06T14:40:18Z")

</div>

I also have the same issue for @jsonforms/angular JsonFormsModule, so if I write a test for custom components, I face this issue “Cannot find module”. I don’t know if there is a reason why when we run the test we face this issue.

---

<div class="post-metadata">

**Author:** ![daniela](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@daniela](https://jsonforms.discourse.group/u/daniela)\
**Post date:** [November 7, 2024, 1:00pm UTC](https://jsonforms.discourse.group/t/cannot-find-module-jsonforms-angular-material/2370/6 "2024-11-07T13:00:39Z")

</div>

@jjain77_jcplc I fixed this by adding this line in jest. configuration file  
“moduleNameMapper”: {  
“^@jsonforms/angular-material$”: “/node\_modules/@jsonforms/angular-material/lib/esm2022/library”,  
“^@jsonforms/angular$”: “/node\_modules/@jsonforms/angular/lib/esm2022/library”  
},  
you can try and see if it will resolve the issue

---

<div class="post-metadata">

**Author:** ![jjain77\_jcplc](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/jjain77_jcplc/32/1124_2.png) [@jjain77\_jcplc](https://jsonforms.discourse.group/u/jjain77_jcplc)\
**Post date:** [November 7, 2024, 1:37pm UTC](https://jsonforms.discourse.group/t/cannot-find-module-jsonforms-angular-material/2370/7 "2024-11-07T13:37:21Z")

</div>

ohh that great to hear, I will try in my code as well…  
Great Thanks !! and Happy Coding 👍

---

<div class="post-metadata">

**Author:** ![daniela](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@daniela](https://jsonforms.discourse.group/u/daniela)\
**Post date:** [November 7, 2024, 2:26pm UTC](https://jsonforms.discourse.group/t/cannot-find-module-jsonforms-angular-material/2370/8 "2024-11-07T14:26:51Z")

</div>

Just forgot to tell you that in “moduleFileExtensions” you should added “mjs”. 😃