Javascript 带网页包配置的Angular 1.x
未捕获引用错误：未定义myApp 我正在尝试使用Javascript 带网页包配置的Angular 1.x,javascript,angularjs,webpack,webpack-2,Javascript,Angularjs,Webpack,Webpack 2,未捕获引用错误：未定义myApp 我正在尝试使用Angular 1.x设置Webpack，但出现上述错误。以下是我的配置设置和文件夹结构。让我知道网页有什么问题 文件夹结构- module.exports = { entry: ["./app.js", "./directives/first-directive.js", "./directives/second-directive.js", "./directives/third-directive.js"], output:
Angular 1.x设置Webpack
，但出现上述错误。以下是我的配置设置和文件夹结构。让我知道网页
有什么问题
文件夹结构-
module.exports = {
entry: ["./app.js", "./directives/first-directive.js", "./directives/second-directive.js", "./directives/third-directive.js"],
output: {
filename: 'bundle.js'
}
};
index.html文件-
<!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>
first directive.js
var myApp = angular.module('myApp', []);
myApp.directive('firstDirective', function() {
return {
template: '<h1>This is a first directive</h1>'
}
})
另外，如果我像下面提到的那样使用通配符，它也不起作用
entry: ["./app.js", "./directives/*"]
让我知道我的网页包配置有什么问题
仅供参考-bundle.js
看起来像这样-根据注释，文件first directive.js
有一个变量myApp
，它似乎是未定义的
要更正此问题，您需要以下两种方法之一：
从app.js
导出模块定义，并将其导入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>'
}
});
你能给我们看一下你的app.js
文件吗？@31piy更新了问题是这些文件的所有内容都是吗？@31piy是的，目前只是一行
// 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);