AppComponent app.component.ts是2个模块声明的一部分？但模块是服务器端和客户端模块？

我们有一个共享的const文件，用于导出out应用程序的所有组件，以及两个用于服务器端预呈现的独立应用程序模块，如下所示：

调试工作正常，但在发布时我们在这个webpack命令上得到这个错误：

“node node_modules / webpack / bin / webpack.js --env.prod”

“AppComponent类型中的错误app.component.ts是2个模块声明的一部分：App.module.client.ts中的AppModule和app.module.server.ts中的AppModule！请考虑将app.component.ts中的AppComponent移动到一个更高的模块，在app.module.client.ts中导入AppModule，在app.module.server.ts中导入AppModule . 你也可以创建一个新的NgModule导出并在app.component.ts中包含AppComponent然后在AppModule中导入那个NgModule app.module.client.ts和App.module.server.ts中的AppModule . “

我知道它与从共享文件中声明我的组件两次有关，但是如果我将共享模块，并将其导入服务器和客户端，则构建在运行时中断，因为它由于某种原因无法识别角度组件 . 我还在学习角度4，所以有人可以帮助我如何正确地将共享模块设置到服务器端和客户端应用程序模块以进行发布构建吗？

app.module.shared.ts

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { GridModule } from '@progress/kendo-angular-grid';
import { SliderModule, SwitchModule } from '@progress/kendo-angular-inputs';
import { TabStripModule } from '@progress/kendo-angular-layout';
import { AutoCompleteModule, DropDownListModule } from '@progress/kendo-angular-dropdowns';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { InputsModule } from '@progress/kendo-angular-inputs';

import { MonacoEditorComponent } from './components/monaco-editor/monaco-editor.component';
import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { ClientsComponent } from './components/clients/clients.component';
import { EditConfigComponent } from './components/edit-config/edit-config.component';
import { AddClientComponent } from './components/add-client/add-client.component';
import { AddIntegrationComponent } from './components/add-integration/add-integration.component';
import { MsgInfoComponent } from './components/msg-info/msg-info.component';
import { AppFooterComponent } from './components/app-footer/app-footer.component';

import { ClientIntegrationService } from './client-integration.service';
import { UserService } from './user.service';
import { User } from './user';
import { Roles } from './roles';

import { RoleGuard } from './guards/role-guard';
import { ClientConfigurationGuard } from './guards/client-configuration-guard';
import { BaseMappingGuard } from './guards/base-mapping-guard';
import { AddIntegrationGuard } from './guards/add-integration-guard';
import { EditUserGuard } from './guards/edit-user-guard';



export const sharedConfig: NgModule = {
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        HomeComponent,
        ClientsComponent,
        EditConfigComponent,
        AddClientComponent,
    ],
    imports: [
        AppRoutingModule,
        FormsModule,
        HttpModule,
        ButtonsModule,
        GridModule,
        SliderModule,
        TabStripModule,
        AutoCompleteModule,
        DropDownListModule,
        SwitchModule,
        DateInputsModule,
        InputsModule
    ],
    providers: [ClientIntegrationService,
        UserService,
        User,
        RoleGuard,
        ClientConfigurationGuard,
        BaseMappingGuard,
        AddIntegrationGuard,
        EditUserGuard
    ]
};

app.module.client.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { GridModule } from '@progress/kendo-angular-grid';
import { bootloader } from '@angularclass/bootloader';
import { sharedConfig } from './app.module.shared';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';


@NgModule({
    bootstrap: sharedConfig.bootstrap,
    declarations: [sharedConfig.declarations],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpModule,
        GridModule,
        ...sharedConfig.imports
    ],
    providers: [
        { provide: 'ORIGIN_URL', useValue: location.origin },
        sharedConfig.providers
    ]
})
export class AppModule{
}

export const platformRef = platformBrowserDynamic();

export function main() {
    return platformRef.bootstrapModule(AppModule);
}

bootloader(main);

app.module.server.ts

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { sharedConfig } from './app.module.shared';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    bootstrap: sharedConfig.bootstrap,
    declarations: sharedConfig.declarations,
    imports: [
        ServerModule,
        NoopAnimationsModule,
        ...sharedConfig.imports
    ],
    providers: sharedConfig.providers
})
export class AppModule {
}