コンパイルされたTypeScriptのインポートされたコンポーネントにステートメントがありません

Question

角度2で始まったばかりで、私は奇妙な問題があります。私はGitHubのAngular 2 Quickstartレポから始め、テンプレートを使っていくつかのコンポーネントを追加しました。例えば

：

import { Component } from '@angular/core'; 

import { LayoutComponent } from './layout.component'; 

@Component({ 
    selector: 'app', 
    template: `<layout></layout>`, 
}) 
export class AppComponent { name = 'Angular'; } 

コンパイルTS（JSファイルをもたらす）のようになります。あなたはのはLayoutComponentのために、そしてもちろん行方不明の呼び出しを必要とそこに見ることができるように

"use strict"; 
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 
    return c > 3 && r && Object.defineProperty(target, key, r), r; 
}; 
var __metadata = (this && this.__metadata) || function (k, v) { 
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 
}; 
var core_1 = require('@angular/core'); 
var AppComponent = (function() { 
    function AppComponent() { 
     this.name = 'Angular'; 
    } 
    AppComponent = __decorate([ 
     core_1.Component({ 
      selector: 'app', 
      template: "<layout></layout>", 
     }), 
     __metadata('design:paramtypes', []) 
    ], AppComponent); 
    return AppComponent; 
}()); 
exports.AppComponent = AppComponent; 
//# sourceMappingURL=app.component.js.map 

、レイアウトコンポーネントが見つからないため、レイアウトタグが存在しません（ブラウザでランタイムJSエラーが発生します）。

これは、（同じディレクトリ内のコンポーネントまたは現在のディレクトリ上/下1を参照）パスにないに関して私のすべてのコンポーネントで起こります。

なぜこれらのインポートを除外しているのですか？

Answer 1

import { LayoutComponent } from './layout.component'; 

これは、ES6モジュール構文を使用した単純なインポート文であり、Angularまたは任意のフレームワークとは関係ありません。

なぜこれらの輸入を除くTSCはありますか？

TSCが、それはここにする必要があり、まさにやっています。未使用のシンボルを削除してコンパイルを最適化しました。

私はあなたがネストされたコンポーネントを達成しようとしていると信じています。 AppComponentがルート要素である場合は、単にルートモジュールが宣言され@NgModuleの構成にdeclarationにLayoutComponentを追加することができます。

@NgModule({ 
    ... 
    declarations: [ 
     AppComponent, 
     LayoutComponent 
    ] 
}) 

Althought、1つのルート要素を有することが好ましいので、私は、例えば、内LayoutComponentをカプセル化するであろうLayoutModuleとルートモジュール

@NgModule({ 
    ... 
    imports: [ 
     LayoutModule 
    ], 
    declarations: [ 
     AppComponent, 
    ] 
}) 

に追加します。これは、ルート・モジュールにコンポーネント/モジュールを追加する場合は、アプリケーション全体ではかなりAppComponentで使用できるようにLayoutComponentが利用できるように、とする方法です。