Problem with Angular Universal and APP_CONFIG from external file

Question

I have come to a dead end and am unable to proceed.

We have a decoupled website with server-side rendering. All of the data comes through GraphQL. The site works great without SSR. The app-config.json file loads and we get the data in the app through InjectionToken. This data is needed in graphql.service.ts file, so the app knows the URL the server is on.

The problem is when I add SSR. Everything breaks. I get the following error: `

NullInjectorError: R3InjectorError(AppServerModule)[SettingsService -> GraphQLService -> InjectionToken APP_CONFIG -> InjectionToken APP_CONFIG -> InjectionToken APP_CONFIG]: 
  NullInjectorError: No provider for InjectionToken APP_CONFIG!

`

Is there a similar way to provide external variables like in main.ts? `

 platformBrowserDynamic([**{ provide: APP_CONFIG, useValue: config }**])
            .bootstrapModule(AppModule)
            .catch(err => console.error(err));

`

I hope this makes sense, because this is very new to me, and am not sure how to even ask the question.

--

I tried adding this to main.server.ts

`

 platformDynamicServer([{ provide: APP_CONFIG, useValue: config }])
       .bootstrapModule(AppServerModule)
       .then(module => {
         console.log('module', module);
       })
       .catch(err => console.error(err));

`

I expected this to work similarly to how the code works in main.ts, but I must be missing something.