Search code examples
javascriptangularjswebpackwebpack-2

Angular 1.x with webpack configuration

Uncaught ReferenceError: myApp is not defined

I am trying to setup Webpack with Angular 1.x but getting the above mentioned error. Following is my configuration settings and folder structure. Let me know what I am doing wrong with Webpack.

Folder Structure -

Folder Structure

index.html File - 

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Directives - Angular</title>
    <script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
</head>
<body>
    <first-directive></first-directive>
    <second-directive></second-directive>
    <third-directive></third-directive>     
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

app.js

var myApp = angular.module('myApp', []);

first-directive.js

myApp.directive('firstDirective', function() {
    return {
        template: '<h1>This is a first directive</h1>'
    }
})

webpack.config.js file -

module.exports = {
    entry: ["./app.js", "./directives/first-directive.js", "./directives/second-directive.js", "./directives/third-directive.js"],
    output: {
        filename: 'bundle.js'
    }   
};

Also, if I am using wildcard like below mentioned, it is also not working.

entry: ["./app.js", "./directives/*"]

Let me know what I am doing wrong with webpack configuration.

FYI - bundle.js looks like this - http://codepad.org/Kd7P5Evy

Solution

  • Based on the comments, the file first-directive.js has a variable myApp, which seems to be undefined.

    To correct this, you need either of the following two ways:

    Export the module's definition from app.js, and import it in first-directive.js:

    // app.js
export var myApp = angular.module('myApp', []);

// first-directive.js
import {myApp} from './app';

myApp.directive('firstDirective', function() {
  return {
    template: '<h1>This is a first directive</h1>'
  }
});

    Export directive's definition from first-directive.js, and import it in app.js:

    // first-directive.js
export function firstDirective() {
  return {
    template: '<h1>This is a first directive</h1>'
  };
}

// app.js
import {firstDirective} from './first-directive';

var myApp = angular.module('myApp', [])
  .directive('firstDirective', firstDirective);