Currently, I'm in the process of developing an angular2 application using TypeScript.
The Situation:
Within my project, there exists a module named plugin-map.ts which is structured as follows:
import { Type } from '@angular/core';
import { SomeComponent } from './plugins/some.component';
export const PluginMap: { [key: string]: Type<any> } = {
'e690bec6-f8d1-46a5-abc4-ed784e4f0058': SomeComponent
};
This code is transpiled into a file named plugin-map.js, taking the form shown below:
"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
In various modules, I import the PluginMap like this:
import { PluginMap } from './plugin-map';
My Goal:
Now, my aim is to dynamically generate the plugin-map.js when the server starts running. Essentially, I want to eliminate the need for plugin-map.ts and solely rely on the generated plugin-map.js. Moreover, I want to remove any compile-time dependencies associated with that file.
My Attempt:
To achieve this, I replaced the import statements with declarations like this in modules where I reference the PluginMap:
declare const PluginMap: { [key: string]: Type<any> };
Naturally, at runtime, I encountered an error stating
Error: (SystemJS) 'PluginMap' is undefinedplugin-map.js explicitly from my index.html, as illustrated below:
...
<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>
...
Although the browser does request the plugin-map.js file upon launching the application, the
Error: (SystemJS) 'PluginMap' is undefinedThe Question:
How and where should I load the dynamically generated plugin-map.js to ensure everything functions properly?