为什么这个AngularJS 2的孩子不能替换@Component？

Question

更新：这似乎是我构建和服务项目（gulp，browserify，tsify，uglify）的方式而不是代码问题。如果我搞清楚的话，我会进一步更新。

感谢您的帮助。

我正在开发一个AngularJS 2应用程序，但是我无法替换子组件。主要组件“my-app”可以使用，但“test-view”子组件不会被替换。我没有看到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>'
})