Невозможно использовать дочерний компонент в родительском компоненте в Angular2

Question

Я пытаюсь использовать дочерний компонент внутри основного компонента, app.component, используя селектор внутри шаблона основного компонента. Однако он не работает.

child.component.ts

import { Component} from '@angular/core'; 
@Component({ 
selector: 'child-component', 
templateUrl: `<p>Child Component</p>` 
}) 
export class ChildComponent { } 

app.component.ts

import { Component } from '@angular/core'; 
import { ChildComponent} from './child.component'; 

@Component({ 
selector: 'my-app', 
template: `<h1>Hello Angular!</h1> 
<child-component> </child-component>  ` 
}) 

export class AppComponent { } 

Я сделал заявление, в модулях, как показано ниже для ChildComponent

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { ChildComponent} from './child.component'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
imports: [BrowserModule], 
declarations: [AppComponent,ChildComponent], 
bootstrap: [AppComponent] 
}) 

export class AppModule { } 

Решение, указанное в How to import component into another root component in Angular 2, не работает.

Пожалуйста, помогите с разрешением.

Answer 1

У вас была опечатка внутри child-component meta options.

templateUrl: `<p>Child Component</p>` 

должен быть

template: `<p>Child Component</p>`