Creating and Using New Component from Ionic CLI

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?

2 Likes

If your module uses Ionic, import IonicModule. Basically this means: if your module only has pure Angular, like pipes or providers, you don’t need IonicModule. But if you’re using Ionic for html, then you need it. For example:

2 Likes

I appreciate the help! I added the IonicModule to the components.module.ts file. Unfortunately, I am still getting the same error as before.

// components.module.ts
import { NgModule } from '@angular/core';
import { BackButtonComponent } from './back-button/back-button';
import { IonicModule } from 'ionic-angular';

@NgModule({
	declarations: [BackButtonComponent],
	imports: [IonicModule],
	exports: [BackButtonComponent]
})
export class ComponentsModule {}

Are you importing BackButtonComponent into the module of the page it appears in?

1 Like

I have tried that. Same error still. I’m stumped. Although I know it’s going to be something very simple that I’m missing.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { User } from '../../models/user';
import { AngularFireAuth } from 'angularfire2/auth';
import { HomePage } from '../home/home';
import { BackButtonComponent } from '../../components/back-button/back-button';

@IonicPage()
@Component({
  selector: 'page-register',
  templateUrl: 'register.html',
})
export class RegisterPage {
  user = {} as User;

  constructor(public navCtrl: NavController, public navParams: NavParams, private afAuth: AngularFireAuth) {

  }

}

That’s the page’s ts file. I was asking about the page’s module.ts file. Spend more time with the example I linked.

1 Like

Thanks! That was it. I just imported my components.module.ts into the module for that page and it works now. Appreciate your time and help!

2 Likes

Thaks friend for your help

Gracias compañero, me fue util tu respuesta.

You have the final code to send?