Ngx-quill: I need the index.js

[tonychangcheng]

Hi,

I am using Angular-seed project which is using SystemJS. It requires the index.js instead of index.ts. For example, the ng2-ckeditor is doing the same thing - wrapping the ckeditor. And I could get it working with my Angular-seed project. Can you add tsconfig.json and do the same thing to in your project?

Regards
Cheng

[KillerCodeMonkey]

i do not have any index.ts? event with SystemJS you should be able to import a ts from a node_module

follow these steps:

1. install ngx-quill via npm
2. Open your App Module (NgModule)
3. import { QuillModule } from 'ngx-quill/src/quill/quill.module';
4. Add the QuillModule to your imports
5. use <quill-editor></quill-editor> somewhere

https://github.com/KillerCodeMonkey/ngx-quill/tree/develop/src/app --> you can see an example how to use it.

It should be even possible with SystemJS, where you can set the default import path to the node_modules folder.

[tonychangcheng]

Thanks for the response. My issue is that Angular-seed is by default loading .js files. And I could not change this setting as it would cause other problems. Which means, instead of loading quill.module.ts SystemJS will require quill.module.ts.js and of course will fail. I will raise a issue in the Angular-seed as well.

[tonychangcheng]

I just created a issue in Angular-seed project and the author claimed that a Javascript bundle is better practice for production. The issue is here https://github.com/mgechev/angular-seed/issues/1753

[KillerCodeMonkey]

eehhmm in my opinion, if you develop in typescript... you should import the original ts sources in your project, and then you create your javascript files on your own in your build process.

If you deveop angular 2 with typescript you import everything like

import {Component, OnInit} from '@angular/core';

this is the same thing like using ngx-quill

import {QuillModule} from 'ngx-quill/src/quill/quill.module';

So i can not get the problem...

Even if you are using tslint you get warnings in other packages to use the original ts-files instead of the build js-files.

So please explain to me, what you want to do with a index.js file in a typescript project?

[KillerCodeMonkey]

any updates?

[tonychangcheng]

As the author of Angular-seed mentioned in https://github.com/mgechev/angular-seed/issues/1753, Angular-seed is loading .js bundle which is considered to be a good practice in production. And that is a common pattern in other libs I am using (e.g. ng2-bootstrap, ng2-charts and ng2-slim-loading-bar). I mean when I got them via npm I got the js bundle (the ts lib had been compiled into js). As my project is built on the Angular-seed, I can only load .js files

[KillerCodeMonkey]

hmm... kay...

so i created a index.js in the dist-folder, where the quill.module.ts and quill-editor.component.ts is bundled.

Please check if this is working. (ngx-quill >= v0.1.2)

[tonychangcheng]

I tried to import it in app.module.ts by adding "import { QuillModule } from 'ngx-quill/dist/index';". But the module could not be loaded.

[KillerCodeMonkey]

Maybe you should read about module loader and systemjs in special.

For SystemJS you need to add a configuration where systemjs finds the files.

var map = {
    ...,
    'ngx-quill': 'node_modules/ngx-quill/src/quill' 
};

now you import it in your module file

import {QuillModule} from 'ngx-quill/quill.module';

because of that i think you need no index.js...
You are developing with typescript... so why you should import a js-file.

Maybe you can give me access to your repo, where i can import it for you.

[tonychangcheng]

Thanks for your support. As my project is built on the Angular-seed, you can download the Angular-seed project and build on that. https://github.com/mgechev/angular-seed

[tonychangcheng]

I just forked the angular-seed project and maybe you can commit to it. https://github.com/tonychangcheng/angular-seed

[KillerCodeMonkey]

i refactored the whole project to work without angular-cli, but i did not know enough about systemjs-configuration.

But in the dist-folder there is an index.js know.

Maybe you get it working with the help of the angular-seed guys.

I tried it on my own, but i failed --> the Systemjs does not resolve QuillJS.. and i do not know why.

Please let me know if you solved the problem.

[tonychangcheng]

I am currently using https://github.com/chymz/ng2-ckeditor which does the same thing. I will try to get the idea from it and if I solve the issue I will let you know.

[KillerCodeMonkey]

I've got it working... -.- goooood systemjs is a mess with configuration:

1. use the current release
2. in the angular-seed go to the seed.config.js and at SYSTEM_CONFIG_DEV add

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

1. Also in SYSTEM_CONFIG_DEV there is a packages section:

packages: {
  'ngx-quill': {
    format: 'cjs',
    meta: {
      deps: ['quill']
    }
  },
  'quill': {
    format: 'cjs'
  }
}

1. In your index.html add css and like

  <link href="https://cdn.quilljs.com/1.1.9/quill.snow.css" rel="stylesheet">
  <link href="https://cdn.quilljs.com/1.1.9/quill.bubble.css" rel="stylesheet">

1. open app.module.ts

import { QuillModule } from 'ngx-quill';

1. add QuillModule to your imports

imports: [BrowserModule, HttpModule, AppRoutingModule, AboutModule, HomeModule, SharedModule.forRoot(), QuillModule],

1. Use <quill-editor></quill-editor> somewhere

I will add this to my readme soon.

It would be nice if you would use quill editor instead of the ckeditor :), because of simplicity.
Or maybe you can test it, if it is working, yet.

[tonychangcheng]

I just followed your comment and I got this error.
angular-seed/node_modules/ngx-quill/src/quill-editor.component.ts(19,24): error TS2307: Cannot find module 'quill'.

