Moment js 导入无法与 angular 一起正常工作

Question

我有这样的问题。我正在构建一个 angular 应用程序，我将使用 moment-range 和 moment js。

我已经在我需要的组件上导入了。这是 component.ts 个文件。它给了我这样的错误。

import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';
import {ReservationService} from "../shared/reservation.service";
import {Router} from "@angular/router";
import {Reservation} from "../shared/reservation";
import * as $ from 'jquery';
import { BootstrapAlertService, BootstrapAlert } from 'ngx-bootstrap-alert';


import Moment from 'moment';
import { extendMoment } from 'moment-range';

const moment = extendMoment(Moment);



export interface Time {
  value: string;
  viewValue: string;
}

export interface Year {
  value: string;
  viewValue: string;
}

export interface Role {
  value: string;
  viewValue: string;
}



export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

@Component({
  selector: 'app-makereservation',
  templateUrl: './makereservation.component.html',
  styleUrls: ['./makereservation.component.css'],
  providers: [ReservationService]
})
export class MakereservationComponent implements OnInit {

  public show = false;
  public reservation:Reservation=new Reservation();
  date:string;
  lab:string;
  from:string;
  to:string;
  name:string;
  email:string;
  role:string;
  year:string;
  reason:string;

  time: Time[] = [
    {value: '8.00', viewValue: '8.00'},
    {value: '9.00', viewValue: '9.00'},
    {value: '10.00', viewValue: '10.00'},
    {value: '11.00', viewValue: '11.00'},
    {value: '12.00', viewValue: '12.00'},
    {value: '13.00', viewValue: '13.00'},
    {value: '14.00', viewValue: '14.00'},
    {value: '15.00', viewValue: '15.00'},
    {value: '16.00', viewValue: '16.00'},
    {value: '17.00', viewValue: '17.00'}

  ];

  years: Year[] = [
    {value: '1st Year', viewValue: '1st Year'},
    {value: '2nd Year', viewValue: '2nd Year'},
    {value: '3rd Year', viewValue: '3rd Year'},
    {value: '4th Year', viewValue: '4th Year'},
  ];

  roles: Role[] = [
    {value: 'Student', viewValue: 'Student'},
    {value: 'Lecturer', viewValue: 'Lecturer'},
    {value: 'Professor', viewValue: 'Professor'},
    {value: 'Assistant lecturer', viewValue: 'Assistant lecturer'},
    {value: 'Instructor', viewValue: 'Instructor'},
  ];



  constructor(private router: Router, private reservationService: ReservationService,private bootstrapAlertService:BootstrapAlertService) { }

  ngOnInit() {

  }

  emailFormControl = new FormControl('', [
    Validators.required,
    Validators.email,
  ]);

  matcher = new MyErrorStateMatcher();

  getcurrentReservations(){
    if(this.lab && this.date) {
      this.reservation.date = this.date;
      this.reservation.lab = this.lab;
      this.reservationService.getcurrentReservations(this.reservation).subscribe((res: any) => {
        this.reservationService.reservations = res as Reservation[];

      });
    }
  }

  showYear(){
    if(this.role=="Student"){
      $( "#year" ).show();
    }
  }

  makereservation(){
    this.reservation.date=this.date;
    this.reservation.from=this.from;
    this.reservation.to=this.to;
    this.reservation.lab=this.lab;
    this.reservation.name=this.name;
    this.reservation.email=this.email;
    this.reservation.role=this.role;
    this.reservation.year=this.year;
    this.reservation.reason=this.reason;
    this.reservationService.makereservation(this.reservation).subscribe((res:any)=>{
      this.bootstrapAlertService.alert(new BootstrapAlert("Succesfully add a reservation!", "alert-success"));
      this.router.navigate(['/makereservation']);
    })

  }

}

这是浏览器控制台中显示的错误。

Uncaught TypeError: Cannot set property 'range' of undefined
    at Object.u [as extendMoment] (moment-range.js:1)
    at eval (makereservation.component.ts:14)
    at Object../src/app/makereservation/makereservation.component.ts (main.bundle.js:278)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (app.routing.ts:13)
    at Object../src/app/app.routing.ts (main.bundle.js:212)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (app.module.ts:3)
    at Object../src/app/app.module.ts (main.bundle.js:204)
    at __webpack_require__ (inline.bundle.js:55)

在 webStrom 中，它向我显示了一个错误，它在导入语句中强调了 Moment 一词，它说 node_modules/moment/moment 中没有默认导入。

有人可以帮我找到解决这个问题的方法吗？谢谢！

Answer 1

看起来这可能是 Angular 应用程序的修复：

import * as moment from 'moment';
import { extendMoment } from 'moment-range';

const { moment } = extendMoment(moment);

用法仍然是：

const range1 = moment.range('2018-01-20', '2018-01-27');

Answer 2

看起来这可能是 Angular 7+ 应用程序的修复：

import * as moment from 'moment';
import { extendMoment } from 'moment-range';

const { range } = extendMoment(moment);

用法仍然是：

const range1 = range('2018-01-20', '2018-01-27');

Moment js 导入无法与 angular 一起正常工作

Moment js import is not working correctly with angular

momentjs

angular

moment-range