Angular ja Typescript: Nimiä ei löydy - Virhe: nimeä ei voi löytää

Käytän Angularia (versio 2) TypeScriptin (versio 1.6) kanssa, ja kun käännän koodin, saan nämä virheet:

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

Tässä on koodi:

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

Vastaus #1

Työkierto on mainittu version 2.0.0-beta.6 (2016-02-11) muutosten lokissa (lueteltu rikkomuksia sisältävien muutosten alla):

Jos käytät --target=es5, sinun täytyy lisätä rivi jonnekin sovellukseesi (esimerkiksi .ts-tiedoston alkuun, jossa kutsut bootstrapia):

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

(Huomaa, että jos tiedostosi ei ole samassa hakemistossa kuin node_modules, sinun täytyy lisätä yksi tai useampi ../ kyseisen polun alkuun.)

Varmista, että sinulla on oikea viitepolku, minun piti lisätä ../ alkuun saadakseni tämän toimimaan.

Vastaus #2

ES6-ominaisuuksia, kuten lupauksia, ei ole määritelty kohdistettaessa ES5:een. On olemassa muita kirjastoja, mutta core-js on JavaScript-kirjasto, jota Angularin tiimi käyttää. Se sisältää polyfillit ES6:lle.

Angular 2 on muuttunut paljon siitä, kun tätä kysymystä kysyttiin. Tyyppideklaroinnit ovat paljon helpompia käyttää Typescript 2.0:ssa.

npm install -g typescript

ES6-ominaisuuksia Angular 2:ssa varten et tarvitse Typingsiä. Käytä vain TypeScript 2.0:a tai uudempaa ja asenna @types/core-js npm:llä:

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

Lisää sitten TypeRoots ja Types attribuutit tsconfig.json-tiedostoosi:

{
  "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"
  ]
}

Tämä on paljon helpompaa kuin Typingsin käyttäminen, kuten muissa vastauksissa on selitetty. Katso Microsoftin blogikirjoitus saadaksesi lisää tietoa: Typescript: The Future of Declaration Files

Vastaus #3

Tunnettu ongelma: https://github.com/angular/angular/issues/4902

Perimmäinen syy: TypeScriptin oletuksena sisällyttämä .d.ts-tiedosto vaihtelee käännöstavoitteen mukaan, joten es5-kohdetta käytettäessä tarvitaan enemmän ambient-ilmoituksia, vaikka asiat olisivatkin todellisuudessa saatavilla ajoympäristöissä (esim. Chrome). Lisätietoja lib.d.ts:stä

Vastaus #4

Niille, jotka seuraavat Angular2-opasta sivustolla angular.io, ollakseen täsmällisiä, tässä on laajennus mvdluitin vastauksesta siitä, tarkalleen missä koodi tulee sijoittaa:

Tiedostosi main.ts tulisi näyttää tältä:

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

Huomaa, että jätät /// eteenpäin osoittavat kauttaviivat, älä poista niitä.

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

Vastaus #5

Pystyin korjaamaan tämän seuraavalla komennolla

typings install es6-promise es6-collections --ambient

Huomaa, että tarvitset typings saadaksesi yllä olevan komennon toimimaan; jos sinulla ei ole sitä, suorita seuraava komento asentaaksesi sen

npm install -g typings

PÄIVITYS

typings-päivitys ei enää lue --ambient, siitä tuli --global, myös joidenkin ihmisten täytyy asentaa yllä olevien kirjastojen määritelmät, käytä vain seuraavaa komentoa

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

Kiitos @bgerth siitä, että huomautit tästä.

Vastaus #6

Kun käytössä on Typescript >= 2, tsconfig.json-tiedoston "lib"-vaihtoehto hoitaa asian. Typings ei ole tarpeen. https://www.typescriptlang.org/docs/handbook/compiler-options.html

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

Vastaus #7

Versiolle Angular 2.0.0-rc.0 node_modules/angular2/typings/browser.d.ts lisääminen ei toimi. Lisää ensin typings.json-tiedosto ratkaisuusi seuraavalla sisällöllä:

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

Ja päivitä sitten package.json-tiedosto sisällyttämään tämä postinstall:

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

Suorita nyt npm install

Nyt sinun tulisi myös ohittaa typings-kansio tsconfig.json-tiedostossasi:

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

Päivitys

Nyt AngularJS 2.0 käyttää core-js sen sijaan, että käyttäisi es6-shim. Seuraa sen nopean aloituksen typings.json-tiedostoa saadaksesi lisää tietoa.

Vastaus #8

voit lisätä koodin .ts-tiedostojen alkuun.

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

Vastaus #9

Sain tämän Angular 2 rc1:ssä. Kävi ilmi, että joitakin nimiä muuttui typings v1:n ja vanhan 0.x:n välillä. browser.d.ts-tiedostot muuttuivat index.d.ts-tiedostoiksi.

Suorittamisen jälkeen typings install etsi käynnistystiedostosi (siinä missä käynnistät sovelluksen) ja lisää:

/// <reference path="../typings/index.d.ts" /> (tai ilman ../, jos aloitustiedostosi on samassa kansiossa kuin typings-kansio)

Tiedoston index.d.ts lisääminen tiedostojen listaan tsconfig.json-tiedostossa ei jostain syystä toiminut.

Myöskään es6-shim-pakettia ei tarvittu.