Parcel: 🐛 Parcel is not working with angularjs [es2015]

Created on 20 Jan 2018 · 3Comments · Source: parcel-bundler/parcel

this is a 🐛 bug report
I have a simple project using Angularjs 1.6.4 with ES2015 and it was working very well with webpack, i tried to switch to parcel as it's zero configurations, and added the entry that i used in webpack configs to the index.html file, tried running the simple command parcel index.html it builds and succeed but when i opened http://localhost:1234 it gives my a blank page and no errors into the console even.

🎛 Configuration (.babelrc, package.json, cli command)

here is my .babelrc file

{
    "presets": [
        "es2015"
    ]
}

this is my package.json file

{
  "name": "fe-test",
  "version": "1.1.0",
  "scripts": {
    "start": "lite-server",
    "lint": "eslint ./app"
  },
  "author": "Medhat Dawoud",
  "license": "ISC",
  "dependencies": {
    "@uirouter/angularjs": "^1.0.3",
    "angular": "^1.6.4",
    "angular-route": "1.6.8",
    "angular-sanitize": "^1.6.4",
    "bootstrap": "^3.3.7",
    "jquery": "^3.2.1"
  },
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-es2015": "6.24.1",
    "eslint": "4.14.0",
    "eslint-config-airbnb-base": "12.1.0",
    "eslint-plugin-import": "2.8.0",
    "node-sass": "^4.7.2",
    "webpack": "3.10.0"
  }
}

webpack.config.js file

module.exports = {
  entry: './app/app.module.js',
  output: {
    path: '/dist',
    filename: 'app.bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      { test: /\.html$/, loader: 'html' },
      { test: /\.css$/, loader: 'style!css' },
    ],
  },
  devtool: '#inline-source-map',
};

index.html after the change to inject the entry point

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My App</title>
    <link href="https://fonts.googleapis.com/css?family=Kanit:300,400" rel="stylesheet">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body ng-app="myApp">
    <div ui-view=""></div>

    <script src="./app/app.module.js"></script>
</body>

</html>

🤔 Expected Behavior

I expect it to work normally and show the default route i have just like how it was working with webpack

😯 Current Behavior

It gives a blank page in the browser and the console doesn't have any errors or even warnings

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.4.1
| Node |8.5.0
| npm/Yarn |5.6.0
| Operating System |OSx Sierra v10.12.6

Source

medhatdawoud

Most helpful comment

I'm using the Angular 1.6 and have it working simply by requiring before I declare the module. That said, my app uses the John Papa style for functions, so how the functions are declared seems to be where the issue lies (I use destructuring and other es2015+ functionality in my blog).

I've tried a few things just now in a Glitch instance, and have found it's only failing when using es6 => function in conjunction with controllerAs. As you say, there's no error, it simply doesn't render.

index.html:

<!DOCTYPE html>
<html data-ng-app="testApp">
  <head>
    <title>Parcel/Angular 1.6 Test</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div data-ng-controller="testController as vm">
      {{vm.hello}}
    </div>

    <div data-ng-controller="testController2 as vm1">
      {{vm1.hello}}
    </div>

    <div data-ng-controller="testController3">
      {{hello}}
    </div>

    <script src="client.js"></script>
  </body>
</html>

client.js:

require('angular')
// import 'angular'

angular.module('testApp', [])
angular.module('testApp').controller('testController', function() {
  this.hello = 'hello 1'
  console.log('hello 1')
})

angular.module('testApp').controller('testController2', () => {
  this.hello = 'hello 2!'
  console.log('hello 2')
})

angular.module('testApp').controller('testController3', $scope => {
  $scope.hello = 'hello 3!'
  console.log('hello 3')
})

The first testController works as expected, but testController2 doesn't. Injecting $scope to an es6 function without controllerAs does work. The function is being called however, as the console.log fires in all.

Also, using import 'angular' instead of require('angular'), testController2 throws an error TypeError: undefined has no properties. Angular did correctly attach to the window object, so I can't see why it would act differently here.

Hope this helps.

underscoredotspace on 22 Jan 2018

🎉1 👍1

All 3 comments

I also tried parcel with angular1.6, getting blank page just like you but I have errors in console, saying module not found

itaditya on 21 Jan 2018

😕2

index.html:

<!DOCTYPE html>
<html data-ng-app="testApp">
  <head>
    <title>Parcel/Angular 1.6 Test</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div data-ng-controller="testController as vm">
      {{vm.hello}}
    </div>

    <div data-ng-controller="testController2 as vm1">
      {{vm1.hello}}
    </div>

    <div data-ng-controller="testController3">
      {{hello}}
    </div>

    <script src="client.js"></script>
  </body>
</html>

client.js:

require('angular')
// import 'angular'

angular.module('testApp', [])
angular.module('testApp').controller('testController', function() {
  this.hello = 'hello 1'
  console.log('hello 1')
})

angular.module('testApp').controller('testController2', () => {
  this.hello = 'hello 2!'
  console.log('hello 2')
})

angular.module('testApp').controller('testController3', $scope => {
  $scope.hello = 'hello 3!'
  console.log('hello 3')
})

Hope this helps.

underscoredotspace on 22 Jan 2018

🎉1 👍1

Should work in latest parcel version