Including an HTML Template in a Meteor Package with Iron Router

Question

I am trying to mimic the Telescope application structure in my own demo Meteor application. The way they have things setup means that all code is located within sub-packages, including HTML templates and such.

I have my Meteor app setup so that I have the following:

• client
  • layout.html (Contains head tag, used as the "base" for the page)

• server

  • index.js (Contains the configuration for the Iron router, such as the default layoutTemplate )

• packages

  • myapp-ui
    • client
      • dashboard.html
    • myapp-ui.js
    • package.js

Inside of the package.js file in my package, I have the following code when trying to load the HTML template:

Package.describe({
    name: 'myapp-ui',
    version: '0.0.1',
    documentation: null
});

Package.onUse(function (api) {
    api.versionsFrom('1.1.0.2');

    api.use([
        'iron:router'
    ]);

    api.addFiles([
        'client/dashboard.html'
    ]);

    api.addFiles('myapp-ui.js');
});

The myapp-ui.js file contains code to try and get the dashboard.html code into my application:

Router.route('/', function() {
    this.render('Dashboard');
});

The dashboard.html template is simply:

<template name="dashboard">
    <p>Hello, world!</p>
</template>

The problem is, when visiting the localhost:3000 page that should load the dashboard, I get an error:

Couldn't find a template named "Dashboard" or "dashboard". Are you sure you defined it?

I am slightly confused, because I obviously have a template HTML file loaded with a template tag named "dashboard", and this file is loaded inside my package with api.addFiles . Do I need to use some other package to enable loading of HTML inside of packages, or is my code just incorrect?

Answer 1

Stick to either uppercase of lowercase syntax for your template name, at the moment you have both <template name="dashboard"> and this.render('Dashboard'); .

Did you actually add your package to the app using meteor add myapp-ui ?

Try to depend on the templating package on the client and load client/dashboard.htm only on the client :

api.use("templating", "client");
[...]
api.addFiles("client/dashboard.html", "client");