Question

我有两个共享模块核心和 MasterData 。

我 在我的applcation中使用MasterData模块的组件时遇到问题，虽然我可以使用Core Module的组件。 以下是我的代码。

核心模块（core.module.ts）

import { NgModule, ModuleWithProviders, ComponentFactoryResolver } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import {
    IgHierarchicalGridComponent,
    IgPivotGridComponent,
    IgGridComponent
} from 'igniteui-angular2';

import { CacheModule } from 'angular2-cache';
import { AUTH_PROVIDERS } from 'angular2-jwt';

import { CoreComponents, EntryCoreComponents } from './components';
import { CoreService } from './services';

import { ClientInfoServiceProvider } from './client-info';

import { AuthGuard } from './guards/auth.guard';

const IgniteuiComponents = [
    IgHierarchicalGridComponent,
    IgPivotGridComponent,
    IgGridComponent
];

@NgModule({
    declarations: [
        ...CoreComponents,
        ...IgniteuiComponents
    ],
    providers: [
        ...CoreService,
        AUTH_PROVIDERS,
        AuthGuard,
        ClientInfoServiceProvider
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule,
        HttpModule,
        CacheModule,
    ],
    entryComponents: [
        ...EntryCoreComponents
    ],
    exports: [
        HttpModule,
        CacheModule,
        RouterModule,
        FormsModule,
        ...CoreComponents,
        ...IgniteuiComponents
    ]
})
export class CoreModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: QmsCoreModule,
            providers: [
                ...CoreService,
                AUTH_PROVIDERS,
                AuthGuard,
                ClientInfoServiceProvider
            ]
        };
    }
}

主数据模块（继承Core，因为我在核心和masterdata组件中使用了infragistics库）（masterdata.module.ts）

import { NgModule, ModuleWithProviders, ComponentFactoryResolver } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { QmsCoreModule } from 'qms/core/qms-core.module';

import { MasterdataComponents } from './components';
import { MasterdataServices } from './services';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        RouterModule,
        HttpModule,
        QmsCoreModule.forRoot()
    ],
    declarations: [
        ...MasterdataComponents
    ],
    providers: [
        ...MasterdataServices
    ],
    exports: [
        FormsModule,
        RouterModule,
        HttpModule,
        QmsCoreModule,
        ...MasterdataComponents
    ]
})
export class QmsMasterdataModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: QmsMasterdataModule,
            providers: [
                ...MasterdataServices
            ]
        };
    }
}

主数据模块目前只有一个组件名称TeamGrid。（组件选择器是'团队网格'）

主要应用程序 AppModule （app.module.ts）

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Provider } from '@angular/core';
import { QmsMasterdataModule } from 'qms/masterdata/qms-masterdata.module';
import { SwacProxyInterface } from 'qms/core/swac';

import { AppRoutingModule } from './app-routing.module';
import { HomeModule } from './home/home.module';
import { ProjectModule } from './project/project.module';

import { AppComponent } from './app.component';

import { SharedServices } from './shared/services';

export const AppModule = (proxyInterface: SwacProxyInterface, provider: Provider[]) => {

  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      HomeModule,
      ProjectModule,
      QmsMasterdataModule.forRoot()
    ],
    providers: [
      SharedServices,
      ...provider
    ],
    bootstrap: [AppComponent]
  })

  class AppModule {
  }

  return AppModule;
};

错误信息是：

'team-grid'不是已知元素： 1.如果'team-grid'是Angular组件，则验证它是否是此模块的一部分。 2.如果'team-grid'是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的'@NgModule.schemas'以禁止显示此消息。（”
    [ERROR ->]<team-grid></team-grid>

有人可以帮我找到正确的解决方案吗？

Answer 1

上面的实现是正确的，但唯一的错误是App.module下的每个模块（Home.module / Project.module）也应该按照必要的组件导入masterdata.module或core.module。

Answer 2

这可能有助于您找出根本原因

shared.module.ts

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

import { HttpModule } from '@angular/http';

import { QmsMasterdataModule } from 'qms/masterdata/qms-masterdata.module';

@NgModule({
  declarations: [

  ],
  imports: [
    CoreModule,
    QmsMasterdataModule     
  ],
  exports: [
    CoreModule,
    QmsMasterdataModule 
  ]
})

export class SharedModule {
}

应用模块

import {SharedModule} from './modules/shared/shared.module';
export const AppModule = (proxyInterface: SwacProxyInterface, provider: Provider[]) => {

  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
     SharedModule      
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
  })

  class AppModule {
  }

  return AppModule;
};

Angular2：在共享模块中声明的组件在App模块

2 个答案: