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。经过这样的事情是transpiled：

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和系统。

显然，在0.20版本的系统中引入的更改会导致此问题。

关于如何解决这个问题的任何想法？

Answer 1

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

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

以下配置可以用来告诉SystemJS治疗角核心模块像ES模块命名出口：

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