Angolare e dattiloscritto: impossibile trovare i nomi

Sto usando Angular (versione 2) con TypeScript (versione 1.6) e quando compilo il codice ottengo questi errori:

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

Questo è il codice:

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

Un problema noto: https://github.com/angular/angular/issues/4902

Motivo principale: il .d.tsfile incluso implicitamente da TypeScript varia in base al target di compilazione, quindi è necessario disporre di più dichiarazioni ambientali durante il targeting es5anche se le cose sono effettivamente presenti nei runtime (ad es. Chrome). Più sulib.d.ts

Esiste una soluzione alternativa menzionata nel registro delle modifiche per 2.0.0-beta.6 (11-02-2016) (elencata sotto le ultime modifiche):

Se usi --target = es5, dovrai aggiungere una linea da qualche parte nella tua applicazione (ad esempio, nella parte superiore del file .ts dove chiami bootstrap):

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

(Nota che se il tuo file non si trova nella stessa directory di node_modules, dovrai aggiungere uno o più ../ all'inizio di quel percorso.)

assicurati di avere il percorso di riferimento corretto, avevo bisogno di aggiungere ../ all'inizio per farlo funzionare.

Le funzionalità di ES6 come le promesse non sono definite quando si sceglie ES5. Esistono altre librerie, ma core-js è la libreria javascript utilizzata dal team Angular. Contiene polifilloli per ES6.

Angular 2 è cambiato molto da quando è stata posta questa domanda. Le dichiarazioni di tipo sono molto più facili da usare in Typescript 2.0.

npm install -g typescript

Per le funzionalità ES6 in Angular 2, non è necessario digitare. Basta usare typescript 2.0 o versioni successive e installare @ types / core-js con npm:

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

Quindi, aggiungi gli attributi TypeRoots e Tipi a 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"
  ]
}

Questo è molto più semplice rispetto all'uso di Digitazioni, come spiegato in altre risposte. Vedere il post sul blog di Microsoft per ulteriori informazioni: Typescript: The Future of Declaration Files

Per coloro che seguono il tutorial di Angular2 su angular.io solo per essere espliciti, ecco un'espansione della risposta di mvdluit di dove esattamente mettere il codice:

Il tuo main.tsdovrebbe assomigliare a questo:

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

Si noti che si lasciano le ///barre in avanti, non rimuoverle.

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

Sono stato in grado di risolvere questo problema con il seguente comando

typings install es6-promise es6-collections --ambient

Si noti che è necessario typingsfar funzionare il comando sopra, se non lo si esegue eseguire il comando seguente per installarlo

npm install -g typings

AGGIORNARE

l'aggiornamento delle digitazioni non legge --ambientè diventato --globalanche per alcune persone è necessario installare le definizioni delle librerie sopra, basta usare il seguente comando

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

Grazie a @bgerth per averlo segnalato.

Quando hai Typescript> = 2 l'opzione "lib" in tsconfig.json farà il lavoro. Non c'è bisogno di digitare. https://www.typescriptlang.org/docs/handbook/compiler-options.html

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

Per l' Angular 2.0.0-rc.0aggiunta node_modules/angular2/typings/browser.d.tsnon funzionerà. Per prima cosa aggiungi il file typings.json alla tua soluzione, con questo contenuto:

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

E quindi aggiorna il package.jsonfile per includerlo postinstall:

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

Adesso corri npm install

Inoltre ora dovresti ignorare anche la typingscartella nel tuo tsconfig.jsonfile:

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

Aggiornare

Ora AngularJS 2.0 sta usando core-jsal posto di es6-shim. Segui il suo file typings.json di avvio rapido per maggiori informazioni.

puoi aggiungere il codice all'inizio dei file .ts.

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

Lo stavo ottenendo su Angular 2 rc1. Risulta che alcuni nomi sono stati modificati con le digitazioni v1 rispetto al vecchio 0.x. I browser.d.tsfile sono diventatiindex.d.ts .

Dopo aver eseguito, typings installindividuare il file di avvio (dove si avvia bootstrap) e aggiungere:

/// <reference path="../typings/index.d.ts" /> (o senza il ../ se il file di avvio si trova nella stessa cartella della cartella delle tipizzazioni)

Aggiunta index.d.tsall'elenco dei file intsconfig.json non ha funzionato per qualche motivo.

Inoltre, il es6-shimpacchetto non era necessario.

Sono stato in grado di risolvere questo problema installando il typingsmodulo.

npm install -g typings
typings install

(Utilizzando ng 2.0.0-rc.1)

Ho avuto lo stesso problema e l'ho risolto usando l' libopzione in tsconfig.json. Come detto da basarat nella sua risposta , un tipo di .d.tsfile è implicitamente incluso in TypeScript a seconda targetdell'opzione di compilazione , ma questo comportamento può essere modificato conlib opzione.

