【问题标题】：PrimeNg Error: Quill is not definedPrimeNg 错误：未定义 Quill
【发布时间】：2018-02-22 11:45:17
【问题描述】：

我正在尝试在primeng中使用编辑器控件：https://www.primefaces.org/primeng/#/editor

但我得到了错误：

ERROR ReferenceError: Quill is not defined 在 Editor.webpackJsonp.../../../../primeng/components/editor/editor.js.Editor.ngAfterViewInit

我的项目使用：

Angular Cli：1.4.1
角度：4.3.6
NPM：5.4.1
节点：6.10.0
PrimeNG：4.2.0

我发现了这个问题：https://github.com/primefaces/primeng/issues/807

我按照说明进行操作：

导入编辑器模块

import {EditorModule} from 'primeng/primeng';

安装包：

npm install quill --save

npm install @types/quill --save

更新 angular-cli.json

"styles": [ "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css", ], "scripts": [ "../node_modules/quill/dist/quill.js" ],

但它仍然有同样的问题。我只是添加默认标记：

<p-editor [(ngModel)]="text" [style]="{'height':'320px'}"></p-editor>

我得到了错误，它看起来像这样：

我没有尝试的唯一事情是安装 webpack 插件，因为我使用的是 angular cli，我不认为这是一个选项。

我可以尝试什么来解决这个问题？

【问题讨论】：

你对这个控件的初始化测试有什么想法吗？
你发现了吗？是进口订单问题吗？

标签： angular primeng quill

【解决方案1】：

试试这个：它非常适合我

版本：

Node : 7.9.0
angular/cli: 1.3.0
angular: 4.3.6
npm: 4.2.0
primeng": "^4.2.0-rc.1"

安装节点模块 quill

npm install quill --save

.angular-cli.json

"styles": [
  "../node_modules/primeng/resources/themes/omega/theme.css",
  "../node_modules/primeng/resources/primeng.min.css",
  "../node_modules/quill/dist/quill.core.css",
  "../node_modules/quill/dist/quill.snow.css"
],
"scripts": [
  "../node_modules/quill/dist/quill.js"
]

app.module.ts

import { EditorModule } from 'primeng/primeng';

@NgModule({
    imports: [
        EditorModule
    ]
})

app.component.html

<p-editor [(ngModel)]="text" [style]="{'height':'320px'}"></p-editor>

app.component.ts

export class AppComponent {
    text: string;
}

【讨论】：

这看起来和我做的一样。我看不出区别
你用的是和我一样的版本吗？
我试过 rc1，同样的问题。我想我的项目中一定有冲突。我会尽量隔离
在 npm primeng、quill 和 @type/quill 之后卸载并清理 npm cache clean 然后安装 Oly primeng 和 quill npm ...不要安装 @type/quill ...尝试一下
它也适用于你的版本 npm、node、cli 等

【解决方案2】：

需要将 quill 的资源添加到您的应用程序中。使用 CLI 的示例设置如下；

npm install quill --save

将 Quill 添加到 angular.json

中的脚本

"scripts": [... "node_modules/quill/dist/quill.js"],

将 Quill css 添加到 angular.json

中的样式

"styles": [ ... "node_modules/quill/dist/quill.core.css", 
"node_modules/quill/dist/quill.snow.css"],

我已经用新的和现有的项目多次检查了这个解决方案，它就像魅力一样 :)

【讨论】：

【解决方案3】：

我遇到了同样的问题，我的解决方案如下：

替换这个：

import {EditorModule} from 'primeng/primeng';

为此：

import {ButtonModule} from 'primeng/button';

或

import {ButtonModule} from 'primeng/components/button/button';

这样可以避免导入primeng/primeng.js. 中定义的所有组件因此，如果您不使用图表或编辑器模块，则不使用 Chart.js 或 quill.js，您可以避免将这些库添加到包中。

更多信息：Github Issues

【讨论】：

【解决方案4】：

我认为问题在于 PrimeNG 文档

我收到“不存在”错误，在查看日志后我发现路径错误...（无论如何对于 Angular9）。

PS：这里假设你已经用 npm BTW 安装了 quill

在 angular.json 脚本和样式部分中，删除“../”（如primeng 文档中所定义），使其变为...

    "styles": [
      "node_modules/quill/dist/quill.core.css",
      "node_modules/quill/dist/quill.snow.css"
    ],
    "scripts": [
      "node_modules/quill/dist/quill.min.js"
    ]

它现在编译并为我修复它。

不确定这是否是 Windows 问题，但“../”告诉编译器查找错误的位置。

【讨论】：

或“脚本”：["./node_modules/quill/dist/quill.js"]

【解决方案5】：

我遇到了同样的错误，为了修复这个错误我做了两件事：

npm install quill --save
我像这样更改了 angular.json 文件的样式和脚本部分

“样式”：[ "src/styles.scss", “node_modules/quill/dist/quill.core.css”， “node_modules/quill/dist/quill.snow.css” ], “脚本”：[“node_modules/quill/dist/quill.js”]

【讨论】：