Angular și Typescript: Nu se pot găsi numele - Eroare: nu se poate găsi numele

Folosesc Angular (versiunea 2) cu TypeScript (versiunea 1.6) și când compilez codul primesc aceste erori:

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

Acesta este codul:

import 'reflect-metadata';
import {bootstrap, Component, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/core';
@Component({
  selector: 'my-app',
  template: '<input type="text" [(ng-model)]="title" /><h1>{{title}}</h1>',
  directives: [ CORE_DIRECTIVES ]
})
class AppComponent {
  title :string;

  constructor() {
    this.title = 'hello angular 2';
  }
}
bootstrap(AppComponent);

Răspuns #1

Există o soluție menționată în jurnalul de modificări pentru 2.0.0-beta.6 (2016-02-11) (listată sub schimbări semnificative):

Dacă folosiți --target=es5, va trebui să adăugați o linie undeva în aplicația dumneavoastră (de exemplu, în partea de sus a fișierului .ts unde apelați bootstrap):

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

(Rețineți că dacă fișierul dvs. nu se află în același director cu node_modules, va trebui să adăugați unul sau mai multe ../ la începutul acelui traseu.)

asigură-te că ai calea de referință corectă, a trebuit să adaug ../ la început pentru ca acest lucru să funcționeze.

Răspunsul #2

Funcționalități ES6, cum ar fi promisiunile, nu sunt definite când se țintește ES5. Există și alte biblioteci, dar core-js este biblioteca JavaScript pe care echipa Angular o folosește. Aceasta conține polyfill-uri pentru ES6.

Angular 2 s-a schimbat mult de când a fost pusă această întrebare. Declarațiile de tip sunt mult mai ușor de utilizat în Typescript 2.0.

npm install -g typescript

Pentru caracteristicile ES6 în Angular 2, nu aveți nevoie de Typings. Doar folosiți TypeScript 2.0 sau o versiune mai recentă și instalați @types/core-js cu npm:

npm install --save-dev @types/core-js

Apoi, adăugați atributele TypeRoots și Types în 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"
  ]
}

Acesta este mult mai ușor decât să folosești Typings, așa cum este explicat în alte răspunsuri. Vezi postarea de pe blogul Microsoft pentru mai multe informații: Typescript: Viitorul Fișierelor de Declarație

Răspunsul #3

O problemă cunoscută: https://github.com/angular/angular/issues/4902

Motivul principal: fișierul .d.ts inclus implicit de TypeScript variază în funcție de ținta de compilare, așa că este necesar să existe mai multe declarații ambientale atunci când se vizează es5 chiar dacă lucrurile sunt de fapt prezente în runtime-uri (de exemplu, Chrome). Mai multe despre lib.d.ts

Răspunsul #4

Pentru cei care urmăresc tutorialul Angular2 pe angular.io, doar pentru a fi expliciți, iată o extindere a răspunsului lui mvdluit despre exact unde să puneți codul:

main.ts ar trebui să arate așa:

/// <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);

Rețineți că lăsați în /// slash-urile oblice înainte, nu le eliminați.

ref: https://github.com/ericmdantas/angular2-typescript-todo/blob/master/index.ts#L1

Răspunsul #5

Am reușit să rezolv aceasta cu următoarea comandă

typings install es6-promise es6-collections --ambient

Rețineți că aveți nevoie de typings pentru ca comanda de mai sus să funcționeze, dacă nu îl aveți, rulați următoarea comandă pentru a-l instala

npm install -g typings

ACTUALIZARE

Actualizarea typings nu mai citește --ambient, a devenit --global; de asemenea, pentru unii oameni este nevoie să instalați definițiile bibliotecilor de mai sus, doar folosiți următoarea comandă

typings install dt~es6-promise dt~es6-collections --global --save

Mulțumiri lui @bgerth pentru că a semnalat acest lucru.

Răspunsul #6

Când aveți TypeScript >= 2, opțiunea "lib" din tsconfig.json va face treaba. Nu este nevoie de Typings. https://www.typescriptlang.org/docs/handbook/compiler-options.html

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es2016", "dom"] //or es6 instead of es2016(es7)
    }
}

Răspunsul #7

Pentru Angular 2.0.0-rc.0, adăugarea node_modules/angular2/typings/browser.d.ts nu va funcționa. Mai întâi adaugă fișierul typings.json în soluția ta, cu acest conținut:

{
    "ambientDependencies": {
        "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
    }
}

Și apoi actualizează fișierul package.json pentru a include acest postinstall:

"scripts": {
    "postinstall": "typings install"
},

Acum rulează npm install

De asemenea, acum ar trebui să ignorați și folderul typings din fișierul dvs. tsconfig.json:

 "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]

Actualizare

Acum AngularJS 2.0 folosește core-js în loc de es6-shim. Urmează fișierul său quick start typings.json pentru mai multe informații.

Răspuns #8

poți adăuga codul la începutul fișierelor .ts.

/// <reference path="../typings/index.d.ts" />

Răspunsul #9

Primeam acest mesaj în Angular 2 rc1. Se pare că unele nume s-au schimbat între typings v1 și vechiul 0.x. Fișierele browser.d.ts au devenit index.d.ts.

După ce rulați typings install, localizați fișierul de pornire (unde inițializați aplicația) și adăugați:

/// <reference path="../typings/index.d.ts" /> (sau fără ../ dacă fișierul de pornire se află în același folder ca folderul cu typings)

Adăugarea index.d.ts la lista de fișiere din tsconfig.json nu a funcționat dintr-un anumit motiv.

De asemenea, pachetul es6-shim nu a fost necesar.