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.

If you use npm as the package manager, right click the project > properties. In Typescript build select CommonJs as the module loader — Michael Kang
– Michael Kang, Commented Dec 28, 2015 at 7:21
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
– raberana, Commented Dec 28, 2015 at 7:26
Setting for CommonJS solved my problem in Visual Studio 2015 Pro. thanks @pixelbits — J King
– J King, Commented Jan 16, 2016 at 23:08
@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
– Irving, Commented Aug 3, 2016 at 18:10

Michael Kang · Accepted Answer · 2015-12-28 08:26:27Z

53

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.

answered Dec 28, 2015 at 8:26

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

raberana Over a year ago

wow it worked! here's also the other XML tags for compiler options of typescript. https://github.com/Microsoft/TypeScript/wiki/Setting-Compiler-Options-in-MSBuild-projects. Just a tiny problem, the ng and router variables are still highlighted in red. I thought its just the ExperimentalDecorator, but it is already set to true.

Jeeva J Over a year ago

I've tried the same thing with visual studio 2013, but still I am getting the same issue. Is there anything I've missed?

raberana Over a year ago

maybe, i'll post my settings

Mitchell Over a year ago

I found this site extremely useful, it lists all of the options you can put in the project file. github.com/Microsoft/TypeScript/wiki/…

Rupesh Kumar Tiwari Over a year ago

Thanks @pixelbits It solved my build issues also. Excellent this is what I was looking for.

|

Loïc Lopes · Accepted Answer · 2017-02-22 16:22:21Z

9

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.

edited Feb 22, 2017 at 16:22

Loïc Lopes

5748 silver badges20 bronze badges

answered Jan 8, 2016 at 17:43

raberana

11.8k18 gold badges72 silver badges97 bronze badges

4 Comments

Stuart Over a year ago

This is the best solution if you are using node.js/npm and following the angular2 tutorial from angular.io/docs/ts/latest/tutorial

seangwright Over a year ago

This set of tags worked for me. I think <TypeScriptModuleResolution>NodeJs</TypeScriptModuleResolution> was the key to fixing the bug I was seeing (same as what the OP posted).

tony Over a year ago

Note that Condition is set to Release here and Debug in the previous example

Geert Van Laethem Over a year ago

Restart is not necessary just unload and reload your project.

Ron · Accepted Answer · 2016-06-09 15:23:34Z

7

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

answered Jun 9, 2016 at 15:23

Ron

2092 silver badges6 bronze badges

1 Comment

Tom Stickel Over a year ago

I did that , but that still didn't fix the problem

Sharif · Accepted Answer · 2016-02-05 04:02:59Z

6

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

answered Feb 5, 2016 at 4:02

Sharif

978 bronze badges

3 Comments

Sharif Over a year ago

Sorry, I don't have VSCode. There should be a way to modify project properties.

Dživo Jelić Over a year ago

I dont have that window in VS2015

DeborahK Over a year ago

In VS 2015, right click on the ASP.NET 4.x project and select Properties. This dialog should then appear. The "TypeScript Build" tab is at the bottom on the left as shown in the screen shot above.

NamrataP · Accepted Answer · 2018-09-26 09:35:55Z

1

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!

answered Sep 26, 2018 at 9:35

NamrataP

1751 gold badge2 silver badges10 bronze badges

Comments

Vlado Tesanovic · Accepted Answer · 2015-12-28 07:37:20Z

0

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

answered Dec 28, 2015 at 7:37

Vlado Tesanovic

6,4242 gold badges22 silver badges32 bronze badges

1 Comment

raberana Over a year ago

i added angular2 through my project's package.json.

Ashwin G · Accepted Answer · 2016-09-29 18:50:22Z

0

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.

answered Sep 29, 2016 at 18:50

Ashwin G

1,5701 gold badge16 silver badges23 bronze badges

Comments

bbsimonbb · Accepted Answer · 2016-10-21 11:26:17Z

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>

Please edit your answer and give some context. What exactly are saying?

villecoder · Accepted Answer · 2017-02-02 14:32:31Z

0

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.

answered Feb 2, 2017 at 14:32

villecoder

13.5k2 gold badges37 silver badges54 bronze badges

Comments

Vipul Upadhyay · Accepted Answer · 2017-02-15 14:44:25Z

0

Just right click on "package.json"

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

answered Feb 15, 2017 at 14:44

Vipul Upadhyay

1241 silver badge11 bronze badges

Comments

Venkatesh Muniyandi · Accepted Answer · 2017-05-02 10:37:19Z

0

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

answered May 2, 2017 at 10:37

Venkatesh Muniyandi

5,7312 gold badges43 silver badges48 bronze badges

Comments

Nithin Thampi · Accepted Answer · 2017-06-27 11:55:54Z

0

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

answered Jun 27, 2017 at 11:55

Nithin Thampi

12 bronze badges

Comments

Sagar · Accepted Answer · 2017-06-29 11:26:55Z

0

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

answered Jun 29, 2017 at 11:26

Sagar

11 bronze badge

Comments

Wolf · Accepted Answer · 2018-07-05 03:12:53Z

0

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

answered Jul 5, 2018 at 3:12

Wolf

6,5372 gold badges32 silver badges28 bronze badges

Comments

Balavignesh · Accepted Answer · 2019-06-20 08:22:40Z

0

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.

answered Jun 20, 2019 at 8:22

Balavignesh

1

Collectives™ on Stack Overflow

cannot find module 'angular2/core'

15 Answers 15

8 Comments

4 Comments

1 Comment

3 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

15 Answers 15

8 Comments

4 Comments

1 Comment

3 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related