vlio20 vlio20 - 1 month ago 21
AngularJS Question

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

Answer

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 {}
Comments