AngularJS + TypeScript:未捕获的类型错误:无法读取未定义的属性“模块" [英] AngularJS + TypeScript: Uncaught TypeError: Cannot read property 'module' of undefined

问题描述

我正在尝试在 AngularJS 1.x 应用程序中使用 TypeScript.

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

我的应用程序已经使用 Webpack 作为模块加载器，所以我将它配置为处理 TypeScript 编译(在将所有 *.js 源文件重命名为 *.ts 之后)，我设法让它工作.所以它编译没有错误并生成我的 JavaScript 输出文件.

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

以及:

未捕获的错误:[$injector:modulerr] 无法实例化模块 myModuleName 由于:错误:[$injector:nomod] 模块myModuleName"不可用！您拼错了模块名称或忘记加载它.如果注册模块，请确保将依赖项指定为第二个参数.

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.

我的猜测是对象 angular 出于某种原因为空，当我尝试访问 angular.module 时它会抱怨.

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

我不明白为什么会这样，因为当我在代码中使用 import angular from 'angular/angular'; 时，它编译成功.

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

完整源代码可在此处获得.

Webpack 输出:

Webpack output:

哈希:824157db8ed6acf47fc1版本:webpack 2.2.1时间:2242ms资产大小块块名称othello-bundle.js 1.27 MB 0 [emitted] [big] 应用程序othello-bundle.js.map 1.51 MB 0 [发出] 应用程序[0] ./~/angular/angular.js 1.24 MB {0} [内置][5] ./app/services/othello_AI.ts 8.65 kB {0} [内置][6] ./app/services/othello_handler.ts 9.3 kB {0} [内置][7] ./app/index.ts 723 字节 {0} [内置]+ 4 个隐藏模块

推荐答案

我终于找到了解决方案.

I finally found the solution.

使用 TypeScript 时，需要使用以下方式导入 AngularJS:

When using TypeScript, AngularJS needs to be imported using:

import * as angular from 'angular';

问题是我仍然像使用 es6 一样导入它:

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

从'angular'导入角度；

这篇关于AngularJS + TypeScript:未捕获的类型错误:无法读取未定义的属性“模块"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！