Creating and Using New Component from Ionic CLI

@JoshMDiaz wrote:

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?

Posts: 2

Participants: 2

Read full topic