Question

我试图为另一个SO问题创建一个演示，首先使用angular-cli，然后使用punker。

我在两个版本的import中遇到了奇怪的行为差异。

问题出在以下代码的第二个import中：

moment.service.ts

import { Injectable } from '@angular/core';

// Following work in plunker setup
import m from 'moment';
// Following work in angular-cli setup
//import * as m from 'moment';

@Injectable()
export class MomentService {
  moment = m;
}

在angular-cli代码中，我必须使用：

import * as m from 'moment';

如果我使用punker设置，无论是在punker中还是在本地服务器上运行，我都必须关注它，否则它将无法在浏览器中运行：

import m from 'moment';

任何人都可以解释行为的差异吗？

Plunker：Link

Github：plunker code local version（包括一个本地服务的server.js）

Github：angular-cli version

Answer 1

TL：DR每个演示都使用不同的模块格式。在plunker中，整个模块被视为默认导出。在cli项目中，没有默认导出。

每个演示都使用不同的模块格式。 plunker没有指定格式，我不确定systemjs默认使用什么格式，但我不相信它是ES6。 CLI项目使用ES6模块格式。

如果您查看here，您将看到模块格式为AMD，commonjs或global时，它会将整个模块导出为默认导出。对于ES6模块，这不会发生，您需要明确定义默认导出，而momentjs不会。

因此，在plunker演示中，import m from 'moment'有效，因为您的配置告诉systemjs和typescript将整个模块视为默认导出（如果没有）。由于CLI项目中的配置，模块不会被视为默认导出，因此您必须使用import * as m from 'moment'来表示从命名空间'm'下方导入所有已命名的导出。

Here is a discussion on TypeScript's repo regarding this

奇怪的打字稿/ angular2导入行为

1 个答案: