Swiper/angular cannot be found

Ionic Framework
1

Hello, I’m starting to lose track here. I have had to leave my app for a few weeks for another project. But in the meantime I reinstalled Windows and switched to Windows 11. So I had to set up my development environment completely new. I think everything is up to date now.

npm list
…
├── rxjs@7.8.0
├── swiper@9.0.4
├── ts-node@10.9.1

npm -g list
├── @angular/cli@15.1.5
└── @ionic/cli@6.20.8

ng version
Angular CLI: 15.1.5
Node: 18.14.0
Package Manager: npm 9.3.1
OS: win32 x64

But when I open the app now I get error messages. It can’t find the swiper module anymore, even though Sweeper is installed.

Error: src/app/pages/intro/intro.page.html:30:3 - error NG8001: 'swiper' is not a known element:
1. If 'swiper' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

30   <swiper pager="true" #slideWithNav="">

Here in the import line I get the message, that swiper /angular cannot be found.

import { SwiperModule } from 'swiper/angular';

I ve followed the documentation (angular/slides). The swiper had worked a few weeks ago. On the Webpage swiperjs.com I can read that its not awailable for angular? Does it have to be done differently again? It would be nice if someone could help me here and clear up my frustration.

2

You need to import the SwiperModule in the module you are using it in.

3

I added the import line in the approprate intro.module.ts file, but I get the message, that the module cannot be found (error code ts2307). Here is the tree of Swiper v9

node_module_swiper
node_module_swiper437×967 19.7 KB

4

create a stackblitz project replicating the issue and post the project link here.

5

The example in the angular/slides documentation is using @ionic/angular v6 + Swiper v8, so you need to install Swiper v8, not the latest version.

1 Like
6

Thanks, with version 8 the problem could be resolved. This means I have to be carefull with keeping the system up to date. I still have a simular problem with the videogular/ngx-videogular package and installing an older version doesnt work, seems it always works only with a certain angular version.

7

Hello Hill i think i’m facing the same erros
[INFO] Browser window opened to http://localhost:8100!

