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]

问题描述

我正在尝试使用所有新工具(jspm 0.17.0-beta.40)设置Angular 2应用程序.

I am trying to set up Angular 2 application with all the new tools (jspm 0.17.0-beta.40).

我正在编译到System模块.这是tsconfig.json:

I am transpiling to System module. Here's the tsconfig.json:

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

问题出在ES6 import上.进行类似这样的编译后:

The issue is with ES6 import. After something like this is transpiled:

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

使用此方法将是:

core_1.Component

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

But unfortunately, the browser running the app can't recognize it.

"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时会引发相同类型的错误.

The same type of error is raised when I use ViewEncapsulation.

这是在编译为System模块时的情况.

This is when transpiling to System modules.

使用CommonJS模块进行编译有效(应用程序通过了此步骤).

Transpiling with CommonJS module works (the app passes this step).

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

I can't work with that though, because I use

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

具有以下meta配置:

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

哪个失败并显示错误

Error: No template specified for component AppComponent

---

我尝试过切换JSPM和System的版本.

---

I have tried switching versions of JSPM and System.

显然，在0.20版本的System中引入的更改会导致这种情况.

Apparently, the changes introduced in 0.20 version of System cause this.

关于如何解决此问题的任何想法?

Any ideas on how to approach this?

推荐答案

是的，这是SystemJS 0.20中的更改，其中不再支持非ES模块的命名导出，以便与Interop在NodeJS之间的工作方式保持一致. ES模块和CommonJS，它们仅提供与默认导入格式-import module from 'module'(等效于import {default as module} from 'module')的兼容性.

Yes this was a change in SystemJS 0.20 where named exports for non-ES modules are no longer supported, in order to align with how interop will work in NodeJS between ES modules and CommonJS, which is to only provide compatibility with the default import form - import module from 'module' (equivalent to import {default as module} from 'module').

由于Angular是从不是ES模块本身的UMD bulid中加载的，因此不支持指定的导出.

Since Angular is being loaded from a UMD bulid which is not an ES module itself, the named exports aren't being supported.

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

The following configuration can be used to tell SystemJS to treat the Angular core module like an ES module with named exports:

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

这篇关于ES6导入问题[SystemJS 0.20.9 + TypeScript + Angular 2 + jspm 0.17.0-beta.40]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！