How to export const with NgModule
10,596
NgModule can't exports constants but you can provides the values with InjectionToken. Find more about InjectionToken here.
import { ModuleWithProviders, NgModule, InjectionToken } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DatepickerDirective, TIME_FORMAT, DATETIME_FORMAT, DATE_FORMAT } from './datepicker.directive';
export interface IDatepickerFormats {
TIME_FORMAT: string;
DATETIME_FORMAT: string;
DATE_FORMAT: string;
}
export const DATEPICKER_FORMATS = new InjectionToken<IDatepickerFormats>('datepicker.formats');
@NgModule({
imports: [CommonModule],
exports: [DatepickerDirective],
declarations: [DatepickerDirective]
})
export class DatepickerModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: DatepickerModule,
providers: [
{
provide: DATEPICKER_FORMATS,
useValue: {TIME_FORMAT, DATETIME_FORMAT, DATE_FORMAT}
}
]
};
}
}
Now, every module whose importing Datepicker module can inject and using these constants in his declared components. For example:
import { Component, Inject} from '@angular/core';
import { DATEPICKER_FORMATS, IDatepickerFormats } from './datepicker';
@Component({
selector: 'app-example',
templateUrl: './app-example.component.html',
styleUrls: ['./app-example.component.scss']
})
export class AppExampleComponent {
private DATE_FORMAT: string;
private TIME_FORMAT: string;
private DATETIME_FORMAT: string;
constructor(@Inject(DATEPICKER_FORMATS) private datePickerFormats: IDatepickerFormats) {
this.DATE_FORMAT = this.datePickerFormats.DATE_FORMAT;
this.TIME_FORMAT = this.datePickerFormats.TIME_FORMAT;
this.DATETIME_FORMAT = this.datePickerFormats.DATETIME_FORMAT;
}
}
Related videos on Youtube
Author by
Slaven Tomac
Angular, Javascript, CSS, HTML, NodeJS [email protected]
Updated on June 04, 2022Comments
-
Slaven Tomac almost 2 years
I have one constant which should be usable by other modules importing mine.
I have Datepicker directive which has defined date formats constants (I have it like this so someone using my directive can use these constants):
export const DATETIME_FORMAT = 'DD/MM/YYYY HH:mm:ss'; export const DATE_FORMAT = 'DD/MM/YYYY'; export const TIME_FORMAT = 'DD/MM/YYYY';
And NgModule for exporting them further. This module is built and then used in other projects/modules.
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { DatepickerDirective, TIME_FORMAT, DATETIME_FORMAT, DATE_FORMAT } from './datepicker.directive'; @NgModule({ imports: [ CommonModule ], exports: [ DatepickerDirective, DATE_FORMAT, DATETIME_FORMAT, TIME_FORMAT ], declarations: [ DatepickerDirective ] }) export class DatepickerModule { }
But when trying to build it I get error:
ERROR in src/app/datepicker/datepicker.module.ts(5,11): error TS2345: Argument of type '{ imports: (typeof CommonModule)[]; exports: (string | typeof DatepickerDirective)[]; declara...' is not assignable to parameter of type 'NgModule'. Types of property 'exports' are incompatible. Type '(string | typeof DatepickerDirective)[]' is not assignable to type '(any[] | Type<any>)[]'. Type 'string | typeof DatepickerDirective' is not assignable to type 'any[] | Type<any>'. Type 'string' is not assignable to type 'any[] | Type<any>'.
-
rrd over 6 yearsPut it in the environments file.
-
Gianluca Paris over 6 yearsexport the constants in datepickerdirective
-