如何在app.component.ts（angular）中动态加载脚本文件？

Question

我在angular2 vs typescript工作。

在我的app.component.ts文件中，我必须根据需要加载基于当前导航器语言的脚本文件。所以我添加了我的功能如下（home.component.ts），

export class HomeComponent {
constructor() {
    this.loadDynmicallyScript();
  } 
public loadDynmicallyScript() {
    let node = document.createElement('script');
    node.src = "../node_modules/xxxxxxxxxx/xx." +   navigator.language"+".min.js";
    node.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(node);
 }

但这不起作用。但我必须根据当前的导航语言按需加载文件。如何实现这一目标？谢谢你的帮助。

Answer 1

从'assets / js / index.js'导入*作为_script;

您可以像这样导入但在导入脚本之前将您的功能更改为导出然后使用。

并在ngOnInit中调用需要加载到页面加载所需的函数

Answer 2

为了加载脚本，它应该可以加载。除非您愿意手动将脚本文件复制到公用文件夹，否则使用document.createElement手动添加脚本是错误的。

Webpack已经处理dynamic imports。这需要一些额外的措施来确保Webpack捆绑延迟加载的脚本。导入名称应该适合静态分析，additional options可以通过注释提供。