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

Question

我正在尝试使用所有新工具 (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 版系统中引入的更改导致了此问题。

关于如何处理这个问题有什么想法吗？

Answer 1

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

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

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

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

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

Issues with ES6 import [SystemJS 0.20.9 + TypeScript + Angular 2 + jspm 0.17.0-beta.40]

systemjs

jspm

typescript2.0

angular