Error: Cannot resolve type entity i4.FocusTrapModule to symbol

[vignesh-s]

importing ModalModule.forRoot() gives the below error on starting the server in angular 18

✘ [ERROR] Angular compilation initialization failed. [plugin angular-compiler]

  Error: Cannot resolve type entity i4.FocusTrapModule to symbol

Versions of ngx-bootstrap, Angular, and Bootstrap:

"@angular/core": "^18.0.6",
"bootstrap": "^5.3.3",
"ngx-bootstrap": "^18.0.0",

Build system: Angular CLI

Expected behavior

Server should start without any error

[lexasq]

Hi @vignesh-s could you please provide plunker sample for better verification in the meantime what have you tried to add @angular/cdk to the project?

[vignesh-s]

Yes, I am having @angular/cdk version same as angular core

[evil-o]

I'm facing the same issue, and I created a repository that reproduces the issue for me. You can find it here: https://github.com/evil-o/ngx-bootstrap-6662-repro.

The repository should be minimal, I created an Angular app with ng new (npm start works) and added an import of ngx-bootstrap (npm start shows the error in the original bug report).

[lexasq]

Thanks, that helps a lot!

[PShonda]

Replying for you @vignesh-s , @evil-o
Hello, I am getting this error message as well. And I have some quick fix ideas ahead of time to keep working on to share.

In my situation error because "ngx-bootstrap/focus-trap"

1. I would like to use ngx-bootstrap/modal .
2. On setup state i will should to add "ModalModule.forRoot()" in import [] at app module or in related
3. Then i will run serve to review result it have a problem now .

My environment is Windows 11 Pro and use NVM for manage version of node .

How i Fix

1. Run npm install any dependecy
2. Goto node_modules/ngx-bootstrap/<your_component_call>/.module.d.ts (your component mean what module if you want to call and '' is same meaing)
3. Replace import path from "ngx-bootstrap/focus-trap" to "./../focus-trap/focus-trap.module"
4. Then restart serve or re-build .

I think import route are not work because if i try to click link ("ngx-bootstrap/focus-trap" ) they will route to path ("ngx-bootstrap/focus-trap/fesm2022/ngx-bootstrap-modal.mjs") and broken

PS. if you have many people in project i will recommend create script for replace and set it in postinstall at package.json between wait fix patch

CC. @lexasq my info can help you for clear it ?

[lexasq]

@vignesh-s @evil-o @PShonda thank you all on the intel. So far I think I found the issue, could you please try it as well. In your tsconfig.json
"compilerOptions": { ... "moduleResolution": "node", ... }

Does work on @evil-o sample. I also found your solution as well @PShonda , unfortunatelly this is definitely not a lasting one.

[PShonda]

@lexasq I'm worried too. Thank you very much for the suggestion.
Update config in tsconfig.json it so better

[evil-o]

@lexasq , that actually resolves the issue for me, both in the minimal sample and my actual application!

I assume this is a workaround? Bundler module resolution, in my opinion is more appropriate for an angular application, and it's also the default setting that the Angular CLI generates.

In any case, for now, this fixes my issue, so thanks for the quick response!

[slubowsky]

@lexasq Just BTW - this actually prevents using some libraries without nasty workarounds. See for example benjamine/jsondiffpatch#356 (comment)

[lexasq]

@slubowsky you are right, it's very unfortunate, but whole library builds as node now, so that is the best solution we could offer right now. We're restarting our opensource contributions, and chances are we'll get to this issue as well.

[salartaimoor10]

I changed the all FocusTrapModule imports to ngx-bootstrap/focus-trap.module but still facing this issue.

[salartaimoor10]

Replying for you @vignesh-s , @evil-o Hello, I am getting this error message as well. And I have some quick fix ideas ahead of time to keep working on to share.

In my situation error because "ngx-bootstrap/focus-trap"

1. I would like to use ngx-bootstrap/modal .
2. On setup state i will should to add "ModalModule.forRoot()" in import [] at app module or in related
3. Then i will run serve to review result it have a problem now .

My environment is Windows 11 Pro and use NVM for manage version of node .

How i Fix

1. Run npm install any dependecy
2. Goto node_modules/ngx-bootstrap/<your_component_call>/.module.d.ts (your component mean what module if you want to call and '' is same meaing)
3. Replace import path from "ngx-bootstrap/focus-trap" to "./../focus-trap/focus-trap.module"
4. Then restart serve or re-build .

I think import route are not work because if i try to click link ("ngx-bootstrap/focus-trap" ) they will route to path ("ngx-bootstrap/focus-trap/fesm2022/ngx-bootstrap-modal.mjs") and broken

PS. if you have many people in project i will recommend create script for replace and set it in postinstall at package.json between wait fix patch

CC. @lexasq my info can help you for clear it ?

I changed all FocusTrapModule imports to ngx-bootstrap/focus-trap.module but still facing this issue.

[lexasq]

@vignesh-s @evil-o @PShonda thank you all on the intel. So far I think I found the issue, could you please try it as well. In your tsconfig.json "compilerOptions": { ... "moduleResolution": "node", ... }

Does work on @evil-o sample. I also found your solution as well @PShonda , unfortunatelly this is definitely not a lasting one.

@salartaimoor10 this is the answer