我正在使用 Webpack 并尝试使用 angular2。
这就是为什么我编辑了我所有的东西以便能够编译打字稿。我的计划是像这里一样,将 typescript 编译为 ES6,然后使用 Babel 将其转换为 ES5。
这就是我的小应用程序的外观:
import {Component} from 'angular2/core';
@Component({
selector: 'angular-2-component',
template: '<h1>Hello World!</h1>'
})
export class angular2Component {
}
那么这就是我的 tsconfig.json 的样子:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"typeRoots": [
"../node_modules/@types"
],
"types" : []
},
"exclude": [
"node_modules"
]
}
这就是 webpack 配置中的 loader 配置:
{
test: /\.ts(x?)$/,
loader: 'babel-loader!ts-loader'
}
我还尝试使用 compilerOptions,将目标设置为 es5,将模块设置为 es2015,等等……但它不起作用。我总是遇到同样的错误:Unexpected token import
,指向 angular2Component-App 的第一行。所以它不知道导入。此外,在浏览器中,您可以看到只有 @Component 部分似乎被正确编译/转译,然后看起来像这样:
export let angular2Component = class angular2Component {};
angular2Component = __decorate([Component({
selector: 'angular-2-component',
template: '<h1>Hello World!</h1>'
}), __metadata('design:paramtypes', [])], angular2Component);
但是写在上面,仍然有同一行import {Component} from 'angular2/core';
,根本没有编译/转译。
有没有人有想法,可能是什么问题?