Browser console output:
(SystemJS) Module not already loaded loading "quill" as http://localhost:5556/node_modules/quill/dist/quill.
Error: Module not already loaded loading "quill" as http://localhost:5556/node_modules/quill/dist/quill.
at Object.eval (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:289:18) []
at __webpack_require__ (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:30:30) []
at Object.module.exports (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:133:64) []
at __webpack_require__ (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:30:30) []
at Object.eval (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:92:82) []
at __webpack_require__ (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:30:30) []
at Object.eval (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:296:76) []
at __webpack_require__ (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:30:30) []
at module.exports (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:76:18) []
at eval (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:79:10) []
Evaluating http://localhost:5556/app/app.module.js
Evaluating http://localhost:5556/app/main.js
Error loading http://localhost:5556/app/main.js Not expecting this error? Report it at https://github.com/mgechev/angular-seed/issues
(anonymous) @ (index):51

[tonychangcheng]

Can you have a look at this commit on my test project? https://github.com/tonychangcheng/angular-seed/commit/a2fd0cfedb49377c3291d74459eb166d1e3f799c

[KillerCodeMonkey]

ah okay, one last thing:

add to your devDependencies: "@types/quill": "^0.0.29"
In a new ngx-quill release i will add them per default

[KillerCodeMonkey]

Okay, now you can use ngx-quill 0.2.3 and the types are installed automatically

[tonychangcheng]

I just updated to 0.2.3 and added the @type/quill as you can see from here https://github.com/tonychangcheng/angular-seed/commit/c0f5e0439e13a6ac6145189240366faae2679055. But I got below error

(SystemJS) Module not already loaded loading "@angular/core" as http://localhost:5556/node_modules/@angular/core/bundles/core.umd.
Error: Module not already loaded loading "@angular/core" as http://localhost:5556/node_modules/@angular/core/bundles/core.umd.
at Object.c (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:103:19) []
at __webpack_require__ (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:30:30) []
at Object.eval (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:78:15) []
at __webpack_require__ (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:30:30) []
at Object.c (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:61:11) []
at __webpack_require__ (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:30:30) []
at eval (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:50:18) []
at eval (http://localhost:5556/node_modules/ngx-quill/bundles/ngx-quill.umd.js:53:10) []
Evaluating http://localhost:5556/app/app.module.js
Evaluating http://localhost:5556/app/main.js
Error loading http://localhost:5556/app/main.js Not expecting this error? Report it at https://github.com/mgechev/angular-seed/issues

[KillerCodeMonkey]

checkout this test-repo
https://github.com/KillerCodeMonkey/angular-seed-quill

And my changes there:
https://github.com/KillerCodeMonkey/angular-seed-quill/commit/9662225ec46bdec1e732399e05062895a4e808ec

if i run npm start everything works fine

[tonychangcheng]

Thanks for your support. I have got it working.

[KANekT]

@KillerCodeMonkey build.prod not working

I Have error
Uncaught TypeError: require is not a function

in
}([function(e, t) { e.exports = require("@angular/core") }

version 1.6.0/1.5.1

[KillerCodeMonkey]

öhhh this is not very helpful... any info about your build process or anything else? and you comment has nothing to do with this issue

[KANekT]

i clone https://github.com/KillerCodeMonkey/angular-seed-quill

and run run build.prod

it's not working

[KillerCodeMonkey]

You should not usw this^^. It Is old And outdated. Simply follow the
installation guide in the readme

Am 08.11.2017 12:02 schrieb "Пронин Андрей" [e-mail]:

i clone https://github.com/KillerCodeMonkey/angular-seed-quill

and run run build.prod

it's not working

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

[KANekT]

ok i clone https://github.com/mgechev/angular-seed

add quill 1.6.0 from commit
https://github.com/KillerCodeMonkey/angular-seed-quill/commit/9662225ec46bdec1e732399e05062895a4e808ec

and run start - worked

run build.prod - not worked

[16:37:59] Error in plugin 'run-sequence(build.bundles.app)' Message: Error on fetch for ngx-quill.js at file:///D:/angular-seed-master/node_modules/ngx-quill.js Loading dist\tmp\app\app.module.js Loading dist\tmp\app\main.js ENOENT: no such file or directory, open 'D:\angular-seed-master\node_modules\ngx-quill.js' Details: originalErr: Error: ENOENT: no such file or directory, open 'D:\angular-seed-master\node_modules\ngx-quill.js' Stack: Error on fetch for ngx-quill.js at file:///D:/angular-seed-master/node_modules/ngx-quill.js Loading dist\tmp\app\app.module.js Loading dist\tmp\app\main.js Error: ENOENT: no such file or directory, open 'D:\angular-seed-master\node_modules\ngx-quill.js' at Error (native)

[KillerCodeMonkey]

duuuuude.... simply follow the readme for systemjs...

got it working in a few minutes. I do not know if you should edit seed.config.ts .. but i did the following:

1. add quill and ngx-quill to seed.config.js in the paths section:

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

1. extend the packages section:

'ngx-quill': {
  format: 'cjs',
  meta: {
    deps: ['quill']
  }
},
'quill': {
  format: 'cjs'
}

1. import QuillModule in your app.module.ts and add it to imports

[KANekT]

Yes it worked for run start
but not working for run build.prod

[KillerCodeMonkey]

okay than share your repo... do not like to find things out for others with pointing in the dark....

build.prod runs without error: