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

前端之家收集整理的这篇文章主要介绍了Angular 2最终版本 – ngModule无法识别共享组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我遇到了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,UniqueNameValidationByList,LowerCasePipe,WhitespacePipe
    ],exports: [
        PageHeaderComponent,})

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’,而不是在我的应用程序中的任何其他模块中使用

我得到的错误就是这个:

enter image description here

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

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

谢谢

解决方法

我不确定哪个模块正在使用PageHeaderComponent,但你需要了解你需要使用它中的组件在实际模块中导入SharedModule,而不是在我猜测你正在做的根模块中.

我可以看到为什么你认为这会起作用,因为这是模块为提供者工作的方式(你在根模块中导入一个带有提供者的模块,并且可以在整个子模块中从中注入提供者)

这是我在角度文档中找到的一个部分,我希望它有用:

Modules do not inherit access to the components,directives or pipes that are declared in other modules. What AppModule imports is irrelevant to ContactModule and vice versa. Before ContactComponent can bind with [(ngModel)],its ContactModule must import FormsModule.

猜你在找的Angularjs相关文章