爲什麼不是這個AngularJS 2兒童@Component替代？

Question

更新：這似乎是我構建和服務項目（gulp，browserify，tsify，uglify）而不是代碼問題的一個問題。如果我弄清楚，我會進一步更新。

感謝您的幫助。

我正在使用AngularJS 2應用程序，但我無法取得子組件。主要組件「my-app」有效，但「測試視圖」子組件不會被替換。我沒有看到爲TypeScript編譯或瀏覽器控制檯日誌列出的任何錯誤。

main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 

console.log('bootstraping...'); 
platformBrowserDynamic().bootstrapModule(AppModule); 

app.module.ts：

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

import { AppComponent } from './component'; 
import { TestView } from './testcomponent'; 

@NgModule({ 
    imports:  [ BrowserModule ], 
    declarations: [ AppComponent, TestView ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

component.ts：

import { Component } from '@angular/core'; 
import { TestView } from './TestComponent'; // EDIT 

@Component({ 
    directives: [TestView], // EDIT 
    selector: 'my-app', 
    template: '<p>Hello World...again</p><test-view></test-view>' 
}) 
export class AppComponent { 
    my_string: string = 'Hello World'; 
} 

testcomponent.ts：

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

@Component({ 
    selector: 'test-view', 
    template: ` 
<p>My input: {{myInput}}</p> 
    ` 
}) 
export class TestView { 
    myInput: string = 'My Test Input'; 
} 

任何幫助表示讚賞。謝謝。

這裏是DOM：

Answer 1

你仍然需要申報TestView作爲AppComponent一個指令。像：

@Component({ 
    directives: [TestView], 
    selector: 'my-app', 
    template: '<p>Hello World...again</p><test-view></test-view>' 
})