Ngx-quill: Quill on production build not working

[unnamed666]

hi, i'am using your great module to implement Quill in my app. Everything is working fine on developement stage but as i build my production files Quill kills my app with this error:

ERROR TypeError: aY is not a constructor
Ślad stosu:
sY</n.prototype.ngAfterViewInit@http://lend.local.pl/js/app.js?1509364124839:1:2797287
Pl@http://lend.local.pl/js/app.js?1509364124839:1:30305
Ol@http://lend.local.pl/js/app.js?1509364124839:1:30114
Sl@http://lend.local.pl/js/app.js?1509364124839:1:29992

what can be the cause ?
Build uses rollup and aot (angular-seed - npm run build.prod.rollup.aot)

[KillerCodeMonkey]

Did you tried production build without ngx-quill?

I do not know the rollup process that much. But ordinary aot builds are
working so far.

Maybe you can build a demo repo?

Am 30.10.2017 12:59 schrieb "unnamed666" [e-mail]:

hi, i'am using your great module to implement Quill in my app. Everything
is working fine on developement stage but as i build my production files
Quill kills my app with this error:

ERROR TypeError: aY is not a constructor
Ślad stosu:
sYngAfterViewInit@http://lend.local.pl/js/app.js?1509364124839:1:2797287
Pl@http://lend.local.pl/js/app.js?1509364124839:1:30305
Ol@http://lend.local.pl/js/app.js?1509364124839:1:30114
Sl@http://lend.local.pl/js/app.js?1509364124839:1:29992

what can be the cause ?
Build uses rollup and aot (angular-seed - npm run build.prod.rollup.aot)

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/72, or mute the
thread
https://github.com/notifications/unsubscribe-auth/ACKOYPYSn2rcLsq7Xui0sLe6DYA_cDaeks5sxboVgaJpZM4QLEjl
.

[unnamed666]

hmm from what i see rollup is culprit, normal production build works with your module included

npm run build.prod <- works
npm run build.prod.rollup.aot <- not working, its compiling fine, but as soon as i go to component thats uses Quill i get those errors

[KillerCodeMonkey]

Could you share a demo repo? I added aot support (there are some closed
issues Here) so i think it is working. Maybe you Have to use the aot ngx
quill Version in your code? Check node_modules/ngx-quill folder.

Am 30.10.2017 13:19 schrieb "unnamed666" [e-mail]:

hmm from what i see rollup is culprit, normal production build works with
your module included

npm run build.prod <- works
npm run build.prod.rollup.aot <- not working, its compiling fine, but as
soon as i go to component thats uses Quill i get those errors

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/72#issuecomment-340427662,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYJtUc7XbrGnach_JYrrCWi5D01XEks5sxb69gaJpZM4QLEjl
.

[unnamed666]

ok i prepared minimal demo - clean install of angular-seed and your module only.
https://github.com/unnamed666/seed-quill
git clone --depth 1 https://github.com/unnamed666/seed-quill.git
cd seed-quill
npm install
npm start <- everything is working at this point
npm run build.prod.rollup.aot <- not working, we are back at error from first post
/tools/config/project.config.ts contains systemjs configuration as described seed instructions.

[KillerCodeMonkey]

so "minimal" ... :D

i do not have any experiences with rollup.
But for aot, you have to point to the aot build dir in the node_modules

'ngx-quill': 'node_modules/ngx-quill/bundles/ngx-quill.umd.js',

maybe the aot build works with the following path:
node_modules/ngx-quill/aot/src/quill.module.ngfactory.ts

So all aot stuff is build under this aot folder.
with default angular cli it worked in a test project out of the box. maybe you need to point systemjs to this.

[unnamed666]

minimal as can be with angular-seed :P
aot path gives same error :(

[KillerCodeMonkey]

You should think to usw a real minimal Starter. Using webpack instead of
systemjs, and NGC for aot and treeshaking.

I will try to check your repo this week.

Am 31.10.2017 20:40 schrieb "unnamed666" [e-mail]:

minimal as can be with angular-seed :P
aot path gives same error :(

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/72#issuecomment-340883777,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYIRMT9BlY6GTLpN4K9KIa3YWVWNhks5sx3eQgaJpZM4QLEjl
.

[unnamed666]

to late for that, pretty big app written on angular-seed - i was just stupid enough to think that build will go without any errors and didnt test before :P
thanks for help :)

edit//
hmm i fixed it.
changed line 25 in quill-editor.component.ts
let Quill: any = QuillNamespace;
to
import Quill from 'quill';
i dont know why but it works :)

[KillerCodeMonkey]

yeah i found it, too. Quill is not found in aot build Oo with your config.

It is strange i changed this part lately, because i could not build my repo with quill-typings and so on Oo..

If you leave it this way ordinary build should be fail... strange.

I will look into it again. (you should not change 3rd party libraries.. this is not a good approach.

[unnamed666]

i will wait for update if you find some time to play with it :)
not planning to change your lib, just wanted you to know what change did work for me, maybe it will help you fix it :)

normal build works with this import: let Quill: any = QuillNamespace;
build with rollup aot works with this import: import Quill from 'quill';

[joannaz]

Hey guys! Old issue, but I had the same problem too. I did a bit of Googling and managed to solve this issue with this import statement:

import * as quill from "quill";
const Quill = (quill as any).default ? (quill as any).default : quill;

No idea why it works but it does! :)

[dlcooper]

@joannaz - did you issue the imports referenced above in your own project or did you modify the ngx-quill project. Regardless, could you provide more information on where to put these import statements to get the --prod to work for ngx-quill?

I'm not sure why this issue is closed...the problem still exists.

[KillerCodeMonkey]

it is closed, because i changed something in newer releases and tested it local in an ng-cli project.

did not tried it with latest angular cli.

but i build aot sources for ngx-quill for each release and had no problems using them so far.
checkout node_modules/ngx-quill there should be ngsummary files

[KillerCodeMonkey]

so i tried it again with a fresh angular cli project:

1. ng new ngx-quill-angular-cli
2. cd ngx-quill-angular-cli
3. npm install -D ngx-quill
4. added QuillModule to the base NgModule
5. added quill-editor to the app-component template
6. ng build --prod
7. startet dist folder with local webserver

Works

[eliraneliassy]

@KillerCodeMonkey It's not working anymore.
New Angular CLI project, just install ngx-quill, import on AppModule and use the HTML tag.
Works with a regular build doesn't work for the production build.

[KillerCodeMonkey]

which ngx-quill and angular cli version do you use.

Keep in mind my ngx-quill-example repo is using the latest ngx-quill version and ng build --prod as build command and it is working and deployed on gh-pages ;)