Angular 2最終版本 - ngModule無法識別共享組件

Question

我遇到了ngModule和我的組件的配置問題，運行最終發布的Angular 2版本。

這就是我所擁有的：

//PageHeaderModule

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


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


export class PageHeaderModule { }

---

//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 { }

注意這里有兩件事：

1）我沒有使用頁眉模塊，因為我認為sharedModule應該關注所有這些共享組件，而是逐個創建，但我不確定。

2）我只是在共享模塊中使用'exports'，而不是在我的應用程序中的任何其他模塊中使用

我得到的錯誤就是這個：

我一直在嘗試很多東西，但似乎沒有什么能解決我的問題，我真的很感激你能提供的任何幫助。

如果需要更多信息，請告訴我。

謝謝

Answer 1

我不確定哪個模塊正在使用PageHeaderComponent但你需要了解你需要使用它中的組件在實際模塊中導入SharedModule ，而不是在我猜測你正在做的根模塊中。

我可以看到為什么你認為這會起作用，因為這是模塊為提供者工作的方式（你在根模塊中導入一個帶有提供者的模塊，並且可以在整個子模塊中從中注入提供者）

這是我在角度文檔中找到的一個部分，我希望它有用：

模塊不繼承對其他模塊中聲明的組件，指令或管道的訪問。 AppModule導入的內容與ContactModule無關，反之亦然。 在ContactComponent可以與[（ngModel）]綁定之前，其ContactModule必須導入FormsModule。