Question

我正在尝试在角度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

在您可以使用的组件中 - ＆gt;

var SystemJS = require('systemjs');

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

当你加载库时，你也会得到回调

同步加载角度2组件中的第三方js文件

1 个答案: