Angular and Typescript Can t find names - Error cannot find name

Question

I am using Angular  version 2  with TypeScript  version 1 6  and when I compile the code I get these errors   Error TS2304  Cannot find name  Map       node modules angular2 src core change detection parser locals d ts 4 42   Error TS2304  Cannot find name  Map       node modules angular2 src core facade collection d ts 1 25   Error TS2304  Cannot find name  MapConstructor       node modules angular2 src core facade collection d ts 2 25   Error TS2304  Cannot find name  SetConstructor       node modules angular2 src core facade collection d ts 4 27   Error TS2304  Cannot find name  Map       node modules angular2 src core facade collection d ts 4 39   Error TS2304  Cannot find name  Map       node modules angular2 src core facade collection d ts 7 9   Error TS2304  Cannot find name  Map       node modules angular2 src core facade collection d ts 8 30   Error TS2304  Cannot find name  Map       node modules angular2 src core facade collection d ts 11 43   Error TS2304  Cannot find name  Map       node modules angular2 src core facade collection d ts 12 27   Error TS2304  Cannot find name  Map       node modules angular2 src core facade collection d ts 14 23   Error TS2304  Cannot find name  Map       node modules angular2 src core facade collection d ts 15 25   Error TS2304  Cannot find name  Map       node modules angular2 src core facade collection d ts 94 41   Error TS2304  Cannot find name  Set       node modules angular2 src core facade collection d ts 95 22   Error TS2304  Cannot find name  Set       node modules angular2 src core facade collection d ts 96 25   Error TS2304  Cannot find name  Set       node modules angular2 src core facade lang d ts 1 22   Error TS2304  Cannot find name  BrowserNodeGlobal       node modules angular2 src core facade lang d ts 33 59   Error TS2304  Cannot find name  Map       node modules angular2 src core facade promise d ts 1 10   Error TS2304  Cannot find name  Promise       node modules angular2 src core facade promise d ts 3 14   Error TS2304  Cannot find name  Promise       node modules angular2 src core facade promise d ts 8 32   Error TS2304  Cannot find name  Promise       node modules angular2 src core facade promise d ts 9 38   Error TS2304  Cannot find name  Promise       node modules angular2 src core facade promise d ts 10 35   Error TS2304  Cannot find name  Promise       node modules angular2 src core facade promise d ts 10 93   Error TS2304  Cannot find name  Promise       node modules angular2 src core facade promise d ts 11 34   Error TS2304  Cannot find name  Promise       node modules angular2 src core facade promise d ts 12 32   Error TS2304  Cannot find name  Promise       node modules angular2 src core facade promise d ts 12 149   Error TS2304  Cannot find name  Promise       node modules angular2 src core facade promise d ts 13 43   Error TS2304  Cannot find name  Promise       node modules angular2 src core linker element injector d ts 72 32   Error TS2304  Cannot find name  Map       node modules angular2 src core linker element injector d ts 74 17   Error TS2304  Cannot find name  Map       node modules angular2 src core linker element injector d ts 78 184   Error TS2304  Cannot find name  Map       node modules angular2 src core linker element injector d ts 83 182   Error TS2304  Cannot find name  Map       node modules angular2 src core linker element injector d ts 107 37   Error TS2304  Cannot find name  Map       node modules angular2 src core linker proto view factory d ts 27 146   Error TS2304  Cannot find name  Map       node modules angular2 src core linker view d ts 52 144   Error TS2304  Cannot find name  Map       node modules angular2 src core linker view d ts 76 79   Error TS2304  Cannot find name  Map       node modules angular2 src core linker view d ts 77 73   Error TS2304  Cannot find name  Map       node modules angular2 src core linker view d ts 94 31   Error TS2304  Cannot find name  Map       node modules angular2 src core linker view d ts 97 18   Error TS2304  Cannot find name  Map       node modules angular2 src core linker view d ts 100 24   Error TS2304  Cannot find name  Map       node modules angular2 src core linker view d ts 103 142   Error TS2304  Cannot find name  Map       node modules angular2 src core linker view d ts 104 160   Error TS2304  Cannot find name  Map       node modules angular2 src core render api d ts 281 74   Error TS2304  Cannot find name  Map       node modules angular2 src core zone ng zone d ts 1 37   Error TS2304  Cannot find name  Zone     This is the code   import  reflect-metadata   import  bootstrap  Component  CORE DIRECTIVES  FORM DIRECTIVES  from  angular2 core    Component     selector   my-app     template    lt input type  text    ng-model    title    gt  lt h1 gt   title   lt  h1 gt      directives    CORE DIRECTIVES      class AppComponent     title  string     constructor         this title    hello angular 2         bootstrap AppComponent

User · Answer

Update tsconfig json  change   target    es5    to   target    es6

User · Answer

If npm install -g typings typings install still does not help  delete node modules and typings folders before executing this command

User · Answer

Do import the below statement in your JS file   import  rxjs add operator map

User · Answer

add typing d ts in main folder of the application and over there declare the varible which you want to use every time  declare var System  any  declare var require  any    after declaring this in typing d ts  error for require will not come in the application

User · Answer

This is that think how everyone is trying to do something different  I believe these systems still far from the final version   In my case  I updated from rc 0 to rc 5 this error appeared    My fixed was change the tsconfig json          compilerOptions              target    es6    lt -- It was es5          module    system            moduleResolution    node            sourceMap   true           emitDecoratorMetadata   true           experimentalDecorators   true           removeComments   false           noImplicitAny   false           outDir       wwwroot app              compileOnSave   true       exclude                 node modules               typings main

User · Answer

Angular 2 RC1 renamed the node modules angular2 directory to node modules angular   If you re using a gulpfile to copy files to an output directory you probably still have node modules angular sitting in there which may be getting picked up by the compiler and confusing the hell out of itself   So  carefully  wipe out what you have in node modules that is for the beta versions  and also delete any old typings and re-run typings install

User · Answer

There is a work-around mentioned in the changelog for 2 0 0-beta 6  2016-02-11   listed under breaking changes       If you use --target es5  you will need to add a line somewhere in your application  for example  at the top of the  ts file where you call bootstrap         lt reference path  node modules angular2 typings browser d ts   gt        Note that if your file is not in the same directory as node modules  you ll need to add one or more     to the start of that path     make sure you have the correct reference path  i needed to add     to the start to get this working

User · Answer

When having Typescript    2 the  lib  option in tsconfig json will do the job  No need for Typings  https   www typescriptlang org docs handbook compiler-options html         compilerOptions              target    es5            lib     es2016    dom     or es6 instead of es2016 es7

User · Answer

This could be because you are missing an import  Example   ERROR in src app products product-list component ts 15 15 - error TS2304  Cannot find name  IProduct    Make sure you are adding the import at the top of the file  import   IProduct   from    product        export class ProductListComponent       pageTitle  string    product list        imageWidth  number   50      imageMargin  number   2      showImage  boolean   false      listFilter  string    cart       products  IProduct           cannot find name error

User · Answer

I found this very helpful doc at Angular 2 s website  It finally let me get things working properly  whereas the other answers here  to install typings  failed me with various errors   But helped lead me in the right direction    Instead of including es6-promise and es6-collections  it includes core-js  which did the trick for me    no conflicts with Angular2 s core ts definitions  Additionally the document explained how to set up all this to happen automatically when installing NPM  and how to modify your typings json file

User · Answer

typings install dt es6-shim --save --global   and add the correct path to index d ts      lt reference path     typings index d ts   gt    Tried on  angular-2 0 0-rc3

User · Answer

ES6 features like promises aren t defined when targeting ES5  There are other libraries  but core-js is the javascript library that the Angular team uses  It contains polyfills for ES6   Angular 2 has changed a lot since this question was asked  Type declarations are much easier to use in Typescript 2 0   npm install -g typescript   For ES6 features in Angular 2  you don t need Typings  Just use typescript 2 0 or higher and install  types core-js with npm    npm install --save-dev  types core-js   Then  add the TypeRoots and Types attributes to your tsconfig json        compilerOptions          target    es5        module    es6        moduleResolution    node        sourceMap   true       emitDecoratorMetadata   true       experimentalDecorators   true       removeComments   false       noImplicitAny   false       typeRoots               node modules  types              types             core-js                exclude          node modules          This is much easier than using Typings  as explained in other answers  See Microsoft s blog post for more info  Typescript  The Future of Declaration Files

User · Answer

For Angular 2 0 0-rc 0 adding node modules angular2 typings browser d ts won t work  First add typings json file to your solution  with this content          ambientDependencies              es6-shim    github DefinitelyTyped DefinitelyTyped es6-shim es6-shim d ts 7de6c3dd94feaeb21f20054b9f30d5dabc5efabd            And then update the package json file to include this postinstall    scripts          postinstall    typings install       Now run npm install  Also now you should ignore typings folder in your tsconfig json file as well     exclude              node modules            typings main            typings main d ts          Update  Now AngularJS 2 0 is using core-js instead of es6-shim  Follow its quick start typings json file for more info

