swiper: Can't resolve 'swiper_angular' on ng build
- Swiper Version: v6.5.0 (sha1-TKIkO0T8zvR+4oGZN3ZmYH2MUUE=)
- Platform/Target and Browser Versions: CI/CD (Azure Devops pipeline, nodejs v12 docker image) and macOS 10.15.7.
- Angular version: v9.1.12
What You Did
- We’ve implemented the Swiper module in our application
- Added
SwiperModuleto ourapp.module.ts - Imported SwiperCore from
swiper/corein the component that is consuming the swiper component
Expected Behavior
When we’re developing the app locally using Angular-cli’s ng serve everything works perfectly!
When we run ng build we expect the app to build as well.
Actual Behavior
We get the following errors (both locally and in azure devops pipeline):
ERROR in ./node_modules/swiper/angular/swiper_angular.ngfactory.js
Module not found: Error: Can't resolve 'swiper_angular' in '/Users/username/repo/node_modules/swiper/angular'
ERROR in ./src/components/swipeable-boxes/swipeable-boxes.component.ngfactory.js
Module not found: Error: Can't resolve 'swiper_angular' in '/Users/username/repo/src/components/swipeable-boxes'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'swiper_angular' in '/Users/username/repo/src/app'
Do you have any pointers what the cause of this might be and how to fix it? Willing to help and work on a fix, but unsure why this happens in the first place.
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 7
- Comments: 35 (1 by maintainers)
I have encounter the same issue.
I used this link as reference. https://medium.com/@tanya/angular-library-module-not-found-error-527445d44019
And In tsconfig.json of my angular project, add this, maybe it works.
Hi everyone, I’ve been working on this issue and I resolved it doing this in tsconfig.json
Note the “…/” in
"swiper_angular": ["../node_modules/swiper/angular"], this is required cause that path is relative to the baseUrl, and node_modules is out of “./”.Hope it helps
try
with swiper 8.
I don’t know if this can help anyone, but only after (the paths config inside tsconfig.json did nothing and I am not using it) I put this configuration in my jest.config.js, swiper_angular was found.
moduleNameMapper: { '^swiper_angular$': '<rootDir>../../node_modules/swiper/angular', }This jest.config.js is inside of a library project, inside Angular project. (<rootDir>/projects/my-lib/jest.config.js)
Unfortunately I wasn’t able to make it work, because the code from ‘swiper.esm.js’ file is not transforming (I am using jest-preset-angular, the default version). And Jest throws this error:
`Test suite failed to run
…/node_modules/swiper/swiper.esm.js:13 export { default as Swiper, default } from ‘swiper/core/core’; ^^^^^^
I’ll try to create a repo to act like this.
https://github.com/snowfrogdev/swiper-angular-nx-jest/pull/1
Looks like
moduleNameMapperandtransformIgnorePatternssettings works for nx toohello everybody! I get worked solution with latest version of Swiper (8.0.7 for now) to fix tests, i update
moduleNameMapperandtransformIgnorePatternsinjest.config.jsi create repo for this, so you can check it here: https://github.com/olegshilov/swiper-angular-jest and successful tests job: https://github.com/olegshilov/swiper-angular-jest/actions/runs/2075808546
Related issue, after updating swiper from 6 to 7, Jest fails to test I do not have any problems with serve or build In Swiper 6, i do not have any problems
@yoeran All good. I’ve changed nothing special in angular.json. spa project, angular v8. It seems internal typescript error of module imports. https://www.typescriptlang.org/docs/handbook/module-resolution.html#relative-vs-non-relative-module-imports And In tsconfig.json, using paths, you also need to add baseurl.
I hope you can fix it soon.
I have a fix for this. Add this task to your postinstall (package.json): “postinstall”: “cp -R ./node_modules/swiper/angular ./node_modules/swiper_angular”
Above does not work for me. This works instead: (swiper 8)
Yes, it works now!
Thanks @olegshilov! The key part was the option inside jest.config.js:
transformIgnorePatterns: [ 'node_modules/(?!(@angular|@testing-library|swiper|ssr-window|dom7))\', ]I’ve been digging deep and have a couple of findings:
enableIvywas set to false for our project (in theangularCompilerOptionsin tsconfig.json). This triggers the error as mentioned before (even more verbose). You can see it reproduced in this repository: https://github.com/yoeran/swiper-reproduce-issue. Runnpm run buildto see the error (I’ll add a snippet at the bottom of this comment, called “Error with enableIvy set to false”)enableIvy:falseproperty from ourtsconfig.json(default of enableIvy is true). We no longer have the error, however, we do get another error when building the app. This I have not been able to reproduce in an isolated repository. I’ll add this error to this comment as well.I did find a workaround, which meant installing
ngx-swiper-wrapper@^9.0.1andswiper@^5.4.5. This works fine for our current status. However it would be nice to be able to just use swiper and not the redundant (deprecated?) ngx-swiper-wrapper.Error 1: When enableIvy is set to false (see linked repo to reproduce this)
Error 2: When enableIvy is removed (thus enableIvy defaults to true)