角度为 6 的 CamanJs

Question

我正在尝试将 camanjs 与 angular 6 一起使用。如何添加 js lib 并在 npm 上没有类型时将其与 angular 一起使用。 我按照很多步骤

• 使用 npm 安装 caman

• 使用其在节点模块中的路径将其作为脚本添加到 angular.json

• 将它导入到组件中

import * as Caman from 'path to caman in node module'

• 在 AfterViewInit 我像这样使用它

 ngAfterViewInit() { Caman('#image-id', function () { this.brightness(10); this.contrast(20); }); }

但是当启动服务器时我收到这个错误

代码链接： https : //stackblitz.com/edit/angular-d5g941

Answer 1

在.angular-cli.json的scripts数组中，添加caman的路径

"scripts": [
    "../node_modules/path-to-caman"
],

在angular.json的scripts数组中的 Angular 6 的情况下，将路径添加到caman

"scripts": [
    "node_modules/path-to-caman"
],

然后，在你的组件中，像这样声明一个名为Caman的变量：

declare var Caman: any;

你不需要做

import * as Caman from 'path-to-caman'

因为你的编译器会抛出一个错误，指出：

找不到模块“卡门”。

只需将脚本添加到.angular-cli / angular.json的脚本数组（在 Angular 6 的情况下）就会将其添加到全局范围，您将能够从您的组件访问它。

此外，请确保在ngAfterViewInit生命周期钩子方法中调用任何函数，因为它尝试通过 id 访问 DOM 元素。

Answer 2

• 首先做我如何将foxTooltip与Angular一起使用？

• 然后将caman文件夹下nodemodules_中的Caman.pack.js添加到assets中

• 确保您在组件开头声明的 var 与包“Caman”中的名称相同，区分大小写