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

ionic 4 tutorial
ionic 5
how to install ionic 4
ionic 4 angular
install ionic 4 locally
component in ionic 4
ionic 4 api
ionic components

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.


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

Introducing Ionic 4: Ionic for Everyone, Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes  The main changes between Ionic 4 and Ionic 3 applications are project design and architecture. It had a specific convention for how the folder structure should look like and how an application should be set up in ionic 3. Whereas, in Ionic 4, the application architecture follows the recommended configuration for each supported framework.


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

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

UI Components, Ionic is the app development platform for web developers. Build amazing cross platform mobile, web, and desktop apps all with one shared code base and open​  We’ve used the nxg-datatable in a previous post (which is now to some degree outdated for Ionic 4) so the Angular Material table component is a great and simple alternative. To display data in our table we of course need some data upfront.


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

Ionic, js. It also allows the use of Ionic components with no user interface framework at all. Ionic provides tools and services for developing hybrid mobile  Ionic 4 released January 2019, now we have Ionic 5 Ionic CLI. The CLI is used to start & serve Ionic apps, but does not contain any changes to the framework. Ionic Framework. Release Schedule. A major release will be published when there is a breaking change introduced in the API. Major


this error is resolved adding CUSTOM_ELEMENTS_SCHEMA on components.module.ts on where you have your components, for example "slides", not on app.module.ts on src/app/app.module.ts, it resolve this bug for me.

My structure it's: -src/app/pages/welcome/welcome.page.html i have module "slides" on src/app/components/slides and the component module collect on: -src/app/pages/components/components.module.ts you deed update like:

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

and for finish we need update the src/app/pages/welcome/welcome.module.ts like:

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

with all updated must be work.

Ionic 4 vs Ionic 3, Ionic allows users to create hybrid mobile apps with HTML, CSS and JavaScript and their related web technologies. What makes Ionic 4 the best  Ionic 4 brings with it some solid technologies, tools, and concepts such as Stencil, Capacitor, Ionic Native 5 and Ionic PWA Toolkit, With ionic 4 you will be able to use Ionic Components with React, Vue, Angular or with no framework at all.


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

Ionic 4 & Angular Tutorial For Beginners - Crash Course, Ionic is one of the best frameworks in the market, It's open source SDK for developing the Hybrid Mobile Application. It includes three main components such as a  I'm building mobile app with Ionic 4 and Angular 8 and can't make my HTTP interceptor working. I reviewed all the examples of interceptors here but none fits my need or simply do not work any more


Ionic 4 Crash Course for Beginners - Build an App, Create a New Ionic 4, Angular 7 and Cordova App. To create a new Ionic 4 App, type this command in your terminal. ionic start ionic4-crop blank --type=angular. If you see this question, just type `N` for because we will installing or adding Cordova later. Install the free Ionic Appflow SDK and connect your app? (Y/n) N


Ionic (mobile app framework), What is Ionic 4? Ionic Logo Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch , Ben Sperry and Adam Bradley of Drifty Co. in 2013.


How to Build a News App with Ionic 4 & Angular, Is the hardware back button working with ionic 4? I’ve started a project using the sidemenu starter template. When running ionic serve, going back works (pressing the back button) on the browser. Then I try running ionic cordova prepare android ionic cordova run android -l The app loads, the items on the menu work but using the hardware back button doesn’t. It doesn’t go anywhere. Is it