Aurelia CLI & TypeScript & MomentJS

问题:

I'm not getting Aurelia (CLI) & TypeScript & MomentJS to work together. I've seen solutions for Aurelia & Moment problems but they don't use the Aurelia CLI.

Here's what I'm doing at the moment:

New Aurelia project using Aurelia CLI:

au new 

I select TypeScript instead of Babel.

Install moment

npm install moment --save

This installs Moment 2.4.1. I can find it (including the moment.d.ts) from node_modules.

Edit aurelia.json

I Add "moment" to "dependencies":

Use Moment in app.ts

Problems start when I now try to import Moment in app.ts.

import { moment } from 'moment';

This gives error: "Module "o:/dev/spikes/amoment/node_modules/moment/moment" has no exported member 'moment'

Changing the casing fixes this error:

import { Moment } from 'moment';

But at this point I'm totally stuck. When trying to use moment (or Moment), I always get error "Cannot find name 'moment'. Here's the current app.ts which is giving the "Cannot find name 'moment'" -error:

import { Moment } from 'moment';

export class App {
  message = 'Hello World!';

  hello() : string {
    return moment.format();
  }
}

The import seems to be the problem. Any ideas how to get around this?

Update

After fixing the app.ts to look like the following, the thing now compiles. But it gives "TypeError: Cannot read property 'format' of undefined" when run.

import { Moment } from 'moment';
import { autoinject } from "aurelia-framework";

export class App {
  message: string;
  moment: Moment;

  constructor(moment: Moment) {
    this.moment = moment;
    this.message = this.moment.format('MMMM Do YYYY, h:mm:ss a')
  }
}

Update

Based on the last error, it seems that autoinject wasn't working without @autoinject. So added that and the error changes: "TypeError: moment.format is not a function".

import { Moment } from 'moment';
import { autoinject } from "aurelia-framework";

@autoinject
export class App {
  message: string;
  moment: Moment;

  constructor(moment: Moment) {
    this.message = moment.format();
  }
}

回答1:

MomentJS is a global module, which exports a moment variable only. Other interface definitions in the d.ts file, e.g. interface Moment, won't be exported for real. Those are there for the TypeScript compiler and intellisense.

That's why you've experienced TS compiler and TypeError issues above. You may've tricked the compiler with autoinject but not the browser.

moment's definition file:

declare module 'moment' {
    var moment: moment.MomentStatic;
    export = moment;
}

In order to get it working, use an import statement like this: [moment docs]

import * as moment from 'moment';

After that, the moment variable becomes available and you can use it as you normally would.

Usage in your class:

import * as moment from 'moment';

export class App {
    message = 'Hello World!';

    constructor(){
    }

    hello() : string {
        return moment().format();
    }
}

回答2:

Update

This doesn't actually work. Not the thing compiles but I'm getting "TypeError: Cannot read property 'format' of undefined" when running the app.

Original

Ah, stupid me. I just had to inject Moment into the class. Obviously.

So here's the working version:

import { Moment } from 'moment';
import { autoinject } from "aurelia-framework";

export class App {
  message = 'Hello World!';
  moment: Moment;

  constructor(moment : Moment){
    this.moment = moment;
  }

  hello() : string {
    return this.moment.format();
  }
}