Beginner in 1.8 - how to access template in separate file

help
1

Hi all,

Just a quick dummy question for meteor 1.8. How do I access template in separate html file in meteor 1.8? Do I need to do import from js file?

Thanks all.

1 Like
2

What are you using: Blaze, React, Angular, Vue ?

3

I am using Blaze at the moment.

4

Hi Fezzametta, welcome to the forums!

Short answer, it depends

Long answer:
If you started a new project with meteor create (no flag), you’ll see that client/main.js imports the html template with import './main.html'.

This is because Blaze compiles html templates into js files, and Meteor’s linker needs to know about a js file through an import statement before it will be loaded and sent to the client.

If you have two templates in different files and you want to include the second in the first, import both of them in the same js file (since the first template depends on the second).

// client/main.js
import './templateTwo.html';
import './main.html';

// client/main.html
<template name="main">
     <h1>Hello World</h1>
     {{> templateTwo }}
</template>
2 Likes
5

Hi Coagmano,

Thanks for your help. It’s working now. Another follow up question: any tips on how to easily import all the files without having to list them all in main.js? I have around 20 template files in the client folder.

Thanks.

6

The easiest way, is to opt-out of the imports-only behaviour (it’s reasonably new) by deleting the meteor section from package.json

Meteor will then eagerly load every file in your project (except those in an imports folder) according to the loading rules explained on this page:

This is a uniquely Meteor thing, which is why it’s no longer the default, but it does make it a lot faster to get started!

2 Likes
7

I’ve tried that before and it threw me an error during meteor server start up. Any tips on how to properly remove the meteor section from package.json?

Thanks Fred.

8

make sure there’s no dangling commas or other syntax errors, package.json has to be strictly valid JSON

1 Like
9

Hi Fred,

Apologize for the late reply. Better to confirm with you, is that from this originally:
{
“name”: “testapp”,
“private”: true,
“scripts”: {
“start”: “meteor run”,
“test”: “meteor test --once --driver-package meteortesting:mocha”,
“test-app”: “TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha”,
“visualize”: “meteor --production --extra-packages bundle-visualizer”
},
“dependencies”: {
“@babel/runtime”: “^7.0.0”,
“meteor-node-stubs”: “^0.4.1”
}
“meteor”: {
“mainModule”: {
“client”: “client”,
“server”: “server/main.js”
},
“testModule”: “tests/main.js”
}
}

I should change it to:
{
“name”: “testapp”,
“private”: true,
“scripts”: {
“start”: “meteor run”,
“test”: “meteor test --once --driver-package meteortesting:mocha”,
“test-app”: “TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha”,
“visualize”: “meteor --production --extra-packages bundle-visualizer”
},
“dependencies”: {
“@babel/runtime”: “^7.0.0”,
“meteor-node-stubs”: “^0.4.1”
}
}

Is that correct?

10

Yes that’s correct.

Also, when you post code to the forum, you can mark it as a code snippet by wrapping it with three backticks ie, ```

11

Awesome, thanks Fred.