Loader doesn't know how to handle @ sign?

[dKab]

50% 2/3 build modulesModuleParseError: Module parse failed: /home/dmitriy/projects/angular-quickstart/node_modules/angular2-template-loader/index.js!/home/dmitriy/projects/angular-quickstart/src/app/app.component.ts Unexpected character '@' (5:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (5:0)

Here's the file that I'm trying to process:

import { Component } from '@angular/core';

import '../../public/css/styles.css';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

webpack.config :

  module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/app/app.component.ts'
  },

  resolve: {
    root: helpers.root('src'),
    extensions: ['', '.js', '.ts']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'angular2-template-loader' 
      },
      {
        test: /\.html$/,
        loader: 'html'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      }
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};

[adam-beck]

Can you have multiple blocks for the same rules? For instance, you have two blocks testing for /\.css$/ and they have different loaders.

Also, I don't think you have the ExtractTextPlugin setup correctly. Shouldn't there be an entry in the plugins block.

This can go right after you require the plugin:

var extractCSS = new ExtractTextPlugin('stylesheets/main.css')

and then in your module block for css files:

{
  test: /\.css$/,
  loader: extractCSS.extract(['style', 'css!sourceMap'])
}

and then in the plugins block:

plugins: [
  extractCSS,
  ...
  ...
]