Ionic 4: 'ion-slide' is not a known element

问题

I am using ion-slides in a new component.

carousel.component.html

<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>

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() {
  }

}

But when I use this component <app-carousel></app-carousel> inside my Ionic page, I get the following error:

'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>

Please help me to solve this issue.

回答1:

You need to add CUSTOM_ELEMENTS_SCHEMA to schemas in NgModule.

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

...

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

export class YourModule {}

回答2:

Adding IonicModule.forRoot() to the parent module of my component helped to solve the issue.

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

回答3:

Try to add CUSTOM_ELEMENTS_SCHEMA in your module file..

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 { }

回答4:

Add IonicModule.forRoot() to the parent module (app.module.ts) and add IonicModule to the Module that holds your component that adresses ion-slide

app.module.ts:

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

your component module (or shared.module.ts):

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

derived from https://github.com/ionic-team/ionic/issues/17232

来源：https://stackoverflow.com/questions/54309846/ionic-4-ion-slide-is-not-a-known-element

标签

angular

ionic-framework

ionic4