zyra / ionic-super-tabs

Swipeable Tabs for Ionic
MIT License
664 stars 192 forks source link

not working on latest ionic v7.1.1 #474

Open mmontesinos81 opened 1 year ago

mmontesinos81 commented 1 year ago

Describe the bug After adding to the imports SuperTabsModule.forRoot() in app.module.ts

the following error happens:

] Error: node_modules/@ionic-super-tabs/angular/super-tabs.module.d.ts:5:23 - error NG6005: SuperTabsModule.forRoot returns a ModuleWithProviders type without a generic type argument. Please add a generic type argument to the ModuleWithProviders type. If this occurrence is in library code you don't control, please contact the library authors. [ng] [ng] 5 static forRoot(): ModuleWithProviders; [ng] ~~~~~~~ [ng]

To Reproduce Steps to reproduce the behavior:

  1. Install supertabs
  2. Add SuperTabsModule.forRoot() in app.module.ts

Ionic v7.1.1

therjtkumar commented 11 months ago

Same issue not working with latest ionic and angular.

simonking76 commented 6 months ago

this specific error could be resolved by updating the package in this file, super-tabs.module.d.ts:

- static forRoot(): ModuleWithProviders;
+ static forRoot(): ModuleWithProviders<SuperTabsModule>;

however, there are still errors:

Error: src/app/app.module.ts:32:11 - error NG6002: 'SuperTabsModule' does not appear to be an NgModule class.
imports: [
    ...
    SuperTabsModule.forRoot(),
    ...
],

And wherever the module is used:

node_modules/@ionic-super-tabs/angular/super-tabs.module.d.ts:4:22
export declare class SuperTabsModule {

This likely means that the library (@ionic-super-tabs/angular) which declares SuperTabsModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Error: src/app/pages/checkin/my.module.ts:31:9 - error NG6002: 'SuperTabsModule' does not appear to be an NgModule class.
SuperTabsModule

I only get these errors when packaging my App with Production settings. It has been working fine with Development settings. I fear this package is not unsupported? Doesn't seem to be much activity but it still seems popular. unfortunately I need a quick resolution as I have to release the app and its very broken when packaging the production version.

before I remove supertabs is there any hope this may be resolved?

I'm using angular 17.2.0, ionic 7.7.2 and super tabs 7.0.8

If I package the app with Developer settings in angular.json it works fine.

"aot": false, "vendorChunk": true, "optimization": false, "sourceMap": true, "namedChunks": true, "extractLicenses": false, "buildOptimizer": false

Production settings I get the errors above..

"buildOptimizer": true, "optimization": true, "vendorChunk": false, "extractLicenses": true, "sourceMap": false, "namedChunks": false, "aot": true,

vesper8 commented 1 month ago

Just want to say that I first looked for "ionic swipeable" tabs about 15 minutes ago, found this issue quickly.. thankfully

Asked myself.. what's so hard about making tabs swipeable anyway?

And then implemented swipeable tabs using https://github.com/robinrodricks/vue3-touch-events in 5 minutes flat

You don't need this package

<template>
  <ion-page
    v-touch:swipe.left="swipeLeftHandler"
    v-touch:swipe.right="swipeRightHandler"
  >
    <ion-tabs>
      <ion-router-outlet />

      <ion-tab-bar slot="bottom">
        <ion-tab-button
          v-for="tab in tabs"
          :key="tab.path"
          :tab="tab.path"
          :href="`/tabs/${tab.path}`"
        >
          <ion-label>{{ tab.label }}</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>
      swipeLeftHandler() {
        const currentIndex = this.tabs.findIndex((tab) => tab.path === this.$route.name);

        if (currentIndex > 0) {
          this.$router.push(`/trix/${this.tabs[currentIndex - 1].path}`);
        }
      },

      swipeRightHandler() {
        const currentIndex = this.tabs.findIndex((tab) => tab.path === this.$route.name);

        if (currentIndex < this.tabs.length - 1) {
          this.$router.push(`/trix/${this.tabs[currentIndex + 1].path}`);
        }
      },