cannot find module 'angular2/core'

62

votes

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.

visual-studioangularvisual-studio-2015

If you use npm as the package manager, right click the project > properties. In Typescript build select CommonJs as the module loader - pixelbits

I right click on the project and clicked Properties. I only see three tabs: Application, Build and Debug. In the Build tab, there are Produce outputs on build and Compile typescript on build checkboxes. There's also the Configuration and Platform combo-boxes. There is no module loader option. This is an ASP.NET 5 web project. - raberana

Setting for CommonJS solved my problem in Visual Studio 2015 Pro. thanks @pixelbits - J King

It is all grayed out in Typescript build for me - Tom Stickel

@TomStickel it will be grayed out if you have tsconfig.json defined in your project. You can accomplish the same thing by adding this to the file: "compilerOptions": { "module": "commonjs" } - Irving

53

votes

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.

9

votes

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.

7

votes

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

6

votes

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

1

votes

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!

0

votes

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

0

votes

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.

0

votes

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>

0

votes

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.

0

votes

Just right click on "package.json"

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

0

votes

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

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

Fix: Install NPM from https://nodejs.org/en/
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

0

votes

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.
Expand "Projects and Solutions" and then select "External Web Tools". Now move "$(PATH)" entry above the "$(DevEnvDir)" entry.
Click OK. Restart the Visual Studio.
Now right click on the "package.json" file in the solution explorer and click on "Restore Packages".

0

votes

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

0

votes

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

0

votes

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.

cannot find module 'angular2/core'

15 Answers