Angular2 - проблема компиляции с вложенным компонентом

Question

У меня есть два Angular2 компоненты, закодированная с TypeScript:

приложение/app.component.ts

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

@Component({ 
    selector: 'my-app', 
    styles : [` 
     .parent { 
      background : #c7c7c7; 
      color : #000; 
      padding: 20px; 
     } 
    `], 
    template: ` 
     <div class="parent"> 
      <h1>{{name}}</h1> 
     </div> 
    `, 
}) 
export class AppComponent { name = 'Angular'; } 

приложением/child.components.ts

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

@Component({ 
    selector: 'child-component', 
    styles : [` 
     .child { 
      background : #aaa; 
      padding: 10px; 
     } 
    `], 
    template: ` 
     <div class="child"> 
      <h2>{{name}}</h2> 
     </div> 
    `, 
}) 
export class ChildComponent { 
    name = "Child Component"; 
} 

Если в компоненте app/app.component.ts Я не влагаю компонент: app/child.components.ts все правильно скомпилировано.

Пожалуйста, проверьте здесь:

http://plnkr.co/edit/5PfPmDoUkxYRirCtwSGa?p=preview&open=app%2Fapp.component.ts

Но если I гнездо это, то я думаю, что transpiler неспособна компиляции ...

приложение/app.component.ts (раскрой : приложение/child.components.ts)

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

@Component({ 
    selector: 'my-app', 
    styles : [` 
     .parent { 
      background : #c7c7c7; 
      color : #000; 
      padding: 20px; 
     } 
    `], 
    template: ` 
     <div class="parent"> 
      <h1>{{name}}</h1> 
      <child-component></child-component> 
     </div> 
    `, 
    directives: [ChildComponent] 
}) 
export class AppComponent { name = 'Angular'; } 

челобитная е, проверьте здесь:

http://plnkr.co/edit/qpsYQx4Ih4qQ1dyk3tFH?p=preview&open=app%2Fapp.component.ts

Мои вопросы:

1- Что происходит сбой в коде выше?

2- Есть ли способ проверить журнал ошибок транспилятора TypeScript, чтобы узнать, что происходит, когда есть проблемы с транспиляцией, например здесь?

Answer 1

Ну, чувство хорошо сегодня;)

У вас не хватает двух больших частей в вашем приложении. BTW, Plunker имеет предустановленные угловые 2 шаблона, из которых вы можете начать играть. Так что вы отсутствовали, это NgModule и main.ts-файл.

Вы можете прочитать больше о NgModule here, но, как отрывок из этой страницы:

угловой модуль класса украшен метаданными @NgModule.

Метаданные:

• объявить, какие компоненты, директивы и трубы принадлежат к модулю.
• сделать некоторые из этих классов общедоступными, чтобы другие шаблоны компонентов могли использовать их.
• импортировать другие модули с компонентами, директивами и трубопроводами, необходимыми для компонентов в этом модуле.
• предоставляет услуги на уровне приложения, которое может использовать любой компонент приложения.

Поскольку у вас есть ребенок компонент, необходимо также добавить CUSTOM_ELEMENTS_SCHEMA, так как у вас есть <child-component> тег, то есть элемент. Вот бы быть NgModule, что будет работать для вас, так что очень минимален:

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

export class AppModule { } 

Другой отсутствующий файл был main.ts, который запускает приложение.

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

platformBrowserDynamic().bootstrapModule(AppModule) 

Ваши компоненты были почти правильными. Но мы больше не используем «директивы», все об этом заботится в NgModule.

Вот Plunker

Как я уже сказал, я действительно предлагаю вам начать с самого начала урока из Angular.io Учебник очень хороший, на мой взгляд!