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

Question

出现问题如下：
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> 这一行就没错，请问如何解决，非常感谢！

Answer 1

我也遇到相同的问题了，我的解决方案是在根模块中，引入和注入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
不然也会有兼容性问题。

Answer 2

加上
#content="ngModel" 
试试