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

Question

我正在尝试在 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 错误 THREE is not defined，但这应该是因为它是在 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)

#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 查看器相关，并且我们在上述文件的某处存在内存泄漏。目前我们没有资源和足够的时间来找出原因，所以我们正在寻找解决方法。

如果我们只能在打开 3d 组件时加载以上文件，并且在我们导航到应用程序中的其他位置以丢弃这些文件以便释放浏览器内存之后，我们将获得双赢。

任何提示，建议将非常非常感谢。

谢谢

Answer 1

在你可以使用的组件中 ->

var SystemJS = require('systemjs');

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

加载库时你也会得到回调