2017-01-17 8 views
1

推奨事項に基づいて、この質問は何度も尋ねられましたが、私の問題を解決する答えに何も表示されません。Typescriptで名前 'require'を見つけることができません

Angular2 TypeScriptアプリケーションを提供し、Webpackを使用してスクリプトをパッケージ化する目的で、Visual Studio 2015で新しいASP.NETコアプロジェクトを作成しました。私はWebstormプロジェクト(Angular2とTypeScriptと同じもの)から私のコンポーネントの一部を再利用しており、そこではうまく動作します。

残念ながら、最初のコンポーネントをコピーしたところ、私自身は解決していないエラーに遭遇しています。 Visual Studio IDEで、「require」の下に赤い塊が表示され、マウスオーバーテキストに「名前が見つかりません」というメッセージが表示されます。ここで

は、問題のあるコンポーネントのテキスト(のWebPACK/Angular2のために使用されている必要が構文)です。同様に

@Component({ 
    selector: "myComponent", 
    template: require("./myComponent.html"), 
    styles: [require("./myComponent.css")] 
}) 

、私は同じ問題を取得し、あまりにも次のスニペットに必要:

const sortBy = require('lodash.sortby'); 

さて、otherの投稿にはanswerがあります。suggests、typeRootsとタイプをtsconfig.jsonのcompilerOptionsに追加しました。

{ 
    "dependencies": { 
    "lodash.sortby": "^4.7.0" 
    }, 
    "devDependencies": { 
    "@types/node": "^6.0.60", 
    "@types/lodash.sortby": "^4.7.0" 
    } 
} 

そして、私は正常にNPMこれらの(および他の多くのファイル)をインストールした:もちろん

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "typeRoots": [ 
     "node_modules/@types" 
    ], 
    "types": [ 
     "node", 
     "lodash.sortby" 
    ] 
    } 
} 

、私は私のpackage.jsonにこれらのパッケージを追加しました:私はここで見られるようにすることを持っています。

上記の後者のリンクは、ファイルの先頭に次の文字を置くことができることを示していますが、それはむしろハッキーに見えますが、私は実際にソリューションに永久に永続させたいものではありません。前述のように、このrequireの使用はWebstorm内でうまく動作しますが、2つのIDE間では同じ構成が得られます。 Visual Studioではこれだけではないということは何ですか?

ありがとうございます!

編集:

私は以来angular2テンプレートローダの存在について学びました。ここでAngular2でWebpackを使用することを考えていたので、私はrequireを(ドキュメントごとに)使用していましたが、このangular2-template-loaderはtemplateUrlとstyleUrlsを相対参照として残す責任があります。ファイルを指している)、梱包プロセス中にすべてのものを交換します。

他の場所でrequireを使用すると、ゲイリーのTypescriptモジュールへのリンクで説明されている回避策が必要です。

+1

http://stackoverflow.com/questions/36434546/using-require-to-set-templateurl-in-angular-2-while-getting-error。 Requireはモジュールです。 https://www.typescriptlang.org/docs/handbook/modules.htmlコンパイル時に指定されたモジュールターゲットに応じて、コンパイラはNode.js(CommonJS)、require.js(AMD)、同形UMD)、SystemJS、またはECMAScript 2015ネイティブモジュール(ES6)モジュールロードシステムをサポートします。生成されたコードの定義、要求、および登録の詳細については、各モジュールローダーのドキュメントを参照してください。 – Gary

+0

@Gary答えとして書くことができますか? – Xaniff

答えて

0

commonjsは、モジュールシステムであるため、それは今できない場合がありますUsing require to set templateUrl in Angular 2 while getting error

を確認してください。コンパイル時に指定されたモジュールターゲットに応じて、Node.js(CommonJS)、require.js(AMD)、同形(UMD)、SystemJS、またはECMAScript 2015ネイティブモジュール(ES6)の適切なコードがコンパイラによって生成されます。モジュール搭載システム。生成されたコードの定義、要求、および呼び出しの詳細については、各モジュールローダーのドキュメントを参照してください。

1

Visual Studio 2015用の最新の(現時点で)バージョンのTypeScriptをインストールすることで、この種の問題を解決しました。現在は2.1.5です。バージョン2016.3.2にReSharperを使用している場合は、ReSharperを更新してください。

関連する問題