drew4452862 drew4452862 - 2 months ago 35
Javascript Question

Angular 2, template error breaks simple site

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

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.

Comments