web-dev-qa-db-ja.com

ビルド：Promiseの名前が見つかりません-Visual Studio 2015 w / MVC6およびAngular 2

まず第一に、私はこれらをチェックしました：

https://github.com/angular/angular/issues/7052

https://github.com/angular/angular/issues/4902

ECMAScript 6を使用しているにもかかわらず、TypeScriptは名前「Promise」を見つけることができません

typescriptでes6-promisesを使用する方法？

Visual Studio Code：名前が見つかりませんangular？

Angular2/TypeScriptエラーを取り除く方法-マップが見つからない、Promise ... -es5をターゲットにする場合

そして、もっともっともっと。 ２日間頭をたたいました。

はい：

私はboot.tsファイル（またはbootstrapファイル）で参照しています：

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

今、問題に：私はVisual Studio 2015 W/Update 1とASP.NET MVC 6プロジェクト（Release Candidate 1）+ TypeScript 1.8.1を使用しています。

このチュートリアルを使用して設定を行いました： http://www.mithunvp.com/angular-2-in-asp-net-5-TypeScript-visual-studio-2015/

Angular 2をしばらくの間正常に使用していて、同じコード（afaik）がコンパイルされません。ブラウザで「名前が見つかりません：約束」が表示されます。d。 tsファイル」、node_modules/angular2/platformにあります：