È possibile specificare ulteriori file di definizione da includere senza modificare la versione JS di destinazione. Ad esempio, questo fa parte del mio attuale compilerOptionsper Typescript@2.1 e aggiunge il supporto per le es2015funzionalità senza installare nient'altro:

"compilerOptions": {
    "experimentalDecorators": true,
    "lib": ["es5", "dom", "es6", "dom.iterable", "scripthost"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noLib": false,
    "target": "es5",
    "types": ["node"]
}

Per l'elenco completo delle opzioni disponibili, consultare il documento ufficiale .

Nota anche che ho aggiunto "types": ["node"]e installato npm install @types/nodeper supportare il require('some-module')mio codice.

 typings install dt~es6-shim --save --global

e aggiungi il percorso corretto a index.d.ts

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

Ho provato @ angular-2.0.0-rc3

Se il problema persistenpm install -g typings typings install , eliminare le cartelle node_modules e typing prima di eseguire questo comando.

Questo è quello che pensa come tutti stanno cercando di fare qualcosa di diverso. Credo che questi sistemi siano ancora lontani dalla versione finale.

Nel mio caso, ho aggiornato da rc.0 a rc.5 questo errore è apparso.

Il mio problema era cambiare 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"
    ]
}

aggiungi typing.d.ts nella cartella principale dell'applicazione e lì dichiara la variabile che vuoi usare ogni volta

declare var System: any;
declare var require: any;

dopo averlo dichiarato in typing.d.ts, nell'applicazione non verrà visualizzato l'errore per request.

Sono nuovo di Angular ma per me la soluzione è stata trovata semplicemente importando Input. Non posso prendermi il merito per questo, l'ho trovato su un'altra scheda. Questa è una soluzione semplice se stai riscontrando lo stesso problema, ma se i tuoi problemi sono più complessi leggerei le cose sopra.

Mukesh :

devi importare input in questo modo nella parte superiore del componente figlio

import { Directive, Component, OnInit, Input } from '@angular/core';

Ho trovato questo documento molto utile sul sito Web di Angular 2. Finalmente mi ha permesso di far funzionare le cose correttamente, mentre le altre risposte qui, per installare le digitazioni, mi hanno fallito con vari errori. (Ma mi ha aiutato a guidarmi nella giusta direzione.)

Invece di includere es6-promise ed es6-collection, include core-js, che ha fatto il trucco per me ... nessun conflitto con le definizioni di core ts di Angular2. Inoltre, il documento ha spiegato come impostare tutto ciò in modo che accada automaticamente durante l'installazione di NPM e come modificare il file typings.json.

Angular 2 RC1 ha rinominato la node_modules/angular2directory innode_modules/angular .

Se stai usando un gulpfile per copiare i file in una directory di output probabilmente hai ancora node_modules/angular seduto lì che potrebbe essere raccolto dal compilatore e confondere l'inferno da solo.

Quindi (accuratamente) cancella ciò che hai in node_modulesquella è per le versioni beta, ed elimina anche tutte le vecchie digitazioni ed esegui nuovamente typings install.

Bella telefonata, @VahidN, ho scoperto di aver bisogno

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

Anche nel mio tsconfig, per fermare gli errori da es6-shimse stesso

Importa la seguente istruzione nel tuo file JS.

import 'rxjs/add/operator/map';

La risposta accettata non fornisce una soluzione praticabile, e la maggior parte delle altre suggerisce la soluzione "triple-slash" che non è più praticabile, poiché browser.d.tsè stata rimossa dagli ultimi RC di Angular2 e quindi non è più disponibile.

Consiglio vivamente di installare il typingsmodulo come suggerito da un paio di soluzioni qui, ma non è necessario farlo manualmente o globalmente - c'è un modo efficace per farlo solo per il tuo progetto e all'interno dell'interfaccia VS2015. Ecco cosa devi fare:

• aggiungi typingsnel file package.json del progetto.
• aggiungere un scriptblocco nel package.jsonfile per eseguire / aggiornaretypings dopo ogni azione NPM.
• aggiungere un typings.jsonfile nella cartella principale del progetto contenente un riferimento a core-js(complessivamente meglio di es6-shimatm).

Questo è tutto.

Puoi anche dare un'occhiata a quest'altro thread SO e / o leggere questo post sul mio blog per ulteriori dettagli.

Stavo ricevendo questo errore dopo aver unito il mio ramo dev al mio ramo attuale. Ho impiegato un po 'di tempo per risolvere il problema. Come puoi vedere nell'immagine qui sotto, non c'è nessun problema nei codici.

Quindi l'unica soluzione che ha funzionato per me è che il riavvio del VSCode

Ora devi importarli manualmente.

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) => res.json())
        .subscribe(
          (data) => resolve(data.json()),
          (err) => reject(err)
        );

Aggiorna tsconfig.json, cambia

"target": "es5"

per

"target": "es6"