surmon-china / ngx-quill-editor

🍡@quilljs editor component for @angular
https://github.surmon.me/ngx-quill-editor
MIT License
232 stars 54 forks source link

Issue with Angular 5.x #31

Closed m-ghaoui closed 6 years ago

m-ghaoui commented 7 years ago

After upgrading my project to Angular 5, I now get this error when running ng serve:

ERROR in ./node_modules/ngx-quill-editor/quillEditor.component.ts
Module build failed: Error: C:\projects\event-system\event-system-admin\node_modules\ngx-quill-editor\quillEditor.component.ts is not part of the compilation output. Please check the other error messages for details.
    at AngularCompilerPlugin.getCompiledFile (C:\projects\event-system\event-system-admin\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:629:23)
    at plugin.done.then (C:\projects\event-system\event-system-admin\node_modules\@ngtools\webpack\src\loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./src/app/speaker/person-details/person-details.component.ts 18:0-103
 @ ./src/app/speaker/speaker.module.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
ERROR in ./node_modules/ngx-quill-editor/quillEditor.module.ts
Module build failed: Error: C:\projects\event-system\event-system-admin\node_modules\ngx-quill-editor\quillEditor.module.ts is not part of the compilation output. Please check the other error messages for details.
    at AngularCompilerPlugin.getCompiledFile (C:\projects\event-system\event-system-admin\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:629:23)
    at plugin.done.then (C:\projects\event-system\event-system-admin\node_modules\@ngtools\webpack\src\loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./src/app/speaker/speaker.module.ts 18:0-94
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

There's a workaround for this, but it would be good if this issue is fixed.

m-ghaoui commented 7 years ago

The workaround is similar to the one mentioned here:

https://github.com/angular/angular/issues/20091#issuecomment-341376512

I managed to temporarily fix this issue by adding this to the tsconfig.json file:

  "include": [
    "src/**/*",
    "node_modules/ngx-quill-editor/quillEditor.component.ts",
    "node_modules/ngx-quill-editor/quillEditor.module.ts"
  ]
micheleissa commented 7 years ago

I'm trying what you mentioned and still getting the same error!

m-ghaoui commented 7 years ago

Hm. What does the error message say? Does it mention which file is 'is not part of the compilation output'?

alan345 commented 7 years ago

Update I have added

  "include": [
    "src/**/*",
    "node_modules/ngx-quill-editor/quillEditor.component.ts",
    "node_modules/ngx-quill-editor/quillEditor.module.ts",
    "node_modules/ngx-quill-editor/index.ts"
  ]

and it seems to work Update

==========================

Hi! I have almost same error. I have added to tsconfig.json file:

  "include": [
    "src/**/*",
    "node_modules/ngx-quill-editor/quillEditor.component.ts",
    "node_modules/ngx-quill-editor/quillEditor.module.ts"
  ]

In package.json, it is: "ngx-quill-editor": "^2.2.2",

and error is:

ERROR in ./node_modules/ngx-quill-editor/index.ts
Module build failed: Error: /Users/alan/app/arte/node_modules/ngx-quill-editor/index.ts is not part of the compilation output. Please check the other error messages for details.
    at AngularCompilerPlugin.getCompiledFile (/Users/alan/app/arte/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:629:23)
    at plugin.done.then (/Users/alan/app/arte/node_modules/@ngtools/webpack/src/loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./src/app/quote/quote.module.ts 34:0-53
 @ ./src/app/user/user.module.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

Thanks!

micheleissa commented 7 years ago

The file it says the problem with is just a node_modules npm pckg that consists of a very simple component .ts file along with some assets ( images and css ) Worth mentioning is that once I downgrade the version something else ( e.g. ~4.3.4 ) it worked. I believe it is something related to Angular CLI 5.0.0 not your code! I'm gonna add to the comments on the original issue on Angular CLI

lamarh commented 7 years ago

Apparently you cannot delvier non-compiled libraries with migration to Angular 5.x & CLI 1.5.0. See https://github.com/angular/angular-cli/issues/8284

The ngx-quill-editor library will need to pre-compile its delivery.

m-ghaoui commented 7 years ago

Any ETA on the fix?

stas-kh commented 6 years ago

It would be great to have this problem fixed

DanushkaAmith commented 6 years ago

The same thing happen to me. It is working when I build the project with AOT but when I try to compile it same error popup like @alan345 Is there any solution?

nnennajohn commented 6 years ago

While you wait on this, for anyone else that runs into this problem, just grab the files and add to your own build directly like in the screenshot.

I know it is not ideal... But deadlines have to be met. :) And as you can see from my screenshot, there are quite a few plugins i use that are yet to be updated and give the same exact error.

Hope this helps someone.

screenshot 2018-01-04 14 55 08
DanushkaAmith commented 6 years ago

Hi Guys, I found solution use this one git repo

m-ghaoui commented 6 years ago

@DanushkaAmith Thanks for the tip! Sorry for the beginner question, but what is the best way to link to that repo using npm? I haven't quite understood how you can "make build install" an npm package directly off a git repo.

SalathielGenese commented 6 years ago

@m-ghaoui

A github repo is located at https://github.com/{ ORGNAME }/{ REPONAME } where ORGNAME can actually be USERNAME.

npm allow you to npm install ORGNAME/REPONAME to get a package directly from github repo.

m-ghaoui commented 6 years ago

I've decided to migrate to https://github.com/Ledzz/angular2-tinymce

HimansiShahCueserve commented 5 years ago

Update I have added

  "include": [
    "src/**/*",
    "node_modules/ngx-quill-editor/quillEditor.component.ts",
    "node_modules/ngx-quill-editor/quillEditor.module.ts",
    "node_modules/ngx-quill-editor/index.ts"
  ]

and it seems to work Update

==========================

Hi! I have almost same error. I have added to tsconfig.json file:

  "include": [
    "src/**/*",
    "node_modules/ngx-quill-editor/quillEditor.component.ts",
    "node_modules/ngx-quill-editor/quillEditor.module.ts"
  ]

In package.json, it is: "ngx-quill-editor": "^2.2.2",

and error is:

ERROR in ./node_modules/ngx-quill-editor/index.ts
Module build failed: Error: /Users/alan/app/arte/node_modules/ngx-quill-editor/index.ts is not part of the compilation output. Please check the other error messages for details.
    at AngularCompilerPlugin.getCompiledFile (/Users/alan/app/arte/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:629:23)
    at plugin.done.then (/Users/alan/app/arte/node_modules/@ngtools/webpack/src/loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
 @ ./src/app/quote/quote.module.ts 34:0-53
 @ ./src/app/user/user.module.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

Thanks!

I works for me was facing issue for index.ts. All set using this. Thanks alot

variableex commented 4 years ago

install those package ``` " "ngx-quill": "^8.0.0", "quill": "^1.3.7",



in app.module.ts
import { QuillModule, QuillEditorComponent } from 'ngx-quill';
`QuillModule.forRoot({
      modules: {
        syntax: true
      }
    }),`

add providers as well 
in app.module.ts

providers: [QuillEditorComponent],

in HTML file 
`<quill-editor  [styles]="quillEditorStyle">`

in component.ts

quillEditorStyle = {
    height: '300px'
  };

![Screenshot 2020-02-11 at 10 16 15 PM](https://user-images.githubusercontent.com/41159056/74258354-301f4480-4d1c-11ea-93d0-b94c1ae2895d.png)

this work for me

hope you guyes like this