I'm attempting to incorporate TypeScript into my AngularJS 1.x application.
Currently, my application utilizes Webpack as a module loader. I configured it to handle the TypeScript compilation by renaming all *.js source files to *.ts, and managed to successfully compile without errors, generating the JavaScript output file.
The issue arises when running the application in the browser, resulting in this console error:
Uncaught TypeError: Cannot read property 'module' of undefined
In addition, I encounter:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myModuleName due to: Error: [$injector:nomod] Module 'myModuleName' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
This seems to occur because the object angular is null for some reason, causing issues when trying to access angular.module.
Despite importing angular from 'angular/angular', the problem persists after successful compilation.
You can find the complete source code here.
Webpack output:
Hash: 824157db8ed6acf47fc1
Version: webpack 2.2.1
Time: 2242ms
Asset Size Chunks Chunk Names
othello-bundle.js 1.27 MB 0 [emitted] [big] app
othello-bundle.js.map 1.51 MB 0 [emitted] app
[0] ./~/angular/angular.js 1.24 MB {0} [built]
[5] ./app/services/othello_AI.ts 8.65 kB {0} [built]
[6] ./app/services/othello_handler.ts 9.3 kB {0} [built]
[7] ./app/index.ts 723 bytes {0} [built]
+ 4 hidden modules