PrimeNg错误：未定义Quill

Question

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

但我收到错误：

  

ERROR ReferenceError：未定义Quill       在Editor.webpackJsonp ... / .. / .. / .. / primeng / components / editor / editor.js.Editor.ngAfterViewInit

我的项目使用：

• Angular Cli：1.4.1
• Angular：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插件，因为我使用的是角度cli，我不认为这是一个选项。

我可以尝试解决这个问题吗？

Answer 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;
}

Answer 2

主轴的资源需要添加到您的应用程序中。使用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"],

我已经在新项目和现有项目中多次检查了此解决方案，它的工作方式就像charm：）

Answer 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

Answer 4

我认为问题在于PrimeNG文档

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

PS：假设您已使用npm BTW安装了羽毛笔

在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操作系统，但是“ ../”告诉编译器在错误的位置查找。

Answer 5

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

1. npm install quill --save

2. 我像这样更改了 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"]