"moment" has no exported member 'default'
Solution 1
Try adding "allowSyntheticDefaultImports": true
to your tsconfig.json
under the "compilerOptions"
Solution 2
You seems to have trouble importing moment
As you can see in the documentation,
For Typescript 2.x try adding "moduleResolution": "node"
in compilerOptions
in your tsconfig.json
file and then use any of the below syntax:
import * as moment from 'moment';
import moment = require('moment');
PS: Make sure you have installed moment.js
with npm
:
npm install --save moment
Solution 3
Here you go with a complete solution to this problem:
First:
npm install moment --save
npm install @angular/material-moment-adapter
Second:
in your package.json under dependencies make sure you have the following code:
"@angular/material-moment-adapter": "^8.2.3",
Third:
in your tsconfig.json file under compileroptions add the following:
"allowSyntheticDefaultImports": true
Forth:
Modify your component with the following codes:
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import * as _moment from 'moment';
import { default as _rollupMoment } from 'moment';
const moment = _rollupMoment || _moment;
export const MY_FORMATS = {
parse: {
dateInput: 'LL',
},
display: {
dateInput: 'YYYY-MM-DD',
monthYearLabel: 'YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'YYYY',
},
};
@Component({
selector: 'app-newsfeedform',
templateUrl: './newsfeedform.component.html',
styleUrls: ['./newsfeedform.component.css'],
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
],
})
Fifth:
In your component.html file datepicker like bellow code:
<mat-form-field appearance="outline" fxFlex>
<input matInput [matDatepicker]="publishdate" placeholder="Publish Date"
formControlName="publishdate">
<mat-datepicker-toggle matSuffix [for]="publishdate"></mat-datepicker-toggle>
<mat-datepicker #publishdate></mat-datepicker>
</mat-form-field>
That is it you can customize Angular material datepicker any format you want just modify the format given above.
Solution 4
Add the following line in the tsconfig.json
file:
"allowSyntheticDefaultImports": true
Amit Golhar
Working as Senior Software Consultant / Technical Leader with Capgemini India Pvt Ltd. Former Senior Software Engineer with TechMahindra Pvt Ltd
Updated on November 11, 2020Comments
-
Amit Golhar over 3 years
I'm using
moment.js
to change the local date format for my application but getting the following error:"moment" has no exported member 'default' when importing the library.
Below is my code:
import {Inject, Injectable, Optional} from '@angular/core'; import {DateAdapter, MAT_DATE_LOCALE, MatDateFormats} from '@angular/material'; import * as _moment from 'moment'; import {default as _rollupMoment, Moment} from 'moment'; const moment = _rollupMoment || _moment;