Angular2组件加载外部js lib文件

Posted 2023-02-19

【中文标题】Angular2组件加载外部js lib文件

【英文标题】：Angular2 component loading external js lib file

【发布时间】：2016-06-25 21:23:48

【问题描述】：

我有一个使用 javascript 库的组件。目前我只是使用system.js来加载依赖

public ngOnInit() 
    System.import('lib').then(() => this.createControl());

但是，组件初始化的这种延迟会导致另一个消耗组件出现问题。本质上，createControl 函数运行得太晚了。

是否可以使用 Angular 延迟整个组件的初始化，直到下载所有依赖项？

【问题讨论】：

为什么在加载 angular 之前不在脚本标签中加载依赖？我使用一些库来做到这一点，例如 js.cookie 和 lodash。在 Angular 开始之前，它们已经加载完毕。

我正在寻找一种更加模块化的方法 :) 我最初可以加载所有依赖项，是的，虽然双方都有优点/缺点，但我个人倾向于模块化/组件化的方法。

您的应用中有路线吗？

是的，我有路线。我知道你要去哪里！但我希望避免路由，因为组件应该独立于路由。但是，您能否给我看一下路线示例（假设您有一个）。

尝试@CanActivate(() => System.import('lib'))注解并在构造函数中照常初始化this.createControl()。

【参考方案1】：

是否可以用 angular 延迟整个组件的初始化，直到下载所有依赖项

只需将lib 添加为文件的依赖项。把它放在包含组件的文件的顶部：

import * as lib from "lib"

这将在应用程序启动之前有效地加载“lib”。

【讨论】：

这不起作用。得到一个打字稿编译器错误，它找不到模块“lib”

修复：在vendor.d.ts添加declare module "lib" var foo:any; export = foo;