web-dev-qa-db-ja.com

PrimeNgエラー：クイルが定義されていません

Primengでエディターコントロールを使用しようとしています： https://www.primefaces.org/primeng/#/editor

しかし、私はエラーを得ています：

エラーReferenceError：Quillが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>

そして私はエラーを受け取り、それは次のようになります：

enter image description here

angular cliを使用しているため、Webpackプラグインをインストールすることは、そのスレッドで私が試していない唯一のことです。これはオプションではないと思います。

これを修正するにはどうすればよいですか？

angularprimengquill
8
Guerrilla

これを試してください：それは私のために完全に働いています

バージョン：

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

ノードモジュールのクイルをインストールする

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

Output

13
Chandru

私は同じ問題を抱えていて、私の解決策は次のとおりでした：

これを交換してください：

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の問題

0
Juanes30

クイルのリソースをアプリケーションに追加する必要があります。 CLIでの設定例は次のとおりです。

npm install quill --save

angular.jsonのスクリプトにクイルを追加します

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

angular.jsonのスタイルにクイルcssを追加します

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

私はこのソリューションを新しいプロジェクトと既存のプロジェクトで複数回チェックしましたが、それは魅力のように機能します:)

0
Kamlesh