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

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

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

User · Answer

Update tsconfig json  change   target    es5    to   target    es6

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

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

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

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

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

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

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

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

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:

/// <reference path="../node_modules/angular2/typings/browser.d.ts" />

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

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

///<reference path="node_modules/angular2/typings/browser.d.ts"/>

(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

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

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 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 [email protected] 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

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

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.

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

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

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

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

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

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

The answer is

Examples related to angular

Examples related to typescript

Tags