CODEWITHSUNDEEP
angularionic-framework
farhanz95
farhanz95

Reputation: 195

ion-slides Problem ERROR Error: Uncaught (in promise): Error: Template parse errors:

i just started learning ionic5 yesterday by referring to this website

https://www.9lessons.info/2019/08/ionic-5-angular-8-welcome-page.html

upon the creation of app-slides an error occur

error captured are from Developer Tools Browser at Console tab

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'ion-slides'.
1. If 'ion-slides' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'ion-slides' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<ion-slides pager="true" [ERROR ->][options]="slideOpts">
  <ion-slide>
    <h1>Slide 1</h1>
"): ng:///ComponentsModule/SlidesComponent.html@0:25
'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" [options]="slideOpts">
  [ERROR ->]<ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
"): ng:///ComponentsModule/SlidesComponent.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>
"): ng:///ComponentsModule/SlidesComponent.html@4: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 2</h1>
  </ion-slide>
  [ERROR ->]<ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
"): ng:///ComponentsModule/SlidesComponent.html@7:2
'ion-slides' is not a known element:
1. If 'ion-slides' is an Angular component, then verify that it is part of this module.
2. If 'ion-slides' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ion-slides pager="true" [options]="slideOpts">
  <ion-slide>
    <h1>Slide 1</h1>
"): ng:///ComponentsModule/SlidesComponent.html@0:0
Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'ion-slides'.
1. If 'ion-slides' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'ion-slides' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<ion-slides pager="true" [ERROR ->][options]="slideOpts">
  <ion-slide>
    <h1>Slide 1</h1>
"): ng:///ComponentsModule/SlidesComponent.html@0:25
'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" [options]="slideOpts">
  [ERROR ->]<ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
"): ng:///ComponentsModule/SlidesComponent.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>
"): ng:///ComponentsModule/SlidesComponent.html@4: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 2</h1>
  </ion-slide>
  [ERROR ->]<ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
"): ng:///ComponentsModule/SlidesComponent.html@7:2
'ion-slides' is not a known element:
1. If 'ion-slides' is an Angular component, then verify that it is part of this module.
2. If 'ion-slides' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ion-slides pager="true" [options]="slideOpts">
  <ion-slide>
    <h1>Slide 1</h1>
"): ng:///ComponentsModule/SlidesComponent.html@0:0
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11188)
    at JitCompiler._parseTemplate (compiler.js:25721)
    at JitCompiler._compileTemplate (compiler.js:25709)
    at compiler.js:25653
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25653)
    at compiler.js:25566
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25565)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

Solution that i have tried includes

i am web developer transfering to mobile development, and using Laragon as web IDE, so as Laragon already included with npm i continued to develop mobile application using Laragon IDE

Sample codes are as below, most of the code used are refereed from the tutorial website defined above

on welcome.page.html


<ion-content>
  <app-slides></app-slides>

</ion-content>

on slides.components.ts

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

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

  slideOpts = {
    initialSlide: 1,
    speed: 400
  };

  constructor() { }

  ngOnInit() {}

}

on components.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SlidesComponent } from './slides/slides.component';
import { StartComponent } from './start/start.component';
import { LogoComponent } from './logo/logo.component';



@NgModule({
  declarations: [SlidesComponent, StartComponent, LogoComponent],
  exports: [SlidesComponent, StartComponent, LogoComponent],
  imports: [
    CommonModule
  ]
})
export class ComponentsModule { }

on slides.component.html

<ion-slides pager="true" [options]="slideOpts">
  <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>

The results that should come out are page with slide function available but instead of it, the result come out only white blank page, thus i inspect element and found the shown error

Upvotes: 3

Views: 1844

Answers (1)

Bunyamin Coskuner
Bunyamin Coskuner

Reputation: 8859

You are missing IonicModule in your ComponentsModule.

The error says it all. If you don't import a module whose components you use, angular gives you that error.

Simply do following in components.module.ts

import { IonicModule } from '@ionic/angular';

...

@NgModule({
  declarations: [SlidesComponent, StartComponent, LogoComponent],
  exports: [SlidesComponent, StartComponent, LogoComponent],
  imports: [
    CommonModule,
    IonicModule // <- do not forget to add this import
  ]
})
export class ComponentsModule { }

Upvotes: 4

Related Questions