How to import component in app.module.ts ionic 3 / angular

Question

I have created a component named common-header in ionic 3

Now I want to include this at top of other pages like in the home page, about page etc. but my problem is that i have to include it on my each page then its working fine like i did in below given code :

//login-option-module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginOptionPage } from './login-option';
import { ComponentsModule } from '../../components/components.module';

@NgModule({
  declarations: [
    LoginOptionPage,
  ],
  imports: [
    ComponentsModule,
    IonicPageModule.forChild(LoginOptionPage),
  ],
  exports: [
    ComponentsModule
 ]
})
export class LoginOptionPageModule {}

But I want to import this "common-header" component from my app.module.ts. so that it will automatically present in my all pages

So I import this in my app.module.ts file look below codes:

//app.module.ts

import { HomePage } from '../pages/home/home';
import { ServiceProvider } from '../providers/service/service';
import { Tab1Page } from '../pages/tab1/tab1';
import { Tab2Page } from '../pages/tab2/tab2';
import { CandidateProvider } from '../providers/candidate/candidate';
import { ComponentsModule } from '../components/components.module';


@NgModule({
  declarations: [
    MyApp,
    HomePage,

  ],
  imports: [
    BrowserModule,HttpModule,ComponentsModule,
    IonicModule.forRoot(MyApp),

  ],
  exports: [
    ComponentsModule
 ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [ ServiceProvider,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    CandidateProvider

  ]
})
export class AppModule {}

and removed below codes from my login-option-module.ts

import { ComponentsModule } from '../../components/components.module'; imports: [ ComponentsModule ], exports: [ ComponentsModule ]

after doing this i am getting below error:

Error: Uncaught (in promise): Error: Template parse errors:
'common-header' is not a known element:
1. If 'common-header' is an Angular component, then verify that it is part of this module.
2. If 'common-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<ion-header>
    [ERROR ->]<common-header ></common-header>
  </ion-header>

"): ng:///LoginOptionPageModule/LoginOptionPage.html@1:4

below is my other codes:

//common-header.html

<ion-navbar hideBackButton>
    <nav>
      <img class="logo left" src="assets/imgs/logo-icon-rev.png" />
      <h1 class="slogan left">hoteljobber.com</h1>
    </nav>
    <a style="color:aqua; float:right" on-click="homeClick()">Back to home</a>
  </ion-navbar>

//common-header.ts

import { Component,Input  } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../../pages/home/home';


@Component({
  selector: 'common-header',
  templateUrl: 'common-header.html'
})

  export class CommonHeaderComponent {
    header_data: any;

  constructor(public navCtrl: NavController) {}
  @Input()
  set header(header_data: any) {
    this.header_data=header_data;
  }
  get header() {
    return this.header_data;
  }
  homeClick() {
    this.navCtrl.setRoot(HomePage);
  }
}

//login-option.html

 <ion-header>
    <common-header ></common-header>
  </ion-header>


<ion-content class="login-content" >
    page login
  </ion-content>

Is there any way to solve my problem i am searching it since 3 days but did't find any solution till yet.

Answer 1

Why do you use a ComponentsModule? A module containing components is a so called feature module. If you need these components in multiple modules, it's also called shared module. Your LoginOptionModule seems to be a good description for a feature. But what about ComponentsModule? Components doesn't sound like a feature. It's just a module to clean up your structure, I think. But do you think it's necessary or useful in order to have your apps structure cleaned up?

Think about each component you declare in it whether it wouldn't be better to declare in the AppModule or in the LoginOptionModule. Is the component required in both modules?

If it's shared or you are definitely willing to keep the ComponentsModule you should be able to import it in both, the AppModule and LoginOptionModule, without exporting it in one of the modules. In the ComponentsModule itself declare and export your components.

Hopefully this helps fixing your issues. Cheers!

Some style advises

• Rename login-option-module.ts to login-option.module.ts.
• In your AppModule and all other modules give each declaration-, imports-, etc. array entry a new line.
• Name your services always usefulservicename.service.ts

In conclusion name all angular files as name.service.ts, name.module.ts, name.pipe.ts, etc. This results in a very clear app structure.

Your code is hard to read. Next time you could at least try using syntax highlighting by placing one of the following in front of your code without indentation followed by an empty line.

<!-- language: lang-html -->
<!-- language: javascript -->

Also think about what is important for solving your problem. The template files definitely aren't.