Question

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

Debug工作正常，但在发布时我们在这个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中移动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。“

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

您可以查看以下设置：

.NET Core + Kendo Angular DOCS

sample modules

Answer 2

我认为您的问题基本上来自[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 {
}

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

2 个答案: