Angularjs 同步加载angular 2组件中的第三方js文件

我正在尝试在angular 2组件中加载一些第三方JavaScript文件

我们正在使用angular cli，我尝试了多种解决方案，其中只有一种有效，但我在该实现中还有其他问题

我试过什么

#1通过angular cli.json加载第三方JS

"scripts": [
    "../assets/semantic/jquery.min.js",
    "../assets/semantic/semantic.min.js",
    "../assets/semantic/sidebar.fix.js",
    "../node_modules/angular/angular.min.js",
    "../node_modules/angular-ui-grid/ui-grid.min.js",

    "../assets/3dviewer/library/three.min.js",
    "../assets/3dviewer/library/trackballcontrols.js",
    "../assets/3dviewer/library/stats.min.js",
    "../assets/3dviewer/library/orbitcontrols.js",
    "../assets/3dviewer/library/projector.js",
    "../assets/3dviewer/webgl.js"
  ],

通过这种方法，我得到了js error

THREE没有定义，但应该是因为它是在
trackballcontrols.js
和
orbitcontrols.js
之前加载的，这需要三个

看来angular-cli.json异步加载第三方脚本

#2在组件中加载第三方JS

在组件中，我添加了以下代码

import   "../../../../assets/3dviewer/library/three.min.js";
import   "../../../../assets/3dviewer/library/trackballcontrols.js";
import   "../../../../assets/3dviewer/library/stats.min.js";
import   "../../../../assets/3dviewer/library/orbitcontrols.js";
import   "../../../../assets/3dviewer/library/projector.js";
import   "../../../../assets/3dviewer/webgl.js";

@Component({
    selector: "be-3d-component",
    styleUrls: ["./3d.component.css"],
    templateUrl: "./3d.component.html",
})

在这种情况下，我也得到了与第一步相同的错误

Uncaught ReferenceError: THREE is not defined
    at HTMLDocument.<anonymous> (http://localhost:4200/main.bundle.js:3146:2)
    at j (eval at module.exports (http://localhost:4200/scripts.bundle.js:26:8), <anonymous>:2:29568)
    at k (eval at module.exports (http://localhost:4200/scripts.bundle.js:26:8), <anonymous>:2:29882)
    at ZoneDelegate.invokeTask (http://localhost:4200/vendor.bundle.js:148424:35)
    at Zone.runTask (http://localhost:4200/vendor.bundle.js:148300:47)
    at ZoneTask.invoke (http://localhost:4200/vendor.bundle.js:148494:33)
    at data.args.(anonymous function) (http://localhost:4200/vendor.bundle.js:149373:25)

未捕获引用错误：未定义三个
在HTMLDocument。(http://localhost:4200/main.bundle.js:3146:2)
在j处（在模块出口处评估(http://localhost:4200/scripts.bundle.js:26:8), :2:29568)
在k时（在模块出口处评估）(http://localhost:4200/scripts.bundle.js:26:8), :2:29882)
在ZoneDelegate.invokeTask(http://localhost:4200/vendor.bundle.js:148424:35)
在Zone.runTask(http://localhost:4200/vendor.bundle.js:148300:47)
在ZoneTask.invoke(http://localhost:4200/vendor.bundle.js:148494:33)
at data.args.（匿名函数）(http://localhost:4200/vendor.bundle.js:149373:25)

#3加载第三方槽index.html

<script src="/assets/3dviewer/library/three.min.js" type="text/javascript"></script>
  <script src="/assets/3dviewer/library/trackballcontrols.js" type="text/javascript"></script>
  <script src="/assets/3dviewer/library/stats.min.js" type="text/javascript"></script>
  <script src="/assets/3dviewer/library/orbitcontrols.js" type="text/javascript"></script>
  <script src="/assets/3dviewer/library/projector.js" type="text/javascript"  ></script>
  <script src="/assets/3dviewer/webgl.js" type="text/javascript"></script>



在这种情况下，一切正常

但这不是我想要的。正如您所看到的，我的第三方js代码与3d viewer相关，我们在上述文件的某个地方发现内存泄漏。目前我们没有足够的资源和时间来找出原因，因此我们正在寻找解决办法

若我们只能在3d组件打开时加载上述文件，然后在应用程序中导航到其他地方扔掉这些文件，以便释放浏览器内存，那个么我们将获得双赢

任何提示和建议都将非常感谢

感谢您可以使用的组件->

var SystemJS = require('systemjs');

// loads './app.js' from the current directory
SystemJS.import('./app.js').then(function(m) {
  console.log('library loaded',m);
});

此外，当在您可以使用的组件中加载库时，您将得到回调->

var SystemJS = require('systemjs');

// loads './app.js' from the current directory
SystemJS.import('./app.js').then(function(m) {
  console.log('library loaded',m);
});

此外，当加载库时，您将得到回调
如果问题是三个，则问题应直接解决。它不能外推到所有第三方JS文件。因为对于一些支持模块的随机文件，它只是
import
。如果问题是三个，那么问题应该直接解决。它不能外推到所有第三方JS文件。因为对于一些支持模块的随机文件，它只是
import
。