将脚本添加到 Angular 库

Posted

技术标签:

【中文标题】将脚本添加到 Angular 库【英文标题】:Adding a script to an Angular Library 【发布时间】:2018-12-02 01:49:47 【问题描述】:

我正在尝试将我的 Angular 6 应用程序的一些组件导出到库中。不幸的是,我需要使用 WebToolkit 连接到由其他人构建的专有服务,该服务只能作为纯 javascript 文件使用。该文件又需要jQueryrequire.js

没有库,我通过将这些js文件添加到.angular-cli.json"scripts"下解决了这个问题


 ...,
 scripts: [
  "node_modules/jquery/dist/jquery.js",
  "node_modules/require/require.js",
  "path/to/my/magic/library.js"
 ],
 ...

现在正在构建我的 Angular 库,我希望将这些脚本内置到我自己的库代码中,这样我的客户仍然可以以简单的方式使用它,只需执行一次 npm-install 并将其导入到他们的 @ 987654327@文件。

Angular-CLI 6 有可能吗?或者您有其他建议如何实现我的库的简单安装?

【问题讨论】:

你们都解决了这个问题吗? 很遗憾没有。似乎还没有办法实现这一点。 感谢@PeterO - 希望尽快找到解决方案。 这不是最漂亮的,但你可以使用 ngx-script-loader。您可以将它们卷起来并将它们作为一个脚本分发,而不是多个脚本 您能否分享在stackblitz.com 上演示该问题的示例? 【参考方案1】:

也许不是最干净的方法,但您可以通过以下方式实现:

let scriptTap = document.createElement('script');
scriptTag.src = '<route to your scripts>';
document.body.appendChild(scriptTag);

最好的集成方式是从 ng new project-name -create-application=false 创建库 然后使用 ng g library name-of-library 添加库

你将有一个干净的项目来开发你的库

【讨论】:

以上是关于将脚本添加到 Angular 库的主要内容,如果未能解决你的问题,请参考以下文章

如何将全局样式添加到 Angular 6/7 库

无法将 ws 库添加到 Angular 项目

如何将@angular/fire 添加到 Nx 工作区(Angular 项目)?

Angular Schematics - 将库添加到 NgModule 导入

如何将自定义css和js添加到angular 4

Angular 6 - 在组件级别添加脚本并检查它是不是存在