javascript - Angular CLI 如何全局定义变量 [window.myVar]

Question

我正在尝试使用依赖于另一个库的模块，每当我尝试在组件中注册该库时，我都会在控制台中给我一个错误:

Cannot read property 'imports' of undefined

模块名称为:quill-image-resize-module库是:quill editor。

quill 是一个 html 编辑器。

MyComponent.ts:

import Quill from 'quill';

// add image resize module
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

控制台出现的错误是:

image-resize.min.js:1 Uncaught TypeError: Cannot read property 'imports' of undefined

当我尝试调查 image-resize.min 时，我发现这是导致错误的原因:

var d=window.Quill.imports.parchment

现在我正在使用 Angular CLI，我找到了一个可行的解决方案，但该解决方案通过在插件数组中声明它来与 webpack.config.js 一起工作:

 new webpack.ProvidePlugin({
      'window.Quill': 'quill/dist/quill.js'
    })

依次全局声明 window.Quill。

我不确定如何在 CLI 中执行此操作，但我尝试关注一些文章声明:

"../node_modules/quill/dist/quill.js"

在脚本数组中的 angular-cli.json 文件中。

但是错误没有消失？

Answer 1

我的Comp.ts

import * as Quill from 'quill';
import ImageResize from 'quill-image-resize-module';

 ngAfterViewInit(){

      window['Quill'] = Quill;
      window['Quill'].register({'modules/imageResize': ImageResize});
      this.quillObj = new Quill(this.textEditorDiv, {
        debug: 'error',
        modules: {
          ImageResize: true,
          toolbar: options
        },
        theme: 'snow'
      })};

虽然 angular build ts 编译器使用 Quill 单独实例作为注册函数，这会导致未定义的问题，因此要避免使用全局单例 Quill obj。 (按照标准，以 Angular 使用全局窗口对象不是好的样式)