Reputation: 1563

Webpack + angular2

What is the meaning of this error ? After bundling angular2 app with webpack
"Uncaught SyntaxError: Unexpected token <" in bundel.js 1.

What is that I am missing. I have added all the necessary loaders.

// webpack.config.js
'use strict';

var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

//const TARGET = process.env.npm_lifecycle_event;

module.exports = {
  //context: __dirname + '/public',
  entry: './public/components/boot/boot.ts',
  output: {
    path: path.resolve('dist/'), // This is where images AND js will go
    publicPath: 'public/', // This is used to generate URLs to e.g. images
    filename: 'bundle.js'
  },
  plugins: [
    new ExtractTextPlugin("bundle.css")
  ],
  module: {
    //
    loaders: [
      {
        test: /\.json/,
        loader: 'json-loader',
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
      },
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, // inline base64 for <=8k images, direct URLs for the rest
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style", "css!postcss")
      },
      {
        test: /\.scss$/,
        exclude: [/node_modules/],
        loader: ExtractTextPlugin.extract("style", "css!postcss!sass?outputStyle=expanded")
      },
      // fonts and svg
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" },
      {
        test: /\.(ico|jpe?g|png|gif)$/,
        loader: 'file'
      } // inline base64 for <=8k images, direct URLs for the rest
    ]
  },
  postcss: function(webpack) {
    return [
      autoprefixer({browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']})
    ]
  },
  sassLoader: {
    includePaths: [path.resolve(__dirname, "node_modules")]
  },
  resolve: {
    // now require('file') instead of require('file.coffee')
    extensions: ['', '.ts', '.webpack.js', '.web.js', '.js', '.json', 'es6']
  },
  devtool: 'source-map'
};

Not able to debug this error

Upvotes: 0

Answers (4)

Edmar Miyake

Reputation: 12390

Try adding <!doctype html> on top of your template (HTML).

Upvotes: 0

Shettyh

Reputation: 1216

Check this good Angular2 Webpack sample

Angular 2 Webpack sample

This github project demonstrates how to use Webpack with Angular2 with minimal configurations.

Here is the sample of Webpack config from this project

module.exports = {
    entry: "./main.ts",
    output: {
        path: __dirname,
        filename: "./dist/bundle.js"
    },
    resolve : {
        extentions: ['','.js','.ts']
    },
    module: {
        loaders : [{
            test: /\.ts/, loaders : ['ts-loader'],exclude: /node_modules/
        }]
    }
};

Upvotes: 2