AngularJS 1.7 with ES6 and webpack giving error: Uncaught TypeError: Cannot read property 'module' of undefined

Question

I am creating AngularJS app skeleton. I am using ES6 with webpack for bundling. 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. Webpack config to bundle app and angular file are:

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

If I debug it in chrome it shows angular object with module function in scope.

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. Webpack bundles angular file from node_modules as well. So that's where from I am importing angular. Once reason still can be that somehow it is loading angular later in bundle then it may create issue. Not finding specifics though

Answer 1

In my case solution was to import jQuery and angular like so:

import jQuery from 'jquery'
import 'angular'

hope that helps someone