AngularとTypescript：名前が見つからない

TypeScript（バージョン1.6）でAngular（バージョン2）を使用していて、コードをコンパイルすると次のエラーが発生します。

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

これはコードです：

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

既知の問題：https : //github.com/angular/angular/issues/4902

主な理由：.d.tsTypeScriptによって暗黙的にインクルードされるファイルはコンパイルターゲットによって異なるためes5、ランタイムに実際に存在するもの（例：クロム）を対象とする場合でも、ターゲットの場合はさらに多くのアンビエント宣言が必要です。もっとlib.d.ts

2.0.0-beta.6（2016-02-11）の変更ログに記載されている回避策があります（重大な変更の下にリストされています）：

--target = es5を使用する場合、アプリケーションのどこかに（たとえば、ブートストラップを呼び出す.tsファイルの上部に）行を追加する必要があります。

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

（ファイルがnode_modulesと同じディレクトリにない場合は、そのパスの先頭に1つ以上の../を追加する必要があることに注意してください。）

正しい参照パスがあることを確認してください。これを機能させるには、最初に../を追加する必要がありました。

ES5を対象とする場合、promiseなどのES6機能は定義されていません。他のライブラリもありますが、core-jsはAngularチームが使用するJavaScriptライブラリです。ES6のポリフィルが含まれています。

Angular 2は、この質問が出されて以来、大きく変化しています。Typescript 2.0では、型宣言がはるかに使いやすくなっています。

npm install -g typescript

Angular 2のES6機能の場合、タイピングは必要ありません。typescript 2.0以上を使用し、@ types / core-jsをnpmでインストールするだけです。

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

次に、TypeRootsおよびTypes属性を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"
  ]
}

他の回答で説明されているように、これはタイピングを使用するよりもはるかに簡単です。詳細については、Microsoftのブログ投稿を参照してください：Typescript：The Future of Declaration Files

angular.io単に明確にするためにAngular2チュー​​トリアルをフォローしている人のために、ここに、コードを配置する正確な場所に関するmvdluitの回答を展開します。

次のmain.tsようになります。

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

///スラッシュはそのままにしておき、削除しないでください。

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

私は次のコマンドでこれを修正することができました

typings install es6-promise es6-collections --ambient

typings上記のコマンドがない場合は、次のコマンドを実行してインストールする必要があることに注意してください。

npm install -g typings

更新

タイピングの更新が読めない上記のライブラリの定義をインストールする必要がある人も--ambientいるようになりました--global、次のコマンドを使用してください

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

これを指摘してくれた@bgerthに感謝します。

Typescript> = 2の場合、tsconfig.jsonの「lib」オプションが機能します。タイピングの必要はありません。https://www.typescriptlang.org/docs/handbook/compiler-options.html

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

以下のためのAngular 2.0.0-rc.0追加node_modules/angular2/typings/browser.d.ts機能しません。まず、このコンテンツを使用して、typings.jsonファイルをソリューションに追加します。

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

そしてpackage.json、これを含むようにファイルを更新しますpostinstall：

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

今すぐ実行 npm install

またtypings、tsconfig.jsonファイル内のフォルダーも無視する必要があります。

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

更新

現在、AngularJS 2.0はのcore-js代わりにを使用していますes6-shim。詳細については、クイックスタートのtypings.jsonファイルを参照してください。

.tsファイルの先頭にコードを追加できます。

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

Angular 2 rc1でこれを取得していました。タイピングv1と古い0.xで変更された一部の名前が判明しました。browser.d.tsファイルはなりましたindex.d.ts。

実行した後typings install、起動ファイル（ブートストラップする場所）を見つけて追加します。

/// <reference path="../typings/index.d.ts" />（または../、スタートアップファイルがtypingsフォルダと同じフォルダにある場合はなし）

index.d.tsのファイルリストへの追加は、tsconfig.json何らかの理由で機能しませんでした。

また、es6-shimパッケージは必要ありませんでした。

typingsモジュールをインストールすることでこれを修正することができました。

npm install -g typings
typings install

（ng 2.0.0-rc.1を使用）

