ES6导入存在问题 [SystemJS 0.20.9 + TypeScript + Angular 2 + jspm 0.17.0-beta.40]

Question

ES6导入存在问题 [SystemJS 0.20.9 + TypeScript + Angular 2 + jspm 0.17.0-beta.40]

3

我正在尝试使用所有新工具（jspm 0.17.0-beta.40）搭建Angular 2应用程序。

我将转换为System模块。这是我的tsconfig.json文件：

{
    "compileOnSave": false,
    "compilerOptions": {
        "target": "ES5",
        "module": "System",
        "moduleResolution": "Node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitAny": true,
        "rootDir": "../"
      }
}

问题出在 ES6 的 import 上。在类似这样的代码被转译后：

import { Component, ViewEncapsulation, AfterViewInit } from '@angular/core';

这个的用途是：

core_1.Component

但不幸的是，运行该应用程序的浏览器无法识别它。

"TypeError: core_1.Component is not a function
at Object.execute (...app/app.component.js:32:24)
at E (...jspm_packages/system.js:4:7541)
at S (...jspm_packages/system.js:4:6746)
at S (...jspm_packages/system.js:4:6646)
at S (...jspm_packages/system.js:4:6646)
at x (...jspm_packages/system.js:4:6102)
at ...jspm_packages/system.js:5:6612"

当我使用ViewEncapsulation时，会出现同样类型的错误。

这是在转换为System模块时发生的。

使用CommonJS模块进行转换可以正常工作（应用程序通过了此步骤）。

但我不能使用它，因为我使用了

import html from './app.component.html';

使用以下meta配置：

meta: {
  "*.html": {
     "loader": "text"
  },
}

这个操作失败并显示以下错误：

Error: No template specified for component AppComponent

我已经尝试切换JSPM和System的版本了。

显然，0.20版System引入的更改导致了这个问题。

有什么建议可以解决这个问题吗？

- Dimdum

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- guybedford · Accepted Answer

是的，这是SystemJS 0.20中的一项更改，不再支持非ES模块的命名导出，以与NodeJS中ES模块和CommonJS之间的互操作方式保持一致，即仅提供与默认导入形式 - import module from 'module'（等同于import {default as module} from 'module'）的兼容性。

由于Angular是从UMD构建中加载的，它本身不是ES模块，因此不支持命名导出。

可以使用以下配置告诉SystemJS将Angular核心模块视为具有命名导出的ES模块：

meta: {
  '@angular/core': { esModule: true }
}