cannot find module 'angular2/core'

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.

For ASP.NET 5.0 applications in VS 2015, configuring typescript is a bit challenging.

Until the tooling around typescript improves, you can configure typescript manually:

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

If you are still encountering the error where it cannot find the module, exit visual studio and reload the solution.

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.

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

This is how I fixed the problem in VS2015 :

> - Open to the project property window > - Navigate to the TypeScript Build tab > - Select CommonJS as module system as shown in image below

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!

Easiest way to install it is with npm package manager, because angular2 is shipped with typing now. Your editor will recognize all import locations...

This has to be done for both 'Debug' and 'Release' then only it works in VS 2013. Like below..

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

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptTarget>ES5</TypeScriptTarget>
    <TypeScriptJSXEmit>
    </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>

I had this problem on installing ionic 2 - i installed all the packages (package.json update) and updated my npm to v3. This solved it.

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.

Just right click on "package.json"

and select "Restore Packages" after installation of Packages build it... your problem is solved

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

1. In Visual Studio 2015, go to "Tools" menu and click on "Options...". You will be able to see a tree structure on the left side of the opened window.
2. Expand "Projects and Solutions" and then select "External Web Tools". Now move "$(PATH)" entry above the "$(DevEnvDir)" entry.
3. Click OK. Restart the Visual Studio.
4. Now right click on the "package.json" file in the solution explorer and click on "Restore Packages".

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 [email protected] [email protected] @angular/forms

• Try to run npm install command (will install missing lib in your project)
• ReOpen your folder/project

Right click on "package.json" then select Install packages option it will open terminal and automatically navigate to the correct root folder and will install the required dependencies.

The package.json lists down all the list of dependencies the project needs to run.