Angular 1.x with webpack configuration
Question
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 -
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
1 answers
solution1
2 ACCPTED 2017-07-10 08:26:38
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.