Visual Studio angular material 设计教程中的 moment.js 示例代码错误 TS2305

Question

我尝试了 https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings 中的以下代码（见下文）。它符合要求，我可以运行代码，但我在 visual studio 代码中收到错误消息，提示“默认值不是 moment 的导出成员”。我正在使用 Visual Studio 代码 1.24.1

import { default as _rollupMoment} from 'moment';

src/app/component.ts(20,10) 中的错误：错误 TS2305：模块“../frontend/node_modules/moment/moment”'没有导出成员 'default'。

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MAT_MOMENT_DATE_FORMATS, MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

// Depending on whether rollup is used, moment needs to be imported differently.
// Since Moment.js doesn't have a default export, we normally need to import using the `* as`
// syntax. However, rollup creates a synthetic default module and we thus need to import it using
// the `default as` syntax.
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import {default as _rollupMoment} from 'moment';

const moment = _rollupMoment || _moment;

/** @title Datepicker that uses Moment.js dates */
@Component({
  selector: 'datepicker-moment-example',
  templateUrl: 'datepicker-moment-example.html',
  styleUrls: ['datepicker-moment-example.css'],
  providers: [
    // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
    // `MatMomentDateModule` in your applications root module. We provide it at the component level
    // here, due to limitations of our example generation script.
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
  ],
})
export class DatepickerMomentExample {
  // Datepicker takes `Moment` objects instead of `Date` objects.
  date = new FormControl(moment([2017, 0, 1]));
}

Answer 1

我暂时保留了 Importing moment into Angular gives error 中建议的第二个导入语句。现在可以使用了...

Answer 2

刚才把第二条注释掉如下：

import * as _moment from 'moment';
// import { default as _rollupMoment} from 'moment';
// const moment = _rollupMoment || _moment;
const moment = _moment;

Answer 3

我有同样的错误。然后我像这样更改我的代码：

import * as moment from 'moment';
type Moment = moment.Moment;
const moment1 = moment;

export class AppComponent {
date = new FormControl(moment1());
}

而且有效。

希望对您有所帮助。

Answer 4

注意：如果您在导入 moment 时遇到问题，请尝试添加 "allowSyntheticDefaultImports"：编译器选项为真在您的 tsconfig.json 文件中，然后使用语法

https://momentjs.com/docs/#/use-it/typescript/

它对我有用:)

Answer 5

我和 Diff 有同样的错误，没有导出成员 'Diff'。所以，我必须用下一种方式来解决它。希望对smb有帮助

import moment from 'moment';
import Diff = moment.unitOfTime.Diff;

Visual Studio angular material 设计教程中的 moment.js 示例代码错误 TS2305

Visual Studio Code error TS2305 with moment.js example from angular material design tutorial

momentjs

visual-studio-code

angular-material2

angular