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

Question

i'm moving my project to angular universal due an SEO improvments. i followed this guide: (im using angular version 5) https://github.com/angular/angular-cli/wiki/stories-universal-rendering and finally, after rendering the server and the client side, when i try hit node dist/server.js its failed , and pop me up the msg below:

image here click

i tried almsot everything, move the NgbTypeaheadWindow to a SharedModule.

first tried:

adding to app.module.ts like the error suggested

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

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

    entryComponents: [NgbTypeaheadWindow]

but still not working.

getting this error:

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.

So, i tried add it also to declarations and then export it like this post suggest:

Angular 4: no component factory found,did you add it to @NgModule.entryComponents?:

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

    entryComponents: [NgbTypeaheadWindow],
    exports:[NgbTypeaheadWindow]

and get this error:

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.

after that, i tried to move it to my SharedModule but still.

here is my 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.

i tried it to app.server.module.ts but still.

Hope you can help thanks

why are you trying to import it at the first place? its a directive and it comes as a part of the typeahead module. — Daniel Netzer

Daniel Netzer Daniel Netzer · Accepted Answer · 2018-02-18T11:11:57

Import the NgbTypeaheadModule instead of the directives/components related to it.

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

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

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

2 Answers