Ionic button showing 'ion-button' is not a known element

In order to avoid that error message:

1. Import CUSTOM_ELEMENTS_SCHEMA into app.modules.ts:

    import { ErrorHandler, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

2. Add schema: [CUSTOM_ELEMENTS_SCHEMA] to app.modules.ts as below:

    @NgModule({
      declarations: [
        MyApp,
        HomePage
      ],
      imports: [
        BrowserModule,
        HttpClientModule,
        MomentModule,
        IonicModule.forRoot(MyApp),
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        HomePage
      ],
      providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler},
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })

I've run into this too. Your solution is not the best one as the new Ionic 4 way is to use <ion-button> (https://beta.ionicframework.com/docs/components/#button).

It does work for me fine in a page I have under /src/app/my-page/my-page.html, but when I put it in /src/shared/components/my-comp/my-comp.html it gives the error. The odd thing is that I have other Ionic elements in the same page <ion-grid>, <ion-row> and <ion-col>. Also, this code used to be in my-page.html where it worked without error.

FYI, MyComponent is in components.module.ts as a declaration and an export. Not sure yet what I am missing...

UPDATE 1: Neither moving the components directory under src nor under src/app made any difference.

UPDATE 2: This is my environment:

   ionic (Ionic CLI)          : 4.0.6
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.2
   @angular-devkit/schematics : 0.7.2
   @angular/cli               : 6.1.2
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

UPDATE 3: Still broken in this environment:

   ionic (Ionic CLI)          : 4.1.0
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.2
   @angular-devkit/schematics : 0.7.2
   @angular/cli               : 6.1.2
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.5

UPDATE 4: After much trial and error, I had to add schemas: [CUSTOM_ELEMENTS_SCHEMA] to my components.module.ts file. I was able to leave the directory structure as-is. I'm not sure why this is required for this scenario, though.

Try this,

<button ion-button color="primary">Primary</button>

I think the solution is importing Ionic module in the respective module imports

import { IonicModule } from '@ionic/angular';  <--add this line
@NgModule({
imports: [
    CommonModule,
    FormsModule,
    IonicModule, <-- add this line
  ],

})