Angular2 代码中的 TypeScript 错误：找不到名称“模块”答案

【问题标题】：TypeScript error in Angular2 code: Cannot find name 'module'Angular2 代码中的 TypeScript 错误：找不到名称“模块”
【发布时间】：2016-08-10 14:05:42
【问题描述】：

我已经定义了以下 Angular2 组件：

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  moduleId: module.id,
  templateUrl: './app.component.html'
})
export class AppComponent {
}

当我尝试编译它时，我在第 5 行收到以下错误：

src/app/app.component.ts(5,13): error TS2304: Cannot find name 'module'.

我相信 module.id 指的是 CommonJS module 变量（参见 here）。我在 tsconfig.json 中指定了 CommonJS 模块系统：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "removeComments": true,
    "noLib": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": true
  },
  "exclude": [
    "node_modules",
    "dist",
    "typings/browser.d.ts",
    "typings/browser",
    "src"
  ],
  "compileOnSave": false
}

如何纠正 TypeScript 错误？

【问题讨论】：

我不认为 module 是在编译时提供给你的东西。
它在this project 中为我正确编译。不知道怎么样！！！所以我试图在一个更简单的项目中隔离它，但它在那里不起作用。所以试图弄清楚是什么使它在第一个项目中起作用。
您可以声明一个module.d.ts 文件，其内容为：declare var module: any;。然后从您的引导程序中引用此文件/// <reference path="path/to/typings/module.d.ts" />
在 typings.json 环境依赖项中：节点
@yurzui，你把它钉在了头上！你能把它写出来作为答案，以便我标记它是正确的吗？

标签： typescript angular commonjs

【解决方案1】：

直到我将它粘贴到我有module.id的地方，它仍然没有工作，在组件的顶部。像这样

声明 var 模块：NodeModule；
接口 NodeModule
{
id: string;
}

@Component({module.id})

【讨论】：

【解决方案2】：

对我来说，我有一个扩展 tsconfig.json 的 tsconfig.app.json。所以当我在tsconfig.json 中添加"types": ["node"] 时，它被tsconfig.app.json 中的“类型”属性覆盖。将“node”添加到tsconfig.app.config 中现有的“types”属性修复了它。

【讨论】：

这是我的问题 - 默认角度 tsconfig.app.json 定义了一个空白 types: []，它不仅覆盖了父 types，而且还导致 typeRoots 被忽略

【解决方案3】：

我在项目中安装了，效果很好

npm install @types/node --save-dev

【讨论】：

应该是--save-dev

【解决方案4】：

module.id

找不到名称模块。

按照以下步骤解决此问题，

步骤 1：使用以下命令安装节点模块

npm i @types/node --save

第二步：修改src/app下的文件tsconfig.app.json

"types": [
    "node"
]

【讨论】：

【解决方案5】：

更新

如果您使用 Typescript 2^，只需使用以下命令：

npm i @types/node --save-dev

（代替--save-dev，你可以使用快捷方式-D）

或全局安装：

npm i @types/node --global

如果需要，您也可以在 tsconfig.json 中指定 typeRoots 或 types，但 by default all visible “@types” packages are included in your compilation。

旧版本

您需要安装节点环境依赖项。 Typings.json

