找不到模块'angular2/core'。

Question

这些红色的波浪线显示 找不到模块'angular2/core'，找不到模块'angular2/router'，找不到模块'angular2/http'。我查看了SO上的其他帖子，但似乎没有适当的答案。

如下图所示，我还添加了对 d.ts 文件的引用，但仍无法工作。

其他帖子说我需要在 tsconfig.json 文件中配置一些东西，但我正在使用 Visual Studio，并且我认为不需要使用 angular 团队建议的 tscompiler，因为 Visual Studio 应该可以自动编译 ts 文件。

即使使用 Visual Studio，tsconfig.json 文件是否仍然需要？

我该如何消除这些波浪线？

谢谢！

（我正在使用 Visual Studio 2015 和最新的 Typescript 引擎）

更新： 我不确定 npm 包管理器是什么。但是，当项目创建时，我有一个预构建的 package.json 文件。我使用这个文件来安装 npm 包。

- raberana

---

如果您使用npm作为包管理器，在项目上右键单击>属性。在Typescript构建中选择CommonJs作为模块加载器。 - pixelbits

我右键点击该项目，然后选择了“属性”。 我只看到三个标签：应用程序、生成和调试。 在“生成”标签中，有“生成输出”和“编译 TypeScript”复选框。还有配置和平台下拉框。 没有模块加载器选项。 这是一个 ASP.NET 5 Web 项目。 - raberana

在Visual Studio 2015 Pro中设置CommonJS解决了我的问题。谢谢@pixelbits。 - J King

在我的 TypeScript 构建中，所有内容都变成了灰色。 - Tom Stickel

@TomStickel 如果您在项目中定义了tsconfig.json，则它将变为灰色。您可以通过将以下内容添加到文件中来实现相同的效果："compilerOptions": { "module": "commonjs" }。 - Irving

这些 TypeScript 错误真是让人头疼。 - Jon Crowell

Answer 1

对于在VS 2015中的ASP.NET 5.0应用程序，配置TypeScript有一定挑战性。

在TypeScript工具增强之前，您可以手动配置TypeScript：

Step 1: Right-click project, and Unload Project 
Step 2: Right-click the unloaded project, and Edit the .xproj file
Step 3: Add a PropertyGroup node, under the Project node:

  <PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
    <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
    <TypeScriptModuleKind>CommonJS</TypeScriptModuleKind>
    <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
    <TypeScriptOutFile />
    <TypeScriptOutDir />
    <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
    <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
    <TypeScriptSourceMap>True</TypeScriptSourceMap>
    <TypeScriptMapRoot />
    <TypeScriptSourceRoot />
    <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
  </PropertyGroup>

Step 4: Right-click the unloaded project and Reload Project
Step 5: Re-build project

如果仍然遇到无法找到模块的错误，请退出Visual Studio并重新加载解决方案。

- pixelbits

---

哇，它起作用了！这里还有其他的XML标签，用于设置TypeScript编译器选项。https://github.com/Microsoft/TypeScript/wiki/Setting-Compiler-Options-in-MSBuild-projects。只是一个小问题，ng和router变量仍然以红色突出显示。我以为只是ExperimentalDecorator的问题，但它已经设置为true了。 - raberana

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Mitchell

绝妙的答案！！ - DKR

我做了与上面相同的事情，但仍然得到相同的错误。 - Urvish Patel

你的答案太棒了。 - DKR

Answer 2

这是我的工作设置：

<PropertyGroup Condition="'$(Configuration)' == 'Release'">
  <TypeScriptTarget>ES5</TypeScriptTarget>
  <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
  <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
  <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
  <TypeScriptModuleKind>System</TypeScriptModuleKind>
  <TypeScriptRemoveComments>False</TypeScriptRemoveComments>
  <TypeScriptOutFile />
  <TypeScriptModuleResolution>NodeJs</TypeScriptModuleResolution>
  <TypeScriptOutDir />
  <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
  <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
  <TypeScriptSourceMap>True</TypeScriptSourceMap>
  <TypeScriptMapRoot />
  <TypeScriptSourceRoot />
  <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
  <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
</PropertyGroup>

应用此操作到您的Web项目后，请重新启动Visual Studio。

- raberana

---

如果您正在使用node.js/npm并遵循https://angular.io/docs/ts/latest/tutorial/上的angular2教程，则这是最佳解决方案。 - Stuart

这组标签对我很有用。我认为 <TypeScriptModuleResolution>NodeJs</TypeScriptModuleResolution> 是解决我看到的错误的关键（与 OP 发布的相同）。 - seangwright

请注意，这里的条件设置为Release，而在之前的例子中是Debug。 - tony

重新启动不是必要的，只需卸载和重新加载您的项目即可。 - Geert Van Laethem

Answer 3

对于VS2015，请进入“工具”-》“选项”-》“文本编辑器”-》“TypeScript”-》“项目”-》“常规”，然后选中“自动编译不属于项目的TypeScript文件”，然后选择“在模块中使用CommonJS代码生成”。

- Ron

---

我做了那个，但问题仍未解决。 - Tom Stickel

Answer 4

这是我在VS2015中解决问题的方法：

• 打开项目属性窗口
• 导航到TypeScript Build选项卡
• 按照下面的图片所示，选择CommonJS作为模块系统

- Sharif

---

抱歉，我没有VSCode。应该有一种方法可以修改项目属性。 - Sharif

我在VS2015中没有那个窗口。 - Dživo Jelić

在VS 2015中，右键单击ASP.NET 4.x项目并选择属性。然后应该出现此对话框。如上面的屏幕截图所示，“TypeScript Build”选项卡位于左下角。 - DeborahK

Answer 5

我也遇到了这个错误，对我有效的方法是卸载项目并检查.csproj文件。我发现这段代码被添加在那里 -

  <ItemGroup>
    <None Remove="ClientApp\components\componentname\componentname.ts" />
  </ItemGroup>

删除此代码，保存 csproj 文件，然后重新加载项目即可解决问题。 希望这能帮到您！

- NamrataP

Answer 6

只需右键单击 "package.json"

然后选择 "还原包"，在安装软件包后构建它... 你的问题就解决了

- Vipul Upadhyay

Answer 7

使用 Mads Kristensen 的 ASP.NET Core Angular 2 Starter Application 模板进行开发。我在使用 TypeScript 文件创建新目录时遇到了类似的问题。

我的解决方案比修改项目文件更简单。我只需将 ClientApp 文件夹中所有 TypeScript 文件复制到我的新文件夹中，包括 tsconfig.json 文件。

- villecoder

Answer 8

这是一个有趣的问题，除了上面提到的原因和解决方案之外，还有以下情况可能会导致出现此错误。

1. 机器上未安装 NPM（Node 包管理器）

   解决方法：从 https://nodejs.org/en/ 安装 NPM

   

2. 如果在安装 NPM 后仍然出现此错误，则可能存在 NPM 配置问题。请参考此 文章 正确设置 NPM 配置。

- Venkatesh Muniyandi

Answer 9

在 "package.json" 上右击鼠标，然后选择安装包选项，它会打开终端并自动导航到正确的根文件夹，并安装所需的依赖项。

package.json 列出了项目运行所需的所有依赖项列表。

- Balavignesh

Answer 10

我在安装ionic 2时遇到了这个问题 - 我安装了所有的包（package.json更新）并将我的npm更新到v3。这解决了问题。

- Ashwin G