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

【问题标题】：Load JavaScript file in angular2 app在 angular2 应用程序中加载 JavaScript 文件
【发布时间】：2017-05-17 18:13:16
【问题描述】：

我正在开发一个用 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。

问题：

我必须如何/在哪里加载我生成的plugin-map.js 才能正常工作？

【问题讨论】：

您使用的是 SystemJS 而不是 RequireJS，所以我已经相应地编辑了您的标签。请注意这一点，因为这会严重损害您的问题的可见性。
好的，感谢您的编辑！ :)

标签： javascript angular typescript require systemjs

【解决方案1】：

我必须确保 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

现在看来可以了。

【讨论】：