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