Angular10 with SSR : "An instance of PageScrollService already exists, usually including one provider should be enough, so double check."

[borisBelloc]

Hello,

I have an empty website with only Angular SSR and ngx-page-scroll.

What I have :

• Homepage
• back-to-top button

The back-to-top button use ngx-page-scroll

When I open the website (run with npm run dev:ssr) i don't have any error. When I refresh the website, there is an error message in the bash terminal :

Why is this happening ?

I only imported NgxPageScrollModule once in my xxx.module.ts then in my component, I do that :

template HTML :

the button is called like that :

In my navigation module I import it as :

@NgModule({
  declarations: [BbBackToTopComponent],
  exports: [BbBackToTopComponent],
  imports: [
    CommonModule,
    NgxPageScrollModule,
  ]
})
export class NavigationModule {
}

I tried to use NgxPageScrollCoreModule.forRoot() on the same module or inside app.module.ts but it did the same thing

How can I fix this error message? There is nothing else on the website

I couldn't make Angular SSR work on Stackblitz so I made a repository on Github if someone wants to see the real code : https://github.com/borisBelloc/SO_AngularSSR-Npx-scroll_question

To run it :

• Download repo
• npm i (install the dependencies : angular SSR/ngx-scroll)
• To launch the project : npm run dev:ssr

I tried to ask on StackOverflow but only got downvoted without any answers : https://stackoverflow.com/questions/65063074/using-angular10-ssr-with-ngx-page-scroll-error-message-when-i-refresh-page-an

[Nolanus]

The warning is printed based on a static class property instanceCounter: https://github.com/Nolanus/ngx-page-scroll/blob/master/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts#L276-L279

It's only a warning though and as long as it does not appear multiple times (e.g. when performing some specific action in your app like opening a lazy loaded route), you won't create new instances over and over again.

I'm honestly not 100% sure why using SSR causes this static property to be set, I'll investigate a little when time is available. Unfortunately I can't give an estimation when this will be.

[borisBelloc]

Thank you for your answer, I thought I did something wrong with how I used ngx-page-scroll

[turbolego]

I have the same error when running tests with Karma.

Any idea how to resolve this? 😄

app.module.ts: imports: [ NgxPageScrollCoreModule.forRoot({scrollOffset: 141, duration: 500, _interval: 3}), ]

In the spec.ts file: imports: [ NgxPageScrollCoreModule.forRoot(), ]

Errors:

WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 115 of 210 SUCCESS (0 secs / 3.425 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 116 of 210 SUCCESS (0 secs / 3.575 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 116 of 210 SUCCESS (0 secs / 3.575 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 117 of 210 SUCCESS (0 secs / 3.737 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 117 of 210 SUCCESS (0 secs / 3.737 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 118 of 210 SUCCESS (0 secs / 3.881 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 118 of 210 SUCCESS (0 secs / 3.881 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 119 of 210 SUCCESS (0 secs / 4.032 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 119 of 210 SUCCESS (0 secs / 4.032 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 120 of 210 SUCCESS (0 secs / 4.208 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 120 of 210 SUCCESS (0 secs / 4.208 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 121 of 210 SUCCESS (0 secs / 4.344 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 121 of 210 SUCCESS (0 secs / 4.344 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 122 of 210 SUCCESS (0 secs / 4.445 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 122 of 210 SUCCESS (0 secs / 4.445 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 123 of 210 SUCCESS (0 secs / 4.542 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 123 of 210 SUCCESS (0 secs / 4.542 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 124 of 210 SUCCESS (0 secs / 4.643 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 124 of 210 SUCCESS (0 secs / 4.643 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 125 of 210 SUCCESS (0 secs / 4.801 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 125 of 210 SUCCESS (0 secs / 4.801 secs)
WARN: 'An instance of PageScrollService already exists, usually including one provider should be enough, so double check.'
Chrome 88.0.4324.150 (Windows 10): Executed 126 of 210 SUCCESS (0 secs / 4.889 secs)
Chrome 88.0.4324.150 (Windows 10): Executed 127 of 210 SUCCESS (0 secs / 4.928 secs)

[mclr47]

public animateScroll(sectionTarget: string): void { // https://github.com/Nolanus/ngx-page-scroll#service const pageScrollInstance = PageScrollInstance .newInstance ({ document: this.document, scrollTarget: sectionTarget, scrollingViews: [this.container.nativeElement] }); ########################################## The method newInstance does not exist. What should I use instead ? I am trying to use/apply to my case angular-contents

[mclr47]

public animateScroll(sectionTarget: string): void { // https://github.com/Nolanus/ngx-page-scroll#service const pageScrollInstance = PageScrollInstance .newInstance ({ document: this.document, scrollTarget: sectionTarget, scrollingViews: [this.container.nativeElement] }); ########################################## The method newInstance does not exist. What should I use instead ? I am trying to use/apply to my case angular-contents

found that this works:

constructor(private pageScrollService: PageScrollService, @Inject(DOCUMENT) private document: any) {}

public animateScroll(sectionTarget: string): void { // https://github.com/Nolanus/ngx-page-scroll#service const pageScrollInstance: PageScrollInstance = this.pageScrollService.create({ document: this.document, scrollTarget: sectionTarget, scrollViews: [this.container.nativeElement] });

[Nolanus]

@mclr47, the newInstance method has been removed during the modularization of the project to separate the core scrolling mechanism from the page-scroll directive (#88).

[Panimaster]

For my project (Angular 11, SSR) this is still an issue (but non-breaking). Nonetheless is there anything we can do to make this warning / error disappear? Thanks :)

[Nolanus]

Instance check and warning has been removed from v7.0.5.