I am currently in the process of setting up the AngularJS app skeleton. Utilizing ES6 with webpack for bundling, I have encountered an error that has been difficult to resolve. The specific error message reads as follows:
Uncaught TypeError: Cannot read property 'module' of undefined
The error seems to be originating from the following file:
import { angular } from 'angular';
import { HomeController } from './app/appName.home';
angular.module('appName', [])
.controller('HomeController', HomeController);
angular.element(() => {
angular.bootstrap(document, ['appName']);
});
The line triggering the error is:
angular.module('appName', [])
To address this issue, I am using babel to compile ES6 to ES5 and implementing a webpack configuration to bundle the application and Angular files:
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']
}
}
]
},
};
An image displaying the error can be seen below.
Uncaught ReferenceError: angular is not defined
In my troubleshooting efforts using Chrome debugger, the angular object with the module function does appear to be in scope.
Module function available as property of angular in scope
Edit: Upon further research, I came across a potential solution suggested here. It's worth noting that while importing the script file in the HTML may seem unnecessary since webpack should handle bundling the Angular file from node_modules, there could still be a timing issue where Angular loads later in the bundle causing the problem. Unfortunately, more details on this specific scenario are still eluding me.