title: Template parse errors: 'ion-col' is not a known element:
body: <p>I try to build ionic 4 apps. However, the new error keeps coming after trying to fix the previous one. 
  I already created a custom component after this error (<a href="https://stackoverflow.com/questions/56412491/how-to-load-other-page-inside-of-an-ionic-segment">How to load other page inside of an ionic segment?</a>)
  and then I got an error : addchilds Component is part of the declaration of 2 modules. I look up for that error and I created shared.module.ts and import it in app.module.ts. However I still get errors, and this time is</p>
  
  <pre><code>Uncaught Error: Template parse errors:
  ‘ion-col’ is not a known element:
  1. If 'ion-col' is an Angular component, then verify that it is part of this module.
  2. If 'ion-col' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
      &lt;div&gt;
          &lt;ion-row no-padding&gt;
            [ERROR -&gt;]&lt;ion-col size="6" offset="3"&gt;
              &lt;img [src]="image" alt="this is the image"/&gt;
            &lt;/io"): ng:///SharedModule/AddchildsComponent.html@3:10
  </code></pre>
  
  <p>unfortunately, this error also happens to ion-row, ion-button, ion-input. Here is the recent code.</p>
  
  <p>app.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { RouteReuseStrategy } from '@angular/router';
  import { FormsModule } from '@angular/forms';
  import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
  import { SplashScreen } from '@ionic-native/splash-screen/ngx';
  import { StatusBar } from '@ionic-native/status-bar/ngx';
  
  import { AppComponent } from './app.component';
  import { AppRoutingModule } from './app-routing.module';
  /**
  import firebaseConfig from './firebase';
  */
  import { ImagePicker } from '@ionic-native/image-picker/ngx';
  import { WebView } from '@ionic-native/ionic-webview/ngx';
  
  import { AngularFireModule } from '@angular/fire';
  import { environment } from '../environments/environment';
  import { AngularFirestoreModule, FirestoreSettingsToken } from '@angular/fire/firestore';
  
  import { AngularFireAuthModule } from '@angular/fire/auth';
  import { IonicSelectableModule } from 'ionic-selectable';
  import { CommonModule } from '@angular/common';
  import { SharedModule } from './shared/shared.module';
  
  
  @NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
      BrowserModule,
      IonicModule.forRoot(), 
      AppRoutingModule,
      AngularFireModule.initializeApp(environment. firebase),
      AngularFirestoreModule,
      AngularFireAuthModule,
      IonicSelectableModule,
      FormsModule,
      CommonModule,
      SharedModule
    ],
  
    providers: [
      StatusBar,
      SplashScreen,
      ImagePicker,
      WebView,
      { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
      { provide: FirestoreSettingsToken, useValue: {} }
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>app-routing.modules.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { AddchildsComponent } from '../app/pages/addchilds/addchilds.component';
  
  const routes: Routes = [
    { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
    { path: 'register', loadChildren: './register/register.module#RegisterPageModule' },
    { path: '', redirectTo: 'register', pathMatch: 'full' },
    { path: '', loadChildren: './pages/tabs/tabs.module#TabsPageModule' },
    { path: 'childdetails/:id', loadChildren: './pages/childdetails/childdetails.module#ChilddetailsPageModule' },
    { path: 'adddetails/:id', component: AddchildsComponent },
    { path: 'services', loadChildren: './services/services.module#ServicesPageModule' },
  ];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(routes)
    ],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>shared.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  
  import { CommonModule } from '@angular/common';
  
  import { AddchildsComponent } from '../pages/addchilds/addchilds.component';
  
  @NgModule({
  
  declarations: [ AddchildsComponent ],
  
  imports: [ CommonModule ],
  
  exports: [ AddchildsComponent ]
  
  })
  
  export class SharedModule { }
  </code></pre>
  
  <p>I really don’t know how to solve this, can anyone help me with this? Let me know if you need another code.</p>