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
– Dan M. CISSOKHO, Commented Apr 18, 2017 at 12:16
it is 1.6 as you can see from my package.json: github.com/ShinDarth/Othello/blob/typescript/package.json#L9 — Francesco Borzi
– Francesco Borzi, Commented Apr 18, 2017 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
– Dan M. CISSOKHO, Commented Apr 18, 2017 at 12:24
@DMCISSOKHO I just updated my question including the output of Webpack build — Francesco Borzi
– Francesco Borzi, Commented Apr 18, 2017 at 12:27

Francesco Borzi · Accepted Answer · 2017-04-18 18:20:02Z

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, 2017 at 18:20

Francesco Borzi

63.2k56 gold badges203 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

coppereyecat Over a year ago

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

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related