Injecting document into angular service for SSR

Question

I am creating an angular library that has a root-level service class that references document. I'd like to add SSR support, but of course document is not defined in SSR context. It seems that Angular will allow me to dependency inject document into my service with the DOCUMENT injection token.

So now my service looks like.

import { DOCUMENT } from '@angular/common';

class MyService {
  private config: MyConfig;

  constructor(
    config: MyConfig,
    @Inject(DOCUMENT) private document: Document,
  ) {
    this.config = config;
  }
}

My question is this: where does document get injected into my service? My module definition now looks like this, but I know this is not correct because document is undefined at the callsite.

class MyModule {
  static forRoot(config: MyConfig): ModuleWithProviders<MyModule> {
    return {
      ngModule: MyModule,
      useValue: new MyService(
        config,
        document, // causes ReferenceError with SSR
      ),
    };
  }
}

Jake Loew · Accepted Answer · 2024-05-29 19:28:17Z

1

Instead of manually instantiating the service, I can let Angular do it. It will handle injecting document into the service. Update the module forRoot definition like so:

export class MyModule {
  static forRoot(config: MyConfig): ModuleWithProviders<MyModule> {
    return {
      ngModule: MyModule,
      providers: [
        { provide: 'MyConfig', useValue: config },
        MyService, // Angular will automatically inject DOCUMENT and the provided config
      ],
    };
  }
}

Both parameters will be injected. The MyService signature should be updated like so:

import { DOCUMENT } from '@angular/common';

class MyService {
  private config: MyConfig;

  constructor(
     @Inject('MyConfig') config: MyConfig,
     @Inject(DOCUMENT) private document: Document,
  ) {
    this.config = config;
  }
}

answered May 29, 2024 at 19:28

Jake Loew

2252 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Injecting document into angular service for SSR

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related