Angular6中添加Quill出现StaticInjectorError(AppModule)[QuillEditorComponent -> Injecti

[嘤鸣求友]

出现问题如下：
ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[QuillEditorComponent -> InjectionToken config]:
StaticInjectorError(Platform: core)[QuillEditorComponent -> InjectionToken config]:
NullInjectorError: No provider for InjectionToken config!
Error: StaticInjectorError(AppModule)[QuillEditorComponent -> InjectionToken config]:
StaticInjectorError(Platform: core)[QuillEditorComponent -> InjectionToken config]:
NullInjectorError: No provider for InjectionToken config!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8896)
at resolveToken (core.js:9141)
at tryResolveToken (core.js:9085)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
at resolveToken (core.js:9141)
at tryResolveToken (core.js:9085)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8982)
at resolveNgModuleDep (core.js:21218)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21907)
at resolveDep (core.js:22278)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
at invokeTask (zone.js:1744)

app-routing.module.ts配置如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule} from "@angular/router";
import { IndexComponent } from "./index/index.component"
import { FormsModule} from "@angular/forms";
import { HttpClientModule }    from '@angular/common/http';
import { DaohangComponent} from "./index/daohang/daohang.component";
import { LoginComponent} from "./index/login/login.component";
import { BrowserModule } from '@angular/platform-browser';
import { PubQueComponent } from './index/daohang/pub-que/pub-que.component';
import { QuillModule } from 'ngx-quill';

const routes: Routes = [
  { path: '', component: IndexComponent, children: [
      {path: 'login', component: LoginComponent},
      {path: 'daohang', component: DaohangComponent, children: [
          {path: 'pubque', component: PubQueComponent},
        ]},
    ]},
];


@NgModule({
  declarations: [
    IndexComponent,
    LoginComponent,
    DaohangComponent,
    PubQueComponent,
  ],
  imports: [
    RouterModule.forRoot(routes),
    FormsModule,
    HttpClientModule,
    BrowserModule,
    QuillModule,
  ],
  // providers: [QuillModule,
  //   PubQueComponent,],
  exports: [RouterModule]
})
export class AppRoutingModule { }

html文件

<form #pub="ngForm" (ngSubmit)="onPubSubmit(pub.value)">
  <table class="table table-bordered">
    <tr>
      <td>发布问题</td>
    </tr>
    <tr>
      <td><input name='title' type="text" class="form-control" placeholder="习题标题:请输入习题头一行" ngModel></td>
    </tr>
    <tr>
      <td align="left">
        内容:
        <!--<textarea class="form-control" rows="9"></textarea>-->
        <!--<quill-editor name="content" [modules]="pub_config" [style]="{height: '200px'}" [(ngModel)]="data.content" (onEditorCreated)="EditorCreated($event)" ngModel></quill-editor>-->
        <!-- <textarea class="form-control" rows="9"></textarea> -->
        <!--<quill-editor name='content'  ngModel></quill-editor>-->
        <quill-editor [(ngModel)]="editorContent"> </quill-editor>
      </td>

    </tr>
    <tr>
      <td>
        <input type='submit' value='发布' class="btn btn-success">
      </td>
    </tr>
  </table>
</form>

只要去掉 quill-editor name='content' ngModel></quill-editor> 这一行就没错，请问如何解决，非常感谢！

[czxk579]

我也遇到相同的问题了，我的解决方案是在根模块中，引入和注入ngx-quill import { QuillModule } from 'ngx-quill'； imports: [ // QuillModule格式会报错，要写成QuillModule.forRoot()格式， QuillModule.forRoot(), ], 原因见： https://github.com/KillerCodeMonkey/ngx-quill 建议你在你的app-routing.module.ts模块中将 imports: [ RouterModule.forRoot(routes), FormsModule, HttpClientModule, BrowserModule, QuillModule, ],修改为 imports: [ RouterModule.forRoot(routes), FormsModule, HttpClientModule, BrowserModule, QuillModule.forRoot(), ],试试 我是通过这种方案解决的 另外要注意angular6及以上版本要安装 npm install ngx-quill -save 和 npm install quill -save 不然也会有兼容性问题。

[NANU-NANA]

加上 #content="ngModel" 试试