it-swarm.com.de

Winkel und TypeScript: Kann keine Namen finden

Ich verwende Angular (Version 2) mit TypeScript (Version 1.6) und wenn ich den Code kompiliere, erhalte ich folgende Fehler:

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

Dies ist der Code:

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

Ein bekanntes Problem: https://github.com/angular/angular/issues/4902

Hauptgrund: Die .d.ts-Datei, die implizit von TypeScript eingeschlossen wird, hängt vom Kompilierungsziel ab, sodass beim Anpassen von es5 mehr Umgebungsdeklarationen erforderlich sind, auch wenn tatsächlich Dinge in den Laufzeiten vorhanden sind (beispielsweise Chrome). Mehr zu lib.d.ts

52
basarat

Im Changelog wird eine Problemumgehung für 2.0.0-beta.6 (2016-02-11) erwähnt (aufgeführt unter brechenden Änderungen):

Wenn Sie --target = es5 verwenden, müssen Sie irgendwo in Ihrer Anwendung eine Zeile hinzufügen (z. B. oben in der .ts-Datei, in der Sie bootstrap aufrufen):

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

(Wenn sich Ihre Datei nicht im selben Verzeichnis wie node_modules befindet, müssen Sie am Anfang dieses Pfads ein oder mehrere ../ hinzufügen.)

vergewissern Sie sich, dass Sie den richtigen Referenzpfad haben. Ich musste ../ an den Anfang setzen, damit das funktioniert.

103
mvdluit

ES6-Funktionen wie Versprechen werden bei der Ausrichtung auf ES5 nicht definiert. Es gibt andere Bibliotheken, aber Core-js ist die Javascript-Bibliothek, die das Angular-Team verwendet. Es enthält Polyfills für ES6.

Seit dieser Frage hat sich Angular 2 sehr verändert. Typdeklarationen sind much, die in TypeScript 2.0 einfacher zu verwenden sind.

npm install -g TypeScript

Für ES6-Funktionen in Angular 2 benötigen Sie keine Typings. Verwenden Sie einfach TypeScript 2.0 oder höher und installieren Sie @ types/core-js mit npm: 

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

Fügen Sie dann die Attribute TypeRoots und Types zu Ihrer Datei tsconfig.json hinzu:

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

Dies ist viel einfacher als die Verwendung von Typings, wie in anderen Antworten erläutert. Weitere Informationen finden Sie im Blog-Beitrag von Microsoft: TypeScript: Die Zukunft der Deklarationsdateien

80
drinck

Ich konnte das mit dem folgenden Befehl beheben

typings install es6-promise es6-collections --ambient

Beachten Sie, dass Sie typings benötigen, damit der obige Befehl ausgeführt werden kann. Führen Sie andernfalls den folgenden Befehl aus, um ihn zu installieren

npm install -g typings

UPDATE

typings update liest --ambient nicht, es wurde --global Auch für einige Benutzer müssen Sie die Definitionen der oben genannten Bibliotheken installieren

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

Vielen Dank an @bgerth für diesen Hinweis.

48

Für diejenigen, die dem Angular2-Tutorial zu angular.io folgen, um nur explizit zu sein, hier eine Erweiterung der Antwort von mvdluit, wo genau der Code steht:

Ihr main.ts sollte so aussehen:

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

Beachten Sie, dass Sie die Schrägstriche /// verwenden und nicht entfernen.

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

48
Rots

Wenn TypeScript> = 2 ist, wird die Option "lib" in tsconfig.json ausgeführt. Keine Notwendigkeit für Typings. https://www.typescriptlang.org/docs/handbook/compiler-options.html

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

Für Angular 2.0.0-rc.0 funktioniert node_modules/angular2/typings/browser.d.ts nicht. Fügen Sie Ihrer Lösung zunächst die Datei typings.json mit folgendem Inhalt hinzu:

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

Aktualisieren Sie anschließend die package.json-Datei, um diese postinstall aufzunehmen:

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

Jetzt npm install ausführen

Nun sollten Sie auch den typings-Ordner in Ihrer tsconfig.json-Datei ignorieren:

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

Update

AngularJS 2.0 verwendet jetzt core-js anstelle von es6-shim. Folgen Sie dem Schnellstart typings.json file für weitere Informationen.

15
VahidN

sie können den Code am Anfang von .ts-Dateien hinzufügen.

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

Ich habe dies auf Angular 2 rc1 bekommen. Stellt sich heraus, dass einige Namen mit der Typisierung v1 gegenüber der alten 0.x geändert wurden. Die browser.d.ts-Dateien wurden index.d.ts.

Nach dem Ausführen von typings install suchen Sie Ihre Startdatei (wo Sie bootstrap sind) und fügen Sie Folgendes hinzu:

/// <reference path="../typings/index.d.ts" /> (oder ohne ../, wenn sich die Startdatei im selben Ordner befindet wie der Eingabeordner)

Das Hinzufügen von index.d.ts zur Dateiliste in tsconfig.json hat aus irgendeinem Grund nicht funktioniert.

Das es6-shim-Paket wurde auch nicht benötigt.

10
mbursill

Dies konnte ich durch die Installation des Moduls typings beheben.

npm install -g typings
typings install

(Mit ng 2.0.0-rc.1)

7
theUtherSide

Ich hatte das gleiche Problem und habe es mit der Option lib in tsconfig.json gelöst. Wie von basarat in seiner Antwort gesagt, wird eine .d.ts-Datei abhängig von der target-Option von TypeScript implizit eingeschlossen. Dieses Verhalten kann jedoch mit der lib-Option geändert werden.

