Search code examples
angularjstypescriptoutputplunker

Plunker and Angular 2 child components don't display output


I have the most basic angular 2 plunk but no errors are shown to give any indication of a problem. Why can't I see any template output from the child components? Is this a Plunker Issue or is it me?

Plunker version here with Index.html

PARENT: hello_world.ts

import {Component} from 'angular2/core';
import {Jupiter} from './jupiter';
import {Uranus} from './uranus';

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

}

CHILD: jupiter.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'jupiter',
  template: `<p>Hello I'm Jupiter</p>`
})
export class Jupiter {}

CHILD: uranus.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'uranus',
  template: `<p>Hello I'm Uranus Lol</p>`
})
export class Uranus {}

Solution

  • I've used my demo and used your code to get your expected results that you can see here: https://embed.plnkr.co/VKrvg4/

    SystemJS Bootstrap Process

    Basically, I've created a main.ts file that is used by SystemJS and then the code in this file bootstraps Angular with the help of AppModule.

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

    Declaration

    This app module is responsible to declare the components that you would like to register in your Angular application using declarations.

    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 { }
    

    Bootstrap

    The same module also uses AppComponent to bootstrap your Angular application in the code above. The component registered here will be rendered as parent component.

    Component Rendering Process

    When the app component is rendered, its template uses two other components. Now Angular is aware of your other components as it was registered using declarations.

    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 {
    
    }
    

    You should be able to see your other component UI in view.