Load JavaScript file in angular2 app

Question

I'm working on a angular2 application written in TypeScript.

This works:

I have a module called plugin-map.ts which looks something like this:

import { Type } from '@angular/core';

import { SomeComponent } from './plugins/some.component';

export const PluginMap: { [key: string]: Type<any> } = {
    'e690bec6-f8d1-46a5-abc4-ed784e4f0058': SomeComponent
};

It gets transpiled to a plugin-map.js which looks something like this:

"use strict";
var some_component_1 = require('./plugins/some.component');
exports.PluginMap = {
    'e690bec6-f8d1-46a5-abc4-ed784e4f0058': some_component_1.SomeComponent
};
//# sourceMappingURL=plugin-map.js.map

And in other modules I'm importing my PluginMap like this:

import { PluginMap } from './plugin-map';

What I want:

Now I want to create plugin-map.js at runtime when my server starts. So I want to get rid of my plugin-map.ts and instead have only a (generated) plugin-map.js. And I don't want to have any transpile-time dependencies to that plugin-map.js.

What I tried:

In modules where I need to access the PluginMap I replaced the import statement with a declaration like this:

declare const PluginMap: { [key: string]: Type<any> };

Now of course at runtime I get a Error: (SystemJS) 'PluginMap' is undefined. So my next step was to load plugin-map.js explicitly from my index.html like this:

...
<script src="js/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
      System.import('./app/plugins/plugin-map.js').catch(function (err) { console.error(err); });
      System.import('app').catch(function(err){ console.error(err); });
</script>
...

When I start my application I can see that the browser actually requests the plugin-map.js file. But I still get the Error: (SystemJS) 'PluginMap' is undefined.

Question:

How/where do I have to load my generated plugin-map.js so that this works?

You're using SystemJS not RequireJS so I've edited your tags accordingly. Be careful with that because that can seriously harm your question's visibility. — Louis
– Louis, Commented Jan 3, 2017 at 16:23

Robert Hegner · Accepted Answer · 2017-01-05 09:14:21Z

1

I had to make sure that PluginMap is available in the global context. So the generated plugin-map.js has to look like this:

var some_component_1 = require('./plugins/some.component');
PluginMap = {
    'e690bec6-f8d1-46a5-abc4-ed784e4f0058': some_component_1.SomeComponent
};

and not like this:

"use strict";
var some_component_1 = require('./plugins/some.component');
exports.PluginMap = {
    'e690bec6-f8d1-46a5-abc4-ed784e4f0058': some_component_1.SomeComponent
};
//# sourceMappingURL=plugin-map.js.map

Now it seems to work.

edited Jan 5, 2017 at 9:14

answered Jan 4, 2017 at 8:20

Robert Hegner

9,4768 gold badges71 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Load JavaScript file in angular2 app

This works:

What I want:

What I tried:

Question:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

This works:

What I want:

What I tried:

Question:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related