Ngx Quill Error on production mode: Uncaught (in promise): TypeError: n.e is not a function
Ngx Quill Error on production mode: Uncaught (in promise): TypeError: n.e is not a function
我 运行 我的 angular 10 项目并浏览到
这里是错误：
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;
}
谁能帮帮我？谢谢
我找到了解决方案。好像我犯了一个明显的菜鸟错误，但我不得不在我的组件中导入羽毛笔。
import "quill";
// Your Component
令人困惑，因为它在开发模式下没有 import 语句就可以工作，但在生产模式下却不行。
它既没有在文档中说明，也没有出现在我在网上找到的 ngx-quill 示例项目中。这让我相信我还没有真正找到“正确”的答案。也许我的自定义 webpack 配置搞砸了编译？
我 运行 我的 angular 10 项目并浏览到
这里是错误：
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;
}
谁能帮帮我？谢谢
我找到了解决方案。好像我犯了一个明显的菜鸟错误，但我不得不在我的组件中导入羽毛笔。
import "quill";
// Your Component
令人困惑，因为它在开发模式下没有 import 语句就可以工作，但在生产模式下却不行。
它既没有在文档中说明，也没有出现在我在网上找到的 ngx-quill 示例项目中。这让我相信我还没有真正找到“正确”的答案。也许我的自定义 webpack 配置搞砸了编译？