web-dev-qa-db-ja.com

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);
angulartypescript
206
user233232

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

根本的な理由：TypeScriptによって暗黙のうちにインクルードされる.d.tsファイルはコンパイル対象によって異なりますので、es5を対象とする場合、実際にランタイムに存在する場合でも、もっと環境宣言をする必要があります（例：chrome）。 lib.d.ts の詳細

53
basarat

2.0.0-beta.6（2016-02-11） の変更履歴に記載されている回避策があります（重大な変更点の下に記載）。

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

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

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

あなたが正しい参照パスを持っていることを確認してください、私はこれを動作させるために ../ を開始に追加する必要がありました。

103
mvdluit

ES5をターゲットにするときに、promiseのようなES6の機能は定義されていません。他にもライブラリがありますが、core-jsはAngularチームが使用するjavascriptライブラリです。 ES6用のポリフィルが含まれています。

この質問をしてからAngular 2は大きく変わりました。 TypeScript 2.0では、型宣言は much の方が使いやすいです。

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

他の回答で説明されているように、これはTypingを使うよりはるかに簡単です。詳細については、Microsoftのブログ投稿を参照してください。 TypeScript：宣言ファイルの未来

80
David Rinck

次のコマンドでこれを直すことができました

typings install es6-promise es6-collections --ambient

上記のコマンドを機能させるにはtypingsが必要です。インストールしない場合は、次のコマンドを実行してください。

npm install -g typings

_アップデート_

typingsの更新は--ambientを読みませんそれはあなたが上記のライブラリの定義をインストールする必要がある何人かの人々のためにも--globalになった、ただ次のコマンドを使用します

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

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

48
Khaled Al-Ansari

angular.ioに関するAngular 2のチュートリアルに従うことを明確にするために、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);

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

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

48
Rots

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)
    }
}
32
Niels Steenbeek

Angular 2.0.0-rc.0に対してnode_modules/angular2/typings/browser.d.tsを追加してもうまくいきません。最初に typings.json file をソリューションに追加してください。

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

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

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

今npm installを実行してください

また、tsconfig.jsonファイルのtypingsフォルダも無視してください。

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

更新

現在AngularJS 2.0はcore-jsの代わりにes6-shimを使用しています。クイックスタート typings.jsonファイル に詳しい情報があります。

15
VahidN

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

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

これを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パッケージは必要ありませんでした。

10
mbursill

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

npm install -g typings
typings install

（ng 2.0.0-rc.1を使用）

7
theUtherSide

私は同じ問題を抱えていて、tsconfig.jsonのlibオプションを使ってそれを解決しました。 basaratによって彼の答え で述べられているように、.d.tsファイルはコンパイルtargetオプションに応じてTypeScriptによって暗黙のうちに含まれますが、この動作はlibオプションで変更することができます。

対象のJSバージョンを変更せずに追加の定義ファイルを含めるように指定できます。例えばこれは[email protected]用の私の現在のcompilerOptionsの一部であり、他に何もインストールせずにes2015機能のサポートを追加します。

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

利用可能なオプションの完全なリストは official doc をチェックしてください。

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

7
Jiayi Hu
 typings install dt~es6-shim --save --global

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

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

@ angular-2.0.0-rc3を試してみました

5
Ali Salehi

これは、みんながどのように違うことをやろうとしているのかを考えることです。これらのシステムはまだ最終版からは程遠いと思います。

私の場合は、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"
    ]
}
4
AFetter

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

ムケシュ ：

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

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

それでもnpm install -g typings typings installが役に立たない場合は、このコマンドを実行する前に node_modules および typings フォルダを削除してください。

4
tibersky

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

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

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

3
NARGIS PARWEEN

私は見つけました この非常に役に立つドキュメント at Angular 2のウェブサイト。それはようやく物事をきちんと動かせるようにしてくれましたが、ここで、タイピングをインストールするための他の答えは私を様々なエラーで失敗させました。 （しかし、私を正しい方向に導いてくれました。）

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

3
Vern Jensen

いい電話よ、@VahidN、必要だとわかった

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

私のtsconfigでも、es6-shim自体からのエラーを防ぐために

2
Fergus Gallagher

Angular 2 RC1では、node_modules/angular2ディレクトリの名前がnode_modules/angularに変更されました。

Gulpfileを使ってファイルを出力ディレクトリにコピーしているのであれば、おそらくまだそこに座っているnode_modules/angularがいるかもしれませんが、それはコンパイラによって拾われて、地獄を混乱させているかもしれません。

そのため（慎重に）ベータ版のnode_modulesにあるものを一掃し、また古いタイピングを削除してtypings installを再実行してください。

2
Simon_Weaver

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

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

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

それでおしまい。

私のブログで この他のSOスレッド を見たり、 この投稿 を読んだりすることもできます。

2
Darkseal

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

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

開発ブランチを現在のブランチにマージした後、このエラーが発生しました。問題を解決するためにしばらく時間を費やしました。下の画像でわかるように、コードにはまったく問題はありません。

enter image description here

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

0
Sibeesh Venu

今、あなたはそれらを手動でインポートしなければなりません。

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