CODEWITHSUNDEEP
angularionic2lazy-loading
Ross Rawlins
Ross Rawlins

Reputation: 667

Lazy load a directive into a component in a page IONIC 3

I have a page that uses a component and in the template of that component I call a directive. I have imported the directive into a shared module that is that added to the page.module set up. But the directive is not registered on the component. How can I get this to work.

PAGE -> COMPONENT -> DIRECTIVE

Shared module:

import { NgModule } from '@angular/core';
/** Directives **/
import { CallDirective } from '../directives/call/call';
import { NavigateDirective } from '../directives/navigate/navigate';
import { OpenLinkDirective } from '../directives/open-link/open-link';
import { ShareDirective } from '../directives/share/share';
import {UserBookingsDirective} from '../directives/user-bookings/user-bookings'
import {BookingCommentDirective} from '../directives/booking-comment/booking-comment'
/** Pipes **/
import { LimitToPipe } from './../pipes/limit-to/limit-to';
import { SearchPipe } from './../pipes/search/search';
@NgModule({
  declarations: [
  CallDirective,
    NavigateDirective,
    OpenLinkDirective,
    ShareDirective,
    UserBookingsDirective,
    BookingCommentDirective,
    LimitToPipe,
    SearchPipe
  ],
  exports:[
      CallDirective,
    NavigateDirective,
    OpenLinkDirective,
    ShareDirective,
    UserBookingsDirective,
    LimitToPipe,
    SearchPipe
  ],
  imports: [

  ],
})
export class SharedModule {}

Page Module:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { BookingsPage } from './bookings';
import { MomentModule } from 'angular2-moment';
import {SharedModule} from '../../app/shared.module';
/** Components **/
import {BookingItemComponent} from '../../components/booking-item/booking-item'
@NgModule({
  declarations: [
    BookingsPage,
    BookingItemComponent
  ],
  imports: [
    IonicPageModule.forChild(BookingsPage),
    MomentModule,
    SharedModule
  ],
})
export class BookingsPageModule {}

Upvotes: 1

Views: 944

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657416

Add BookingCommentDirective to exports: [...], to make it available to importing modules:

@NgModule({
  declarations: [
  CallDirective,
    NavigateDirective,
    OpenLinkDirective,
    ShareDirective,
    UserBookingsDirective,
    BookingCommentDirective,
    LimitToPipe,
    SearchPipe
  ],
  exports:[
    BookingCommentDirective, // <<== added
    CallDirective,
    NavigateDirective,
    OpenLinkDirective,
    ShareDirective,
    UserBookingsDirective,
    LimitToPipe,
    SearchPipe
  ],
  imports: [

  ],
})
export class SharedModule {}

Upvotes: 2

Related Questions