AngularJS with Webpack - Requiring Directives

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

With Webpack and CommonJS, the way you register directives, services, etc. with your modules can be a lot more modular. See how to register a directive with an Angular module using Webpack.

Eddie Appell
Eddie Appell
~ 5 years ago

I've gone through this video several times, and I keep getting an exception when I run it:

"Cannot read property 'directive' of undefined"

The line it's breaking on is:

	ngModule.directive('kcdHello', function(){

When it gets to that line, ngModule is undefined. I've compared every line of code in my source to yours, and I just can't see what I'm missing here. Here is my entire directive block from the kcd-hello.js file:

module.exports = function(ngModule){
  ngModule.directive('kcdHello', function(){
    return {
      restrict: 'E',
      scope: {},
      templateUrl: 'directives/kcd-hello.html',
      controllerAs: 'vm',
      controller: function() {
        var vm = this;

        vm.greeting = 'Hello Webpack';


module.exports = function(ngModule) {


var angular = require('angular');
var ngModule = angular.module('app',[]);


Any idea what I'm missing?

It would be SO helpful to be able to download your source for these lessons, just to be able to run it and compare to find out what's missing. Until then, could you please take a look and offer some advice for getting past this? Thanks!

Kent C. Dodds
Kent C. Doddsinstructor
~ 5 years ago

I'm not sure what the problem is, but all of the code is available here. You'll find a link to it below the video. Good luck!

~ 5 years ago

What extension provides the angular icon in the toolbar?

Also, I was able to run the code in finished/step2, but I noticed the ng-inspector extension can't see AngularJS running on the page. Not the end of the world, but hopefully it keeps working in our app!