"You may need an appropriate loader for this file type", webpack can't parse angular2 file
<p>I'm trying to get a very simple Angular2 app working, with Webpack as a module bundler. I'm following <a href="https://github.com/johnlindquist/intro-to-angular2" rel="nofollow">this code</a>, and I copied all the configuration files as they are, only changing file paths. However, when I run <code>npm-start</code>, I get the following error, which I think is a Webpack error:</p>

<pre><code>ERROR in ./hello.js
Module parse failed: /home/marieficid/Documentos/cloud/cloud/hello.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import {bootstrap} from "angular2/platform/browser";
| import {Component} from "angular2/core";
| 
 @ ./app.ts 2:0-21
</code></pre>

<p>As a result, the Angular2 code in my app isn't loaded.</p>

<p>This is my <code>app.ts</code>:</p>

<pre><code>import "./hello.js"; 
</code></pre>

<p>This is <code>hello.js</code>, where the error seems to be (which I take to mean that webpack parsed app.ts just fine):</p>

<pre><code>import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";

@Component({
    selector: 'app',
    template: '&lt;div&gt;Hello world&lt;/div&gt;'
})
class App{}

bootstrap(App);
</code></pre>

<p>And this is<code>webpack.config.js</code>:</p>

<pre><code>var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
  entry: {
    'app': './app.ts',
    'vendor': './vendor.ts'
  },
  output: {
    path: "./dist",
    filename: "bundle.js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
    new HtmlWebpackPlugin({
      inject: false,
      template: './index.html'
    })       
  ],

  resolve: {
    extensions: ['', '.ts', '.js']
  },

  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' },
    ],
    noParse: [ path.join(__dirname, 'node_modules', 'angular2', 'bundles') ]
  },

  devServer: {
    historyApiFallback: true
  }
};
</code></pre>

<p>All these files and <code>node_modules</code> are in the same directory.</p>

<p>I have found similar questions online but nothing worked for me. I also didn't install babel because the sample code I'm using as base doesn't use it, but if it's necessary I'm will.</p>