Angular 2，模板错误打破了简单的网站

Question

I'm trying to modify the code from a NG2 lesson to make a dynamic spotify player in NG2. When I add <h1>anything</h1> to my template in app.component.js it works. When I add in + ` the code gives this error

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 I'm not sure how to fix this error. I have checked and the element is only mentioned one time in the sample code and works for that project.

@galvon (this is also on the 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

don't use + to append strings.

to use multiline HTML , you can use backtick (find in your keyboard - ` ) as shown below,

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

change it to

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

NOTE : Other than this, your plunker is incomplete so even after this change don't expect plunker to run as you don't have spotifyiframeplayer component implementation.