角度为 6 的 CamanJs

Question

我正在尝试将 camanjs 与 angular 6 一起使用。当 npm 上没有类型时，如何添加 js lib 并将其与 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'

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

找不到模块“caman”。

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

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

Answer 2

• 先做How can i use foxTooltip with Angular?

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

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