App stopped working after using webpack

Hey John Shockey .

I'm sorry about this. There's a blog post that is missing from the teacher's notes. You can find it here: https://gist.github.com/kenhowardpdx/4f4a44b0fbdc77934bef

This should get you going with webpack.

Hi Ken,

Thanks for your quick response. I went through setting up that angular project in the tutorial you provided step for step. I relaunched the index.html file and was receiving a red box with the content 'Is Github Up?' Before I set up the webpack it was green and said yes. I checked the console on this project and received the following errors very similar to the one I received on the MEAN project. Here they are: ( the error message is slightly different but it is basically the same file and line)

vendor.bundle.js:13540 Error: [ng:areq] Argument 'fn' is not a function, got Object http://errors.angularjs.org/1.5.3/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20Object at vendor.bundle.js:184 at assertArg (vendor.bundle.js:1960) at assertArgFn (vendor.bundle.js:1970) at Function.annotate [as $$annotate] (vendor.bundle.js:3996) at injectionArgs (vendor.bundle.js:4702) at Object.invoke (vendor.bundle.js:4733) at vendor.bundle.js:7632 at forEach (vendor.bundle.js:437) at Object.<anonymous> (vendor.bundle.js:7630) at Object.invoke (vendor.bundle.js:4741)

vendor.bundle.js:13540 Error: [ng:areq] Argument 'dashboardController' is not a function, got Object http://errors.angularjs.org/1.5.3/ng/areq?p0=dashboardController&p1=not%20a%20function%2C%20got%20Object at vendor.bundle.js:184 at assertArg (vendor.bundle.js:1960) at assertArgFn (vendor.bundle.js:1970) at $controller (vendor.bundle.js:10119) at setupControllers (vendor.bundle.js:9254) at nodeLinkFn (vendor.bundle.js:9052) at compositeLinkFn (vendor.bundle.js:8449) at compositeLinkFn (vendor.bundle.js:8452) at compositeLinkFn (vendor.bundle.js:8452) at publicLinkFn (vendor.bundle.js:8329)

Any thoughts?

Hi John:

I got the same error and solved it by adding requires to ALL the js files in app.js. It looks like this:

'use strict';
var angular = require('angular');
angular.module('todoListApp', []);
require('./scripts/controllers/main.js');
require('./scripts/controllers/todo.js');
require('./scripts/directives/todo.js');
require('./scripts/services/data.js');

And be sure add angular require EVERY time you need it, like in ./scripts/services/data.js, it should be like this:

'use strict';
var angular = require('angular');
angular.module('todoListApp')
.service('dataService', function($http) {
  this.getTodos = function(cb) {
    $http.get('/api/todos').then(cb);
  };

  this.deleteTodo = function(todo) {
    console.log("I deleted the " + todo.name + " todo!");
  };

  this.saveTodos = function(todos) {
    console.log("I saved " + todos.length + " todos!");
  };

});

I think there must be some more efficient way, but this is what I did so far, Hope it'll help