User · Answer

A known issue  https   github com angular angular issues 4902   Core reason  the  d ts file implicitly included by TypeScript varies with the compile target  so one needs to have more ambient declarations when targeting es5 even if things are actually present in the runtimes  e g  chrome   More on lib d ts

User · Answer

you can add the code at the beginning of  ts files        lt reference path     typings index d ts    gt

User · Answer

For those following the Angular2 tutorial on angular io just to be explicit  here is an expansion of mvdluit s answer of exactly where to put the code   Your main ts should look like this        lt reference path     node modules angular2 typings browser d ts    gt   import  bootstrap  from  angular2 platform browser  import  AppComponent  from    app component     Add all operators to Observable import  rxjs Rx   bootstrap AppComponent     Note that you leave in the     forward slashes  don t remove them   ref  https   github com ericmdantas angular2-typescript-todo blob master index ts L1

User · Answer

Good call   VahidN   I found I needed        exclude              node modules            typings main            typings main d ts          In my tsconfig too  to stop errors from es6-shim itself

User · Answer

I was getting this error after merging my dev branch to my current branch  I spent sometime to fix the issue  As you can see in the below image  there is no problem in the codes at all   So the only fix worked for me is that Restarting the VSCode

User · Answer

The accepted answer doesn t provide a viable fix  and most of the other ones suggest the  triple-slashes  workaround which is not viable anymore  since the browser d ts has been removed by the Angular2 latest RC s and thus is not available anymore   I strongly suggest to install the typings module as suggested by a couple solutions here  yet it s not necessary to do it manually or globally - there s an effective way to do that for your project only and within VS2015 interface  Here s what you need to do    add typings in the project s package json file  add a script block in the package json file to execute update typings after each NPM action  add a typings json file in the project s root folder containing a reference to core-js  overall better than es6-shim atm     That s it   You can also take a look to this other SO thread and or read this post on my blog for additional details

User · Answer

I was getting this on Angular 2 rc1  Turns out some names changed with typings v1 vs the old 0 x  The browser d ts files became index d ts   After running typings install locate your startup file  where you bootstrap  and add        lt reference path     typings index d ts    gt   or without the     if your startup file is in the same folder as the typings folder   Adding index d ts to the files list in tsconfig json did not work for some reason   Also  the es6-shim package was not needed

User · Answer

I am new to Angular but for me the solution was found by simply importing Input  Can t take credit for this one  found it on another board  This is a simple fix if you re having the same problem but if your issues are more complex I d read the stuff above   Mukesh      you have to import input like this at top of child component   import   Directive  Component  OnInit  Input   from   angular core

User · Answer

I was able to fix this by installing the typings module   npm install -g typings typings install    Using ng 2 0 0-rc 1

User · Answer

Now you must import them manually   import  rxjs add operator retry   import  rxjs add operator timeout   import  rxjs add operator delay   import  rxjs add operator map       this http post url  JSON stringify json    headers  headers  timeout  1000              retry 2             timeout 10000  new Error  Time out                delay 10             map  res    gt  res json             subscribe             data    gt  resolve data json                err    gt  reject err

User · Answer

I had the same problem and I solved it using the lib option in tsconfig json  As said by basarat in his answer  a  d ts file is implicitly included by TypeScript depending on the compile targetoption but this behaviour can be changed with the lib option   You can specify additional definition files to be included without changing the targeted JS version  For examples this is part of my current compilerOptions for Typescript 2 1 and it adds support for es2015 features without installing anything else    compilerOptions          experimentalDecorators   true       lib     es5    dom    es6    dom iterable    scripthost         module    commonjs        moduleResolution    node        noLib   false       target    es5        types     node       For the complete list of available options check the official doc   Note also that I added  types     node   and installed npm install  types node to support require  some-module   in my code

User · Answer

I was able to fix this with the following command  typings install es6-promise es6-collections --ambient   Note that you need typings to make the above command work  if you do not have it run the following command to install it  npm install -g typings   UPDATE  typings update doesn t read --ambient it became --global also for some people you need to install the definitions of the above libraries  just use the following command  typings install dt es6-promise dt es6-collections --global --save   Thanks to  bgerth for pointing this out

[angular] Angular and Typescript: Can't find names - Error: cannot find name

Examples related to angular

Examples related to typescript