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

Posted 2023-02-22

【中文标题】Angular 2 最终版本 - ngModule 无法识别共享组件

【英文标题】：Angular 2 final version - ngModule does not recognize shared component

【发布时间】：2017-02-15 03:37:01

【问题描述】：

我在配置 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) 我只是在共享模块中使用“导出”，而不是在我的应用程序中的任何其他模块中使用“导出”

我得到的错误是这个：

我一直在尝试很多事情，但似乎没有任何东西可以解决我的问题，我非常感谢您提供的任何帮助。

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

谢谢

【问题讨论】：

我遇到了同样的问题。我已经度过了一个晚上。您需要将 CommonModule 和 FormsModule 显式注入到您使用 ngModel/ngIf 等的每个模块中......

【参考方案1】：

我不确定哪个模块正在使用PageHeaderComponent，但您需要了解您需要使用其中的组件在实际模块中导入SharedModule，而不是在您的根模块中，我猜这就是您的正在做。

我明白你为什么认为这会起作用，因为这是模块为提供者工作的方式（你在根模块中导入一个带有提供者的模块，并可以在整个子模块中注入提供者）

这是我在 Angular 文档中找到的一部分，希望对您有所帮助：

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