Comments (12)
Version 1.3.0 is working perfectly on Ionic app scripts 1.3.4 and Ionic 2.2 with NGC webpack build. Thanks for the changes! I'll test out Ionic 3.1 when I get a chance but I think this issue is safe to close.
from ngx-quill.
yeah the path is wrong --> '/Users/etc/app/node_modules/ngx-quill/src/quill.module.js' ist not there
in src are the original ts files. and under bundles are the compiled js files.
So you could directly import and use the bundled js-file.
Better would be to import ngx-quill like import { ... } from 'ngx-quill';
Webpack or ngc should find it, because it is using the original ts sources and bundles them.
Might you show me some code? How you are using ngx-quill?
from ngx-quill.
Try it with the latest release 1.2.3
from ngx-quill.
Thanks for the fast response- tried the new version and it is not working yet. Here are a few details:
excerpts from app.module.ts:
import { QuillModule } from 'ngx-quill'; // import Quill as a rich text editor
@NgModule({
declarations: [
MyApp,
PAGES,
DIRECTIVES,
PIPES
],
imports: [
IonicModule.forRoot(MyApp, { }),
ResourceModule.forRoot(),
IonicStorageModule.forRoot(), // added for Ionic storage 2.0
QuillModule,
PasswordStrengthBarModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
PAGES,
ThreadDetail
],
providers: [
AppConfig,
CORE_SERVICES,
{provide: ErrorHandler, useClass: IonicErrorHandler},
RESOURCES,
OneSignal
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
When I try again with import { QuillModule } from 'ngx-quill/bundles' instead, then the build process breaks with this error:
[09:49:05] Error: Unexpected value 'QuillModule in
/Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/ngx-quill/bundles/index.js'
Here are some more details:
tsconfig.json (standard from Ionic-app-scripts). This excludes typescript processing from node_nodules:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules", "**/spec", "test", "src/test.ts","src/**/*.spec.ts"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
Package.json details:
{
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"buildprod": "ionic-app-scripts build --prod",
"ionic:buildrollup": "ionic-app-scripts build --rollup ./buildconfig/rollup.config.js",
"minifyold": "ionic-app-scripts minify --cleancss ./buildconfig/cleancss.config.js",
"closure": "ionic-app-scripts closure ./buildconfig/closure.config.js"
},
"dependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "2.4.8",
"@angular/compiler-cli": "2.4.8",
"@angular/core": "2.4.8",
"@angular/forms": "2.4.8",
"@angular/http": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/platform-server": "2.4.8",
"@ionic-native/core": "^3.4.4",
"@ionic-native/onesignal": "^3.4.4",
"@ionic/storage": "2.0.0",
"cropperjs": "^0.8.1",
"intl": "^1.2.4",
"ionic-angular": "2.2.0",
"ionic-native": "2.4.1",
"ionicons": "3.0.0",
"moment": "^2.14.1",
"ng2-password-strength-bar": "^1.1.2",
"ng2-resource-rest": "1.12.2",
"ngx-quill": "^1.2.3",
"rxjs": "5.0.1",
"sw-toolbox": "3.4.0",
"zone.js": "0.7.2"
},
"devDependencies": {
"@ionic/app-scripts": "1.2.2",
"typescript": "2.0.9"
}
}
Hopefully that helps to clarify. Thanks in advance!
from ngx-quill.
woooah the ionic-app-scripts version is old.
i tried it with latest ionic and app script and it worked:
"dependencies": {
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/compiler-cli": "4.0.0",
"@angular/core": "4.0.0",
"@angular/forms": "4.0.0",
"@angular/http": "4.0.0",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@ionic-native/core": "3.4.2",
"@ionic-native/splash-screen": "3.4.2",
"@ionic-native/status-bar": "3.4.2",
"@ionic/storage": "2.0.1",
"ionic-angular": "3.0.1",
"ionicons": "3.0.0",
"ngx-quill": "^1.2.3",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.0",
"@ionic/cli-plugin-cordova": "0.0.12",
"@ionic/cli-plugin-ionic-angular": "0.0.6",
"typescript": "~2.2.1"
},
Please try to use newer app scripts.
from ngx-quill.
Good catch! I just tried with the latest app scripts 1.3.0 but it came back with a missing source map error in the browser. I'm going to try updating to Ionic 3.1 / NG4 and hopefully will solve the issue. Thanks for the package.json example.
Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '...app/node_modules/ngx-quill/src/quill.module.js.map'
from ngx-quill.
I upgraded to Ionic 3.1 and when adding Quill to the app, I'm getting this error when running ionic build --release --prod:
[12:55:22] ionic-app-script task: "build"
[12:55:22] Error: ./~/ngx-quill/src/quill.module.ts Module parse failed:
/Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/ngx-quill/src/quill.module.ts
Unexpected character '@' (5:0) You may need an appropriate loader to handle this file type. | import {
QuillEditorComponent } from './quill-editor.component'; | | @NgModule({ | declarations: [ |
QuillEditorComponent @ ./src/app/app.module.ngfactory.js 32:0-55 @
./src/app/main.ts,./~/ngx-quill/src/quill-editor.component.ts Module parse failed:
/Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/ngx-quill/src/quill-editor.component.ts
Unexpected character '@' (23:0) You may need an appropriate loader to handle this file type. | import * as
Quill from 'quill'; | | @Component({ | selector: 'quill-editor', | template: ` @
./src/components/field-editor/field-editor.ngfactory.js 36:0-65 @
./src/pages/a-onboarding/a-onboarding.ngfactory.js @ ./src/app/app.module.ngfactory.js @ ./src/app/main.ts
Error: ./~/ngx-quill/src/quill.module.ts
Module parse failed: /Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/ngx-quill/src/quill.module.ts Unexpected character '@' (5:0)
You may need an appropriate loader to handle this file type.
| import { QuillEditorComponent } from './quill-editor.component';
|
| @NgModule({
| declarations: [
| QuillEditorComponent
@ ./src/app/app.module.ngfactory.js 32:0-55
@ ./src/app/main.ts,./~/ngx-quill/src/quill-editor.component.ts
Module parse failed: /Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/@ionic/app-scripts/dist/webpack/optimization-loader.js!/Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/ngx-quill/src/quill-editor.component.ts Unexpected character '@' (23:0)
You may need an appropriate loader to handle this file type.
| import * as Quill from 'quill';
|
| @Component({
| selector: 'quill-editor',
| template: `
@ ./src/components/field-editor/field-editor.ngfactory.js 36:0-65
@ ./src/pages/a-onboarding/a-onboarding.ngfactory.js
@ ./src/app/app.module.ngfactory.js
@ ./src/app/main.ts
at BuildError.Error (native)
at new BuildError (/Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
at /Users/tommclellan/Dropbox/Documents/GC-Tom/code/gma-13/gma-app/app/node_modules/@ionic/app-scripts/dist/preprocess.js:18:21
at process._tickCallback (internal/process/next_tick.js:103:7)
I read about a related webpack issue at bleenco/ng2-datepicker#136.
At the Ionic app level, my tsconfig.json excludes typescript processing from node_modules as in:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules", "**/spec", "test", "src/test.ts","src/**/*.spec.ts"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
Is this more of an issue with ionic-app-scripts, or is there some way to add Quill to a list of modules to be processed by webpack? The same error seems to come up when I remove the "node_modules" entry from the excluded list in tsconfig.json.
Thanks,
Tom
from ngx-quill.
To help in troubleshooting, could you please share the app.module.ts from your Ionic 3.01 starter?
Was that the only file that was edited to add Quill? I'm assuming for a basic example it should work just to edit app.module.ts, add the CSS files to index.html, and then add tags to a page template - is that correct?
Thanks,
Tom
from ngx-quill.
sorry for the hazzle. i looked into the ionic cli3 an i have to build the app in another way. And there it is also not working :(.
I do not know why ngc is kicking off the dependencies... if i understand it correctly the build process should create extra js files for external dependencies und load this.
But it simply searches a js file in the wrong folder in the node_modules folder...
Maybe you have a hint how ionic build the app
All in all i think i had to make the project aot ready, using module Factories and so on... an additional tsconfig for aot.
from ngx-quill.
Thanks for the followup. I'm going to wait another week or two before trying to migrate to Ionic 3.1 again.
I'm still learning the webpack-based AOT build process, but we recently implemented https://www.npmjs.com/package/ng2-password-strength-bar into our app and it seemed to go smoothly enough. I'm curious how that's working from an ngc perspective.
For our app the ionic 3 AOT build sizes are coming in about 40% smaller than Ionic 2.x - good to see that the extra effort for ngc is worth it.
from ngx-quill.
for your issue with '@' at is not defined --> i think this is an ionic app scripts issue --> try app-scripts 1.3.4 or newest 1.3.6 ;)
with the new cli you can build a prod build for the browser with:
ionic cordova build --prod
and when you get asked for the platform (ios, android)
enter browser
;)
from ngx-quill.
try version 1.3.0. I added an aot step to this repo. for mit it is working with ionic 3.1, cli beta 3 and app-scripts 1.3.4
from ngx-quill.
Related Issues (20)
- Html export : Unordered lists are saved as Ordered lists HOT 3
- Chrome browser deprecation warning HOT 2
- Keyboard module, bindings , HOT 3
- Reactive Forms for Angular 12 HOT 1
- Randomly creates ghost lines when using IME input. HOT 16
- How to Remove Formatting Automatically When Copying Text? HOT 1
- Formats not working in mat-quill implementation HOT 3
- zone.js:178 Uncaught TypeError: this.quillEditor.getSemanticHTML is not a function HOT 2
- Quill v1/Angular 18+ support? HOT 1
- Styling width by percentage is not working HOT 2
- this.quillEditor.getSemanticHTML is not a function Angular 17 HOT 1
- HOT 2
- suppressGlobalRegisterWarning not working HOT 8
- modules is not working in quill-editor HOT 4
- html not getting saved correctly HOT 6
- some props are not existing HOT 2
- Browser compatibility warnings HOT 5
- Playwright's .fill() doesn't work in Firefox HOT 2
- Upgrading from 23.0.3 to 25.3.2 HOT 2
- Adding "id" attribute to lists HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-quill.