I have trouble in DIY component

Ionic Framework ionic-v3
1

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.html 、 input-box-with-eyes.scss、input-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:

input-box-with-eyes.html

<!-- Generated template for the InputBoxWithEyesComponent component -->
<div>
  {{text}}
</div>

input-box-with-eyes.scss

input-box-with-eyes {
}

input-box-with-eyes.ts

input-box-with-eyes {
}

input-box-with-eyes.scss

import { Component, OnInit } from '@angular/core';
@Component({
  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';
  }

}

components.module.ts

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

app.module.ts

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

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    ComponentsModule,
    BrowserModule,
    TabsPageModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <input-box-with-eyes></input-box-with-eyes>
</ion-content>

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.