Angular Error NG8001-'ngx-contentful-rich-text'不是已知元素

Question

我正在尝试使用以下库通过一些自定义渲染器将内容丰富文本字段转换为HTML。

https://github.com/kgajera/ngx-contentful-rich-text

由于某种原因，我收到以下错误，我推测这是与我如何导入上述模块有关的。我相信我正在正确导入NgxContentfulRichTextModule，所以我不确定为什么CustomParagraphComponent模板找不到它？

错误

src / app / post / post.component.ts（CustomParagraphComponent模板）中的错误：2：28-错误NG8001：“ ngx-contentful-rich-text”不是已知元素：

1. 如果“ ngx-contentful-rich-text”是Angular组件，则请验证它是否属于此模块。
2. 如果“ ngx-contentful-rich-text”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。

App.Module.Ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MaterialModule} from './material.module';
import {FlexLayoutModule} from '@angular/flex-layout';
import { HeaderComponent } from './navigation/header/header.component';
import { SidenavListComponent } from './navigation/sidenav-list/sidenav-list.component';
import { HomeComponent } from './home/home.component';
import { FooterComponent } from './navigation/footer/footer.component';
import { PostsComponent } from './posts/posts.component';
import { PostComponent } from './post/post.component';
import { PostCardComponent } from './post-card/post-card.component';
import { FeatureInfoComponent } from './feature-info/feature-info.component';
import { FeatureCardComponent } from './feature-card/feature-card.component';
import { PrivacyComponent } from './privacy/privacy.component';
import { AboutComponent } from './about/about.component';
import { ContributeComponent } from './contribute/contribute.component';
import { ContactComponent } from './contact/contact.component';

import { NgxContentfulRichTextModule } from 'ngx-contentful-rich-text';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SidenavListComponent,
    HomeComponent,
    FooterComponent,
    PostsComponent,
    PostComponent,
    PostCardComponent,
    FeatureInfoComponent,
    FeatureCardComponent,
    PrivacyComponent,
    AboutComponent,
    ContributeComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
    NgxContentfulRichTextModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Post.Component.Ts

import { switchMap } from 'rxjs/operators';
import { Component, OnInit, AfterViewInit, AfterViewChecked, Type } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Entry } from 'contentful';
import { ContentfulService } from '../contentful.service';
import { Observable } from 'rxjs';
import { BLOCKS, MARKS, Document } from '@contentful/rich-text-types';
import {
  CHILDREN,
  NodeRenderer
} from 'ngx-contentful-rich-text';


@Component({
  template: `
    <p class="text-center">${CHILDREN}</p>
  `,
})
export class CustomParagraphComponent extends NodeRenderer {}

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.scss']
})
export class PostComponent implements OnInit, AfterViewChecked {
  public postSlug;
  post: Entry<any>;
  document: Document;

  // nodeRenderers: Record<string, Type<NodeRenderer>> = {
  //   [BLOCKS.PARAGRAPH]: CustomParagraphComponent,
  // };

 nodeRenderers: Record<string, Type<NodeRenderer>> = {
    [BLOCKS.PARAGRAPH]: CustomParagraphComponent,
  };

  constructor(
    public contentfulService: ContentfulService,
    private route: ActivatedRoute) { }

  ngOnInit(): void {
    this.postSlug = this.route.snapshot.params['id'];
    this.contentfulService.getPost(this.postSlug).then(post => 
      { 
        this.post = post;
        this.document = this.post.fields.body;
        console.log(this.document);
      });
  }

  ngAfterViewChecked(): void {
    console.log('ngAfterViewChecked');
    if(this.post != null ) {
      console.log('NOT NULL');
      this.contentfulService.returnHTMLfromRichText(this.post.fields.body);
    }
  }

}

Answer 1

CustomParagraphComponent未包含在库中。它仅在自述文件中作为如何使用自定义组件的示例显示。

但是，您可以通过将CustomParagraphComponent添加到declarations中的AppModule数组中来解决此问题。