首页 文章

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

提问于
浏览
1

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

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

我尝试了什么?

#1 To load third party JS via angular-cli.json

"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.jsorbitcontrols.js 之前加载,需要三个 .

所以似乎angular-cli.json异步加载第三方脚本?

#2 To load third party JS in component

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

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 Loading third party trough 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组件时加载上面的文件,并且在我们导航到应用程序中的其他地方之后将丢弃这些文件以便浏览器内存将被释放,那么将是双赢的 .

任何提示,建议将非常非常感谢 .

谢谢

1 回答

  • 0

    在组件中,您可以使用 - >

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

    你加载库时也会得到回调

相关问题