在 angular2 应用程序中加载 JavaScript 文件

Load JavaScript file in angular2 app

我正在开发一个用 TypeScript 编写的 angular2 应用程序。

这个有效:

我有一个名为 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
};

它被转译为 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

在其他模块中,我正在导入我的 PluginMap,如下所示:

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

我想要的:

现在我想在服务器启动时在运行时创建 plugin-map.js。所以我想摆脱我的 plugin-map.ts 而只有一个(生成的)plugin-map.js。而且我不想对 plugin-map.js.

有任何转译时间依赖

我尝试了什么:

在我需要访问 PluginMap 的模块中,我用这样的声明替换了 import 语句:

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

现在当然在运行时我得到一个 Error: (SystemJS) 'PluginMap' is undefined。所以我的下一步是从我的 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>
...

当我启动我的应用程序时,我可以看到浏览器实际上请求了 plugin-map.js 文件。但我仍然得到 Error: (SystemJS) 'PluginMap' is undefined.

问题:

How/where 我是否必须加载生成的 plugin-map.js 才能正常工作?

我必须确保 PluginMap 在全局上下文中可用。所以生成的 plugin-map.js 必须如下所示:

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

而不是这样:

"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

现在看来可以了。