Angularjs Plunker和Angular 2子组件don'；t显示输出

我有最基本的角度2砰的一声，但没有错误显示给任何问题的迹象。为什么我看不到子组件的任何模板输出？这是一个抢劫问题还是我的问题

家长：您好

从'angular2/core'导入{Component}；
从“/Jupiter”导入{Jupiter}；
从“./Uranus”导入{Uranus}；
@组成部分({
选择器：“你好，世界”，
模板：`
你能看见木星吗

你能看见天王星吗

`
})
导出类HelloWorld{
}

孩子：朱庇特

从'angular2/core'导入{Component}；
@组成部分({
选择器：“jupiter”，
模板：`你好，我是朱庇特
`
})
导出类Jupiter{}

孩子：天王星

从'angular2/core'导入{Component}；
@组成部分({
选择器：“天王星”，
模板：`你好，我是天王星Lol
`
})
出口类天王星{}

我已经使用了我的演示，并使用了您的代码来获得您可以在此处看到的预期结果：

SystemJS引导过程

基本上，我已经创建了一个SystemJS使用的

main.ts

文件，然后在

AppModule

的帮助下引导该文件中的代码

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

声明

此应用程序模块负责声明要使用

声明

在Angular application中注册的组件

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HelloWorldComponent } from './hello-world.component'
import { JupiterComponent } from './jupiter.component'
import { UranusComponent } from './uranus.component'

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

自举

同一模块还将

AppComponent

用于

bootstrap

上述代码中的角度应用程序。在此注册的组件将作为父组件呈现

组件渲染过程

呈现应用程序组件时，其模板使用两个其他组件。现在Angular在使用

声明注册时就知道了其他组件

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

@Component({
  selector: 'hello-world',
  template: `
  <p>Can you see jupiter?</p>
  <jupiter></jupiter>
  <p>Can you see Uranus?</p>
  <uranus></uranus>
`
})
export class HelloWorldComponent {

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“你好，世界”，
模板：`
你能看见木星吗

你能看见天王星吗

`
})
导出类HelloWorldComponent{
}

您应该能够在视图中看到其他组件UI。
您缺少引导步骤，并且没有包含组件的模块。请使用我的演示：来处理您的示例。这也很简单。Sid是在你的基础上添加的，但仍然没有更接近？我用新的plnkr Demohanks Sid添加了一个答案，现在我明白了！我以为它是在app.module中引导的。（按议题：）
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HelloWorldComponent } from './hello-world.component'
import { JupiterComponent } from './jupiter.component'
import { UranusComponent } from './uranus.component'

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

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

@Component({
  selector: 'hello-world',
  template: `
  <p>Can you see jupiter?</p>
  <jupiter></jupiter>
  <p>Can you see Uranus?</p>
  <uranus></uranus>
`
})
export class HelloWorldComponent {

}