AngularJS + TypeScript: Uncaught TypeError: Cannot read property 'module' of undefined

Question

I'm trying to use TypeScript in an AngularJS 1.x application.

My application already uses Webpack as a module loader, so I configured it to handle the TypeScript compilation (after renaming all *.js source files to *.ts) and I managed to get it working. So it compiles without errors and generate my JavaScript output file.

The only problem is that when I run the application on the browser, it does not work and I get this console error:

Uncaught TypeError: Cannot read property 'module' of undefined

as well as:

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.

My guess is that the object angular for some reason is null and it complains when I try to access angular.module.

I don't understand why it is so, since when I use import angular from 'angular/angular'; in the code it compiles successfully.

The full source code is available 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

what is your angular version ? i don't see angular in package.json or bower.json — Dan M. CISSOKHO, Apr 18 '17 at 12:16
it is 1.6 as you can see from my package.json: https://github.com/ShinDarth/Othello/blob/typescript/package.json#L9 — Francesco Borzi, Apr 18 '17 at 12:19
my bad , did you checked you script order on loading or if you load angular and angular.min at the same time ? — Dan M. CISSOKHO, Apr 18 '17 at 12:24
@DMCISSOKHO I just updated my question including the output of Webpack build — Francesco Borzi, Apr 18 '17 at 12:27
@DMCISSOKHO thanks, I replaced ```import angular from 'angular';``` with ```import angular from 'angular/angular';``` and with this change now AngularJS is included first. But unfortunately I still have the same issue. — Francesco Borzi, Apr 18 '17 at 13:10
it looks like that it does not matter: I tried to remove all imports except angular so I only get 1) angular 2) index.ts but it still gives error on ```angular.module(...)``` — Francesco Borzi, Apr 18 '17 at 15:25

score 3 · Accepted Answer · answered Apr 18 '17 at 18:20

3

I finally found the solution.

When using TypeScript, AngularJS needs to be imported using:

import * as angular from 'angular';

The problem was that I was still importing it as I did with es6:

import angular from 'angular';

answered Apr 18 '17 at 18:20

Francesco Borzi

56,083
47
179
252

Thanks for this. This was driving me nuts. I could get my app to run in webpack using angular as a global, but karma tests failed with a `You need to include some adapter that implements __karma__.start method!` error. Including an import statement immediately caused anything compiled with webpack to return the property of undefined error mentioned by the asker. Changing my import statements fixed it so I could get both working and finally have no compile errors for the first time since introducing TypeScript :D – coppereyecat Jun 28 '21 at 20:50

AngularJS + TypeScript: Uncaught TypeError: Cannot read property 'module' of undefined

1 Answers1

Linked