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

Question

我们有一个共享的 const 文件，用于导入应用程序的所有组件，以及用于服务器端预渲染的两个单独的应用程序模块，如下所示：

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

“节点 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 中移动 AppComponent .ts 到一个更高的模块，它在 app.module.client.ts 中导入 AppModule 和在 app.module.server.ts 中的 AppModule。您还可以创建一个新的 NgModule 导出并在 app.component.ts 中包含 AppComponent 然后导入该 NgModule在 app.module.client.ts 中的 AppModule 和 app.module.server.ts 中的 AppModule。”

我知道这与从共享文件中两次声明我的组件有关，但是如果我创建共享模块并将其导入服务器和客户端，构建会在运行时中断，因为它无法识别角度组件由于某些原因。我仍在学习 Angular 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 {
}

Answer 1

我认为您的问题基本上来自[sharedConfig.declarations] 部分。这似乎是实现Server 和Client 模块的一种不同寻常的方式。您是否尝试过仅在您的 AppModule 上声明？ （您在app.module.client.ts 中声明的内容。

如果有帮助，这是我使用三个不同模块（AppModule、BrowserAppModule 和 ServerAppModule）的标准实现。我基本上只是在我的AppModule 上声明所有内容，然后将该模块连同它们各自需要的任何内容一起简单地导入到另外两个中。他们都没有声明任何东西，但都引导AppComponent。

---

app.module.ts

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        AppRoutingModule,
        CommonModule,
        SharedModule
    ],
    providers: [
        MyCustomService
    ],
    exports: [
        AppComponent
    ]
})
export class AppModule {
}

browser.app.module.ts

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppModule
    ]
})
export class BrowserAppModule {
}

server.app.module.ts

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        ServerModule,
        AppModule
    ]
})
export class ServerAppModule {
}

Answer 2

您可以查看以下设置：

.NET Core + Kendo Angular DOCS

sample modules