Angular2＆TypeScriptでnode_modulesをインポートする

Question

私はとても簡単な「hello world」Angular2アプリを持っていました。私は、私の開発プロジェクトと私の春のバックエンドの最終的な展開フォルダとの間で、異なるディレクトリ構造を使って作業するように、明らかに不合理な決断を下しました。

TypeScriptのインポートに問題があり、ブラウザで実際のアプリケーションを開こうとしたときに404行のエラー（/ angular2/coreライブラリが見つかりません）が発生しました：

import {Component, View} from 'angular2/core'; 

だから、長い話を短く、私はすべての仕事をするために/ appフォルダをバック追加してしまったが、私は次のように私のimport文を修正することになった：

import {Component, View} from '../node_modules/angular2/core'; 

これは、しかし、原因が判明しましたいくつかの奇妙な行動。ライブラリパスに../node_modulesを指定するいくつかの理由は、JSが実際にAJAXを使用してゼロからALL Angular2ファイルをロードする原因となっているために、これは私のHTMLヘッダーの一部であったにも関わらずnpm_modules/angular2/フォルダから一人ひとりの個別のファイルを取得するために呼び出します。

<script src="/node_modules/angular2/bundles/angular2.dev.js"></script> 

私は最終的に私に何が起こっているのか実現バック

import {Component, View} from 'angular2/core'; 

にimport文を元に戻すと、それはすべて働きました。 Angular2は上のスクリプトタグから完全にロードされ、余分なajax呼び出しによってロードされるファイルはありませんでした。

誰かが原因を説明できますか？私はそれが正常な動作だと仮定しますが、インポートの仕組みや、より詳細なパスを指定することでそのような違いが生じる理由は理解できません。

Answer 1

TypeScriptのimportの規則は、node.jsと同じ規則に従います。インポートがドットで始まる場合：

import {Something} from './some/path'; 

次に、インポートを宣言するファイルからの相対パスとして扱われます。しかし、それは絶対パスである場合：

import {Component} from 'angular2/core'; 

はその後、外部モジュールであると想定されるので、活字体がpackage.jsonファイルを探してツリーを歩いていく、そしてnode_modulesフォルダに移動し、あるフォルダを見つけますインポートと同じ名前が、その後、メイン.d.tsまたは.tsファイル用のモジュールのpackage.jsonで検索し、またはが指定され、またはと同じ名前を持つファイルを探します、というロードindex.d.tsまたはindex.tsファイル。

書かれたときに複雑に見えますが、まだいくつかの例外があります...しかし、以前はnode.jsで作業していたのであれば、まったく同じように動作するはずです。注意すべき

ことの一つは、このようTSconfigの中

で動作するように解像度を入力するために設定する必要があり活字体のコンパイラオプションがあるということです。JSON

"moduleResolution": "node" 

は今、あなたの質問の2番目の部分は、これは、AJAX呼び出しを使用せずにロードされるんかでした。これはSystem.jsの機能です。 index.htmlファイルにロードされたscriptタグは、angle2バンドルをSystemに登録するバンドルをインポートします。これが起こると、システムはこれらのファイルを認識し、それらのファイルを参照に正しく割り当てます。かなり深い話題ですが、多くの情報はREADMEのsystemjsまたはsystemjs-builderにあります。