"ambientDependencies": {
    "node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#138ad74b9e8e6c08af7633964962835add4c91e2",

另一种方式可以使用typings manager 全局安装节点定义文件：

typings install dt~node --global --save-dev

那么你的 typings.json 文件将如下所示：

"globalDependencies": {
  "node": "registry:dt/node#6.0.0+20160608110640"
}

【讨论】：

两点： 1. 请记住将引用添加到根打字稿文件的顶部： /// 2. 编辑由@yurzui 显示的typings.json 文件对我有用，但最初我只是这样做：> typings install node --ambient --save 更新了 typings.json 文件 [with一个不同的版本]并且没有工作，因为 index.d.ts 文件在编译时抛出了许多错误。仅供参考：我正在使用 Angular Beta.16
@yurzui 如何从引导程序中添加对它的引用？
命令npm install @types/node --save 为我解决了这个问题
npm install @types/node --save 对我来说已经足够了。
Typings 应该是 devDependencies，因为 TypeScript 使用它们进行类型检查和转译，因此应该使用 npm install -D @types/node 安装它们，因为它们不会在转译代码中使用。

【解决方案6】：

对于那些希望使用 Typescript 2.x 和 @types 执行此操作的人，您需要执行以下操作：

npm install -D @types/node
在您的tsconfig.json 文件中将types: ["node"] 包含在compilerOptions 下。

我很难找到第 2 步的说明。

参考：Typescript issue 9184

编辑：

你也可以这样做：

在tsconfig.json 文件中的compilerOptions 下包含"typeRoots": [ "node_modules/@types" ]。这代替了 types 属性，并且具有自动包含您使用 npm 安装的任何 @types 的好处。

例如：

{
  "compilerOptions": {
    "typeRoots": [
      "node_modules/@types"
    ]
  }
}

[第二次修改] Apparently，使用最新的 typescript，如果 tsconfig.json 不在您的项目的根目录中或您的类型未存储在 node_modules/@types 中，您只需要 typeRoots 或 types。

【讨论】：

@msanford 是的，嵌套在其中。我会让答案更明确。
非常感谢第 2 步！这几天一直在用这个砸我的头。
将 "types": ["node"] 添加到我的编译器选项后。我所有的 spec.ts 测试文件都失败，找不到名称 'expect'、'it'、'describe'、'foreach' 等......
将 types: ["node"] 添加到 tsconfig.json 对我不起作用。我不得不将它添加到 src/tsconfig.app.json 中。我从 Angular 8 升级到 9 和 TS 3..5 到 3.8，也许从那以后发生了一些变化。

【解决方案7】：

我在将我的 @angular/angular2 Quickstart 项目移植到一个新的 angular cli 自动生成的项目中时遇到了这个错误。

似乎不再需要moduleId: module.id。

这是最新的自动生成组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

删除所有事件解决了我的错误。

【讨论】：

谢谢 - 这是在从 Angular 2 升级到 Angular 5 时为我做的那个 :-)

【解决方案8】：

这就是我在 Eclipse(Webclipse)/Windows 上为我所做的工作。

第 1 步：

终端

$ npm install @types/node --global --save

第 2 步：

tsconfig.json

{
  "compilerOptions": {
    ...,
    "types": ["node"]
  }
}

此外，我的 package.json 中有以下依赖项，所以我使用的是 typescript 2。

  "devDependencies": {
    ...
    "typescript": "~2.0.10",
    "@types/node": "^6.0.46",
    ...
  },

【讨论】：

【解决方案9】：

我使用的是 VS 2015，遇到了同样的问题，但我已经解决了：

添加来自 angular.io 网站的 typings.json 文件（目前为 2.0.0 最终版本）并运行：
```
typings install // don't forget to install typings globally
```

然后

npm install -D @types/node --save

在 package.json 我有

"devDependencies": {
"@types/node": "6.0.40",
...

在 typings.json 我有以下配置

{
"compilerOptions": {
    "target": "es5",
    "module":"commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "types": []
},
"exclude": [
    "node_modules",
    "app-dist"
]
}

我必须将类型添加为空数组

检查是否有重复，如果 moduleId: module.id 仍然突出显示

附言对我个人来说，这是一个奇怪的问题，因为一旦你在 typings.json 中排除了类型，你就会立即突出显示“模块”，但如果你让它进来，你就会有很多重复项。不知道该怪谁，我，打字稿还是视觉工作室 :)

【讨论】：

很确定 @types/node 的 devDependency 就足够了——之后就不需要打字了。可能发生的情况是 IDE 找不到引用，但这是另一个问题。只需在文件顶部添加/// <reference path="../../../node_modules/@types/node/index.d.ts" /> 即可解决

【解决方案10】：

两个关键点：

通过运行typings install dt~node --global --save 注册类型。因此，您将在typings.json 中获得以下部分：
```
"globalDependencies": {
    "node": "registry:dt/node#6.0.0+20160608110640"
}
```
添加对新模块的引用。两种方式：
- 直接在你的 TS 中添加对依赖项的引用
  
  /// <reference path="../../../typings/globals/node/index.d.ts" />
- 在tsconfig.json 的files 部分添加typings/index.d.ts
```
{
    "files": [
        "typings/index.d.ts"
    ]
}
```

查看更多here。

【讨论】：

【解决方案11】：

Typings 1.0 尝试“全局”而不是“环境”

typings install dt~node --global --save

【讨论】：