CODEWITHSUNDEEP
angularjsangular
vlio20
vlio20

Reputation: 9295

Angular2 - using 3rd parety module's component

I created a module which has a directive in it (ObDatePickerModule).
Also I created a project which has ObDatePickerModule in it's dependencies (under dependencies in package.json).
Next I am importing Module A in my project's module: 

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {ObDatePickerModule} from 'ng2-date-picker';

import {AppComponent} from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ObDatePickerModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Here is the app.component of the project: 

import {Component} from '@angular/core';
import {ObDayPickerComponent} from 'ng2-date-picker';
import * as moment from 'moment';

@Component({
  selector: 'app-root',
  template: '<ob-day-picker [(ngModel)]="date"></ob-day-picker>',
  styleUrls: ['./app.component.css'],
  entryComponents: [ObDayPickerComponent]
})
export class AppComponent {
  date = moment();
}

Here is the error that I am getting: 

main.bundle.js:66421 Unhandled Promise rejection: Template parse errors:
'ob-day-picker' is not a known element:
1. If 'ob-day-picker' is an Angular component, then verify that it is part of this module.
2. If 'ob-day-picker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ob-day-picker [(ngModel)]="date"></ob-day-picker>

I checked that the component name is really ob-day-picker.

I have also consoled log both the module and the ObDayPickerComponent imports and it seems that the imports are correct.

What did I miss?

Checkout the module repo:
https://bitbucket.org/vlio20/ng2-date-picker

The project can be found here:
https://github.com/vlio20/3rd-ng2-module

Upvotes: 0

Views: 151

Answers (1)

yurzui
yurzui

Reputation: 214047

If you want to use ObDayPickerComponent outside of ObDatePickerModule you have to export it like:

@NgModule({
  declarations: [
    AppComponent,
    ObDayPickerComponent,
    ObCalendarComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  exports: [ObDayPickerComponent], // this line
  bootstrap: [AppComponent]
})

export class ObDatePickerModule {}

Upvotes: 1

Related Questions