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 } 
}