app.componentにネストされたコンポーネントがアプリケーションを破ります

別のコンポーネントでコンポーネントを作成しようとしています。しかし、入れ子になったコンポーネント（チケットアダー）を追加すると、アプリケーションが壊れてしまいます。つまり、私が得るのは「ロード中」です。それ以外のロードはありません。app.componentにネストされたコンポーネントがアプリケーションを破ります

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { TicketAdderComponent } from './ticket-adder.component'; 

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

app.component.ts

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

@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello There, I\'m Angular2</h1> 
       </br> 
       <ticket-adder></ticket-adder>` 
}) 
export class AppComponent { }

チケットadder.component.ts

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

@Component({ 
    selector: 'ticket-adder', 
    template: '<h1>Ticket Adder</h1>' 
}) 

export class TicketAdderComponent { }

ETA：エラーログは

を追加しました

(index):16 Error: (SystemJS) Template parse errors:(…)(anonymous function) @  (index):16 
ZoneDelegate.invoke @ zone.js:203 
Zone.run @ zone.js:96 (anonymous function) @ zone.js:462 
ZoneDelegate.invokeTask @ zone.js:236 
Zone.runTask @ zone.js:136 
drainMicroTaskQueue @ zone.js:368 
ZoneTask.invoke @ zone.js:308

index.htmlを

<html> 
<head> 
    <title>Angular QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="libs/core-js/shim.min.js"></script> 
    <script src="libs/zone.js/zone.js"></script> 
    <script src="libs/reflect-metadata/Reflect.js"></script> 
    <script src="libs/systemjs/system.src.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function (err) { console.error(err); }); 
    </script> 
</head> 
<!-- 3. Display the application --> 
<body> 
    <my-app>Loading...</my-app> 
</body> 
</html>

ETA 2： "「./tags'モジュールを見つけることができません" 私は、Visual Studioは、このエラーを報告していることに気付きましたAnger/Coreのparser.d.tsで

出典

2016-12-08 TheColonel26

エラーログが何働い？ – anshuVersatile

エラーログはどこにありますか？ – TheColonel26

ブラウザコンソール（F12） –

テンプレート内の</br>タグが問題であったことが分かります。一度私はそれを削除しました。すべてが働き始めた。

@anshuVersatileの例にはタグが含まれていないため、機能しませんでした。

コード

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

@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello There, I\'m Angular2</h1><ticket-adder></ticket-adder>` 
}) 
export class AppComponent { }

出典

2016-12-08 19:33:05 TheColonel26

app.componentにネストされたコンポーネントがアプリケーションを破ります

答えて

関連する問題