Angular '；nvd3和x27；不是已知元素：1。如果'；nvd3和x27；是角度组件，然后验证它是否是此模块的一部分

我对angular 5，实际上是整个angular 2的概念是陌生的。 我用angular 5和.net core在visual studio 2017中创建了一个新项目。 我正在尝试使用d3和ng2-nvd3。我在npm中添加了包。当我尝试运行该页面时，出现以下错误

下面是错误

NodeInvocationException: Template parse errors: Can't bind to 'options' since it isn't a known property of 'nvd3'. ("<div>
 <nvd3 [ERROR ->][options]="options" [data]="data"></nvd3>
 </div>
 "): ng:///AppModuleShared/HomeComponent.html@1:10 Can't bind to 'data' since it isn't a known property of 'nvd3'. ("<div>
 <nvd3 [options]="options" [ERROR ->][data]="data"></nvd3>
 </div>
 "): ng:///AppModuleShared/HomeComponent.html@1:30 'nvd3' is not a known element: 1. If 'nvd3' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<div>
 [ERROR ->]<nvd3 [options]="options" [data]="data"></nvd3>
 </div>
 ")

App.shared.module.ts如下所示

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';

import { NvD3Module } from "ng2-nvd3";

// d3 and nvd3 should be included somewhere
import 'd3';
import 'nvd3';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        NvD3Module,
        HomeComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}
</pre>

App.server.module.ts如下所示

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModuleShared } from './app.shared.module';
import { AppComponent } from './components/app/app.component';

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [
        ServerModule,
        AppModuleShared
    ]
})
export class AppModule {
}

home.component.html是这样的

<div>
    <nvd3 [options]="options" [data]="data"></nvd3>
</div>

---

我做错了什么？

您需要将

NvD3Module

添加到导入列表中，而不是声明中

@NgModule({
  imports: [ // import Angular's modules 
    ...
    NvD3Module
    ...
  ],
})

---

这肯定应该是在导入中，导入时会出现什么错误？在这个模板中，它使用的Web pack会影响任何东西吗？您是否尝试导入根

AppModule

（或您命名的任何东西）？我共享的代码AppModueshared AppModule导入的是什么。你提到的地方。我刚才添加了有问题的AppModue代码。是的，我猜你会这么做，你能试着将

NvD3Module

添加到

AppModule

导入，而不是

AppModuleShared

？

<div>
    <nvd3 [options]="options" [data]="data"></nvd3>
</div>

@NgModule({
  imports: [ // import Angular's modules 
    ...
    NvD3Module
    ...
  ],
})