javascript - 带有 ES6 和 webpack 的 AngularJS 1.7 给出错误 : Uncaught TypeError: Cannot read property 'module' of undefined

Question

我正在创建 AngularJS 应用框架。我正在使用带有 webpack 的 ES6 进行捆绑。我收到一个错误。我四处搜寻但找不到解决方案。我得到的错误是:

Uncaught TypeError: Cannot read property 'module' of undefined

以下是我遇到错误的文件。

import { angular } from 'angular';
import { HomeController } from './app/appName.home';

angular.module('appName', [])
    .controller('HomeController', HomeController);

angular.element(() => {
    angular.bootstrap(document, ['appName']);
}); 

我在网上遇到错误:

angular.module('appName', [])

我正在使用 babel 将 es6 编译为 es5。用于捆绑应用程序和 Angular 文件的 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']
                }
            }
        ]
    },
};

附件是显示错误的图像。

Uncaught ReferenceError: angular is not defined

如果我在 chrome 中调试它，它会在范围内显示具有模块功能的 Angular 对象。

module function available as property of angular in scope

编辑: 我读了一个here这可能是解决方案。但我认为我不需要在 html 中添加脚本文件。 Webpack 也捆绑了来自 node_modules 的 Angular 文件。这就是我从哪里导入 Angular 。一旦原因仍然可能是它以某种方式稍后在 bundle 中加载 Angular ，那么它可能会产生问题。虽然没有找到细节

Answer 1

在我的例子中，解决方案是像这样导入 jQuery 和 angular:

import jQuery from 'jquery'
import 'angular'

希望对某人有所帮助