Hello, I get stuck in a simple (I guess) problem, trying use a component in two pages with lazy loading and I don’t know what’s the problem, I research in stackoverflow, google and Ionic Forum and don’t find something like this, sorry about so many files, here is my all data (erros, modules, component, html, ts):
Ionic info
cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2
global packages:
Cordova CLI : 7.0.1
local packages:
@ionic/app-scripts : 2.1.4
Cordova Platforms : android 6.2.3 ios 4.4.0
Ionic Framework : ionic-angular 3.6.0
System:
ios-deploy : 1.9.1
ios-sim : 6.0.0
Node : v6.9.5
npm : 3.10.10
OS : macOS Sierra
Xcode : Xcode 8.2.1 Build version 8C1002
Error
components/formulario-usuario/formulario-usuario
import { Component, Input } from '@angular/core';
import { App, IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
// PROVIDERS
import { AuthProvider } from '../../providers/auth/auth';
import { AuxiliarProvider } from '../../providers/auxiliar/auxiliar';
import { UsuarioProvider } from '../../providers/usuario/usuario';
// PAGES
import { HomePage } from '../../pages/home/home';
@Component({
selector: 'formulario-usuario',
templateUrl: 'formulario-usuario.html'
})
export class FormularioUsuarioComponent {
...
components/components.module.ts
import { NgModule } from '@angular/core';
import {IonicModule} from 'ionic-angular'
import { FormularioUsuarioComponent } from './formulario-usuario/formulario-usuario';
@NgModule({
declarations: [FormularioUsuarioComponent],
imports: [IonicModule],
exports: [FormularioUsuarioComponent]
})
export class ComponentsModule {}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { LOCALE_ID, ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { TextMaskModule } from 'angular2-text-mask';
// import { AngularFireDatabaseModule } from 'angularfire2/database';
// import { AngularFireAuthModule } from 'angularfire2/auth';
// NATIVE IMPORTS
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Facebook } from '@ionic-native/facebook'
import { GooglePlus } from '@ionic-native/google-plus';
import { IonicStorageModule, Storage } from '@ionic/storage';
import { Geolocation } from '@ionic-native/geolocation';
// PAGE IMPORTS
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { InicioPage } from '../pages/inicio/inicio';
import { LoginPage } from '../pages/login/login';
import { RegistrarPage } from '../pages/registrar/registrar';
import { EsqueciSenhaPage } from '../pages/esqueci-senha/esqueci-senha';
import { CrudUsuarioPage } from '../pages/crud-usuario/crud-usuario';
// COMPONENT IMPORTS
// import { FormularioUsuarioComponent } from '../components/formulario-usuario/formulario-usuario';
// PROVIDERS IMPORTS
import { AuthProvider } from '../providers/auth/auth';
import { AuxiliarProvider } from '../providers/auxiliar/auxiliar';
import { UsuarioProvider } from '../providers/usuario/usuario';
export const firebaseConfig = {
apiKey: "xxx",
authDomain: "xxx",
databaseURL: xxx,
projectId: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx"
}
@NgModule({
declarations: [
MyApp,
HomePage,
InicioPage,
LoginPage,
RegistrarPage,
EsqueciSenhaPage,
CrudUsuarioPage
// FormularioUsuarioComponent
],
imports: [
HttpModule,
BrowserModule,
IonicModule.forRoot(MyApp, {
backButtonText: ''
// pageTransition: 'ios'
}),
IonicStorageModule.forRoot({name: '__tiptosaveDB'}),
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule,
AngularFireAuthModule,
TextMaskModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
InicioPage,
LoginPage,
RegistrarPage,
EsqueciSenhaPage,
CrudUsuarioPage
],
providers: [
Geolocation,
GooglePlus,
Facebook,
StatusBar,
SplashScreen,
{ provide: ErrorHandler, useClass: IonicErrorHandler },
{ provide: LOCALE_ID, useValue: 'pt-BR' },
AuthProvider,
AuxiliarProvider,
UsuarioProvider
]
})
export class AppModule {}
pages/registrar/registrar.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { RegistrarPage } from './registrar';
import { ComponentsModule } from '../../components/components.module'
@NgModule({
declarations: [RegistrarPage],
imports: [
ComponentsModule,
IonicPageModule.forChild(RegistrarPage)
],
})
export class RegistrarPageModule {}
pages/registrar/registrar.module.html
<ion-header class="bg-tiptosave">
<ion-navbar>
<ion-title>CRIAR CONTA</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div class="subtitulo regular tiptosave-cinza">Falta pouco para você aproveitar os melhores preços da sua região!</div>
<formulario-usuario></formulario-usuario>
</ion-content>
pages/crud-usuario/crud-usuario.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CrudUsuarioPage } from './crud-usuario';
import { ComponentsModule } from '../../components/components.module'
@NgModule({
declarations: [
CrudUsuarioPage,
],
imports: [
ComponentsModule,
IonicPageModule.forChild(CrudUsuarioPage)
],
})
export class CrudUsuarioPageModule {}
pages/crud-usuario/crud-usuario.module.html
<ion-header class="bg-tiptosave">
<ion-navbar>
<ion-title>MEUS DADOS</ion-title>
<ion-buttons end>
<button class="header-button" (click)="logout()">Logout</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<formulario-usuario></formulario-usuario>
</ion-content>