Question

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

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

问题在这里-在我的角度组件中，我按以下方式导入跟踪：

从“跟踪”导入跟踪；

在chrome检验窗口中，我可以将鼠标悬停在'tracking'上并查看所有属性，如下所示：

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

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

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

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

为了澄清：这都是在我的角度组件构造函数中发生的（当跟踪方法得到锻炼时）

有什么想法吗？

Answer 1

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

module.exports = window.tracking

保存文件，并使用此代码将其导入：

import * as tracking from 'tracking';

Answer 2

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

import tracking from 'tracking';

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

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

如果您只希望在整个应用中使用一个跟踪实例，则必须创建自己的trackingService并将其注入。

Answer 3

另一种解决方案是通过脚本标签引用track.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"]);

将tracking.js导入一个有角项目

3 个答案: