Winkel und Typoskript: Namen können nicht gefunden werden

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

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

Hauptgrund: Die .d.tsvon TypeScript implizit enthaltene Datei variiert mit dem Kompilierungsziel. Daher müssen beim Targeting mehr Umgebungsdeklarationen vorhanden sein, es5selbst wenn tatsächlich Dinge in den Laufzeiten vorhanden sind (z. B. Chrome). Mehr dazulib.d.ts

Im Änderungsprotokoll für 2.0.0-beta.6 (11.02.2016) ist eine Problemumgehung erwähnt (aufgeführt unter Ä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"/>

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

Stellen Sie sicher, dass Sie den richtigen Referenzpfad haben. Ich musste ../ zum Start hinzufügen , damit dies funktioniert.

ES6-Funktionen wie Versprechen werden beim Targeting von 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.

Winkel 2 hat sich sehr verändert, seit diese Frage gestellt wurde. Typdeklarationen sind in Typescript 2.0 viel einfacher zu verwenden.

npm install -g typescript

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

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

Dann fügen Sie die TypeRoots und Typen Attribute zu Ihrem 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"
  ]
}

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

Für diejenigen, die dem Angular2-Tutorial folgen, um angular.ionur explizit zu sein, ist hier eine Erweiterung der Antwort von mvdluit, wo genau der Code abgelegt werden soll:

Du main.tssolltest 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 in den vorderen Schrägstrichen belassen und nicht entfernen.

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

Ich konnte dies mit dem folgenden Befehl beheben

typings install es6-promise es6-collections --ambient

Beachten Sie, dass Sie typingsden obigen Befehl ausführen müssen, wenn Sie ihn nicht haben, führen Sie den folgenden Befehl aus, um ihn zu installieren

npm install -g typings

AKTUALISIEREN

typings update liest nicht, --ambientes wurde --globalauch für einige Leute, die Sie brauchen, um die Definitionen der oben genannten Bibliotheken zu installieren, verwenden Sie einfach den folgenden Befehl

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

Vielen Dank an @bgerth für diesen Hinweis.

Wenn Typescript> = 2 ist, erledigt die Option "lib" in tsconfig.json die Aufgabe. Keine Notwendigkeit für Typisierungen. https://www.typescriptlang.org/docs/handbook/compiler-options.html

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

Zum Angular 2.0.0-rc.0Hinzufügen node_modules/angular2/typings/browser.d.tsfunktioniert das nicht. Erste Add typings.json Datei zu Ihrer Lösung, mit folgendem Inhalt:

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

Und aktualisieren Sie dann die package.jsonDatei, um dies einzuschließenpostinstall :

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

Jetzt renn npm install

Auch jetzt sollten Sie den typingsOrdner in Ihrer tsconfig.jsonDatei ignorieren :

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

Aktualisieren

Jetzt verwendet AngularJS 2.0 core-jsanstelle von es6-shim. Folgen Sie der Schnellstartdatei typings.json, um weitere Informationen zu erhalten.

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

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

Ich habe das auf Angular 2 rc1 bekommen. Es stellt sich heraus, dass einige Namen mit den Eingaben v1 gegenüber der alten Version 0.x geändert wurden. Die browser.d.tsDateien wurden index.d.ts.

typings installSuchen Sie nach dem Ausführen Ihre Startdatei (wo Sie booten) und fügen Sie hinzu:

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

Das Hinzufügen index.d.tszur Dateiliste in tsconfig.jsonhat aus irgendeinem Grund nicht funktioniert.

Auch das es6-shimPaket wurde nicht benötigt.

Ich konnte dies beheben, indem ich das typingsModul installierte .

npm install -g typings
typings install

(Mit ng 2.0.0-rc.1)

Ich hatte das gleiche Problem und habe es mit der libOption in gelöst tsconfig.json. Wie von basarat in seiner Antwort gesagt , wird eine .d.tsDatei abhängig von der Kompilierungsoption implizit von TypeScript eingeschlossen, targetaber dieses Verhalten kann mit dem geändert werdenlib Option .