[ng] :heavy_check_mark: Browser application bundle generation complete.
[ng]
[ng]
[ng]
[ng] 70 unchanged chunks
[ng]
[ng] Build at: 2024-12-04T18:20:50.296Z - Hash: 13a3c2d2c6d15d84 - Time: 7391ms
[ng]
[ng] ./src/app/home/home.component.ts:6:0-46 - Error: Module not found: Error: Package path ./angular is not exported from package C:\Users\TaherCh\Desktop\STB Bank\STBBank\node_modules\swiper (see exports field in C:\Users\TaherCh\Desktop\STB Bank\STBBank\node_modules\swiper\package.json)
[ng] ./src/app/home/home.component.ts:9:16-24 - Error: export ‘Autoplay’ (imported as ‘Autoplay’) was not found in ‘swiper’ (possible exports: Swiper, default)
[ng] Error: src/app/home/home.component.ts:6:30 - error TS2307: Cannot find module ‘swiper/angular’ or its corresponding type declarations.
[ng] 6 import { SwiperModule } from ‘swiper/angular’; // Import SwiperModule
[ng] ~~~~~~~~~~~~~~~~
[ng] Error: src/app/home/home.component.ts:7:22 - error TS2614: Module ‘“swiper”’ has no exported member ‘Autoplay’. Did you mean to use ‘import Autoplay from “swiper”’ instead?
[ng] 7 import SwiperCore, { Autoplay } from ‘swiper’;
[ng] ~~~~~~~~
[ng] Error: src/app/home/home.component.ts:21:12 - error NG1010: ‘imports’ must be an array of components, directives, pipes, or NgModules.
[ng] Value is of type ‘[IonicModule, CommonModule, (not statically analyzable)]’.
[ng] 21 imports: [IonicModule, CommonModule, SwiperModule]
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng]
[ng] × Failed to compile.
[ng] :heavy_check_mark: Browser application bundle generation complete.
[ng]
[ng] Initial chunk files | Names | Raw size
[ng] main.js | main | 162.66 kB |
[ng] runtime.js | runtime | 14.45 kB |
[ng]
[ng] 68 unchanged chunks
[ng]
[ng] Build at: 2024-12-04T18:52:53.324Z - Hash: c982ac50ad55666c - Time: 8580ms
[ng] × Failed to compile.
[ng]
[ng] ./src/app/home/home.component.ts:6:0-46 - Error: Module not found: Error: Package path ./angular is not exported from package C:\Users\TaherCh\Desktop\STB Bank\STBBank\node_modules\swiper (see exports field in C:\Users\TaherCh\Desktop\STB Bank\STBBank\node_modules\swiper\package.json)
[ng] ./src/app/home/home.component.ts:9:16-24 - Error: export ‘Autoplay’ (imported as ‘Autoplay’) was not found in ‘swiper’ (possible exports: Swiper, default)
[ng] Error: src/app/home/home.component.ts:6:30 - error TS2307: Cannot find module ‘swiper/angular’ or its corresponding type declarations.
[ng] 6 import { SwiperModule } from ‘swiper/angular’; // Correct import for SwiperModule
[ng] ~~~~~~~~~~~~~~~~
[ng] Error: src/app/home/home.component.ts:7:22 - error TS2614: Module ‘“swiper”’ has no exported member ‘Autoplay’. Did you mean to use ‘import Autoplay from “swiper”’ instead?
[ng] 7 import SwiperCore, { Autoplay } from ‘swiper’;
[ng] ~~~~~~~~
[ng] Error: src/app/home/home.component.ts:21:12 - error NG1010: ‘imports’ must be an array of components, directives, pipes, or NgModules.
[ng] Value is of type ‘[IonicModule, CommonModule, (not statically analyzable)]’.
[ng] 21 imports: [IonicModule, CommonModule, SwiperModule]
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng]
[ng] :heavy_check_mark: Browser application bundle generation complete.
[ng]
[ng] Initial chunk files | Names | Raw size
[ng] main.js | main | 162.66 kB |
[ng] runtime.js | runtime | 14.45 kB |
[ng]
[ng] 68 unchanged chunks
[ng]
[ng] Build at: 2024-12-04T18:52:55.990Z - Hash: 9c035b57d78d50cd - Time: 2284ms
[ng]
[ng] ./src/app/home/home.component.ts:6:0-46 - Error: Module not found: Error: Package path ./angular is not exported from package C:\Users\TaherCh\Desktop\STB Bank\STBBank\node_modules\swiper (see exports field in C:\Users\TaherCh\Desktop\STB Bank\STBBank\node_modules\swiper\package.json)
[ng] ./src/app/home/home.component.ts:9:16-24 - Error: export ‘Autoplay’ (imported as ‘Autoplay’) was not found in ‘swiper’ (possible exports: Swiper, default)
[ng] Error: src/app/home/home.component.ts:6:30 - error TS2307: Cannot find module ‘swiper/angular’ or its corresponding type declarations.
[ng] 6 import { SwiperModule } from ‘swiper/angular’; // Correct import for SwiperModule
[ng] ~~~~~~~~~~~~~~~~
[ng] Error: src/app/home/home.component.ts:7:22 - error TS2614: Module ‘“swiper”’ has no exported member ‘Autoplay’. Did you mean to use ‘import Autoplay from “swiper”’ instead?
[ng] 7 import SwiperCore, { Autoplay } from ‘swiper’;
[ng] ~~~~~~~~
[ng] Error: src/app/home/home.component.ts:21:12 - error NG1010: ‘imports’ must be an array of components, directives, pipes, or NgModules.
[ng] Value is of type ‘[IonicModule, CommonModule, (not statically analyzable)]’.
[ng] 21 imports: [IonicModule, CommonModule, SwiperModule]
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng]
[ng] × Failed to compile.