How can I put a template in its own html file? I keep getting errors. Please help

help
1

Hi. I’m very new to Meteor and totally embarrassed I can’t figure this out. I’d be grateful if some kind soul could help me to figure out what obvious thing I’m missing.

I want to be able to put template definitions in their own files rather than lumping everything into one huge .html files. I looked at the templating documentation and I thought all I had to do was just add a new .html file with the templated content, but I keep getting this error:

Errors prevented startup:
While processing files with templating (for target web.browser):
hello.html:1: Expected one of: <body>, <head>, <template>

I’ve tried adding head, body, and template tags to the html file with the templating information – all three, or individually. So for example. if my main html file was looked like this:

 <head>
  <title>app1</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

…how am I supposed to format another html file to contain the hello template info?

Thanks in advance to anyone who can help.

2

It should look like this:

hello.html:

<template name="hello">
  <div>Hello!</div>
</template>
3

Uh oh. That was what I was doing. Double checked and still getting that very error

4

Are you using a fresh project?

5

You only are supposed to have ONE template file with the <head> and <body> - the rest of the HTML files you have should only contain <template name="xxx"> sections.

Not sure if thats the problem here, but thought I would point it out :smile:

7

Hmm. I just started a fresh project, and I’m getting the same error. At this point my test is just this:

<head>
  <title>newapp</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

…and then in hello.html, nothing but this:

<template name="hello">
  <div>Hello!</div>
</template>
8

Only ONE for <body>, but <head> definitions aren’t limited)

1 Like
9

so you’re using the default hello app?

the original file was called hello.html - did you change it’s name or overwrite it when you made your second file called hello.html to hold the <template>?

10

Ah, good thought, but this is a fresh project file named something else, so nothing overwritten. But thanks.

11

Well I made a default ‘hello’ app.

I’ve done what you’ve said you did and mine works. (As expected)

12

This is increasingly mysterious. I only installed Meteor on this particular computer today, so I assume it’s not a matter of anything being out of date. Haven’t installed any packages beyond the defaults, but this must be something. Directory structure? But I was under the impression Meteor didn’t care about directory structure. Load order?

13

I guess you have to share your project/

14

I made a gist so you can see what my working version is like

1 Like
15

Meteor DOES care about directory structure. That’s why you shouldn’t place your html files in server directory.

If HTML doesn’t like you, just switch to Jade. Then you can save your template file as hello.tpl.jade and no will be needed, it will be magically generated for you.

16

Thank you. I’m feeling incredibly stupid now, but finally found the problem, which wasn’t with the code but with – idiotically enough – a third party notepad replacement that claimed it was saving as html, created an html file, then quietly interpreted <template> tag as something specific to the editor itself.

Opened it in notepad, saw all the editor-specific metadata it was attempting to stuff into <template> and felt really silly – but having your gist did help me figure out what wasn’t the problem and set me on the right track, so thank you.

Sleep also helped.

17

…and also, thank you to everyone who replied.
:cookie: :cookie: :cookie: :cookie: :cookie:

3 Likes
18

I had the same problem and it was simply that JShint added a “;” at the end;

``

Hello!
; `` <---- RIGHT HERE, make sure to remove it if that's the case ;)