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

Turnstile

what is your angular version ? i don't see angular in package.json or bower.json – Poulenc

it is 1.6 as you can see from my package.json: github.com/ShinDarth/Othello/blob/typescript/package.json#L9 – Turnstile

my bad , did you checked you script order on loading or if you load angular and angular.min at the same time ? – Poulenc

@DMCISSOKHO I just updated my question including the output of Webpack build – Turnstile

AngularJs should be include first – Poulenc

@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. – Turnstile

Try also to move up you're index.ts – Poulenc

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(...) – Turnstile

Answer 1

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';

Turnstile

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 – Halfblooded