[英]AngularJS 1.7 with ES6 and webpack giving error: Uncaught TypeError: Cannot read property 'module' of undefined
I am creating AngularJS app skeleton.我正在创建 AngularJS 应用程序框架。 I am using ES6 with webpack for bundling.
我正在使用带有 webpack 的 ES6 进行捆绑。 I am getting an error.
我收到一个错误。 I searched around but could not find solution.
我四处寻找,但找不到解决方案。 Error I am getting is:
我得到的错误是:
Uncaught TypeError: Cannot read property 'module' of undefined
未捕获的类型错误:无法读取未定义的属性“模块”
Below is file that I am getting an error in.下面是我遇到错误的文件。
import { angular } from 'angular';
import { HomeController } from './app/appName.home';
angular.module('appName', [])
.controller('HomeController', HomeController);
angular.element(() => {
angular.bootstrap(document, ['appName']);
});
I am getting error on line:我在网上收到错误:
angular.module('appName', [])
I am using babel to compile es6 to es5.我正在使用 babel 将 es6 编译为 es5。 Webpack config to bundle app and angular file are:
捆绑应用程序和角度文件的 Webpack 配置是:
module.exports = {
devtool: 'source-map',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['@babel/preset-env']
}
}
]
},
};
Attached is an image showing error.附件是显示错误的图像。
Uncaught ReferenceError: angular is not defined未捕获的 ReferenceError:角度未定义
If I debug it in chrome it shows angular object with module function in scope.如果我在 chrome 中调试它,它会在范围内显示具有模块功能的角度对象。
module function available as property of angular in scope模块功能可用作范围内的角度属性
Edit: I read one here that could be as solution.编辑:我在这里读到一个可以作为解决方案。 But I think that I don't need to add script file in html.
但我认为我不需要在 html 中添加脚本文件。 Webpack bundles angular file from node_modules as well.
Webpack 也从 node_modules 中捆绑了 angular 文件。 So that's where from I am importing angular.
所以这就是我导入 angular 的地方。 Once reason still can be that somehow it is loading angular later in bundle then it may create issue.
一旦原因仍然可能是它以某种方式稍后在包中加载角度,那么它可能会产生问题。 Not finding specifics though
虽然没有找到细节
In my case solution was to import jQuery and angular like so:在我的情况下,解决方案是像这样导入 jQuery 和 angular:
import jQuery from 'jquery'
import 'angular'
hope that helps someone希望能帮助某人
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.