My current project involves using Webpack and integrating angular2 into the mix.
To achieve this, I made adjustments to my setup in order to compile TypeScript. Following a resource I found here, my plan was to first compile TypeScript to ES6 and then transpile it to ES5 using Babel.
This is what my simple App structure looks like:
import {Component} from 'angular2/core';
@Component({
selector: 'angular-2-component',
template: '<h1>Hello World!</h1>'
})
export class angular2Component {
}
The configuration in my tsconfig.json file appears as follows:
{
"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"
]
}
And here is how the loader configuration is set up in the webpack config:
{
test: /\.ts(x?)$/,
loader: 'babel-loader!ts-loader'
}
I've experimented with different compilerOptions by setting target to es5, module to es2015, etc., but have encountered issues. The persistent error message reads: Unexpected token import, specifically pointing to the first line within the angular2Component app. It seems that the import statement is not recognized at all. When inspecting the code in the browser, only the @Component part appears to be compiled/transpiled correctly:
export let angular2Component = class angular2Component {};
angular2Component = __decorate([Component({
selector: 'angular-2-component',
template: '<h1>Hello World!</h1>'
}), __metadata('design:paramtypes', [])], angular2Component);
However, the line containing
import {Component} from 'angular2/core';If anyone has insight on what may be causing this issue, your input would be greatly appreciated.