Angular Universal Server 端渲染 NgbTypeahead Window 有没有加到@NgModule.entryComponents

Question

由于 SEO 改进，我正在将我的项目转移到 angular 通用项目。我遵循了本指南：（我正在使用 angular 版本 5） https://github.com/angular/angular-cli/wiki/stories-universal-rendering 最后，在渲染服务器端和客户端之后，当我尝试点击节点 dist/server.js 它失败了，让我弹出下面的消息：

image here click

我尝试了一切，将 NgbTypeaheadWindow 移动到 SharedModule。

第一次尝试：

添加到 app.module.ts 就像建议的错误

import { NgbTypeaheadWindow } from '@ng-bootstrap/ng-bootstrap/typeahead/typeahead-window';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
         /** others modules/**
        SharedModule,
        NgbTypeaheadWindow
    ],

    entryComponents: [NgbTypeaheadWindow]

但还是不行。

出现此错误：

ERROR in : Unexpected directive 'NgbTypeaheadWindow in C:/Users/benn/Documents/dev/angular_universal_without_e2e/client/node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead-window.d.ts' imported by the module 'AppModule in C:/Users/benn/Documents/dev/angular_universal_without_e2e/client/src/app/app.module.ts'. Please add a @NgModule annotation.

所以，我尝试将它也添加到声明中，然后像这样导出它 post 建议：

:

@NgModule({
    declarations: [
        AppComponent,
        NgbTypeaheadWindow
    ],
    imports: [
        SharedModule,
    ]

    entryComponents: [NgbTypeaheadWindow],
    exports:[NgbTypeaheadWindow]

并得到这个错误：

ERROR in : Type NgbTypeaheadWindow in C:/Users/benn/Documents/dev/angular_universal_without_e2e/client/node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead-window.d.ts is part of the declarations of 2 modules: NgbTypeaheadModule in C:/Users/benn/Documents/dev/angular_universal_without_e2e/client/node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.module.d.ts and AppModule in C:/Users/benn/Documents/dev/angular_universal_without_e2e/client/src/app/app.module.ts! Please consider moving NgbTypeaheadWindow in C:/Users/benn/Documents/dev/angular_universal_without_e2e/client/node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead-window.d.ts to a higher module that imports NgbTypeaheadModule in C:/Users/benn/Documents/dev/angular_universal_without_e2e/client/node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.module.d.ts and AppModule in C:/Users/benn/Documents/dev/angular_universal_without_e2e/client/src/app/app.module.ts. You can also create a new NgModule that exports and includes NgbTypeaheadWindow in C:/Users/benn/Documents/dev/angular_universal_without_e2e/client/node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead-window.d.ts then import that NgModule in NgbTypeaheadModule in C:/Users/benn/Documents/dev/angular_universal_without_e2e/client/node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead.module.d.ts and AppModule in C:/Users/benn/Documents/dev/angular_universal_without_e2e/client/src/app/app.module.ts.

在那之后，我试图将它移动到我的 SharedModule 但仍然如此。

这是我的共享模块：

import { NgbTypeaheadWindow } from '@ng-bootstrap/ng-bootstrap/typeahead/typeahead-window';

        @NgModule({
      imports: [CommonModule,NgbTypeaheadWindow],
      declarations: [CaruselComponent],
      exports: [CommonModule, FormsModule, CaruselComponent,NgbTypeaheadWindow],

    })
    export class SharedModule { }

ERROR in : Unexpected directive 'NgbTypeaheadWindow in C:/Users/benn/Documents/dev/angular_universal_without_e2e/client/node_modules/@ng-bootstrap/ng-bootstrap/typeahead/typeahead-window.d.ts' imported by the module 'SharedModule in C:/Users/benn/Documents/dev/angular_universal_without_e2e/client/src/app/shared/shared.module.ts'. Please add a @NgModule annotation.

我试过了 app.server.module.ts 但还是。

希望能帮到你谢谢

Answer 1

导入 NgbTypeaheadModule 而不是与之相关的 directives/components。

从'@ng-bootstrap/ng-bootstrap/typeahead'导入{NgbTypeaheadModule};

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
         /** others modules/**
        SharedModule,
        NgbTypeaheadModule
    ],
    entryComponents: []
})

Answer 2

我通过不选择使用 IsPlatFormServer 和 isPlatFormBrowser 在服务器端呈现它来修复它

Angular Universal Server 端渲染 NgbTypeahead Window 有没有加到@NgModule.entryComponents

Angular2 Universal Server side rendering NgbTypeaheadWindow Did you add it to @NgModule.entryComponents

webpack

angular2-directives

angular-universal

angular

angular5