web-dev-qa-db-fra.com

Erreur PrimeNg: la plume n'est pas définie

J'essaie d'utiliser le contrôle de l'éditeur dans primeng: https://www.primefaces.org/primeng/#/editor

Mais je reçois l'erreur:

ERREUR ReferenceError: Quill n'est pas défini dans Editor.webpackJsonp .../../../../primeng/components/editor/editor.js.Editor.ngAfterViewInit

Mon projet utilise:

  • Cli angulaire: 1.4.1
  • Angulaire: 4.3.6
  • NPM: 5.4.1
  • Noeud: 6.10.0
  • PrimeNG: 4.2.0

J'ai trouvé ce problème: https://github.com/primefaces/primeng/issues/807

J'ai suivi les instructions:

module d'éditeur d'importation

import {EditorModule} from 'primeng/primeng';

Installez les packages:

npm install quill --save

npm install @types/quill --save

Mettre à jour 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" ],

mais il a toujours le même problème. J'ajoute juste un balisage par défaut:

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

Et je reçois l'erreur et cela ressemble à ceci:

enter image description here

La seule chose sur ce fil que je n'ai pas essayé est d'installer le plugin webpack parce que j'utilise angular cli je ne pense pas que ce soit une option.

Que puis-je essayer de résoudre ce problème?

angularprimengquill
8
Guerrilla

Essayez ceci: cela fonctionne parfaitement pour moi

Versions: 

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

installer la plume du module de nœud

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

J'ai eu le même problème et ma solution était la suivante:

remplacez ceci:

import {EditorModule} from 'primeng/primeng';

pour ça:

import {ButtonModule} from 'primeng/button';

ou

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

De cette façon, vous évitez d'importer tous les composants définis dans primeng/primeng.js. Donc, si vous n'utilisez pas de module graphique ou éditeur, alors Chart.js ou quill.js ne sont pas utilisés et vous pouvez éviter d'ajouter ces bibliothèques dans le bundle.

pour plus d'informations: Problèmes Github

0
Juanes30

Des ressources de plume doivent être ajoutées à votre application. La configuration d'exemple avec CLI est la suivante;

npm install quill --save

Ajouter Quill aux scripts dans angular.json

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

Ajouter Quill CSS aux styles dans angular.json

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

J'ai vérifié cette solution plusieurs fois avec des projets nouveaux et existants, cela fonctionne comme un charme :)

0
Kamlesh