Angular 2 CLI - 3rd 方 JS 插件延迟加载答案

【问题标题】：Angular 2 CLI - 3rd party JS plugins lazy loadingAngular 2 CLI - 3rd 方 JS 插件延迟加载
【发布时间】：2017-03-21 20:54:21
【问题描述】：

https://github.com/ocombe/ocLazyLoad

我已经将它用于 Angular 1，是否有任何类似的替代插件适用于 Angular 2？我想将第 3 方 Javascript 插件按需（延迟加载）包含到我的 Angular 2 项目中。到目前为止没有成功。

我目前正在处理Angular CLI。我试图包含在angular-cli.json 文件中，包括 jquery 似乎工作。但我认为这是为了全局负载。

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js"
  ],

假设我想要一个带有WOW.js 插件的页面。我应该调用一个在其中启动 WOW.js 的组件，然后将动态包含 WOW.js 文件。该怎么做？

谢谢

【问题讨论】：

标签： javascript angularjs angular lazy-loading angular-cli

【解决方案1】：

您可以在 angular-cli.json 配置文件中将 WOW.js 文件添加到您的资产中。

"assets": [
    "pathToYourPlugin/WOW.js"
  ],

然后在你的组件中添加一个脚本标签来导入你的库。

<script src="/WOW.js"></script>

【讨论】：

我的组件 html 模板只是整个页面的一部分。如果我把这个<script src="/WOW.js"></script> 放在之间而不放在中可以吗？
当然可以。推荐的方式是在身体的末端。这个答案不是很漂亮，但它解决了你的要求。
<script src="assets/wow.js"></script> 未导入。我确认可以在这里看到脚本http://localhost:4200/assets/wow.js。当我使用开发工具检查元素时，<script src="assets/wow.js"></script> 标签从 html 中消失了。请帮忙。谢谢
你不应该通过角度添加它，而是通过模板或内部html。
是的，我把它放在模板dashboard.component.html 文件中。 @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html' })