tsconfig.json

 {
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../wwwroot/appScripts/",
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

package.json

{
    "version": "1.0.0",
    "name": "asp.net", 
  "private": true,
  "dependencies": {
    "angular2": "2.0.0-beta.11",
    "systemjs": "0.19.24",
    "es6-promise": "^3.1.2",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.4"
  },
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

gulpfile.js

/*
This file in the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.Microsoft.com/fwlink/?LinkId=518007
*/

/// <binding AfterBuild='moveToLibs' />

var gulp = require('gulp');

gulp.task('default', function () {
    // place code for your default task here
});

gulp.task('moveToLibs', function () {
    gulp.src([
      'node_modules/angular2/bundles/js',
      'node_modules/angular2/bundles/angular2.*.js*',
      'node_modules/angular2/bundles/angular2-polyfills.js',
      'node_modules/angular2/bundles/http.*.js*',
      'node_modules/angular2/bundles/router.*.js*',
      'node_modules/es6-shim/es6-shim.min.js*',
      'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
      'node_modules/systemjs/dist/*.*',
      'node_modules/jquery/dist/jquery.*js',
      'node_modules/bootstrap/dist/js/bootstrap*.js',
      'node_modules/rxjs/bundles/Rx.js'
    ]).pipe(gulp.dest('./wwwroot/libs/'));
});

Node_module/angular2/platform/browser.d.tsファイル内の参照パスを使用してみましたが、非モジュールファイルで参照パスを使用するとエラーが発生しました。

唯一のことは、いくらか機能している（非常識なので、完全には実装しなかった）：es6-promise.d.tsファイル内のコードをコピーして、要求しているすべてのファイルに貼り付けます。

EditSniffSniff何かが悪臭を放っていますここで：node_moduleフォルダーの名前を_bak_node_module_folderに変更し、すべてのパッケージを再インストールすることにしました。

    Severity    Code    Description Project File    Line    Suppression State
Error   MSB4018 The "FindConfigFiles" task failed unexpectedly.
System.IO.PathTooLongException: The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters.
   at System.IO.Path.NormalizePath(String path, Boolean fullCheck, Int32 maxPathLength, Boolean expandShortPaths)
   at System.IO.Path.GetDirectoryName(String path)
   at System.IO.FileSystemEnumerableIterator`1..ctor(String path, String originalUserPath, String searchPattern, SearchOption searchOption, SearchResultHandler`1 resultHandler, Boolean checkHost)
   at System.IO.Directory.EnumerateFiles(String path)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherFiles(String directoryPath, String projectPath, Func`2 filter)
   at TypeScript.Tasks.FileHelpers.RecursiveGatherConfigFiles(String directoryPath, String projectPath)
   at TypeScript.Tasks.FindConfigFiles.FindConfigFilesOnDisk()
   at TypeScript.Tasks.FindConfigFiles.Execute()
   at Microsoft.Build.BackEnd.TaskExecutionHost.Microsoft.Build.BackEnd.ITaskExecutionHost.Execute()
   at Microsoft.Build.BackEnd.TaskBuilder.<ExecuteInstantiatedTask>d__26.MoveNext() Angular2    C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\TypeScript\Microsoft.TypeScript.targets 153

Windowsでのこの文字制限は本当に嫌いです。これが問題なら、私は自分の街で一​​番高い橋から飛び上がると思います。

編集x2したがって、私はVisual StudioのNPMを推奨どおりに更新することに決めましたが、うまくいきませんでした。そのため、Nodejsを取得して、コマンドから実行することにしました。残念ながら問題はまだ解決しません：

出力は次のとおりです。

[0] node_modules/angular2/typings/browser.d.ts(6,14): error TS2300: Duplicate identifier 'PromiseConstructor'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(22,5): error TS2300: Duplicate identifier 'done'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(23,5): error TS2300: Duplicate identifier 'value'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(46,5): error TS2300: Duplicate identifier 'size'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(52,5): error TS2300: Duplicate identifier 'prototype'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(66,5): error TS2300: Duplicate identifier 'size'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(72,5): error TS2300: Duplicate identifier 'prototype'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(88,5): error TS2300: Duplicate identifier 'prototype'.
[0] node_modules/angular2/typings/es6-collections/es6-collections.d.ts(103,5): error TS2300: Duplicate identifier 'prototype'.
[0] node_modules/angular2/typings/es6-promise/es6-promise.d.ts(11,15): error TS2300: Duplicate identifier 'Promise'.
[0] node_modules/angular2/typings/es6-promise/es6-promise.d.ts(42,16): error TS2300: Duplicate identifier 'Promise'.
[0] typings/browser/ambient/es6-shim/index.d.ts(11,5): error TS2300: Duplicate identifier 'done'.
[0] typings/browser/ambient/es6-shim/index.d.ts(12,5): error TS2300: Duplicate identifier 'value'.
[0] typings/browser/ambient/es6-shim/index.d.ts(477,11): error TS2300: Duplicate identifier 'Promise'.
[0] typings/browser/ambient/es6-shim/index.d.ts(496,11): error TS2300: Duplicate identifier 'PromiseConstructor'.
[0] typings/browser/ambient/es6-shim/index.d.ts(554,13): error TS2300: Duplicate identifier 'Promise'.
[0] typings/browser/ambient/es6-shim/index.d.ts(563,5): error TS2300: Duplicate identifier 'size'.
[0] typings/browser/ambient/es6-shim/index.d.ts(572,5): error TS2300: Duplicate identifier 'prototype'.
[0] typings/browser/ambient/es6-shim/index.d.ts(583,5): error TS2300: Duplicate identifier 'size'.
[0] typings/browser/ambient/es6-shim/index.d.ts(592,5): error TS2300: Duplicate identifier 'prototype'.
[0] typings/browser/ambient/es6-shim/index.d.ts(607,5): error TS2300: Duplicate identifier 'prototype'.
[0] typings/browser/ambient/es6-shim/index.d.ts(621,5): error TS2300: Duplicate identifier 'prototype'.
[0] 2:47:31 PM - Compilation complete. Watching for file changes.
typescriptvisual-studio-2015angularasp.net-core-mvc
8
Jose A

これの理由は、ES5をターゲットにしているということです約束はありません。 ES6に変更すると、エラーは魔法のように消えます。

ES5をターゲットにする必要がある場合は、以前の回答で述べたes6-shimを使用してください。

6
tomitrescak

Es-promiseを3.0.2から3.1.2に更新した後、まったく同じ問題が発生しました。最終的に、新しいバージョンのnodejsを新しいバージョンのnpmでインストールし、node_moduleフォルダーを削除してパッケージを再インストールしました。次に、参照パスをmain.tsまたはboot.ts（名前は何であれ）ファイルに追加しました。それで直った。

スティーブが言ったように。

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

Angular 2.0.0-rc.1：を使用してこれを解決しました。Angularをブートストラップするクラスで、次の行を上に配置します。

/// <reference path="../typings/browser/ambient/es6-shim/index.d.ts"/>
4
Mcanic

Visual Studioで長い間同じ問題が発生していました。ビルドしようとする前に、npm依存関係のすべてが復元するのを待たなければ、プロジェクトが傷ついていることに気づきました。

私のアドバイスとして、mithunvp.comのデモプロジェクトからpackage.jsonファイルの元の依存関係バージョンに戻ります。依存関係が復元するのを待ってから、VSプロジェクトを再ビルドします。

文字制限の問題については、Visual Studio内でnpmを更新する必要があります。
参照： Windowsでnpmをアップグレード

2
Karl P

このES6の型定義の問題は、今日の私にとって悪夢でした。次のようなさまざまな方法で問題を回避しようとしたSO回答の多くを実行しました。

  • bootstrap TS file）に1つ以上の「トリプルスラッシュ」参照を追加します。したいのですが、特にbrowser.d.tsは、Angular2の最新のRCでは含まれなくなりました。
  • typingsをインストールするか、手動でes6-shim.d.tsをダウンロードします。これも私が探しているので避けたいことですVS2015 GUIの外に出ることを強制されないソリューションのために。

多くの調査の後 私はこの回避策を思いつきました いくつかの簡単な手順で問題を完全に修正するようです：

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

それでおしまい。

この問題の詳細については、ブログの この投稿 を参照することもできます。

2
Darkseal

これは私のためにそれを修正したものです：

///<reference path="./../typings/globals/core-js/index.d.ts"/>

メインの.tsファイルの上。

1
July.Tech

VS2をAngular2 RC5で更新：

（この回答は、一般的にangular.ioのangular2クイックスタートに従っていて、VS2015プロジェクトで機能させることを想定しています。）

Main.tsファイルの先頭に次の行を追加します（プロジェクトの実際のファイル構造に従ってパスを調整します）。

/// <reference path = "../ typings/globals/core-js/index.d.ts" />

上記で参照されたタイピングファイルは、typings.jsonファイルの内容に基づいて、ビルド時に自動的にインポートされます。

プロジェクトをコンパイルするには、.csprojプロジェクトファイルに行を追加する必要がある場合もあります（現在、VS2015 update 3は、「experimentalDecorators」のtsconfig.json行を無視しています）。これを行うには、まずソリューションエクスプローラーウィンドウでプロジェクトを右クリックし、[プロジェクトのアンロード]をクリックしてプロジェクトをアンロードします。 .csprojファイルを開き、他の<TypeScript ...>要素を含む<PropertyGroup>ノードを探します。 TypeScript実験的デコレータの要素を、次のように終了タグの前の下部に追加します。

<PropertyGroup Condition = "'$（Configuration）| $（Platform）' == 'Debug | AnyCPU'">

...

<TypeScriptExperimentalDecorators> true </ TypeScriptExperimentalDecorators>

</プロパティグループ>

プロジェクトをロードして再ビルドします。エラーなしでコンパイルされるはずです。それでも問題が解決しない場合は、TypeScriptの最新バージョン（1.8.x以上）がインストールされていることを確認してください。 Visual Studioで、[ツール]> [拡張機能と更新]に移動し、TypeScriptを検索します。 「TypeScript 1.8.x for Visual Studio 2015」拡張機能をインストールします。 https://www.Microsoft.com/en-us/download/details.aspx?id=4859 でも入手できます。

Nodejsがインストールされている場合は、コマンドラインから「npm install -g TypeScript」と入力してTypeScriptをインストールできます。コマンド「tsc -v」を使用して、Node.jsコマンドウィンドウからインストール済みのTypeScriptバージョンを確認します。このコマンドを標準のコマンドウィンドウから実行すると、予想されるバージョン1.8.xではなく、「バージョン1.0.3.0」のみが表示される可能性があります。 （詳細については、Node.jsをVS2015と同期する方法を http://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/ で参照してください）

これが誰かを助けることを願っています。

1
Bit Monkey

DefinitelyTypedからes6-shim.d.tsをダウンロードしてこの問題を解決しました。このコードを使用して、angular2 bootstrapがあるboot.tsで参照します。

/// <reference path="../typings/es6-shim/es6-shim.d.ts"/>

競合が発生したため、この参照も削除しました。

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

これで問題が解決し、ファイルはエラーなしで正しくコンパイルされました。

0
Fayez Mutairi

Tsconfig.jsonでターゲットを「es6」に変更します

"compilerOptions": {"target": "es6" }

または、インストールTypeScript for Visual Studio 2015でも、tsconfig.jsonを変更せずにこの問題を解決できます

https://www.Microsoft.com/en-us/download/details.aspx?id=4859

0
Jie Wang

別の理由があるかもしれません。 node_modulesディレクトリを除外しなければ、エラーを再現できます。どこかにプロジェクトファイルがないことを確認する必要がある場合があります。

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "noEmitOnError": true
    },
    "exclude": [
        "node_modules",
        "exclude"
    ]
}

問題はここで説明されています： https://github.com/Microsoft/TypeScript/issues/398 。 TypeScriptコンパイルは基本的にtsconfig.jsonを無視します

0
Andres M

私の問題は boot.ts/main.ts ファイル。この問題は、最初の行に参照を追加することで修正されました 「browser.d.ts」 ファイル：
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

0
Diego Torres

別の解決策は、への参照を追加することです

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

ブートストラップするファイルの先頭にangularを追加し、

"moduleResolution": "node",

"compilerOptions"にtsconfig.jsonのように：

{
   "compilerOptions": {
       "target": "es5",
       "module": "system",
       "moduleResolution": "node",
       "emitDecoratorMetadata": true,
       "experimentalDecorators": true,
   }
}
0
Fayez Mutairi

Main.ts（またはbootstrap Angular2）に///<reference path""/>を追加してこの問題を解決することは理想的な解決策ではないと思います。直面している問題は、 Angular2プロジェクトの設定に使用しているtsconfig.jsonとgulpスクリプト `の配置。

  1. プロジェクトにタイプフォルダーがあるように、npmスクリプトを実行してタイピングをインストール（つまり、タイピングインストール）しましたか？ typingsフォルダーにはどのフォルダーがありますか？ globals？ browser？
  2. typescriptをコンパイルするためのgulpタスクの内容は何ですか？ gulp-TypeScriptまたはgulp-tscなどを使用しましたか？

tsconfig.jsonファイルを含むディレクトリは、TypeScriptプロジェクトのルートと見なされます。したがって、TypeScriptプロジェクトの下にある.ts/.d.tsファイルはすべてコンパイルしようとします（typingsフォルダーやwww/libsフォルダー内のファイルを含みます。 exclude "：[" node_modules "]をtsconfig.jsonに追加すると、「名前が見つかりませんPromiseの問題が見つかりません」はnode_modulesフォルダーからではありません（おそらくtypingsフォルダーからと/またはwww/libsフォルダ。

Cannot find name Promiseをbootstrapファイル（main.ts可能性が高い））ファイルの先頭に追加することなく、///<reference path""/>の問題を解決して、 typings.jsonの "exclude"またはgulpfile.jsのgulptaskに追加。

誤解しないでください。///<reference path"/>を追加すると問題が解決しますが、理想的な解決策だとは思いません。

0
kimbaudi

私はここですべての親切な提案を試みました、そして、すべてが正しく構成されるべきであると思いました。エラーはまだ現れた。

私の場合に役立つもの：Visual Studioで開いているすべてのファイルタブを閉じましたとソリューションを再構築しました。ちなみに、エラーはなくなりました。

0
martinoss

私は実際にPolymerTSを使用しているため、問題はAngular2固有ではありませんでした。 Promiseポリフィルを使用すると、私のPolymerコンポーネントtsファイルでpromiseを使用できませんでした。解決策は、次のコマンドを使用してNPMからPromiseのタイプをインストールすることでした。

npm install @types/es6-promise -save-dev

私にとっては、Polymer tsファイル内のd.tsファイルを参照する必要さえありませんでした。動作しました。ただし、次の場所にあるindex.d.tsファイルをドラッグするだけでよい場合があります。 es6-promiseディレクトリ、Promiseオブジェクトを呼び出そうとしているファイル、これにより、参照が自動的に作成されます。

0
Dean Martin