Angular 2最终版本-ngModule无法识别共享组件

我在运行Angular 2的最终发布版本时，对ngModule和我的组件的配置有问题

这就是我所拥有的：

//PageHeaderModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PageHeaderComponent } from './index';


@NgModule({
  imports: [CommonModule],
  declarations: [PageHeaderComponent]
})


export class PageHeaderModule { }

---

---

注意这里的两件事：

1） 我没有使用页眉模块，因为我认为sharedModule应该关注所有这些共享组件，而是逐个创建，但我不确定

2） 我只是在共享模块中使用“导出”，而不是在我应用程序中的任何其他模块中使用

我得到的错误是：

我一直在尝试很多事情，但似乎没有什么能解决我的问题，我真的很感激你能提供的任何帮助

如果需要更多信息，请告诉我

---

谢谢

我不确定哪个模块正在使用

PageHeaderComponent

，但您需要了解，您需要在使用组件的实际模块中导入

SharedModule

，而不是在根模块中，我猜您正在做的就是这样

我可以理解为什么您认为这会起作用，因为这是模块为提供程序工作的方式（在根模块中导入具有提供程序的模块，并可以在整个子模块中插入提供程序）

以下是我在angular docs中找到的一个部分，我希望对您有所帮助：

模块不会继承对其他模块中声明的组件、指令或管道的访问。AppModule导入的内容与ContactModule无关，反之亦然。在ContactComponent可以与[（ngModel）]绑定之前，其ContactModule必须导入FormsModule

---

我也有同样的问题。我花了一整晚。您需要将CommonModule和FormsModule显式注入到使用ngModel/ngIf等的每个模块中。。。

//Shared Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { Routes, RouterModule } from '@angular/router';

import { HeaderComponent, SideBarComponent, BurgerMenuComponent, FooterComponent, InnerSpinnerComponent, PageHeaderComponent  } from "./components/index";
import { UniqueNameValidationByList } from "./directives/index";
import { LowerCasePipe, WhitespacePipe } from "./pipes/index";

@NgModule({
    imports: [CommonModule, RouterModule],
    declarations: [
        PageHeaderComponent,
        HeaderComponent,
        SideBarComponent,
        BurgerMenuComponent,
        FooterComponent,
        InnerSpinnerComponent,
        UniqueNameValidationByList,
        LowerCasePipe, WhitespacePipe
    ],
    exports: [
        PageHeaderComponent,
        HeaderComponent,
        SideBarComponent,
        BurgerMenuComponent,
        FooterComponent,
        InnerSpinnerComponent,
        UniqueNameValidationByList,
        LowerCasePipe, WhitespacePipe
    ],
})

export class SharedModule { }

//AppModule 

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Routes, RouterModule } from '@angular/router';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { routing, appRoutes }  from './app.routes';
import { AppComponent }   from './app.component';


import { BillingModule }  from './billing/billing.module';
import { CustomersModule }  from './customers/customers.module';
import { DashboardModule }  from './dashboard/dashboard.module';
import { DevicesModule }  from './devices/devices.module';
import { GroupsModule }  from './groups/groups.module';
import { ProductsModule }  from './products/products.module';
import { ReportingModule }  from './reporting/reporting.module';
import { LoginModule }  from './login/login.module';

import { SharedModule } from "./shared/shared.module";


import { SideBarService } from "./shared/components/index";
import { SignalRService, CountriesService } from "./shared/services/index";


@NgModule({
    imports: [BrowserModule,
        RouterModule.forRoot(appRoutes, { useHash: true }),
        routing,
        SharedModule,
        BillingModule,
        CustomersModule,
        DashboardModule,
        DevicesModule,
        GroupsModule,
        ProductsModule,
        ReportingModule,
        LoginModule
    ],
    declarations: [AppComponent],
    providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy },
        SideBarService,
        SignalRService,
        CountriesService],
    bootstrap: [AppComponent],
}) 

export class AppModule { }