Использование момента .js в приложении Angular 2 typescript

Я пытаюсь использовать library.js-библиотеку внутри приложения Angular 2 Typescript. Даже после прочтения ответа на этот вопрос я не могу заставить его работать.

Это то, что я сделал до сих пор:

  • Я установил moment.js с помощью npm, поэтому я могу найти библиотеку под node_modules/moment/moment.js

  • Я сконфигурировал System.js для извлечения библиотеки минут:

    System.config({
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      moment: {
        main: 'moment.js',
        type: 'cjs',
        defaultExtension: 'js'
      }
    },
    map: {
      moment: 'node_modules/moment'
    }
});
  • Я установил тики Typescript с typings install moment-node --ambient --save и typings install moment --ambient --save, поэтому я вижу правильные пишущие черты внутри typings/main/ambient/moment- node и typings/main/ambient/moment

Теперь, если в моем коде я использую import * as moment from 'moment'; Typescript, компиляция выполняется гладко, и я вижу правильное предложение внутри редактора Atom (если я начинаю с moment()., я могу видеть year(), month() и т.д..). Однако, если я запустил свой код внутри браузера, он дает ошибку, говоря, что "момент не является функцией" (отладка я вижу, что момент - это объект с большим количеством методов).

Если я пишу import moment from 'moment';, код в браузере отлично работает, однако компиляция Typescript не выполняется, поскольку "момент модуля не имеет экспорта по умолчанию", и я не могу получить никаких предложений от Atom при написании кода.

Что я делаю неправильно? Какой правильный способ импортировать файл moment.js(и любую библиотеку без Typescript) внутри приложения Angular 2 Typescript?

Ответы

Ответ 1

import * as moment_ from 'moment';
const moment:moment.MomentStatic = (<any>moment_)['default'] || moment_;

Ответ 2

Как уже отмечалось, корабли с более ранними моделями теперь имеют свои собственные модели. И @ angular/cli также изменились. Обновленный ответ, чтобы отразить это.

npm я - период срабатывания

import * as moment from 'moment';

export class SomeClass implements OnInit {

  date: moment.Moment;

  ngOnInit() {
    this.date = moment();
  }

}

- это все, что необходимо для @ angular/cli.

Ниже мой старый устаревший ответ.

С angular -cli: Таким образом, вы получаете Intellisense в VsCode

edit → angular -cli-build.js

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      ...

      'moment/min/**', // add this line

      ...
    ]
  });
};

edit → system-config.ts

const map: any = {
  moment: 'vendor/moment/min/moment.min.js' // add this line
};

В вашем компоненте:

import * as moment from 'moment';

...
// example of usage
dates: moment.Moment[] = [];

ngOnInit() {
  let date = moment();
  date.add(2, 'days');
  this.dates.push(date);
}

Ответ 3

Также я нашел следующее: Установите Moment.js с помощью NPM:

npm install moment

Добавьте его в конфигурацию SystemJS:

map: {
  'angular2': 'node_modules/angular2',
  'rxjs': 'node_modules/rxjs',
  'moment': 'node_modules/moment/moment'
}

Вам также нужен интерфейс: tsd install moment --save а затем добавьте:

/// <reference path="typings/moment/moment.d.ts" />
import * as moment from 'moment';

Ответ 4

Из вашего index.html add

 <script src="../node_modules/moment/moment.js"></script>

В вашем компоненте используйте:

declare var moment: any;
...

this.startDate = moment().subtract(15, 'days').format('DD-MM-YYYY');
this.endDate = moment().format('DD-MM-YYYY');

Ответ 5

При импорте модуля с использованием синтаксиса пространства имен для сбора экспорта на один объект, как и в import * as moment from 'moment', вы не импортируете фактический момент объекта, который экспортирует модуль, а скорее все его члены. Вы теряете подпись вызова. Чтобы решить эту проблему, в проекте SystemJS + TypeScript укажите либо значение "system" для модуля, либо значение true для allowSyntheticDefaultImports, передав их компилятору TypeScript, предпочтительно через файл tsconfig.json. Затем импортируйте момент так

import moment from 'moment';

и все будет работать.