How do I create separate template HTML files using Meteor Iron Router

Question

I have three folders

client

router

server

In the client folder there is another folder called views which contain a file called layout.html , home.html , and login.html .

In router folder there is a router.js file with

Router.configure({
  layoutTemplate: "Layout"
});

Router.route( "/", function(){
  this.render( "Home" );
});

Router.route( "/login", function(){
  this.render( "Login" );
});

In the layout.html file I have

<template name="Layout">
  <h1>Hello Layout</h1>
  {{ > yield }}
</template>

hello Layout renders just fine, but the home template is not found.

If I include all templates in the layout.html then routing works 4.0.

How do I manage the routes correctly so that each template can remain in its own file?

UPDATE Here are the other respective templates

<template name="Home">
  <h1>This Is Home</h1>
</template>

and

<template name="Login">
  <h1>This Is Login</h1>
</template>

UPDATE 2

I am also trying to use meteor-angular, which wants html files to be name.ng.html.

Removing the ng from the file name so that it matched what I described above, and it all works again. I'll leave this here in case anyone else runs into this.

Answer 1

I faced a similar problem a few days ago.

If you are using Meteor version 1.2, probably it is not working due to the following problem:

https://github.com/iron-meteor/iron-middleware-stack/pull/7

You can confirm it by checking if you are getting an exception like :

Exception in callback of async function: ReferenceError: EJSON is not defined

So while they don't update the package to fix it, add the 'ejson' package:

meteor add ejson

After it, it should work.