[英]Load JavaScript file in angular2 app
I'm working on a angular2 application written in TypeScript. 我正在使用TypeScript编写的angular2应用程序。
I have a module called plugin-map.ts
which looks something like this: 我有一个名为plugin-map.ts
的模块,看起来像这样:
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: 它被转换为一个plugin-map.js
,看起来像这样:
"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: 在其他模块中,我将这样导入我的PluginMap
:
import { PluginMap } from './plugin-map';
Now I want to create plugin-map.js
at runtime when my server starts. 现在,我想在服务器启动时在运行时创建plugin-map.js
。 So I want to get rid of my plugin-map.ts
and instead have only a (generated) plugin-map.js
. 所以我想摆脱我的plugin-map.ts
,而只拥有一个(生成的) plugin-map.js
。 And I don't want to have any transpile-time dependencies to that plugin-map.js
. 而且我不想对该plugin-map.js
有任何转换时间依赖性。
In modules where I need to access the PluginMap
I replaced the import
statement with a declaration like this: 在需要访问PluginMap
模块中,我用如下声明替换了import
语句:
declare const PluginMap: { [key: string]: Type<any> };
Now of course at runtime I get a Error: (SystemJS) 'PluginMap' is undefined
. 现在当然在运行时,我会收到一个Error: (SystemJS) 'PluginMap' is undefined
。 So my next step was to load plugin-map.js
explicitly from my index.html
like this: 所以我的下一步是像这样从我的index.html
显式加载plugin-map.js
:
...
<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. 当我启动应用程序时,我可以看到浏览器实际上请求了plugin-map.js
文件。 But I still get the Error: (SystemJS) 'PluginMap' is undefined
. 但我仍然收到Error: (SystemJS) 'PluginMap' is undefined
。
How/where do I have to load my generated plugin-map.js
so that this works? 如何/在何处加载生成的plugin-map.js
才能正常工作?
I had to make sure that PluginMap is available in the global context. 我必须确保PluginMap在全局上下文中可用。 So the generated plugin-map.js
has to look like this: 因此,生成的plugin-map.js
必须如下所示:
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. 现在看来可行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.