1
votes

Ionic 4: 'ion-slide' n'est pas un élément connu

J'utilise des diapositives ioniques dans un nouveau composant.

carousel.component.html

'ion-slide' is not a known element:
1. If 'ion-slide' is an Angular component, then verify that it is part of this module.
2. If 'ion-slide' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<ion-slides pager="true" >
  [ERROR ->]<ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
"): ng:///SharedModule/CarouselComponent.html@1:2
'ion-slide' is not a known element:
1. If 'ion-slide' is an Angular component, then verify that it is part of this module.
2. If 'ion-slide' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    <h1>Slide 1</h1>
  </ion-slide>
  [ERROR ->]<ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>

carousel.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.scss']
})
export class CarouselComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Mais lorsque j'utilise ce composant dans ma page Ionic, j'obtiens l'erreur suivante:

<ion-slides pager="true" >
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
</ion-slides>

Aidez-moi à résoudre ce problème.

angular ionic-framework ionic4

3 commentaires

ajoutez-vous IonicModule.forRoot () à vos importations d'AppModule?

Vous devez déclarer votre CarouselComponent dans votre app.module.ts dans les déclarations: [....., CarouselComponent]

Bien sûr, je l'ai fait. Il n'y a aucun problème avec mon composant de carrousel car j'ai d'abord testé le composant de carrousel en l'injectant dans un autre composant qui fonctionnait bien. Cela a eu un problème dès que j'ai ajouté des diapositives ioniques

5 Réponses :

2
votes

Vous devez ajouter CUSTOM_ELEMENTS_SCHEMA aux schémas dans NgModule.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

...

@NgModule({
  imports: [],
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class YourModule {}

2 commentaires

J'ai pu le résoudre en ajoutant IonicModule.forRoot () au tableau des importations. Mais maintenant, j'ai essayé votre solution et cela résout également le problème. Vous vous demandez quelle est la solution parfaite.

IonicModule.forRoot () ne doit être qu'à un seul endroit, dans AppModule si vous avez un autre module, il doit être uniquement IonicModule sans .forRoot () .

1
votes

L'ajout de IonicModule.forRoot () au module parent de mon composant a aidé à résoudre le problème.

@NgModule({
  imports: [
    ...
    IonicModule.forRoot(),
  ]
})

0 commentaires

-1
votes

Ajoutez IonicModule.forRoot () au module parent ( app.module.ts ) et ajoutez IonicModule au module qui contient votre composant qui s'adresse à ion-slide

app.module.ts:

@NgModule({
  imports: [
    ...
    IonicModule,
  ]
})

votre module de composant (ou shared.module.ts ):

@NgModule({
  imports: [
    ...
    IonicModule.forRoot(),
  ]
})

dérivé de https: // github.com/ionic-team/ionic/issues/17232

1 commentaires

Veuillez commenter le vote négatif.

0
votes

Essayez d'ajouter CUSTOM_ELEMENTS_SCHEMA dans votre fichier de module.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA }  from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [BrowserModule],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

0 commentaires

0
votes

cette erreur est résolue en ajoutant CUSTOM_ELEMENTS_SCHEMA sur components.module.ts sur l'emplacement où vous avez vos composants, par exemple "slides", pas sur app.module.ts sur src / app / app.module.ts, cela résout ce bogue pour moi.

Ma structure est: -src / app / pages / welcome / welcome.page.html j'ai le module "slides" sur src / app / components / slides et le module composant collectent sur: -src / app / pages / composants / components.module.ts vous faites la mise à jour comme:

@NgModule({
  imports: [
    ...
    ComponentsModule,
  ],
  declarations: [WelcomePage],
})

et pour finir, nous devons mettre à jour le src / app / pages / welcome / welcome.module.ts comme:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...
@NgModule({
  declarations: [SlidesComponent],
  exports: [ SlidesComponent],
  ...
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
})

avec tout mis à jour doit être le travail.

0 commentaires