如何在angular2中使用sharedModule？

我有一个angular2组件，我想在多个模块之间共享

所以我在下面写了sharedModule

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {GenericComponent} from './generic/generic.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ GenericComponent ],
  exports:      [ GenericComponent ]
})
export class SharedModule { }

然后我将这个sharedModule添加到多个模块中，如下所示：

应用程序模块.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {SharedModule} from './shared.module';
import { AppComponent } from './app.component';
@NgModule({
  imports:      [ BrowserModule,SharedModule ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {SharedModule} from './shared.module';
@NgModule({
  imports:      [ BrowserModule,SharedModule ],
  declarations: [ //.. here I have added all the components that generic uses ]
})
export class GenericModule { }

我还向generic.module.ts添加了sharedModule，类似地

通用.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {SharedModule} from './shared.module';
import { AppComponent } from './app.component';
@NgModule({
  imports:      [ BrowserModule,SharedModule ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {SharedModule} from './shared.module';
@NgModule({
  imports:      [ BrowserModule,SharedModule ],
  declarations: [ //.. here I have added all the components that generic uses ]
})
export class GenericModule { }

但当我试图在generic.module.ts的组件中使用generic组件时，我遇到了以下错误

模块“GenericModule”导入的意外值“undefined”

---

您不能在featureModule中使用BroswerModule。因此，请确保使用CommonModule而不是BrowswerModule

import { NgModule }      from '@angular/core';
import { CommonModule }        from '@angular/common';
import {SharedModule} from './shared.module';
@NgModule({
  imports:      [ CommonModule ,SharedModule ],
  declarations: [ //.. here I have added all the components that generic uses ],
  exports:      [ CommonModule]
})
export class GenericModule { }

---

以下是我的应用程序使用共享模块的代码：

@NgModule({
  imports: [CommonModule, RouterModule, MenubarModule, GalleriaModule, InputTextModule, PanelModule, ButtonModule,
            DropdownModule, DialogModule, AccordionModule, CalendarModule, SelectButtonModule, CheckboxModule,
            ProgressBarModule, DataTableModule],
  declarations: [ ErrorMessagesComponent, FoodDashboardComponent ],
  exports: [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule,
            MenubarModule, GalleriaModule, InputTextModule, PanelModule, ButtonModule, DropdownModule, DialogModule, AccordionModule, CalendarModule,
            SelectButtonModule, CheckboxModule, DataTableModule, ProgressBarModule, ErrorMessagesComponent, FoodDashboardComponent ]
})

export class SharedModule {
  //
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [SettingsService, AppMenuService, AuthorizationService, LoginService, RegisterService, ThemeService, ValidationService,
        NutritionixService, AuthGuardService, CalculationService, ChallengeService ]
    };
  }
}

应用程序模块：

import { AboutModule } from './about/about.module';
import { SharedModule }   from './shared/shared.module';
import { Menubar, MenuItem } from 'primeng/primeng';

@NgModule({
    imports: [ BrowserModule, RouterModule.forRoot(appRoutes), SharedModule.forRoot(), 
               HomeModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ],
    providers: [ appRoutingProviders ]

}) 

export class AppModule {} 

家庭模块：

import { SharedModule }   from '../shared/shared.module';
import {routing} from './home.routing'


@NgModule({
    imports: [ SharedModule, routing],
    declarations: [ HomeComponent, LoginComponent, RegisterComponent, VerifyComponent, 
                   VerifyEmailComponent, ForgotComponent, ForgotVerifyComponent, 
                   ChangeComponent, ChallengeComponent, LogoutComponent ], 
    bootstrap: [ HomeComponent ],
    providers: [ ]

}) 

export class HomeModule {} 

和共享模块：

@NgModule({
  imports: [CommonModule, RouterModule, MenubarModule, GalleriaModule, InputTextModule, PanelModule, ButtonModule,
            DropdownModule, DialogModule, AccordionModule, CalendarModule, SelectButtonModule, CheckboxModule,
            ProgressBarModule, DataTableModule],
  declarations: [ ErrorMessagesComponent, FoodDashboardComponent ],
  exports: [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule,
            MenubarModule, GalleriaModule, InputTextModule, PanelModule, ButtonModule, DropdownModule, DialogModule, AccordionModule, CalendarModule,
            SelectButtonModule, CheckboxModule, DataTableModule, ProgressBarModule, ErrorMessagesComponent, FoodDashboardComponent ]
})

export class SharedModule {
  //
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [SettingsService, AppMenuService, AuthorizationService, LoginService, RegisterService, ThemeService, ValidationService,
        NutritionixService, AuthGuardService, CalculationService, ChallengeService ]
    };
  }
}

---

我的应用程序中有20多个模块，我到处使用共享模块。这个很好用。希望有帮助。

我看不到

GenericModule

在任何地方。。请添加它。您是否也将GenericModule导入SharedModule？我以前有过这种情况，它导致了一个失败的通告dependency@peeskillet不我正在sharedModule内部导入generic.component，并且在genericModule&AppModule@peeskillet其实我有这个问题。我的sharedModule包含一个管道和一个模块（a），模块a需要ShareModule的管道，因此我从模块a中导入它。但是我有一个错误

由模块“a”导入的意外值“undefined”

。在这种情况下，我应该怎么做？仍然会出现错误：

nexpected value'undefined'由模块'GenericModule'导入。

我认为您导入的东西之一没有找到。通过逐个删除进行检查，这样您就可以得到哪个导入会给您带来错误我是否也应该将GenericComponent添加到generic.module内的声明中@但你的目的并不明确。它是一个懒惰的模块还是什么？我看不到GenericModule和AppModule之间的任何连接。为什么到处都注入sharedModule？要问的问题太多了。我也尝试在generic.module中导入generic.component，但仍然不起作用