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

Question

I am new to ionic, it seems like a silly question but I need some help Using some simple button is throwing error. I am using ionic 4.0.

'ion-button' is not a known element: 1. If 'ion-button' is an Angular component, then verify that it is part of this module. 2. If 'ion-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

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

score 34 · Answer 1 · answered Oct 25 '19 at 05:52

34

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
  ],

})

answered Oct 25 '19 at 05:52

Raghuram Sadineni

593
4
14

3

this should be the answer – Dani Dec 14 '19 at 18:59
@VladimirDespotovic then install ionic cli again properly with "-g" – Raghuram Sadineni Jun 01 '20 at 04:48
When I do this, I get a different error: Declaration expected.ts(1146) – Chiwda Oct 16 '20 at 05:36

score 25 · Answer 2 · answered Jan 15 '19 at 17:26

25

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]
    })

answered Jan 15 '19 at 17:26

Gerry R

392
3
3

3

I think the other important thing to highlight is for people using lazy loading, you have to do this with each page's module. – The Sammie Mar 06 '19 at 11:10
this didn't work for me. I also put that in all modules, since I am using lazy loading. – Vladimir Despotovic May 31 '20 at 13:24
1

You should NEVER use "CUSTOM_ELEMENTS_SCHEMA", what it does is just telling angular to not complain about components it cannot identify – cuddlemeister Jul 07 '21 at 09:16
Since this is a question related to ionic and not angular, I agree with @cuddlemeister. You should use IonicModule instead. – Mario Shtika Aug 02 '21 at 09:33

score 24 · Accepted Answer · answered Jul 27 '18 at 05:23

24

Try this,

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

answered Jul 27 '18 at 05:23

Mangesh Daundkar

1,026
1
15
20

2

Thanks for the answer. It worked. I tried the docs provide in official link but somehow it did't worked. https://beta.ionicframework.com/docs/api/button/#usage This path also provides the docs, node_modules/ionic-angular/components/button/button.js – anubhab Aug 02 '18 at 18:46
All UI components documentation is available here https://ionicframework.com/docs/components/ – Mangesh Daundkar Aug 03 '18 at 04:38
17

You're simply not using Ionic 4 but still version 3 ;) – Mr.Floppy Dec 06 '18 at 16:08
How would I use ionic 4? What do I need to change. I have same problem as the OP. – Vladimir Despotovic May 31 '20 at 13:15

Russ · Answer 4 · 2018-08-20T16:42:27.877

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.

CUSTOM_ELEMENTS_SCHEMA allows Angular to incorporate custom elements. https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA — Lee Goddard, Nov 02 '18 at 08:38
I've got similar problem for ionic 4. I have to add CUSTOM_ELEMENTS_SCHEMA to both app.module.ts and components.module.ts in order to make it work. — William Wu, Nov 28 '18 at 03:32

score 4 · Answer 5 · answered Jan 27 '19 at 10:19

4

It seems you are not importing the ionicModule in the component module. So, Import the IonicModulein the module.ts, rest of the things will work fine

answered Jan 27 '19 at 10:19

ram12393

1,284
3
14
29

score 4 · Answer 6 · answered Aug 31 '21 at 12:50

4

Import your custom component in the parent module. for example in your app.module.ts:

declarations: [MyComponent],
exports: [
    PopoverComponent,
]

answered Aug 31 '21 at 12:50

Ghonche Yqr

305
1
10

Any Idea why this works, please? – solimanware Feb 02 '23 at 13:23

score 1 · Answer 7 · answered Aug 02 '18 at 11:41

1

yes try this

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

answered Aug 02 '18 at 11:41

Tanzeel U Rehman

103
2
14

5

While this code may answer the question, providing additional context regarding *how* and *why* it solves the problem would improve the answer's long-term value. – Alexander Aug 02 '18 at 13:10
Thanks for the answer. It worked. I tried the docs provide in official link but somehow it did't worked. https://beta.ionicframework.com/docs/api/button/#usage This path also provides the docs, node_modules/ionic-angular/components/button/button.js – anubhab Aug 02 '18 at 18:45

score 1 · Answer 8 · answered May 31 '21 at 18:00

In Ionic 5, I have a same problem when I build with --prod option.

Since *.module.ts file is not available in components in Ionic 5, I need to add shared module for components and then add CUSTOM_ELEMENTS_SCHEMA schema to that shared module.

ionic g module modules/shared

cat shared.module

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FooComponent } from '../../components/foo/foocomponent.component'; <== Add your components


@NgModule({
  declarations: [FooComponent], <== Add your components
  imports: [
    CommonModule
  ], 
  exports: [FooComponent], <== Add your components
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SharedModule { }

score 1 · Answer 9 · answered Apr 04 '22 at 20:19

I was having this problem in a library that I was building because I forgot to export the module of that was importing the IonicModule and exporting my component.

So, in my module was importing Ionic lib and exporting my component as below.

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';

import { MyComponent } from './my.component';

@NgModule({
  declarations: [
    MyComponent,
  ],
  imports: [
    CommonModule,
    IonicModule,
  ],
  exports: [
    MyComponent,
  ],
})
export class MyModule {
}

And in the public-api.ts file of my lib, I should have something like this

export { MyModule } from './lib/my.module'; // <--- exporting my module
export { MyComponent } from './lib/my.component';

score 0 · Answer 10 · answered Nov 20 '20 at 06:53

My issue was that there were errors prior to this error that seemed to cascade down. The error I had was some elements in the declarations that should have been in the providers. Also, one of these was marked private in the constructor when it should have been public.

@NgModule({
    imports: [
        IonicModule,
        CommonModule,
        FormsModule,
        RouterModule.forChild([{ path: '', component: DevicesPage }]),
        DevicesPageRoutingModule,
        TranslateModule.forChild()
    ],
    declarations: [DevicesPage  --> remove BLE, LocationAccuracy, DeviceManagerService  ],
    providers: [BLE, LocationAccuracy, DeviceManagerService]  <--Add
})

score -1 · Answer 11 · answered Sep 06 '18 at 16:34

I was stuck on this for a little while as well until I realized that the problem was I did not create the Ionic Angular project properly. you have to include --type=angular
https://github.com/ionic-team/ionic-cli

exp: ionic start myApp tabs --type=angular

score -1 · Answer 12 · 2019-02-25T06:16:14.883

-1

I faced similar issue after ionic 4, So I added the CUSTOM_ELEMENTS_SCHEMA in app.modules.ts. Then it worked fine

app.module.ts

  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    SpineRestServiceProvider,
    FingerprintAIO
      ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]

edited Feb 25 '19 at 06:16

answered Jan 27 '19 at 08:49

score -1 · Answer 13 · edited Sep 26 '20 at 19:05

-1

Should add in app.module.ts

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


  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] ==> add line**

edited Sep 26 '20 at 19:05

Makyen

31,849
12
86
121

answered Sep 26 '20 at 16:14

oscar

1

2

Please write your answer in English, since [Stack Overflow is an English language site.](//meta.stackexchange.com/q/13676) – Makyen Sep 26 '20 at 18:48

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

13 Answers13

Linked