CODEWITHSUNDEEP
angularwebpack
Joy
Joy

Reputation: 7028

Angular 2 with web pack along with ES6

I am giving my setup for project below--

.babelrc - 

{
  "presets": ["es2015", "stage-0"]
}

Package.Json --

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "angular2": "^2.0.0-beta.11",
    "es6-promise": "latest",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "latest",
    "zone.js": "^0.6.6"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^0.16.2",
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-stage-0": "^6.5.0",
    "webpack": "^1.12.14"
  },
  "scripts": {},
  "author": "",
  "license": "ISC"
}

Webpack.config.js --

var path = require('path'),
  webpack = require('webpack'),
  ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;


module.exports = {
  devtool: 'eval-source-map',
  entry: {
    main: [
      './src/app'
    ]
  },
  output: {
    filename: './[name].js',
    path: path.join(__dirname, 'public'),
    publicPath: '/public/'
  },
  resolve: {

    // An array of extensions that should be used to resolve modules.
    //
    // See: http://webpack.github.io/docs/configuration.html#resolve-extensions
    extensions: ['', '.ts', '.js'],

    // Make sure root is src
    root: path.join(__dirname, 'src'),

  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ForkCheckerPlugin(),
  ],
  module: {
    loaders: [{
      test: /\.js?$/,
      exclude: path.join(__dirname, 'src'),
      loaders: ['babel']
    }, {
      test: /\.ts$/,
      loader: 'awesome-typescript-loader',
      exclude: [/\.(spec|e2e)\.ts$/]
    }, ],
  }
}

root.component.js --

import {
  Component
}
from 'angular2/core';


@Component({
  selector: "my-app",
  template: '<h1>hello Joy</h1>'
})

export class RootComponent {
  constructor() {

  }
}

when I run the command for web pack . It gives me the error below --

ERROR in ./src/app.js
Module parse failed: /Users/Joy/Documents/Work/Javascript/Angular-quickstart/src/app.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import bootstrap from 'angular2/platform/browser';
| import RootComponent from './components/root.component';
| 
 @ multi main

Anybody has idea why this has caused and issue for me . It's almost the same setup as an react application . This is just for angular2.0 without react . IT should behave the same .

Upvotes: 0

Views: 1368

Answers (1)

Petr Averyanov
Petr Averyanov

Reputation: 9486

loaders: [{
  test: /\.js?$/,
  exclude: path.join(__dirname, 'src'),
  loaders: ['babel']

Actually you need babel exactly for src, and you excluding it. Should be smth like:

loaders: [{
  test: /\.js$/,
  loader: 'babel',
  exclude: /node_modules|bower_components/
}

Upvotes: 1

Related Questions