cannot find module 'angular2/core'

Question

These red squiggly lines say cannot find module 'angular2/core',cannot find module 'angular2/router',cannot find module 'angular2/http'. I checked other posts in SO but it seems they have no appropriate answer.

I also added a reference to the d.ts files as seen below but still not working.

Other posts say that I need to configure something in the tsconfig.json file but I am using Visual Studio and I see no need to use the tscompiler suggested by the angular team because Visual Studio should be able to compile ts files automatically.

Am I missing something?

Is the tsconfig.json still required even if you use Visual Studio?

How do I get rid of these squiggly lines?

Thanks!

(I am using Visual Studio 2015 and latest Typescript engine)

UPDATE: I am not sure what exactly is the npm package manager. But I have a pre-built package.json file that was created when the project was created. I use this file for installing npm packages.

Answer 1

Hi I got the same problem when I am using eclplse editor . I have executed the below command in my cmd window and I have restarted my eclipse . It is working as expected.

npm install --save @angular/core @angular/compiler @angular/common @angular/platform-browser @angular/platform-browser-dynamic rxjs@5.0.0-beta.6 zone.js@0.6.12 @angular/forms

Answer 2

This is an Interesting issue, apart from the reasons and solution mentioned above, one can get this error on following scenarios.

1. NPM (Node Package Manager) is not installed on the machine

   Fix: Install NPM from https://nodejs.org/en/

   

2. If you are still getting this error after Installing NPM, there could be NPM configuration issue. Refer to this article to setup NPM configuration properly

Answer 3

Here is my working settings:

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

Restart Visual Studio after applying this to your web project.

Answer 4

For VS2015, go to Tools -> Options -> Text Editor -> TypeScript -> Project -> General then tick "Automatically compile TypeScript files which are not part of a project" then select "Use CommonJS code generation for modules.."

Answer 5

I too encountered this error and what worked for me was, unloading the project and checking the .csproj file. I found that this snippet was added there -

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

Removing this code, saving the csproj then reloading the project worked. Hope this helps!

Answer 6

Developing with the ASP.NET Core Angular 2 Starter Application template from Mads Kristensen. I had a similar problem starting a new directory with Typescript files.

My solution was more simple than modifying the project file. I just copied the tsconfig.json from the ClientApp folder where all of the typescript files were to my new folder.