将 tracking.js 导入 Angular 项目答案

【问题标题】：Importing tracking.js into an angular project将 tracking.js 导入 Angular 项目
【发布时间】：2018-07-29 21:17:24
【问题描述】：

我已下载 tracking.js 并将其添加到我的 /src/assets 文件夹中
在我的 angular-cli.json 文件中，我已添加到我的脚本中：

“脚本”：[ “../src/assets/tracking/build/tracking-min.js” ],

issue here - 在我的角度组件中，我导入跟踪如下：

从“跟踪”导入跟踪；

在 chrome 检查窗口中，我可以将鼠标悬停在“跟踪”上并查看所有属性，如下所示：

我什至可以在控制台窗口中调用 ColorImage 构造函数！：

但是，当它尝试在我的代码中执行构造函数时，我收到关于未定义跟踪的错误：

我以为这是因为我没有以传统的 DI 方式通过构造函数传入跟踪对象，但是这样做时我得到了命名空间不能用作类型的错误：

我唯一能想到的另一件事是尝试在主 index.html 文件中添加外部引用，但我收到关于严格 MIME 检查的错误。

澄清一下：这一切都发生在我的角度组件构造函数中（当跟踪方法得到执行时）

有什么想法吗？

【问题讨论】：

因为tracking没有导出模块。在这里找到更多信息：github.com/eduardolundgren/tracking.js/issues/177
我不太了解 CommonJS 与 ES6，但根据您的链接，我还发现了这个关于导出模块的特定 tracking.js 问题：github.com/eduardolundgren/tracking.js/issues/206 我想我现在的问题是什么我应该使用'module.exports = window.tracking'或'export default window.tracking'这一行吗？我是否必须将此添加到我的“tracking.js”文件以及缩小版本的底部？ tracking.js 文件有很多函数（`(function(window, undefined) {..}) '），它们都需要在每个函数的末尾导出吗？
不，只导出 window.tracking 。您可以使用此“window.tracking”对象访问所有其他功能。

标签： javascript angular

【解决方案1】：

转到您的 node_modules 文件夹并找到此文件：“node_modules/tracking/build/tracking.js”。打开文件并将这行代码添加到文件末尾：

module.exports = window.tracking

保存文件并使用此代码导入它：

import * as tracking from 'tracking';

【讨论】：

当我将“module.exports = window.tracking”添加到该文件时，在 Chrome 中，我最终在该行生成的“scripts.bundle.js”文件中看到异常，并出现错误: 'ReferenceError: 模块未定义'
“scripts.bundle.js”中的“window.tracking”变量已填充并且看起来不错，只是模块变量本身未定义。正在寻找...感谢到目前为止的帮助。也许这与我如何加载这些模块并通过我的 angular-cli.json 文件引用这个 tracking.js 文件有关。
你使用 webpack 来构建包吗？
我看到了对“webpack-bundle-analyzer”的引用，所以我想说是的
还有一个问题。你用 angular-cli 吗？

【解决方案2】：

我认为您不能将 DI 与该外部库一起使用。但是，您应该能够在构造函数中创建一个新实例：

import tracking from 'tracking';

constructor(...) {
    this.colors = new tracking.ColorTracker(...);
}

myFunction() {
    this.colors.doWhateverIWant();   
}

如果您只想在整个应用中使用一个跟踪实例，那么您必须创建自己的 trackingService 并注入它。

【讨论】：

【解决方案3】：

另一种解决方案是通过脚本标签引用 tracking.js ：

<html>
   <head></head>
   <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.3/tracking- 
        min.js"></script>
   </body>
</html>

在你的 component.ts 中写：

(window as any).tracking.ColorTracker(["magenta"]);

【讨论】：

不幸的是，当我尝试像这样直接加载脚本时，我收到错误消息：“拒绝从 '' 执行脚本，因为它的 MIME 类型 ('text/html') 不可执行，并且严格的 MIME类型检查已启用。”