Angular CLI 如何全局定义变量 [window.myVar]答案

【问题标题】：Angular CLI How to Globally define a variable [window.myVar]Angular CLI 如何全局定义变量 [window.myVar]
【发布时间】：2018-01-05 13:23:13
【问题描述】：

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

无法读取未定义的属性“导入”

模块名称为：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 未定义的“导入”

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

var d=window.Quill.imports.parchment

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

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

依次声明 window.Quill Globally。

我不确定如何在 CLI 中执行此操作，但我尝试通过以下方式关注一些文章声明：

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

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

但错误并没有消失？

【问题讨论】：

标签： javascript angular angular-cli

【解决方案1】：

myComp.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 单独实例作为 register 函数，但会导致未定义问题，以避免使用 Global singleton Quill obj。（按照标准，在角度中使用全局窗口对象不是很好的样式）

【讨论】：