skip to Main Content

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

2

Answers


  1. Chosen as BEST ANSWER

    I fixed it by not choose to render it on serverside with IsPlatFormServer and isPlatFormBrowser


  2. 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: []
    })
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search