Sie können zusätzliche Definitionsdateien angeben, die eingeschlossen werden sollen, ohne die Zielversion von JS zu ändern. Für Beispiele ist dies Teil meiner aktuellen compilerOptions für [email protected] und fügt Unterstützung für es2015-Funktionen hinzu, ohne etwas anderes zu installieren:

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

Die vollständige Liste der verfügbaren Optionen finden Sie unter official doc .

Beachten Sie auch, dass ich "types": ["node"] hinzugefügt und npm install @types/node installiert habe, um require('some-module') in meinem Code zu unterstützen.

7
Jiayi Hu

Dies ist das Denken, wie jeder versucht, etwas anderes zu tun. Ich glaube, diese Systeme sind noch weit von der endgültigen Version entfernt.

In meinem Fall habe ich von rc.0 auf rc.5 aktualisiert, und dieser Fehler ist aufgetreten. 

Mein Fix war die tsconfig.json zu ändern.

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

Ich bin neu bei Angular, aber für mich wurde die Lösung durch einfachen Import von Input gefunden. Ich kann es nicht anerkennen, habe es auf einem anderen Brett gefunden. Dies ist eine einfache Lösung, wenn Sie das gleiche Problem haben, aber wenn Ihre Probleme komplexer sind, würde ich die Informationen oben lesen.

Mukesh :

sie müssen solche Eingaben oben in der untergeordneten Komponente importieren

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

Wenn npm install -g typings typings install immer noch nicht hilft, löschen Sie die Ordner node_modules und typings vor der Ausführung dieses Befehls.

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

und fügen Sie den korrekten Pfad zu index.d.ts hinzu

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

Versucht auf @ angle-2.0.0-rc3 

4
Ali Salehi

fügen Sie im Hauptordner der Anwendung die Datei typing.d.ts hinzu und geben Sie dort die Variable an, die Sie jedes Mal verwenden möchten

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

nachdem Sie dies in typing.d.ts deklariert haben, wird der Fehler für request nicht in der Anwendung angezeigt.

3
NARGIS PARWEEN

Ich habe dieses sehr hilfreiche Dokument auf der Website von Angular 2 gefunden. Damit konnte ich endlich die Dinge richtig zum Laufen bringen, während die anderen Antworten hier, um Typisierungen zu installieren, mit verschiedenen Fehlern versagten. (Hat aber geholfen, mich in die richtige Richtung zu führen.)

Anstatt es6-promise und es6-collection aufzunehmen, enthält es core-js, was für mich der Trick war ... keine Konflikte mit den Kern-Definitionen von Angular2. Außerdem wurde in diesem Dokument erläutert, wie Sie das alles automatisch einrichten, wenn Sie NPM installieren, und wie Sie die Datei typings.json ändern.

3
Vern Jensen

Guten Anruf, @VahidN, ich fand, ich brauchte 

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

Auch in meiner tsconfig, um Fehler von es6-shim selbst zu stoppen

2

Angular 2 RC1 benannte das node_modules/angular2-Verzeichnis in node_modules/angular um.

Wenn Sie ein gulpfile verwenden, um Dateien in ein Ausgabeverzeichnis zu kopieren, haben Sie wahrscheinlich noch node_modules/angular dort, was möglicherweise vom Compiler abgeholt wird und die Hölle aus sich selbst verwirrt.

(Vorsicht) Wischen Sie das, was Sie in node_modules für die Betaversionen haben, sorgfältig aus, und löschen Sie auch alle alten Typisierungen und führen Sie typings install erneut aus.

2
Simon_Weaver

Importieren Sie die folgende Anweisung in Ihre JS-Datei.

import 'rxjs/add/operator/map';
2
Shivang Gupta

Ich habe diesen Fehler erhalten, nachdem ich meinen Entwicklungszweig mit meinem aktuellen Zweig zusammengeführt habe. Ich habe einige Zeit damit verbracht, das Problem zu beheben. Wie Sie in der folgenden Abbildung sehen können, gibt es überhaupt keine Probleme mit den Codes.

 enter image description here 

Das einzige Problem, das für mich behoben werden konnte, ist das Neustarten des VSCode

1
Sibeesh Venu

Die akzeptierte Antwort ist kein praktikabler Fix, und die meisten anderen schlagen den Workaround "Triple-Slashes" vor, der nicht mehr praktikabel ist, da der browser.d.ts von den neuesten RCs von Angular2 entfernt wurde und daher nicht mehr verfügbar ist.

Ich empfehle dringend, das typings-Modul zu installieren, wie es von einigen Lösungen hier vorgeschlagen wird. Es ist jedoch nicht notwendig, es manuell oder global durchzuführen. Es gibt eine effektive Möglichkeit, dies nur für Ihr Projekt und innerhalb der VS2015-Schnittstelle zu tun. Folgendes müssen Sie tun:

  • fügen Sie typings in der package.json-Datei des Projekts hinzu.
  • fügen Sie der package.json-Datei einen script-Block hinzu, um typings nach jeder NPM-Aktion auszuführen/zu aktualisieren.
  • fügen Sie eine typings.json-Datei im Stammordner des Projekts hinzu, die eine Referenz auf core-js enthält (insgesamt besser als es6-shim atm).

Das ist es.

Sie können auch einen Blick auf diesen anderen SO -Thread werfen und/oder diesen Beitrag auf meinem Blog lesen, um weitere Informationen zu erhalten.

1
Darkseal

Nun müssen Sie sie manuell importieren.

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)
        );
0
Jithesh Chandra