Import and Export Customized Components

1. create a component with the command below

   ionic g component common-A

2. import CommonModule into component.module.ts

   import { CommonModule } from '@angular/common';
   ...
   @NgModule({
       ...
       imports: [
           CommonModule
       ],
       ...
   })

3.  import ComponentsModule from component.module.ts into app.module.ts

   import { ComponentsModule } from '../../components/components.module';
   ...
   @NgModule({
       ...
       imports: [
           ...
           ComponentsModule,
           ...
       ]
   })

4.   Then the errors are coming. After you finished all the steps up above, you can use the component in the root page freely but error in other pages. The error goes like this below :

   Uncaught (in promise): Error: Template parse errors: 
   'fa-icon' is not a known element: 
   1. If 'fa-icon' is an Angular component, then verify that it is part of this module. 
   2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

   ​​I have only found a way to solve it so far: 
   1. import the common-A component in pageName.module.ts file of the page you want to use the component

      import { ComponentsModule } from '../../components/components.module';
      ...
      @NgModule({
          imports: [
              ...
              ComponentsModule,
              ...
          ]
      })

   2. I think there should be a way in a higher level way to declare and import the common components. About to figure it out in days after.