Sie können zusätzliche Definitionsdateien angeben, die eingeschlossen werden sollen, ohne die Ziel-JS-Version zu ändern. Zum Beispiel ist dies Teil meiner aktuellen compilerOptionsVersion für [email protected] und es2015bietet Unterstützung für Funktionen, 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 im offiziellen Dokument .

Beachten Sie auch, dass ich zur Unterstützung in meinem Code hinzugefügt "types": ["node"]und installiert habe.npm install @types/noderequire('some-module')

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

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

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

Versucht auf @ angle-2.0.0-rc3

Wenn dies npm install -g typings typings installimmer noch nicht hilft, löschen Sie die Ordner node_modules und typings, bevor Sie diesen Befehl ausführen.

Dies ist der Gedanke, 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. Dieser Fehler ist aufgetreten.

Mein Fehler war, die Datei 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"
    ]
}

Fügen Sie typing.d.ts in den Hauptordner der Anwendung ein und deklarieren Sie dort die Variable, 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 in der Anwendung kein Fehler für require angezeigt.

Ich bin neu in Angular, aber für mich wurde die Lösung durch einfaches Importieren von Input gefunden. Ich kann diesen nicht gutschreiben und habe ihn auf einem anderen Board gefunden. Dies ist eine einfache Lösung, wenn Sie das gleiche Problem haben, aber wenn Ihre Probleme komplexer sind, würde ich die obigen Informationen lesen.

Mukesh :

Sie müssen Eingaben wie diese oben in die untergeordnete Komponente importieren

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

Ich fand dieses sehr hilfreiche Dokument auf der Website von Angular 2. Es hat mich endlich dazu gebracht, die Dinge richtig zum Laufen zu bringen, während die anderen Antworten hier, um Typisierungen zu installieren, mich mit verschiedenen Fehlern gescheitert sind. (Aber hat mir geholfen, in die richtige Richtung zu führen.)

Anstatt es6-Versprechen und es6-Sammlungen einzuschließen, enthält es Core-Js, was für mich den Trick getan hat ... keine Konflikte mit Angular2s Kern-Ts-Definitionen. Darüber hinaus wurde in dem Dokument erläutert, wie Sie all dies so einrichten, dass es bei der Installation von NPM automatisch erfolgt, und wie Sie Ihre typings.json-Datei ändern.

Angular 2 RC1 hat das node_modules/angular2Verzeichnis in umbenanntnode_modules/angular .

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

node_modulesLöschen Sie also (sorgfältig) das, was Sie für die Beta-Versionen haben, und löschen Sie auch alle alten Eingaben und führen Sie sie erneut aus typings install.

Guter Anruf, @VahidN, ich fand, ich brauchte

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

Auch in meinem tsconfig, um Fehler von es6-shimselbst zu stoppen

Importieren Sie die folgende Anweisung in Ihre JS-Datei.

import 'rxjs/add/operator/map';

Die akzeptierte Antwort bietet keine praktikable Lösung, und die meisten anderen schlagen die "Triple-Slashes" -Umgehung vor, die nicht mehr praktikabel ist, da die browser.d.tsvon den neuesten Angular2-RCs entfernt wurde und daher nicht mehr verfügbar ist.

Ich empfehle dringend, das typingsModul so zu installieren, wie es von einigen Lösungen hier vorgeschlagen wird. Es ist jedoch nicht erforderlich, 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 typingsin der package.json - Datei des Projekts.
• Fügen Sie scriptder package.jsonDatei einen Block hinzu, der ausgeführt / aktualisiert werden solltypings nach jeder NPM-Aktion werden soll.
• Fügen Sie typings.jsonim Stammordner des Projekts eine Datei hinzu, die einen Verweis auf enthält core-js(insgesamt besser als es6-shimatm).

Das ist es.

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

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 im folgenden Bild sehen können, gibt es überhaupt keine Probleme mit den Codes.

Die einzige Lösung, die für mich funktioniert hat, ist das Neustarten des VSCodes

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

Aktualisieren tsconfig.json, ändern

"target": "es5"

zu

"target": "es6"