角2、テンプレートエラーで簡単なサイトが破損する

Question

私はNG2レッスンのコードを修正して、NG2でダイナミックな格好のプレーヤーを作りたいと思っています。私がapp.component.jsでテンプレートに<h1>anything</h1>を追加するとうまくいきます。私は+ `コードに追加すると、このエラー

zone.min.js:1 Unhandled Promise rejection: Template parse errors: 
'spotifyiframeplayer' is not a known element: 
1. If 'spotifyiframeplayer' is an Angular component, then verify that it is part of this module. 
2. If 'spotifyiframeplayer' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<h1>Spotify Iframe Player</h1>[ERROR ->]<spotifyiframeplayer></spotifyiframeplayer>"): AppComponent@0:30 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 
'spotifyiframeplayer' is not a known element: 
1. If 'spotifyiframeplayer' is an Angular component, then verify that it is part of this module. 
2. If 'spotifyiframeplayer' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<h1>Spotify Iframe Player</h1>[ERROR ->]<spotifyiframeplayer></spotifyiframeplayer>"): AppComponent@0:30 
    at TemplateParser.parse (https://unpkg.com/@angular/compiler@2.0.0/bundles/compiler.umd.js:8530:21) 
    at RuntimeCompiler._compileTemplate (https://unpkg.com/@angular/compiler@2.0.0/bundles/compiler.umd.js:16905:53) 
    at https://unpkg.com/@angular/compiler@2.0.0/bundles/compiler.umd.js:16828:85 
    at Set.forEach (native) 
    at compile (https://unpkg.com/@angular/compiler@2.0.0/bundles/compiler.umd.js:16828:49) 
    at e.invoke (https://unpkg.com/zone.js@0.6.21/dist/zone.min.js:1:15936) 
    at n.run (https://unpkg.com/zone.js@0.6.21/dist/zone.min.js:1:13323) 
    at https://unpkg.com/zone.js@0.6.21/dist/zone.min.js:1:11425 
    at e.invokeTask (https://unpkg.com/zone.js@0.6.21/dist/zone.min.js:1:16565) 
    at n.runTask (https://unpkg.com/zone.js@0.6.21/dist/zone.min.js:1:13925)o @ zone.min.js:1a @ zone.min.js:1a @ zone.min.js:1 
zone.min.js:1 Error: Uncaught (in promise): Error: Template parse errors:(…)o @ zone.min.js:1a @ zone.min.js:1a @ zone.min.js:1 

Link to Plunker 私はこのエラーを修正するかどうかはわかりませんになります。私はチェックして、その要素はサンプルコードで一度だけ言及され、そのプロジェクトのために働いています。

@galvon（これはplunkerにもあります）

(function(app) { 
    var Component = ng.core.Component; 

    app.AppComponent = Component({ 
    selector: 'my-app', 
    template: 
     ` 
     <h1>Spotify Iframe Player</h1> 
     <spotifyiframeplayer></spotifyiframeplayer> 
     ` 
    }) 
    .Class({ 
    constructor: function AppComponent() { } 
    }); 

})(window.app || (window.app = {})); 

Answer 1

は、文字列を追加する+を使用しないでください。

複数行のHTMLを使用するために、あなたはバッククォートを使用することができます（キーボードで見つける - ` ）以下に示すように、

template: 
     '<h1>Spotify Iframe Player</h1>' + 
     '<spotifyiframeplayer></spotifyiframeplayer>' 

変更をそれ

template: 
     ` 
     <h1>Spotify Iframe Player</h1> 
     <spotifyiframeplayer></spotifyiframeplayer> 
     ` 

へ注：：これ以外では、あなたのプランナーは不完全ですあなたがspotifyiframeplayerコンポーネントの実装を持っていないので、plunkerが動くとは思わない。