Ionic button showing 'ion-button' is not a known element
In order to avoid that error message:
- Import CUSTOM_ELEMENTS_SCHEMA into app.modules.ts:
import { ErrorHandler, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
- 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
],
})