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:
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
2
Answers
I fixed it by not choose to render it on serverside with IsPlatFormServer and isPlatFormBrowser
Import the NgbTypeaheadModule instead of the directives/components related to it.
import { NgbTypeaheadModule } from ‘@ng-bootstrap/ng-bootstrap/typeahead’;