同じ問題があり、のlibオプションを使用して解決しましたtsconfig.json。彼の答えでバサラトが言ったように、.d.tsファイルはコンパイルtargetオプションに応じてTypeScriptによって暗黙的に含まれますが、この動作はlibオプションます。

対象のJSバージョンを変更せずに、追加の定義ファイルを含めて指定できます。たとえば、これはcompilerOptionsTypescript@2.1 の私の現在の一部であり、es2015他に何もインストールせずに機能のサポートを追加します。

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

利用可能なオプションの完全なリストについては、公式ドキュメントを確認してください。

コードでサポートするために追加"types": ["node"]してインストールnpm install @types/nodeしたことにも注意してくださいrequire('some-module')。

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

そして正しいパスをindex.d.tsに追加します

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

@ angular-2.0.0-rc3で試した

npm install -g typings typings installそれでも解決しない場合は、このコマンドを実行する前に、node_modulesとtypingsフォルダーを削除してください。

これは、誰もがどのように違うことをしようとしているのかを考えることです。これらのシステムは、まだ最終版にはほど遠いと思います。

私の場合、rc.0からrc.5に更新しましたが、このエラーが表示されました。

私の修正は、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"
    ]
}

アプリケーションのメインフォルダにtyping.d.tsを追加し、そこに毎回使用したい変数を宣言します

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

これをtyping.d.tsで宣言した後は、アプリケーションでrequireのエラーは発生しません。

Angularは初めてですが、入力をインポートするだけで解決策が見つかりました。これは信用できません。別のボードで見つけました。これは、同じ問題が発生している場合の簡単な修正ですが、問題がより複雑な場合は、上記のものを読んでみます。

ムケシュ：

このような入力を子コンポーネントの上にインポートする必要があります

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

この非常に役立つドキュメントを見つけましたAngular 2のWebサイトで。最後に、物事を適切に機能させることができましたが、タイピングをインストールするための他の答えは、さまざまなエラーで失敗しました。（しかし、私を正しい方向に導くのに役立ちました。）

es6-promiseとes6-collectionsを含める代わりに、私にとってはトリックであるcore-jsが含まれています... Angular2のコアts定義と競合しません。さらに、NPMのインストール時にこれがすべて自動的に行われるように設定する方法と、typings.jsonファイルを変更する方法についても説明しました。

Angular 2 RC1はnode_modules/angular2ディレクトリの名前をnode_modules/angular。

gulpfileを使用してファイルを出力ディレクトリにコピーしている場合は、おそらくまだ node_modules/angularそこに座っいて、コンパイラーに拾われて、それ自体が混乱している可能性があります。

したがって、（注意深く）node_modulesベータ版用のものを一掃し、古い入力をすべて削除して、を再実行してくださいtypings install。

@VahidNよろしくお願いします。

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

私tsconfigも、es6-shimそれ自体からエラーを止めるために

JSファイルに以下のステートメントをインポートしてください。

import 'rxjs/add/operator/map';

受け入れられた回答は実行可能な修正を提供していません。他のほとんどの解決策はbrowser.d.ts、Angular2の最新のRC版によって削除されたため、もう利用できない「トリプルスラッシュ」の回避策を提案しています。

typingsここでいくつかのソリューションで提案されているようにモジュールをインストールすることを強くお勧めしますが、手動またはグローバルにインストールする必要はありません。プロジェクトのみ、VS2015インターフェース内で実行するための効果的な方法があります。これはあなたがする必要があることです：

• 追加 typingsプロジェクトのpackage.jsonファイルにします。
• 各NPMアクションの後に実行/更新するscriptブロックをpackage.jsonファイルに追加しますtypings。
• typings.jsonへの参照を含むプロジェクトのルートフォルダーにファイルを追加しますcore-js（全体的にes6-shimatm より優れています）。

それでおしまい。

詳細については、この他のSOスレッドを調べたり、ブログのこの投稿を読んだりすることもできます。

開発ブランチを現在のブランチにマージした後、このエラーが発生しました。私は問題を修正するためにしばらく過ごしました。下の画像を見るとわかるように、コードにはまったく問題ありません。

だから私のために働いた唯一の修正は、VSCodeを再起動することです

次に、それらを手動でインポートする必要があります。

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

更新tsconfig.json、変更

"target": "es5"

に

"target": "es6"