Custom Directive not loaded in Custom Component

Ionic Framework ionic-v3
1

Hello Guys,

i’m using two custom directives inside a custom component, but when implementing the component, the directives are not loaded when i open the page.

I have a custom component called SearchUIComponent which simply contains a HTML tree which i want to use in multiple pages. The elements in the HTML are accessing the two directives ScrollFlyoutDirective and ShowSearchUIDirective.

To use the component in multiple pages, i created a SearchUiComponent.module in which I declared and exported the two directives as well as the component. It looks like this:

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

import { ShowSearchUIDirective } from '../show-search-ui.directive';
import { ScrollFlyoutDirective } from '../scroll-flyout.directive';
import { SearchUiComponent } from './search-ui.component';


@NgModule({
    imports: [
        CommonModule,
        IonicModule,
    ],
    declarations: [
        ShowSearchUIDirective,
        ScrollFlyoutDirective,
        SearchUiComponent
    ],
    exports: [
        ShowSearchUIDirective,
        ScrollFlyoutDirective,
        SearchUiComponent
    ],
    entryComponents: [],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SearchUiModule { }

While it perfectly loads most of the HTML code from the SearchUIComponent into the websites, it does not implement the custom directives inside the HTML of the final site.

I import the SearchUiModule in every page where i want to use the object.

Can someone help me, why the directives are not loaded? When i use the HTMl code from the component directly inside the pages, the directives are loaded normally.