I am wanting to start creating custom components. I used the Ionic CLI command ionic generate component back-button
to create a new component. It created the component directory along with a components.module.ts
file. When I try to use the new back-button
component that was created I get an error.
- NOTE: I don’t really need a back button. I just want to understand the concept of creating and using a new custom component.
Here is what I have:
core.js:1350 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'back-button' is not a known element:
1. If 'back-button' is an Angular component, then verify that it is part of this module.
2. If 'back-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<ion-content padding>
[ERROR ->]<back-button></back-button>
<ion-grid>
<ion-row align-items-center class="form-content">
"): ng:///RegisterPageModule/RegisterPage.html@1:2
// components.module.ts
import { NgModule } from '@angular/core';
import { BackButtonComponent } from './back-button/back-button';
@NgModule({
declarations: [BackButtonComponent],
imports: [],
exports: [BackButtonComponent]
})
export class ComponentsModule {}
// back-button.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'back-button',
templateUrl: 'back-button.html'
})
export class BackButtonComponent {
constructor(private navCtrl: NavController) {
}
back() {
this.navCtrl.pop();
}
}
// back-button.html
<button ion-button (click)="back()">Back</button>
// app.module.ts
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 { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { FirebaseService } from './../providers/firebase-service';
import { FIREBASE_CONFIG } from './app.firebase.config';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
// Imported components.module.ts
import { ComponentsModule } from '../components/components.module';
@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage
],
imports: [
BrowserModule,
HttpModule,
HttpClientModule,
AngularFireDatabaseModule,
AngularFireModule.initializeApp(FIREBASE_CONFIG),
IonicModule.forRoot(MyApp),
AngularFireAuthModule,
ComponentsModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage
],
providers: [
StatusBar,
SplashScreen,
FirebaseService,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
// page.html
<ion-content padding>
<back-button></back-button>
<ion-grid>
<ion-row align-items-center class="form-content">
<ion-col>
<ion-row>
<ion-col>
<h1 ion-text color="white" text-center>Register</h1>
</ion-col>
</ion-row>
<ion-row padding>
<ion-col col-12>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input [(ngModel)]="user.email"></ion-input>
</ion-item>
</ion-col>
<ion-col col-12>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" [(ngModel)]="user.password"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row padding>
<ion-col>
<button ion-button block (click)="register(user)">Register</button>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Does anyone know why I get this error?