Ошибка Ngx Quill в производственном режиме: Uncaught (в обещании): TypeError: n.e не является функцией

Я получаю сообщение об ошибке после того, как запустил свой проект angular 10 и перейду на ‹quill-editor› ‹/quill-editor›. Текстовый редактор Quill отлично работает в режиме отладки, но не работает в производственном режиме.

Вот ошибка:

ERROR Error: Uncaught (in promise): TypeError: n.e is not a function
TypeError: n.e is not a function
    at h.<anonymous> (ngx-quill.js:54)
    at Generator.next (<anonymous>)
    at tslib.es6.js:74
    at new e (zone.js:913)
    at o (tslib.es6.js:70)
    at ngx-quill.js:52
    at new e (zone.js:913)
    at h.getQuill (ngx-quill.js:52)
    at p.<anonymous> (ngx-quill.js:269)
    at Generator.next (<anonymous>)
    at w (zone.js:832)
    at new e (zone.js:916)
    at o (tslib.es6.js:70)
    at ngx-quill.js:52
    at new e (zone.js:913)
    at h.getQuill (ngx-quill.js:52)
    at p.<anonymous> (ngx-quill.js:269)
    at Generator.next (<anonymous>)
    at tslib.es6.js:74
    at new e (zone.js:913)

Мой package.json:

{
  "name": "pmb",
  "version": "0.0.1",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js",
    "start": "webpack-dev-server --inline --progress --port 54535",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
    "postinstall": "ngcc",
    "create-stats": "webpack --profile --json | Out-file 'dist/stats.json' -Encoding OEM",
    "stats": "webpack-bundle-analyzer stats.json"
  },
  "dependencies": {
    "@angular/animations": "^10.1.2",
    "@angular/cdk": "10.2.1",
    "@angular/cli": "^10.1.2",
    "@angular/common": "^10.1.2",
    "@angular/compiler": "^10.1.2",
    "@angular/compiler-cli": "^10.1.2",
    "@angular/core": "^10.1.2",
    "@angular/flex-layout": "10.0.0-beta.32",
    "@angular/forms": "^10.1.2",
    "@angular/material": "^10.2.1",
    "@angular/platform-browser": "^10.1.2",
    "@angular/platform-browser-dynamic": "^10.1.2",
    "@angular/platform-server": "^10.1.2",
    "@angular/router": "^10.1.2",
    "@types/chart.js": "2.9.3",
    "@types/datatables.net": "1.10.13",
    "@types/jquery": "^3.3.5",
    "@types/node": "^10.12.10",
    "angular7-csv": "^0.2.12",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^3.0.0",
    "bootstrap": "^3.4.1",
    "chart.js": "2.9.3",
    "core-js": "2.5.7",
    "css": "^2.2.4",
    "d3": "^4.7.3",
    "es6-shim": "^0.35.1",
    "event-source-polyfill": "1.0.4",
    "expose-loader": "^0.7.5",
    "hammerjs": "2.0.8",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.5.1",
    "json-loader": "^0.5.7",
    "ng2-handsontable": "2.1.0-rc.3",
    "ngx-quill": "^13.0.1",
    "popper.js": "^1.14.6",
    "preboot": "^7.0.0",
    "qrcode": "^1.4.4",
    "quill": "1.3.7",
    "reflect-metadata": "0.1.10",
    "rxjs": "^6.6.3",
    "rxjs-compat": "^6.5.3",
    "shepherd.js": "2.0.0-beta.35",
    "to-string-loader": "^1.1.5",
    "tslib": "2.0.1",
    "typescript-watcher": "0.0.4",
    "url-loader": "1.1.2",
    "webpack-hot-middleware": "^2.24.3",
    "xlsx": "^0.15.3",
    "zone.js": "^0.10.3"
  },
  "devDependencies": {
    "@types/jasmine": "3.3.0",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^3.2.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^2.0.0",
    "html-loader": "^1.3.0",
    "html-webpack-plugin": "^4.0.0-beta.4",
    "jasmine-core": "^3.3.0",
    "karma": "^4.3.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-jasmine": "^2.0.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^4.0.0-rc.4",
    "null-loader": "^0.1.1",
    "raw-loader": "0.5.1",
    "rimraf": "2.6.2",
    "style-loader": "0.20.3",
    "typescript": "3.9.7",
    "webpack": "^4.27.1",
    "webpack-bundle-analyzer": "^3.9.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^4.1.4"
  }
}

Как видите, я использую quill: 1.3.7 и ngx-quill: ^ 13.0.1. Я пробовал это с ngx-quill 12.0.1, но получаю ту же ошибку в производственном режиме.

Отладка работает с webpack-dev-server --inline --progress --port 54535

И производственный режим: rimraf dist && webpack --config config / webpack.prod.js --progress --profile --bail

Если я загляну в ngx-quill.js, кажется, что ошибка находится в getQuill ():

getQuill() {
        this.count++;
        if (!this.Quill && this.count === 1) {
            this.$importPromise = new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
                var _a, _b;
                const quillImport = yield import('quill'); // Error here
                this.Quill = (quillImport.default ? quillImport.default : quillImport);
                // Only register custom options and modules once
                (_a = this.config.customOptions) === null || _a === void 0 ? void 0 : _a.forEach((customOption) => {
                    const newCustomOption = this.Quill.import(customOption.import);
                    newCustomOption.whitelist = customOption.whitelist;
                    this.Quill.register(newCustomOption, true, this.config.suppressGlobalRegisterWarning);
                });
                (_b = this.config.customModules) === null || _b === void 0 ? void 0 : _b.forEach(({ implementation, path }) => {
                    this.Quill.register(path, implementation, this.config.suppressGlobalRegisterWarning);
                });
                resolve(this.Quill);
            }));
        }
        return this.$importPromise;
    }

Может кто-нибудь мне помочь? Спасибо.


person Jasper    schedule 23.01.2021    source источник


Ответы (1)


Я нашел решение. Похоже, я совершил очевидную ошибку новичка, но мне пришлось импортировать перо в свой компонент.

import "quill";
// Your Component

Непонятно, потому что он работает без оператора импорта в режиме разработки, но не в рабочем режиме.

Об этом не говорится ни в документации, ни в примерах проектов ngx-quill, которые я нашел в Интернете. Это заставляет меня думать, что я до сих пор не нашел правильного ответа. Может быть, моя настраиваемая конфигурация веб-пакета мешает компиляции?

person Jasper    schedule 26.01.2021