Meteor 1.5 : Dynamic Import for Blaze

Question

I am having two questions:

1) I want to use Meteor 1.5 Dynamic Import for Blaze but all the examples and tutorials are given for React. So I am confused how exactly it can be used . Can anyone give examples of it.

2) I am using packages from atmospherejs.com like amcharts which I only need at Admin Dashboard side. How to dynamically import them?

Thanks in Advance!

UPDATE(Solution):

Below is homepage.html (parent template)

<template name="homepage">
  Homepage Content
 {{> Template.dynamic template=content}}    
</template>

login.html (child template)

<template name="login">
  You're logged in!
</template>

login.js

import '../homepage/homepage.js';
import './login.html';
API = function () {
  BlazeLayout.render("homepage",{content: 'login'});
}

export { API }

main.js

LoadLogin = function () {
  import('/imports/modules/common/login/login.js').then(function (api) {
    api.API();
  })
}

/lib/route.js

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
FlowRouter.route('/', {
  name: 'homepage',
  action() {
    LoadLogin();
  }
});

score 4 · Accepted Answer · answered Jul 11 '17 at 12:48

4

I am developing my own admin panel, Meteor Candy, to be driven by dynamic imports, so I am happy to share how I got it working.

First, we have the view.html:

<template name="admin">
    Admin
</template>

Second, we have our JS logic:

import { Template } from 'meteor/templating';
import { Meteor } from 'meteor/meteor';
import { Blaze } from 'meteor/blaze';

import './view.html';

API = {}

API.render = function () {
     Blaze.render(Template.admin, document.body);
}

export { API }

Finally, we just need to import that code and trigger our Template to be rendered into the page:

openAdmin = function () {
    import('./imports/admins').then(function (api) {
        api.render()
    })
}

Once something runs the openAdmin() function, the templates will be imported from the server and the render function will be called.

answered Jul 11 '17 at 12:48

Max Savin

152
4

Thank you so much for reply. Can you please share your file structure? Actually I am getting Error on console => Uncaught (in promise) Error: Cannot find module './imports/admins' – Rashmi Jul 12 '17 at 05:16
I have a similar example in this repo, there you could see a typical file structure: https://github.com/msavin/dynamic-import-example – Max Savin Jul 12 '17 at 07:43
Thank you so much. I am following your code and till now it is working great. – Rashmi Mar 15 '18 at 18:34

score 1 · Answer 2 · answered Jul 03 '17 at 21:58

The basic technique for dynamically importing modules in Meteor 1.5 using Blaze is as follows:

Template.theTemplate.events({
  'click button'(event, instance) {
    import("foo").then(Foo => {
      console.log(Foo);
    });
  }
});

Make sure you take a close look at how your module is then imported, because apparently some refactoring may be needed when calling it in your code. For example, using "zxcvbn":

WAS

const result = zxcvbn(pwd);

IS

const result = zxcvbn.default(pwd);

Ankur Soni · Answer 3 · 2017-06-27T02:43:01.877

0

It is pretty straight forward using example link https://github.com/thesaucecode/meteor-amcharts-example/blob/master/client/example2.js, you just have to write the code inside Template.MYTEMPLATE.onRendered(function(){});

On top of that you can use var chart as reactive-var.

edited Jun 27 '17 at 02:43

answered Jun 27 '17 at 02:37

Ankur Soni

5,725
5
50
81

I am not having problem with displaying Amcharts. I wants to dynamically import amchart after loading of Homepage i.e I don't want Amchart to be a part of my initial meteor bundle. Wanted to load only home page initially and then other modules. – Rashmi Jun 27 '17 at 04:25

Meteor 1.5 : Dynamic Import for Blaze

3 Answers3