Flow Router template not found if placed in separate HTML file

Hi,

I’m seeing a weird issue where I have 2 HTML files under
imports\ui\logins.html
imports\ui\form.html

And under lib\routes.js (using Flow Router), I have this route:

FlowRouter.route('/matchingsform/', {
 action: function() {
 BlazeLayout.render("matchingsLayout", {content: "matchingstemplate"});
}
});

If I put this template into form.html:

<template name="matchingsLayout">
<head>
    <title>Matchings entry form</title>
    <link rel="icon" sizes="16x16 32x32" href="/favicon.ico?v=2">
</head>
<body style="background-color:#F2F2F2;">
    <div class="main">
        {{>Template.dynamic template=content}}
    </div>
</body>
</template>

I get a console error saying BlazeLayout warning: unknown template “matchingsLayout”

However, the template renders if I put it under logins.html. Why would this happen? I am trying to create separate HTML files for different parts of the app.

Can you post the source of all templates involved?

Do you have a 3rd template defined for “matchingstemplate”?

Yes, I do.

logins.html -

<template name="mainLayout">
<head>
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <title>Dashboard</title>
    <link rel="icon" sizes="16x16 32x32" href="/favicon.ico?v=2">
</head>

<body style="background-color:#F2F2F2;">
    <div class="main">
        {{>Template.dynamic template=content}}
    </div>
</body>
</template>

<template name="loginstemplate">
...
</template>

matchingsform.html -

<template name="matchingsLayout">
<head>

    <title>Matchings entry form</title>
    <link rel="icon" sizes="16x16 32x32" href="/favicon.ico?v=2">
</head>

<body style="background-color:#F2F2F2;">
    <div class="main">
        {{>Template.dynamic template=content}}
    </div>
</body>
</template>

<template name="matchingstemplate">
{{> addMatchingsForm}}
</template>
<template name="addMatchingsForm">
<form>
...
</form>
</template>

^If I transfer the code from matchingsform.html into the bottom of logins.html, Flow Router renders it. But if kept under matchingsform.html, the template not found error occurs.

Try creating a matching .js file for each of your .html template files, and in the .js file add import './html_file.html' to the top, then in your routes.js file add the following import '/path/to/your/html/file.html'

See if that resolves your problem.

:point_up: This did the trick for me!

So it seems Blaze finds one template on its own, beyond that you have to import them…