I have trouble in DIY component


Hello everyone,I’am a newer of ionic3. I have trouble in how to make a diy component for my ionic project.

My project info :

IDE : visual studio code
NODE : 8.5.0
IONIC : ionic framework 3.15.2
CORDOVA : 7.0.1

My work:

  1. I create a blank project.
  2. I create a component with this command : ionic g component InputBoxWithEyes , then it create a folder named components in the src folder automatic , and it contain a sub folder named input-box-with-eyes which has three files :input-box-with-eyes.htmlinput-box-with-eyes.scssinput-box-with-eyes.ts and a module component.module.ts.
  3. I import component.module.ts to app.module.ts under @NgModule.imports section
  4. I take ‘’ into pages => home => home.html
  5. run project with ionic serve,then it works!
  6. but when i put a new page with command ioinc g page input-box-eyes-demo, it shows an error :

`Uncaught Error: Template parse errors:
‘input-box-with-eyes’ is not a known element:

  1. If ‘input-box-with-eyes’ is an Angular component, then verify that it is part of this module.
  2. If ‘input-box-with-eyes’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("
[ERROR ->] ` so wat can i do to deal with this problem?thanks very much!

My Code:


<!-- Generated template for the InputBoxWithEyesComponent component -->


input-box-with-eyes {


input-box-with-eyes {


import { Component, OnInit } from '@angular/core';
  selector: 'input-box-with-eyes',
  templateUrl: 'input-box-with-eyes.html'
export class InputBoxWithEyesComponent implements OnInit {
  ngOnInit(): void {
    throw new Error("Method not implemented.");

  text: string;

  constructor() {
    console.log('Hello InputBoxWithEyesComponent Component');
    this.text = 'Hello World';



import { NgModule } from '@angular/core';
import { InputBoxWithEyesComponent } from './input-box-with-eyes/input-box-with-eyes';
	declarations: [InputBoxWithEyesComponent],
	imports: [],
	exports: [InputBoxWithEyesComponent]
export class ComponentsModule {}


import { TabsPageModule } from './../pages/tabs/tabs.module';
import { ComponentsModule } from './../components/components.module';
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

  declarations: [
  imports: [
  bootstrap: [IonicApp],
  entryComponents: [
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
export class AppModule {}


<ion-content padding>

Wat i tried

I have tried to add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ to component.module.ts under its NgModule,but it dosn’t woke,and the same of app.module.ts. When I add it to home.module.ts, there is no error message, but appeared nothing. and then I tried to F2 of Chrome, i can see it in the html code of home.html.