search

KillerCodeMonkey / ngx-quill

Angular (>=2) components for the Quill Rich Text Editor
MIT License
1.78k stars 259 forks source link

Module parse failed: Unexpected character '@' (5:0) You may need an appropriate loader to handle this file type. #111

Closed erikrasmussen23 closed 6 years ago

erikrasmussen23 commented 6 years ago

I am getting error just after doing and npm install and adding the themes to my index.html and finally importing the QuillModule in my NgModule:

ERROR in ./node_modules/ngx-quill/src/quill.module.ts Module parse failed: Unexpected character '@' (5:0) You may need an appropriate loader to handle this file type. import { QuillEditorComponent } from './quill-editor.component';
@NgModule({
declarations: [
QuillEditorComponent

@ ./node_modules/ngx-quill/index.js 1:0-35 @ ./src/app/datatracks/datatracks-overview/datatracks-overview.module.ts @ ./src/app/datatracks/datatracks.module.ts @ ./src/app/gnomex-app.module.ts @ ./src/main.ts @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.ts Child html-webpack-plugin for "index.html": Asset Size Chunks Chunk Names 03d7091bb1d1facc1eee.hot-update.json 44 bytes [emitted]

Here is the webpack.config.json: switch (process.env.NODE_ENV) { case 'prod': case 'production': module.exports = require('./config/webpack.prod')({env: 'production'}); break; case 'test': case 'testing': module.exports = require('./config/webpack.test')({env: 'test'}); break; case 'dev': case 'development': default: module.exports = require('./config/webpack.dev')({env: 'development'}); }

package.json: { "name": "gnomex-ng", "description": "The Gnomex Ng application", "repository": "https://github.com/hci-gnomex/gnomex.git", "private": true, "scripts": { "build:dev": "npm run clean:dist && webpack --config config/webpack.dev.js --progress --profile", "build:prod": "npm run clean:dist && webpack --config config/webpack.prod.js --progress --profile --bail", "build": "npm run build:dev", "clean:dist": "npm run rimraf -- dist", "clean:install": "npm set progress=false && npm install", "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist compiled dll", "karma": "karma", "rimraf": "rimraf", "webpack": "webpack", "webpack-defaults": "webpack-defaults" }, "dependencies": { "angular/animations": "^4.2.4", "angular/cdk": "^2.0.0-beta.12", "angular/common": "^4.4.6", "angular/compiler": "^4.4.6", "angular/core": "^4.4.6", "angular/forms": "^4.4.6", "angular/http": "^4.2.4", "angular/material": "^2.0.0-beta.12", "angular/platform-browser": "^4.2.4", "angular/platform-browser-dynamic": "^4.2.4", "angular/router": "^4.2.4", "angularclass/conventions-loader": "^1.0.2", "angularclass/hmr": "^1.2.2", "angularclass/hmr-loader": "~3.0.2", "hci/app-header": "4.0.0", "hci/authentication": "^2.3.0", "hci/navigation": "3.0.0", "hci/style": "1.0.0-alpha.2", "hci/user": "^3.0.0", "ng-bootstrap/ng-bootstrap": "1.0.0-alpha.20", "ag-grid": "^13.0.0", "ag-grid-angular": "^13.0.0", "angular-2-local-storage": "1.0.1", "angular-split": "^1.0.0-rc.0", "angular-tree-component": "^4.1.0", "angular2-cookie": "^1.2.6", "angular2-jwt": "^0.2.3", "bootstrap": "4.0.0-alpha.6", "chart.js": "^2.7.1", "core-js": "^2.4.1", "css-loader": "^0.26.4", "file-loader": "^0.10.1", "font-awesome": "^4.7.0", "font-loader": "^0.1.2", "hci-ng-grid": "1.0.0-alpha.7", "html-loader": "^0.4.5", "jquery": "^3.2.1", "jqwidgets-framework": "^4.6.4", "jshint": "^2.9.5", "jshint-loader": "^0.8.4", "json-loader": "^0.5.7", "less-loader": "^2.2.3", "ng2-bootstrap": "1.4.2", "ng2-charts": "^1.6.0", "ng2-img-max": "^2.1.15", "ngx-quill": "^1.6.0", "nodejs-dashboard": "^0.4.1", "reflect-metadata": "^0.1.10", "rxjs": "^5.4.3", "style-loader": "^0.16.1", "svg-loader": "0.0.2", "transform-loader": "^0.2.4", "url-loader": "^0.5.9", "webpack": "^3.8.1", "zone.js": "0.8.12" }, "devDependencies": { "angular/cli": "1.4.3", "angular/compiler-cli": "^4.2.4", "angular/language-service": "4.2.4", "types/core-js": "0.9.39", "types/hammerjs": "^2.0.33", "types/html2canvas": "0.5.32", "types/jasmine": "^2.5.54", "types/lodash": "^4.14.77", "types/node": "^7.0.0", "types/selenium-webdriver": "~2.53.39", "types/source-map": "^0.5.0", "types/uglify-js": "^2.0.27", "types/webpack": "^3.0.9", "angular-router-loader": "^0.6.0", "angular-split": "^1.0.0-rc.0", "angular2-template-loader": "^0.6.2", "autoprefixer": "^7.1.2", "awesome-typescript-loader": "3.1.2", "bootstrap-loader": "2.0.0-beta.20", "copy-webpack-plugin": "^4.0.0", "css-loader": "^0.26.4", "del": "2.2.2", "es6-promise": "4.1.0", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.10.0", "gulp": "^3.9.1", "gulp-tslint": "^7.0.1", "gulp-util": "^3.0.7", "html-loader": "^0.4.5", "html2canvas": "0.5.0-beta4", "html-webpack-plugin": "^2.28.0", "http-proxy-middleware": "^0.17.4", "http-server": "^0.9.0", "istanbul-instrumenter-loader": "^0.2.0", "jasmine-core": "^2.8.0", "karma": "^0.13.22", "karma-chrome-launcher": "^1.0.1", "karma-coverage": "^1.1.0", "karma-jasmine": "^0.3.8", "karma-mocha-reporter": "^2.0.4", "karma-phantomjs-launcher": "^1.0.0", "karma-remap-coverage": "^0.1.4", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "0.0.31", "karma-webpack": "^2.0.3", "less": "^2.7.1", "less-loader": "^2.2.3", "minimist": "^1.2.0", "node-sass": "4.5.1", "null-loader": "^0.1.1", "optimize-js-plugin": "0.0.4", "phantomjs-prebuilt": "^2.1.7", "postcss-loader": "1.3.3", "raw-loader": "^0.5.1", "resolve-url-loader": "2.0.2", "rimraf": "~2.6.0", "sass-loader": "6.0.3", "source-map-loader": "^0.1.5", "style-loader": "^0.16.1", "to-string-loader": "^1.1.4", "ts-helpers": "^1.1.2", "ts-loader": "^2.0.3", "tsconfig-lint": "^0.11.0", "tslint": "^4.5.1", "tslint-loader": "^2.1.5", "typedoc": "^0.5.10", "typescript": "^2.5.1", "typings": "2.1.0", "url-loader": "^0.5.8", "war-webpack-plugin": "^1.0.2", "webpack": "^3.8.1", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-middleware": "^1.12.0", "webpack-dev-server": "2.7.1", "webpack-merge": "^4.1.0", "webpack-stream": "^3.2.0" } }

The index.html: <!DOCTYPE html>

GNomEx Loading...
KillerCodeMonkey commented 6 years ago

duuuuude i do not see anything with those unformatted code checkout my example repo how you should ngx-quill to your project. https://github.com/killerCodeMonkey/ngx-quill-example

Build a working plunkr or codepen. i will not rebuild your project to debug your code and problem ;)

Some hints to your code:

Please try to update to angular 5.x and using latest ngx-quill version or switching to something like angular cli, which provides a full toolkit.

All in all build a demo repo / codepen / plunkr without all the unnecessary stuff where i can reproduce the error.

KillerCodeMonkey commented 6 years ago

i tried it with angular-cli 1.6.7, angular 4.4.6 and ngx-quill 1.6.x and everything is working...

erikrasmussen23 commented 6 years ago

I apologize about the format I'll make sure its formatted if I post anything else. I've never set up a project that imports custom modules from scratch on plnker. Do you have any plunks with ngx-quill installed on it that I could use as a starting ground and then try to mirror my project on it? I'll make sure first to review again the example project on git though. Thanks for your help

KillerCodeMonkey commented 6 years ago

simply clone my ngx-quill-example repo - change angular versions to 4.4.6 and ngx-quill to 1.6.0 it is working fine :)