Custom components missing ionic directives

Ionic Framework ionic-v3
1

I am having a problem when I created a button in a custom directive:

<button ion-button round>Replay</button>

It seems that the component can’t see the ionic directives ion-button and round - so the button appears as a standard html button.

I have looked on the web and it seems to be a problem with the supplied styles not working in components.

kensodemann commented on 14 Dec 2017
Looking at the code that handles this in the upcoming @ionic/core release (which will be part of Ionic v4) this should no longer be an issue at that time. I will mark this as something to double check after the initial v4 release is complete.

That was over three months ago and who know’s when v4 will be released.

2

Am I the only person who is having problems with custom components?

3

Have you tried applying Ionic’s styles directly to the control?

<button class="...">Replay</button>
4

I suppose I could - but unfortunately the problem goes deeper - I can’t even use Ionic standard components as it reports an error:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
‘ion-list-header’ is not a known element:

The statement from Ionic that it will be fixed in v4 is not really acceptable - basically they are saying Ionic 3 components do not use Ionic features, and are not going to fix it.

5

Just did a search for the above error and found this post which fixed the problem:

The solution was posed by gabfiocchi (reproduced here)

Go to components.module.ts.

You need import the Ionic module.
import { IonicModule } from 'ionic-angular'
Add on ngModule imports.


@NgModule({
  declarations: [
    ...
  ],
  imports: [
    IonicModule
  ],
  exports: [
    ...
  ]
})
1 Like
6

For example:

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

import { CommonModule } from '@angular/common';

import { IonicModule } from 'ionic-angular';

import { MediaComponent } from '@shared/media/media.component';
import { RatingComponent } from '@shared/rating/rating.component';

@NgModule({
  imports: [ CommonModule, IonicModule ],
  exports: [ MediaComponent, RatingComponent ],
  declarations: [ MediaComponent, RatingComponent ],
  providers: [],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class SharedModule {}

As per : https://angular.io/guide/styleguide#shared-feature-module

1 Like
7

I wonder what does the CommonModule provides?

and I have never used the schemas call - what does it do?

schemas: [
CUSTOM_ELEMENTS_SCHEMA
]

8

See: https://stackoverflow.com/questions/49662864/commonmodule-vs-browsermodule-in-angular

9

Thanks @robinyo using the CommonModule seems good.

Do you think we should send a post to kensodemann at Ionic so could provide a fix for Ionic 3 - as he gives the impression it is impossible to fix?

10

You can just at->kensodemann I think?

11

OK - comment posted - lets hope it does some good!